Skip to content

Commit fcb5db8

Browse files
AndrewFrostAndrewFrost
committed
Reorganized CSS
1 parent ae8bac6 commit fcb5db8

1 file changed

Lines changed: 107 additions & 92 deletions

File tree

‎index.html‎

Lines changed: 107 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<head>
44
<meta charset = "utf-8">
55
<style>
6+
/*Variable declarations*/
67
:root
78
{
89
--hovered_Lightness_Multiplier: 0.90;
@@ -22,6 +23,20 @@
2223
--last_Sorted_Column_Lightness_Multiplier: 0.75;
2324
}
2425

26+
/*Input styles*/
27+
input[type="checkbox"]
28+
{
29+
cursor: pointer;
30+
}
31+
32+
select, ::picker(select) /*Utilizes customizable selects*/
33+
{
34+
appearance: base-select;
35+
cursor: pointer;
36+
}
37+
38+
39+
/*Button variants styles*/
2540
button
2641
{
2742
width: 190px;
@@ -59,17 +74,93 @@
5974
color: rgba(255, 255, 64, 1);
6075
}
6176

62-
input[type="checkbox"]
77+
78+
/*Option area styles*/
79+
.expandable_Element
6380
{
64-
cursor: pointer;
81+
display: none;
82+
opacity: 0;
83+
height: auto;
84+
margin: 1px;
85+
padding: 0 0 5px 0;
86+
border-bottom: 2px inset rgb(0, 100, 0);
87+
border-top: 2px inset rgb(0, 144, 0);
88+
border-left: 2px inset rgb(0, 144, 0);
89+
border-right: 2px inset rgb(0, 100, 0);
90+
box-shadow: -2px -2px 2px black;
91+
overflow: hidden;
92+
transition:
93+
opacity .2s,
94+
display .08s allow-discrete;
6595
}
6696

67-
select, ::picker(select) /*Utilizes customizable selects*/
97+
.expanded_Element
6898
{
69-
appearance: base-select;
70-
cursor: pointer;
99+
display: block;
100+
opacity: 1;
101+
overflow: hidden;
102+
}
103+
104+
@starting-style
105+
{
106+
.expanded_Element
107+
{
108+
opacity: 0;
109+
display: block;
110+
}
111+
}
112+
113+
.filter_Title
114+
{
115+
width: 210px;
116+
display: inline-block;
117+
white-space: nowrap;
118+
}
119+
120+
.indented_Filter_Title
121+
{
122+
width: 160px;
123+
margin-left: 50px;
124+
display: inline-block;
125+
white-space: nowrap;
126+
}
127+
128+
.adventure_Pack_Filter_Title
129+
{
130+
width: 260px;
131+
display: inline-block;
132+
white-space: nowrap;
133+
}
134+
135+
.filter_Number_Input
136+
{
137+
width: 70px;
138+
}
139+
140+
.filter_Text_Input
141+
{
142+
width: 164px;
143+
}
144+
145+
#table_Options_Holder
146+
{
147+
width: 620px;
148+
}
149+
150+
#saving_Buttons_Holder
151+
{
152+
display: flex;
153+
justify-content: space-between;
154+
}
155+
156+
#autocomplete_Adventures_Error_Message
157+
{
158+
background-color: rgba(128, 32, 32, 1);
159+
color: rgba(255, 255, 128, 1);
71160
}
72161

162+
163+
/*Table and descendent styles*/
73164
table
74165
{
75166
box-sizing: border-box;
@@ -103,6 +194,7 @@
103194
outline: none;
104195
}
105196

197+
/*Used to expand column names on hover or when tabbed to without interfering with the rest of the layout*/
106198
table thead th:hover::after, table thead th:focus::after
107199
{
108200
content: attr(data-text_content);
@@ -123,41 +215,7 @@
123215
border: 1px solid white;
124216
}
125217

126-
.expandable_Element
127-
{
128-
display: none;
129-
opacity: 0;
130-
height: auto;
131-
margin: 1px;
132-
padding: 0 0 5px 0;
133-
border-bottom: 2px inset rgb(0, 100, 0);
134-
border-top: 2px inset rgb(0, 144, 0);
135-
border-left: 2px inset rgb(0, 144, 0);
136-
border-right: 2px inset rgb(0, 100, 0);
137-
box-shadow: -2px -2px 2px black;
138-
overflow: hidden;
139-
transition:
140-
opacity .2s,
141-
display .08s allow-discrete;
142-
}
143-
144-
.expanded_Element
145-
{
146-
display: block;
147-
opacity: 1;
148-
overflow: hidden;
149-
}
150-
151-
@starting-style
152-
{
153-
.expanded_Element
154-
{
155-
opacity: 0;
156-
display: block;
157-
}
158-
}
159-
160-
/* Ascending column variations */
218+
/*Ascending column variations*/
161219
.ascending_Column
162220
{
163221
background-color: hsl(var(--ascending_Column_Base_Hue), var(--ascending_Column_Base_Saturation), var(--ascending_Column_Base_Lightness));
@@ -183,7 +241,7 @@
183241
background-color: hsl(var(--ascending_Column_Base_Hue), var(--ascending_Column_Base_Saturation), calc(var(--ascending_Column_Base_Lightness) * var(--active_Lightness_Multiplier)));
184242
}
185243

186-
/* Descending column variations */
244+
/*Descending column variations*/
187245
.descending_Column
188246
{
189247
background-color: hsl(var(--descending_Column_Base_Hue), var(--descending_Column_Base_Saturation), var(--descending_Column_Base_Lightness));
@@ -209,7 +267,7 @@
209267
background-color: hsl(var(--descending_Column_Base_Hue), var(--descending_Column_Base_Saturation), calc(var(--descending_Column_Base_Lightness) * var(--active_Lightness_Multiplier)));
210268
}
211269

212-
/* Last-sorted ascending column variations */
270+
/*Last-sorted ascending column variations*/
213271
.last_Sorted_Header.ascending_Column, .last_Sorted_Header.ascending_Column::after
214272
{
215273
background-color: hsl(var(--ascending_Column_Base_Hue), var(--ascending_Column_Base_Saturation), calc(var(--ascending_Column_Base_Lightness) * var(--last_Sorted_Column_Lightness_Multiplier)));
@@ -235,7 +293,7 @@
235293
background-color: hsl(var(--ascending_Column_Base_Hue), var(--ascending_Column_Base_Saturation), calc(var(--ascending_Column_Base_Lightness) * var(--last_Sorted_Column_Lightness_Multiplier) * var(--active_Lightness_Multiplier)));
236294
}
237295

238-
/* Last-sorted descending column variations */
296+
/*Last-sorted descending column variations*/
239297
.last_Sorted_Header.descending_Column, .last_Sorted_Header.descending_Column::after
240298
{
241299
background-color: hsl(var(--descending_Column_Base_Hue), var(--descending_Column_Base_Saturation), calc(var(--descending_Column_Base_Lightness) * var(--last_Sorted_Column_Lightness_Multiplier)));
@@ -261,6 +319,7 @@
261319
background-color: hsl(var(--descending_Column_Base_Hue), var(--descending_Column_Base_Saturation), calc(var(--descending_Column_Base_Lightness) * var(--last_Sorted_Column_Lightness_Multiplier) * var(--active_Lightness_Multiplier)));
262320
}
263321

322+
/*Table body styles*/
264323
table tbody tr
265324
{
266325
height: 38px;
@@ -295,38 +354,6 @@
295354
border-right: 1px solid black;
296355
}
297356

298-
.filter_Title
299-
{
300-
width: 210px;
301-
display: inline-block;
302-
white-space: nowrap;
303-
}
304-
305-
.indented_Filter_Title
306-
{
307-
width: 160px;
308-
margin-left: 50px;
309-
display: inline-block;
310-
white-space: nowrap;
311-
}
312-
313-
.adventure_Pack_Filter_Title
314-
{
315-
width: 260px;
316-
display: inline-block;
317-
white-space: nowrap;
318-
}
319-
320-
.filter_Number_Input
321-
{
322-
width: 70px;
323-
}
324-
325-
.filter_Text_Input
326-
{
327-
width: 164px;
328-
}
329-
330357
.alphabetical_Column
331358
{
332359
width: 110px;
@@ -352,11 +379,14 @@
352379
text-align: left;
353380
}
354381

382+
/*Chest styles*/
355383
.main_Chest_Properties
356384
{
357385
max-width: 225px;
358386
}
359387

388+
389+
/*Item list styles*/
360390
.item_Single_Entry
361391
{
362392
max-width: 225px;
@@ -365,6 +395,7 @@
365395
text-overflow: ellipsis;
366396
}
367397

398+
/*Experience Modifiers styles*/
368399
.experience_Modifier_Single_Entry
369400
{
370401
display: flex;
@@ -388,6 +419,7 @@
388419
padding: 0px;
389420
}
390421

422+
/*Optional Objectives styles*/
391423
.optional_Objective_Single_Entry
392424
{
393425
width: 225px;
@@ -442,23 +474,6 @@
442474
height: 1rem;
443475
line-height: 1rem;
444476
}
445-
446-
#table_Options_Holder
447-
{
448-
width: 620px;
449-
}
450-
451-
#saving_Buttons_Holder
452-
{
453-
display: flex;
454-
justify-content: space-between;
455-
}
456-
457-
#autocomplete_Adventures_Error_Message
458-
{
459-
background-color: rgba(128, 32, 32, 1);
460-
color: rgba(255, 255, 128, 1);
461-
}
462477
</style>
463478
</head>
464479
<body>

0 commit comments

Comments
 (0)