Skip to content

Commit 0d39f20

Browse files
imjuniperimjuniper
committed
Merge branch 'main' into feature/improve-eslint
2 parents da868bb + 39ff3f1 commit 0d39f20

File tree

11 files changed

+852
-1004
lines changed

11 files changed

+852
-1004
lines changed

‎web/css/src/themes/dark.css‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,14 @@ strong {
2626
box-shadow: 0 8px 15px rgb(0 0 0 / 25%);
2727
}
2828

29+
.top-bar-usage-inner {
30+
color: #909090;
31+
}
32+
33+
.top-bar-nav-list {
34+
background-color: #454545;
35+
}
36+
2937
.top-bar-nav-link {
3038
&:hover {
3139
color: #dadada;
@@ -68,14 +76,6 @@ strong {
6876
color: #e7e7e7;
6977
}
7078

71-
.top-bar-usage-inner {
72-
color: #909090;
73-
box-shadow: inset 0 1px 1px rgb(0 0 0 / 85%), 0 1px 1px rgb(0 0 0 / 20%);
74-
background-color: rgb(15 15 15 / 50%);
75-
border-color: rgb(120 120 120 / 95%);
76-
text-shadow: 0 1px 1px rgb(0 0 0 / 50%);
77-
}
78-
7979
.notification-container {
8080
background-color: rgb(50 50 50 / 99%);
8181
text-shadow: 0 1px rgb(0 0 0 / 50%);

‎web/css/src/themes/default.css‎

Lines changed: 107 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -55,34 +55,22 @@
5555
========================================================================== */
5656

5757
.top-bar {
58-
background: linear-gradient(
59-
to bottom,
60-
rgb(104 145 196 / 100%) 0%,
61-
rgb(69 114 181 / 100%) 50%,
62-
rgb(65 90 149 / 100%) 100%
63-
);
64-
background-color: #5070a6;
65-
box-shadow: 0 4px 10px rgb(100 100 100 / 40%);
66-
border-bottom: 1px solid #fff;
67-
68-
@media (--viewport-medium) {
69-
position: fixed;
70-
width: 100%;
71-
z-index: 2;
72-
top: 0;
73-
}
58+
background: linear-gradient(to bottom, rgb(104 145 196 / 100%) 0%, rgb(69 114 181 / 100%) 50%, rgb(65 90 149 / 100%) 100%);
59+
background-color: #5070a6;
60+
box-shadow: 0 4px 10px rgb(100 100 100 / 40%);
61+
border-bottom: 1px solid #fff;
62+
position: fixed;
63+
width: 100%;
64+
z-index: 2;
65+
top: 0;
7466
}
7567

7668
.top-bar-inner {
77-
padding-top: 10px;
78-
79-
@media (--viewport-medium) {
80-
display: flex;
81-
padding-top: 0;
82-
padding-left: 20px;
83-
padding-right: 20px;
84-
justify-content: space-between;
85-
}
69+
display: flex;
70+
height: 40px;
71+
padding-left: 20px;
72+
padding-right: 20px;
73+
justify-content: space-between;
8674

8775
@media (--viewport-large) {
8876
padding-left: 0;
@@ -91,55 +79,91 @@
9179
}
9280

9381
.top-bar-left {
94-
@media (--viewport-medium) {
95-
display: flex;
96-
align-items: center;
97-
}
82+
display: flex;
83+
align-items: center;
9884
}
9985

10086
.top-bar-logo {
101-
display: block;
102-
width: 54px;
103-
margin-left: auto;
104-
margin-right: auto;
87+
display: block;
88+
width: 54px;
89+
margin-right: 30px;
90+
}
10591

106-
@media (--viewport-medium) {
107-
margin-right: 16px;
108-
}
92+
.top-bar-usage {
93+
display: none;
94+
95+
@media (--viewport-small) {
96+
display: block;
97+
}
10998
}
11099

111-
.top-bar-nav {
112-
margin-top: 10px;
100+
.top-bar-usage-inner {
101+
display: flex;
102+
color: #fff;
103+
text-shadow: 1px 1px rgb(0 0 0 / 25%);
104+
font-weight: 500;
105+
}
113106

114-
@media (--viewport-medium) {
115-
margin-top: 0;
116-
display: flex;
117-
align-self: stretch;
118-
}
107+
.top-bar-usage-item {
108+
margin-right: 11px;
109+
110+
&:last-child {
111+
margin-right: 0;
112+
}
113+
114+
& .fas {
115+
margin-right: 3px;
116+
}
117+
}
118+
119+
.top-bar-right {
120+
display: flex;
121+
}
122+
123+
.top-bar-notifications {
124+
display: flex;
125+
position: relative;
126+
}
127+
128+
.top-bar-nav {
129+
display: flex;
130+
position: relative;
119131
}
120132

121133
.top-bar-nav-list {
122-
display: flex;
134+
display: none;
135+
background-color: #4673b6;
136+
box-shadow: 0 3px 20px 0 rgb(0 0 0 / 40%);
137+
position: absolute;
138+
top: 100%;
139+
right: 0;
140+
141+
@media (--viewport-medium) {
142+
display: flex !important; /* NOTE: Overrides inline style set by JS */
143+
background-color: transparent;
144+
box-shadow: none;
145+
position: static;
146+
}
123147
}
124148

125149
.top-bar-nav-item {
126-
display: flex;
127-
position: relative;
128-
flex-grow: 1;
150+
@media (--viewport-medium) {
151+
display: flex;
152+
}
129153
}
130154

131155
.top-bar-nav-link {
132-
color: #f7f7f7;
133-
display: flex;
134-
flex-grow: 1;
135-
align-items: center;
136-
justify-content: center;
137-
font-size: 0.8rem;
138-
font-weight: 600;
139-
text-shadow: 1px 1px rgb(0 0 0 / 25%);
140-
border-left: 1px solid transparent;
141-
border-right: 1px solid transparent;
142-
padding: 10px;
156+
color: #f7f7f7;
157+
display: flex;
158+
align-items: center;
159+
font-size: 0.8rem;
160+
font-weight: 600;
161+
text-shadow: 1px 1px rgb(0 0 0 / 25%);
162+
background-color: transparent;
163+
border: 0;
164+
border-left: 1px solid transparent;
165+
border-right: 1px solid transparent;
166+
padding: 10px;
143167

144168
&:hover {
145169
box-shadow: inset 0 0 6px rgb(255 255 255 / 60%);
@@ -194,51 +218,12 @@
194218
}
195219

196220
.top-bar-nav-link-label {
197-
margin-left: 6px;
198-
}
199-
200-
.top-bar-right {
201-
@media (--viewport-medium) {
202-
display: flex;
203-
align-items: center;
204-
}
205-
}
221+
margin-left: 6px;
222+
white-space: nowrap;
206223

207-
.top-bar-usage {
208-
display: flex;
209-
justify-content: center;
210-
margin-top: 10px;
211-
212-
@media (--viewport-medium) {
213-
margin-top: 0;
214-
margin-right: 10px;
215-
}
216-
}
217-
218-
.top-bar-usage-inner {
219-
display: flex;
220-
border-radius: 12px;
221-
font-size: 0.75rem;
222-
font-weight: 500;
223-
line-height: 0.75rem;
224-
padding: 4px 8px;
225-
color: #30659d;
226-
box-shadow: 0 1px 1px rgb(0 0 0 / 20%), inset 0 1px 0 rgb(0 0 0 / 8%);
227-
background-color: rgb(255 255 255 / 75%);
228-
border: 1px solid rgb(255 255 255 / 75%);
229-
text-shadow: 0 1px 1px rgb(255 255 255 / 60%);
230-
}
231-
232-
.top-bar-usage-item {
233-
margin-right: 11px;
234-
235-
&:last-child {
236-
margin-right: 0;
237-
}
238-
239-
& .fas {
240-
margin-right: 3px;
241-
}
224+
@media (--viewport-medium) {
225+
display: none;
226+
}
242227
}
243228

244229
.l-center {
@@ -248,27 +233,25 @@
248233
}
249234

250235
.notification-container {
251-
background-color: #fff;
252-
box-shadow: 0 3px 20px 0 rgb(0 0 0 / 40%);
253-
max-height: 500px;
254-
overflow-y: auto;
255-
position: absolute;
256-
top: 100%;
257-
left: 10px;
258-
width: 330px;
259-
z-index: 1;
260-
font-size: 0.8rem;
261-
color: #6f6f6f;
262-
border-bottom-left-radius: 6px;
263-
border-bottom-right-radius: 6px;
264-
border: 1px solid #fff;
265-
border-top: none;
266-
267-
@media (--viewport-medium) {
268-
left: auto;
269-
right: 0;
270-
width: 390px;
271-
}
236+
background-color: #fff;
237+
box-shadow: 0 3px 20px 0 rgb(0 0 0 / 40%);
238+
max-height: 500px;
239+
overflow-y: auto;
240+
position: absolute;
241+
top: 100%;
242+
right: 0;
243+
width: 300px;
244+
z-index: 1;
245+
font-size: 0.8rem;
246+
color: #6f6f6f;
247+
border-bottom-left-radius: 6px;
248+
border-bottom-right-radius: 6px;
249+
border: 1px solid #fff;
250+
border-top: none;
251+
252+
@media (--viewport-medium) {
253+
width: 400px;
254+
}
272255
}
273256

274257
.notification-container .empty {
@@ -2153,9 +2136,7 @@ body.mobile .l-unit-toolbar__col--right {
21532136
}
21542137

21552138
.l-content {
2156-
@media (--viewport-medium) {
2157-
padding-top: 40px;
2158-
}
2139+
padding-top: 40px;
21592140
}
21602141

21612142
.console-output {

‎web/css/src/themes/flat.css‎

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,10 @@ strong {
2222
background: #5070a6;
2323
}
2424

25+
.top-bar-usage-inner {
26+
text-shadow: none;
27+
}
28+
2529
.top-bar-nav-link {
2630
text-shadow: none;
2731

@@ -68,20 +72,20 @@ strong {
6872
========================================================================== */
6973

7074
.button {
71-
box-shadow: none;
72-
background: linear-gradient(to bottom, rgb(235 243 249 / 100%) 0%, rgb(223 235 245 / 100%) 100%);
73-
}
75+
box-shadow: none;
76+
background: linear-gradient(to bottom, rgb(235 243 249 / 100%) 0%, rgb(223 235 245 / 100%) 100%);
7477

75-
.button:hover {
76-
color: #6986b7;
77-
box-shadow: none;
78-
background: linear-gradient(to bottom, rgb(241 248 253 / 100%) 0%, rgb(227 240 251 / 100%) 100%);
79-
}
78+
&:hover {
79+
color: #6986b7;
80+
box-shadow: none;
81+
background: linear-gradient(to bottom, rgb(241 248 253 / 100%) 0%, rgb(227 240 251 / 100%) 100%);
82+
}
8083

81-
.button:active,
82-
.button:focus {
83-
box-shadow: none;
84-
background: linear-gradient(to bottom, rgb(210 232 250 / 100%) 0%, rgb(194 224 248 / 100%) 100%);
84+
&:active,
85+
&:focus {
86+
box-shadow: none;
87+
background: linear-gradient(to bottom, rgb(210 232 250 / 100%) 0%, rgb(194 224 248 / 100%) 100%);
88+
}
8589
}
8690

8791
.button-secondary {
@@ -102,12 +106,12 @@ strong {
102106
border-color: #f4301a;
103107
}
104108

105-
.ui-dialog .ui-dialog-buttonpane button:nth-of-type(2) {
106-
box-shadow: none;
107-
}
108-
109109
.ui-dialog {
110-
box-shadow: 0 2px 11px 0 rgb(0 0 0 / 50%);
110+
box-shadow: 0 2px 11px 0 rgb(0 0 0 / 50%);
111+
112+
& .ui-dialog-buttonpane button:nth-of-type(2) {
113+
box-shadow: none;
114+
}
111115
}
112116

113117
.badge {

0 commit comments

Comments
 (0)