Skip to content

Commit af6554c

Browse files
AlecRustAlecRust
authored
UI tidy (hestiacp#3893)
* Trim Flarum logo * Fix sidebar increasing with content on Add/Edit Mail * Tidy alerts spacing * Improve how bg gradients with fallback is set * Add some CSS vars for .top-bar To demonstrate how I think this theming should be implemented.
1 parent 553dea2 commit af6554c

File tree

8 files changed

+93
-96
lines changed

8 files changed

+93
-96
lines changed

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

Lines changed: 42 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,15 @@
77
@import url("../media_queries");
88

99
:root {
10+
/* Colors */
1011
--color-text: #cdcdcd;
1112
--color-text-link: #4fabe9;
1213
--color-text-link-hover: #ff3478;
1314
--color-text-heading: #e8e8e8;
1415
--color-background: #282828;
15-
--alert-border-color: #212121;
1616

1717
/* Alerts */
18+
--alert-border-color: #212121;
1819
--alert-danger-color: #d13535;
1920

2021
/* Icons */
@@ -23,6 +24,11 @@
2324
--icon-color-green: #37cf39;
2425
--icon-color-blue: #0092f4;
2526

27+
/* Top Bar */
28+
--top-bar-background: #454545;
29+
--top-bar-box-shadow: 0 8px 15px rgb(0 0 0 / 25%);
30+
--top-bar-border-bottom: 1px solid #505050;
31+
2632
/* Charts */
2733
--chart-label-color: #cdcdcd;
2834
--chart-grid-color: #434343;
@@ -31,12 +37,6 @@
3137
/* Top bar
3238
========================================================================== */
3339

34-
.top-bar {
35-
background: #454545;
36-
border-bottom: 1px solid #505050;
37-
box-shadow: 0 8px 15px rgb(0 0 0 / 25%);
38-
}
39-
4040
.top-bar-usage-inner {
4141
color: #909090;
4242
}
@@ -86,7 +86,7 @@
8686
}
8787

8888
.top-bar-menu-panel {
89-
background-color: #454545;
89+
background-color: var(--top-bar-background);
9090
}
9191

9292
.top-bar-menu-link {
@@ -277,12 +277,12 @@
277277
&.active {
278278
color: #fff;
279279
background: linear-gradient(
280-
to bottom,
281-
rgb(15 15 15 / 60%) 0%,
282-
rgb(45 45 45 / 75%) 30%,
283-
rgb(60 60 60 / 100%) 95%
284-
);
285-
background-color: #454545;
280+
to bottom,
281+
rgb(15 15 15 / 60%) 0%,
282+
rgb(45 45 45 / 75%) 30%,
283+
rgb(60 60 60 / 100%) 95%
284+
),
285+
#454545;
286286
text-shadow: 0 1px rgb(0 0 0 / 80%);
287287
}
288288
}
@@ -577,13 +577,13 @@
577577
text-shadow: 0 1px 1px rgb(0 0 0 / 35%);
578578
font-weight: 400;
579579
border-color: #707070;
580-
background: #303030;
581580
background: linear-gradient(
582-
0deg,
583-
rgb(48 48 48 / 100%) 0%,
584-
rgb(53 53 53 / 100%) 35%,
585-
rgb(69 69 69 / 100%) 100%
586-
);
581+
0deg,
582+
rgb(48 48 48 / 100%) 0%,
583+
rgb(53 53 53 / 100%) 35%,
584+
rgb(69 69 69 / 100%) 100%
585+
),
586+
#303030;
587587
box-shadow: 0 1px 4px rgb(0 0 0 / 20%), inset 0 0 1px rgb(20 20 20 / 100%),
588588
inset 0 0 3px rgb(0 0 0 / 50%);
589589

@@ -592,12 +592,12 @@
592592
text-shadow: 1px 1px rgb(0 0 0 / 25%);
593593
border-color: #0098ff;
594594
background: linear-gradient(
595-
0deg,
596-
rgb(58 58 58 / 100%) 0%,
597-
rgb(68 68 68 / 100%) 35%,
598-
rgb(79 79 79 / 100%) 100%
599-
);
600-
background-color: #454545;
595+
0deg,
596+
rgb(58 58 58 / 100%) 0%,
597+
rgb(68 68 68 / 100%) 35%,
598+
rgb(79 79 79 / 100%) 100%
599+
),
600+
#454545;
601601
box-shadow: 0 1px 3px rgb(0 0 0 / 35%), inset 0 0 1px rgb(0 0 0 / 100%),
602602
inset 0 0 3px rgb(0 0 0 / 65%);
603603
}
@@ -619,38 +619,38 @@
619619

620620
.button-secondary {
621621
border-color: #454545;
622-
background-color: #343434;
623622
background: linear-gradient(
624-
0deg,
625-
rgb(48 48 48 / 100%) 0%,
626-
rgb(53 53 53 / 100%) 100%,
627-
rgb(69 69 69 / 100%) 100%
628-
);
629-
630-
&:hover {
631-
background-color: #343434;
632-
background: linear-gradient(
633623
0deg,
634624
rgb(48 48 48 / 100%) 0%,
635625
rgb(53 53 53 / 100%) 100%,
636626
rgb(69 69 69 / 100%) 100%
637-
);
627+
),
628+
#343434;
629+
630+
&:hover {
631+
background: linear-gradient(
632+
0deg,
633+
rgb(48 48 48 / 100%) 0%,
634+
rgb(53 53 53 / 100%) 100%,
635+
rgb(69 69 69 / 100%) 100%
636+
),
637+
#343434;
638638
}
639639
}
640640

641641
.button-danger {
642642
&:hover {
643-
background: rgb(133 0 0);
644-
background: linear-gradient(0deg, rgb(133 0 0 / 100%) 0%, rgb(203 0 0 / 100%) 100%);
643+
background: linear-gradient(0deg, rgb(133 0 0 / 100%) 0%, rgb(203 0 0 / 100%) 100%),
644+
rgb(133 0 0);
645645
color: #fff;
646646
text-shadow: 0 1px rgb(0 0 0 / 45%);
647647
border-color: rgb(170 0 0);
648648
}
649649

650650
&:active,
651651
&:focus {
652-
background: rgb(133 0 0);
653-
background: linear-gradient(180deg, rgb(133 0 0 / 100%) 0%, rgb(203 0 0 / 100%) 100%);
652+
background: linear-gradient(180deg, rgb(133 0 0 / 100%) 0%, rgb(203 0 0 / 100%) 100%),
653+
rgb(133 0 0);
654654
color: #4d0000;
655655
text-shadow: 0 -1px 1px rgb(255 255 255 / 30%);
656656
border-color: rgb(251 71 51);
@@ -662,8 +662,7 @@
662662

663663
.body-login,
664664
.body-reset {
665-
background: #303030;
666-
background: radial-gradient(circle, rgb(77 77 77 / 100%) 0%, rgb(31 31 31 / 100%) 100%);
665+
background: radial-gradient(circle, rgb(77 77 77 / 100%) 0%, rgb(31 31 31 / 100%) 100%), #303030;
667666
}
668667

669668
.login {

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

Lines changed: 32 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,14 @@
1212
--animate-duration: 300ms;
1313
--font-family: "Exo", system-ui;
1414
--font-family-monospace: "Inconsolata", "Lucida Console", "Monaco", monospace;
15+
--border-radius-base: 4px;
16+
17+
/* Colors */
1518
--color-text: #7c7c7c;
1619
--color-text-link: #326b9b;
1720
--color-text-link-hover: #c36;
1821
--color-text-heading: #4b4b4b;
1922
--color-background: #fff;
20-
--border-radius-base: 4px;
2123

2224
/* Alerts */
2325
--alert-border-color: #fff;
@@ -37,6 +39,17 @@
3739
--icon-color-blue: #326b9b;
3840
--icon-color-lightblue: #6eb6f0;
3941

42+
/* Top Bar */
43+
--top-bar-background: linear-gradient(
44+
to bottom,
45+
rgb(104 145 196 / 100%) 0%,
46+
rgb(69 114 181 / 100%) 50%,
47+
rgb(65 90 149 / 100%) 100%
48+
),
49+
#5070a6;
50+
--top-bar-box-shadow: 0 4px 10px rgb(100 100 100 / 40%);
51+
--top-bar-border-bottom: 1px solid #fff;
52+
4053
/* Charts */
4154
--chart-label-color: #7c7c7c;
4255
--chart-grid-color: #e9e9e9;
@@ -65,15 +78,9 @@
6578
========================================================================== */
6679

6780
.top-bar {
68-
background: linear-gradient(
69-
to bottom,
70-
rgb(104 145 196 / 100%) 0%,
71-
rgb(69 114 181 / 100%) 50%,
72-
rgb(65 90 149 / 100%) 100%
73-
);
74-
background-color: #5070a6;
75-
box-shadow: 0 4px 10px rgb(100 100 100 / 40%);
76-
border-bottom: 1px solid #fff;
81+
background: var(--top-bar-background);
82+
box-shadow: var(--top-bar-box-shadow);
83+
border-bottom: var(--top-bar-border-bottom);
7784
position: fixed;
7885
display: flex;
7986
width: 100%;
@@ -749,14 +756,14 @@
749756
}
750757

751758
&.active {
752-
background-color: #4f8bbc;
753759
color: #4686b8;
754760
background: linear-gradient(
755-
to bottom,
756-
rgb(255 255 255 / 60%) 0%,
757-
rgb(255 255 255 / 75%) 50%,
758-
rgb(255 255 255 / 95%) 95%
759-
);
761+
to bottom,
762+
rgb(255 255 255 / 60%) 0%,
763+
rgb(255 255 255 / 75%) 50%,
764+
rgb(255 255 255 / 95%) 95%
765+
),
766+
#4f8bbc;
760767
text-shadow: 0 1px rgb(255 255 255 / 80%);
761768
}
762769

@@ -1356,7 +1363,7 @@
13561363
.sidebar-right-grid {
13571364
display: grid;
13581365
gap: 50px;
1359-
grid-template-columns: 2fr 1.3fr;
1366+
grid-template-columns: 2fr 350px;
13601367
}
13611368

13621369
.sidebar-right-grid-content {
@@ -1805,13 +1812,13 @@
18051812
text-shadow: 0 1px 1px rgb(255 255 255 / 85%);
18061813
border: 1px solid #0083db;
18071814
border-radius: 3px;
1808-
background-color: #3b9de8;
18091815
background: linear-gradient(
1810-
to bottom,
1811-
rgb(235 243 249 / 100%) 0%,
1812-
rgb(192 216 236 / 100%) 51%,
1813-
rgb(223 235 245 / 100%) 100%
1814-
);
1816+
to bottom,
1817+
rgb(235 243 249 / 100%) 0%,
1818+
rgb(192 216 236 / 100%) 51%,
1819+
rgb(223 235 245 / 100%) 100%
1820+
),
1821+
#3b9de8;
18151822
box-shadow: 0 1px 3px rgb(0 0 0 / 25%), inset 0 0 1px #fff, inset 0 0 3px rgb(255 255 255 / 50%);
18161823

18171824
&:hover {
@@ -2076,8 +2083,8 @@
20762083
display: flex;
20772084
align-items: center;
20782085
justify-content: center;
2079-
background: rgb(102 158 231);
2080-
background: radial-gradient(circle, rgb(102 158 231 / 100%) 0%, rgb(43 86 177 / 100%) 100%);
2086+
background: radial-gradient(circle, rgb(102 158 231 / 100%) 0%, rgb(43 86 177 / 100%) 100%),
2087+
rgb(102 158 231);
20812088

20822089
& .debug-panel {
20832090
display: none;

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

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,15 @@
1010
/* Alerts */
1111
--alert-box-shadow: none;
1212
--alert-text-shadow: none;
13+
14+
/* Top Bar */
15+
--top-bar-background: #5070a6;
16+
--top-bar-box-shadow: none;
1317
}
1418

1519
/* Top bar
1620
========================================================================== */
1721

18-
.top-bar {
19-
box-shadow: none;
20-
background: #5070a6;
21-
}
22-
2322
.top-bar-usage-inner {
2423
text-shadow: none;
2524
}

‎web/css/src/themes/vestia.css‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,18 @@
99
:root {
1010
--animate-duration: 0s;
1111
--font-family: "Arial", system-ui;
12+
13+
/* Colors */
1214
--color-text-link: #444;
1315
--color-text-link-hover: #ff791f;
1416

1517
/* Alerts */
1618
--alert-box-shadow: none;
1719
--alert-text-shadow: none;
20+
21+
/* Top Bar */
22+
--top-bar-background: #5d5d5d;
23+
--top-bar-box-shadow: none;
1824
}
1925

2026
h1 {
@@ -24,11 +30,6 @@ h1 {
2430
/* Top bar
2531
========================================================================== */
2632

27-
.top-bar {
28-
box-shadow: none;
29-
background: #5d5d5d;
30-
}
31-
3233
.top-bar-notifications-panel {
3334
@media (--viewport-small) {
3435
box-shadow: 0 2px 10px 0 rgb(0 0 0 / 25%);
@@ -166,13 +167,11 @@ h1 {
166167
text-transform: uppercase;
167168
text-shadow: 0 1px 2px rgb(0 0 0 / 40%);
168169
background: #a0c105;
169-
background-color: #a0c105;
170170

171171
&:hover {
172172
border-color: transparent;
173173
color: #fff;
174174
background: #a9cc06;
175-
background-color: #a9cc06;
176175
text-shadow: 0 1px 2px rgb(0 0 0 / 30%);
177176
}
178177
}
@@ -263,15 +262,13 @@ h1 {
263262
padding-top: 6px;
264263
padding-bottom: 6px;
265264
background: #a0c105;
266-
background-color: #a0c105;
267265
border-radius: 2px;
268266
box-shadow: none;
269267

270268
&:hover {
271269
border-color: transparent;
272270
color: #fff;
273271
background: #a9cc06;
274-
background-color: #a9cc06;
275272
text-shadow: 0 1px 2px rgb(0 0 0 / 30%);
276273
transition: none;
277274
box-shadow: none;
@@ -281,7 +278,6 @@ h1 {
281278
border-color: transparent;
282279
color: #fff;
283280
background: #809c00;
284-
background-color: #809c00;
285281
text-shadow: 0 0 2px rgb(0 0 0 / 20%);
286282
box-shadow: none;
287283
}

‎web/src/app/WebApp/Installers/Flarum/fl-thumb.png‎

100755100644
-5.64 KB
Loading

‎web/templates/pages/edit_mail.php‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -106,13 +106,11 @@ class="<?= $v_status ?> js-enable-inputs-on-submit"
106106
<?= _("Use Let's Encrypt to obtain SSL certificate") ?>
107107
</label>
108108
</div>
109-
<div id="le-warning" class="u-mb20">
110-
<div class="alert alert-info" role="alert">
111-
<i class="fas fa-exclamation"></i>
112-
<div>
113-
<p><?php echo $v_webmail_alias; ?></p>
114-
<p><?= sprintf(_("To enable Let's Encrypt SSL, ensure that DNS records exist for mail.%s and %s!"), $v_domain, $v_webmail_alias) ?></p>
115-
</div>
109+
<div class="alert alert-info u-mb20" role="alert">
110+
<i class="fas fa-exclamation"></i>
111+
<div>
112+
<p><?php echo $v_webmail_alias; ?></p>
113+
<p><?= sprintf(_("To enable Let's Encrypt SSL, ensure that DNS records exist for mail.%s and %s!"), $v_domain, $v_webmail_alias) ?></p>
116114
</div>
117115
</div>
118116
<div x-cloak x-show="!letsEncryptEnabled">

0 commit comments

Comments
 (0)