Skip to content

Commit 8492c3d

Browse files
StevenRotelliStevenRotelli
committed
created new css vairables for controlling gaps and colors, and made error list sticky
1 parent b42153c commit 8492c3d

File tree

1 file changed

+151
-64
lines changed

1 file changed

+151
-64
lines changed

‎Boilerplate.css

Lines changed: 151 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,84 @@
1-
/*VERSION 1.0.6*/
1+
/*VERSION 2.0*/
22
/*https://github.com/StevenRotelli/GrooperCSS*/
3-
/* Makes data panel full size */
4-
self {
5-
width: auto !important;
6-
--soft-err-bg-color:#7f7f27;
7-
--soft-err-border-color:#ffcc00;
8-
--soft-err-bg-color-lite:#feffbd;
9-
--soft-err-border-color-lite:Yellow;
3+
/* Variables */
4+
self:not(.DataModel) {
5+
--gap: 8px;
6+
--border-radius: 8px;
7+
--horizontal-gap: var(--gap);
8+
--vertical-gap: var(--gap);
9+
--focus-border-color: var(--grp-teal-1);
10+
--soft-err-bg-color: #7f7f27;
11+
--soft-err-border-color: #ffcc00;
12+
--soft-err-bg-color-lite: #feffbd;
13+
--soft-err-border-color-lite: Yellow;
14+
--border-color: gray;
15+
--border-color-hover: light-grey;
16+
--border-color-focus: var(--grp-teal-1);
17+
display: flex;
18+
flex-direction: column;
19+
position: relative !important;
20+
overflow: clip !important;
21+
float: left !important;
22+
height: calc(100% - 1px);
23+
margin-bottom: -19px;
24+
max-width: 100%;
25+
min-width: 100%;
26+
}
27+
self:has(.DataModel.NoBorder) .dg-error-list {
28+
width: calc(100% - 10px);
29+
}
30+
.ContextMenu {
31+
position: fixed;
32+
}
33+
nav.title-bar {
34+
top: 0;
35+
position: sticky !important;
36+
z-index: 1;
37+
}
38+
.dark-mode nav.title-bar {
39+
background-color: rgb(30, 30, 30);
40+
}
41+
.lite-mode nav.title-bar {
42+
background-color: rgb(250, 250, 250);
43+
}
44+
.dg-error-list {
45+
top: 46px;
46+
position: sticky !important;
47+
z-index: 1;
48+
margin-bottom: 0;
49+
border-radius: var(--border-radius);
50+
border: 0px;
51+
box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.24);
52+
padding-top: 4px;
53+
padding-bottom: 4px;
54+
height: fit-content;
55+
max-height: 118px;
56+
flex-shrink: 0;
57+
}
58+
.dg-error-list::-webkit-scrollbar-thumb {
59+
background-color: var(--color-danger-border);
60+
}
61+
.dg-error-list::-webkit-scrollbar-thumb:hover {
62+
background-color: var(--color-danger-fg);
63+
}
64+
.dg-error-list::-webkit-scrollbar-thumb:active {
65+
background-color: red !important;
1066
}
1167
/* DataModel Setup */
1268
.DataModel {
1369
display: flex;
1470
flex-wrap: wrap;
15-
transition: flex;
1671
border: 1px solid gray;
17-
border-radius: 8px;
18-
padding-top: 8px;
19-
padding-left: 8px !important;
72+
border-radius: var(--border-radius);
73+
padding-top: var(--vertical-gap);
74+
padding-left: var(--horizontal-gap) !important;
2075
margin: 10px;
21-
width: auto !important;
22-
overflow: none !important;
76+
padding-bottom: 0px !important;
77+
margin-bottom: var(--vertical-gap);
78+
overflow: scroll;
79+
padding-bottom: 0px;
80+
margin-bottom: 0px;
81+
margin-top: var(--vertical-gap) !important;
2382
}
2483
/* Table Setup */
2584
hr {
@@ -31,22 +90,25 @@ hr {
3190
margin-bottom: 4px;
3291
margin-right: -8px;
3392
transform: translate(-8px, -8px);
34-
border-top-left-radius: 8px;
35-
border-top-right-radius: 8px;
36-
padding-top:8px;
37-
padding-left:8px;
38-
width: calc(100% + 8px);
39-
height:fit-content;
93+
border-top-left-radius: var(--border-radius);
94+
border-top-right-radius: var(--border-radius);
95+
padding-top: 8px;
96+
padding-left: var(--horizontal-gap);
97+
width: calc(100% + var(--horizontal-gap));
98+
height: fit-content;
4099
order: 1;
41100
}
42101
.toolbar {
43-
margin-top: 0;
102+
margin-top: 0;
44103
}
45-
.DataGridCollection>.toolbar>div:first-child {
46-
flex-grow: 0;
104+
.DataGridCollection > .toolbar > div:first-child {
105+
flex-grow: 0;
106+
}
107+
.caption {
108+
height: fit-content;
47109
}
48110
.toolbar > div > .caption {
49-
margin-right:8px;
111+
margin-right: 8px;
50112
}
51113
.header {
52114
margin-right: 100%;
@@ -59,7 +121,7 @@ hr {
59121
.scroll-container > div:first-child {
60122
max-height: 1000px !important;
61123
height: auto !important;
62-
flex-grow:0;
124+
flex-grow: 0;
63125
}
64126
.footer {
65127
order: 1;
@@ -72,6 +134,9 @@ hr {
72134
margin-top: auto;
73135
order: 1;
74136
}
137+
.DataValue {
138+
transition: background-color 0.2s ease-in-out;
139+
}
75140
*::placeholder {
76141
font-style: italic;
77142
}
@@ -84,14 +149,13 @@ hr {
84149
flex-basis: 100%;
85150
flex-grow: 0;
86151
flex-shrink: 1;
87-
transition: flex;
88152
padding: 8px;
89153
padding-right: 0px;
90154
margin: 8px;
91155
margin-left: 0px;
92156
width: auto;
93157
border: 1px solid gray;
94-
border-radius: 8px;
158+
border-radius: var(--border-radius);
95159
order: 1;
96160
}
97161
/* Correct flex properties just for tables */
@@ -113,25 +177,33 @@ hr {
113177
.DataSection:hover,
114178
.DataTable:hover,
115179
.DataGridCollection:hover {
116-
border-color: lightgray;
180+
border-color: var(--border-color-hover);
117181
}
118182
/* Sets focus color */
119183
.DataSection:focus-within,
120184
.DataTable:focus-within,
121185
.DataGridCollection:focus-within {
122-
border-color: var(--grp-teal-1);
186+
border-color: var(--border-color-focus);
123187
}
124188
/* SPECIAL CLASSES */
125-
.SoftError > .invalid, input[title="Confidence is below minimum."],div[title="Confidence is below minimum."] {
126-
background-color: #7f7f27;
127-
}
128-
.SoftError > .invalid:focus-within, input[title="Confidence is below minimum."], div[title="Confidence is below minimum."]{
129-
border-color: #ffcc00;
130-
}
131-
.lite-mode .SoftError > .invalid, .lite-mode input[title="Confidence is below minimum."], .lite-mode div[title="Confidence is below minimum."] {
132-
background-color: #feffbd;
133-
}
134-
.lite-mode .SoftError > .invalid:focus-within, .lite-mode input[title="Confidence is below minimum."], .lite-mode div[title="Confidence is below minimum."] {
189+
.SoftError > .invalid,
190+
input[title="Confidence is below minimum."],
191+
div[title="Confidence is below minimum."] {
192+
background-color: var(--soft-err-bg-color);
193+
}
194+
.SoftError > .invalid:focus-within,
195+
input[title="Confidence is below minimum."],
196+
div[title="Confidence is below minimum."] {
197+
border-color: var(--soft-err-border-color);
198+
}
199+
.lite-mode .SoftError > .invalid,
200+
.lite-mode input[title="Confidence is below minimum."],
201+
.lite-mode div[title="Confidence is below minimum."] {
202+
background-color: var(--soft-err-bg-color-lite);
203+
}
204+
.lite-mode .SoftError > .invalid:focus-within,
205+
.lite-mode input[title="Confidence is below minimum."],
206+
.lite-mode div[title="Confidence is below minimum."] {
135207
border-color: Yellow;
136208
}
137209
.Secure > Input:hover {
@@ -185,38 +257,52 @@ hr {
185257
margin-right: 0px;
186258
background-color: transparent;
187259
}
260+
.Border.DataField {
261+
border: 1px solid var(--border-color);
262+
border-radius: var(--border-radius);
263+
padding-left: var(--horizontal-gap);
264+
margin-top: var(--vertical-gap);
265+
margin-bottom: var(--vertical-gap);
266+
padding-top: var(--vertical-gap);
267+
}
268+
.Border.DataField:hover {
269+
border-color: var(--border-color-hover);
270+
}
271+
.Border.DataField:focus-within {
272+
border-color: var(--border-color-focus);
273+
}
188274
/* Sizes */
189275
.Half {
190-
flex: 1 0 calc(50% - 8px);
276+
flex: 1 0 calc(50% - var(--horizontal-gap));
191277
}
192278
.Third {
193-
flex: 1 0 calc(33.333% - 8px);
279+
flex: 1 0 calc(33.333% - var(--horizontal-gap));
194280
}
195281
.Quarter,
196282
.OneFourth {
197-
flex: 1 0 calc(25% - 8px);
283+
flex: 1 0 calc(25% - var(--horizontal-gap));
198284
}
199285
.ThreeFourths {
200-
flex: 1 0 calc(75% - 8px);
286+
flex: 1 0 calc(75% - var(--horizontal-gap));
201287
}
202288
.Fifth,
203289
.OneFifth {
204-
flex: 1 0 calc(20% - 8px);
290+
flex: 1 0 calc(20% - var(--horizontal-gap));
205291
}
206292
.TwoFifths {
207-
flex: 1 0 calc(40% - 8px);
293+
flex: 1 0 calc(40% - var(--horizontal-gap));
208294
}
209295
.ThreeFifths {
210-
flex: 1 0 calc(60% - 8px);
296+
flex: 1 0 calc(60% - var(--horizontal-gap));
211297
}
212-
.FourFifths{
213-
flex: 1 0 calc(80% - 8px);
298+
.FourFifths {
299+
flex: 1 0 calc(80% - var(--horizontal-gap));
214300
}
215301
.OneThird {
216-
flex: 1 0 calc(33.333% - 8px);
302+
flex: 1 0 calc(33.333% - var(--horizontal-gap));
217303
}
218304
.TwoThirds {
219-
flex: 1 0 calc(66.666% - 8px);
305+
flex: 1 0 calc(66.666% - var(--horizontal-gap));
220306
}
221307
.Column {
222308
flex-direction: column;
@@ -233,45 +319,46 @@ hr {
233319
margin-right: 100%;
234320
}
235321
.AutoHeight > .DataValue {
236-
min-height:24px;
322+
min-height: 24px;
237323
height: 100% !important;
238324
max-height: fit-content !important;
239325
overflow-y: visible;
240326
}
241-
.AutoSize > .scroll-container > div > table div, .AutoHeight > .scroll-container > div > table div {
242-
min-height:24px;
327+
.AutoSize > .scroll-container > div > table div,
328+
.AutoHeight > .scroll-container > div > table div {
329+
min-height: 24px;
243330
height: 100% !important;
244331
max-height: fit-content !important;
245332
overflow-y: visible;
246333
}
247334
.AutoHeight > .scroll-container > div > table tbody tr td select {
248-
height:100%;
335+
height: 100%;
249336
}
250337
.AutoSize > .scroll-container > div > table tbody tr td select {
251-
height:100%;
338+
height: 100%;
252339
}
253340
.Shy.DataSection > .DataField {
254-
width: calc(100% - 8px);
255-
margin-right:8px;
341+
width: calc(100% - 8px);
342+
margin-right: 8px;
256343
}
257344
.Shy.DataSection > .DataField > label {
258-
width: fit-content;
345+
width: fit-content;
259346
margin-right: auto;
260347
}
261348
.Shy.DataSection > .DataValue {
262-
margin-right: 8px;
349+
margin-right: 8px;
263350
}
264351
.Shy {
265352
width: calc(100% - 8px);
266-
margin-right:8px;
353+
margin-right: 8px;
267354
}
268355
.Shy > label {
269356
width: fit-content;
270357
margin-right: auto;
271358
}
272359
@font-face {
273360
font-family: "MesloLGS NF Regular";
274-
src: url("../Fonts/MesloLGS-NF-Regular.ttf") format("truetype");
361+
src: url("../Fonts/MesloLGS-NF-Regular.ttf") format("truetype"); /*https://github.com/romkatv/powerlevel10k-media/raw/master/MesloLGS%20NF%20Regular.ttf*/
275362
}
276363
/* in progress */
277364
.Icon {
@@ -293,10 +380,10 @@ button[id="delete-section"] {
293380
background-color: rgb(105, 205, 180);
294381
}
295382
select {
296-
-webkit-appearance: none;
383+
-webkit-appearance: none;
297384
appearance: none;
298385
padding: 2px 4px 2px 4px; /* Adjust padding to make room for the arrow */
299-
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M7.41%208.84L12%2013.42L16.59%208.84L18%2010.25L12%2016.25L6%2010.25L7.41%208.84Z%22%20fill%3D%22%23434343%22/%3E%3C/svg%3E');
386+
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M7.41%208.84L12%2013.42L16.59%208.84L18%2010.25L12%2016.25L6%2010.25L7.41%208.84Z%22%20fill%3D%22%23434343%22/%3E%3C/svg%3E");
300387
background-repeat: no-repeat;
301388
background-position: right 0px center; /* Position the arrow image */
302389
}
@@ -305,5 +392,5 @@ select::-ms-expand {
305392
display: none;
306393
}
307394
select:hover {
308-
border-color: rgb(var(--fg-color-rgb), .35);
395+
border-color: rgb(var(--fg-color-rgb), 0.35);
309396
}

0 commit comments

Comments
 (0)