Skip to content

Commit 25b39e0

Browse files
AlecRustAlecRust
authored
Some refactoring (hestiacp#3141)
* Refactor non-default theme loading * Tidy some CSS * Refactor CSS for links in forms
1 parent 4699e2d commit 25b39e0

22 files changed

+206
-253
lines changed

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

Lines changed: 87 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -204,20 +204,6 @@ strong {
204204
}
205205
}
206206

207-
/* Cards
208-
========================================================================== */
209-
210-
.card {
211-
background-color: #454545;
212-
border-color: #606060;
213-
box-shadow: 0 1px 4px rgb(0 0 0 / 20%), inset 0 0 60px rgb(0 0 0 / 25%);
214-
}
215-
216-
.card-content {
217-
color: #fafafa;
218-
text-shadow: 0 1px rgb(0 0 0 / 95%) !important;
219-
}
220-
221207
/* Toolbar
222208
========================================================================== */
223209

@@ -345,6 +331,20 @@ strong {
345331
}
346332
}
347333

334+
/* Cards
335+
========================================================================== */
336+
337+
.card {
338+
background-color: #454545;
339+
border-color: #606060;
340+
box-shadow: 0 1px 4px rgb(0 0 0 / 20%), inset 0 0 60px rgb(0 0 0 / 25%);
341+
}
342+
343+
.card-content {
344+
color: #fafafa;
345+
text-shadow: 0 1px rgb(0 0 0 / 95%) !important;
346+
}
347+
348348
.l-unit {
349349
color: #dadada;
350350
}
@@ -546,33 +546,37 @@ strong {
546546
}
547547
}
548548

549-
.generate {
550-
color: #29a9ff;
551-
border-radius: 4px;
549+
.form-link {
550+
color: #09f;
552551

553552
&:hover {
554-
background-color: #ff3478;
555-
border-color: #ff3478;
553+
background-color: #3b9de8;
556554
}
557555

558556
&:active {
559-
background-color: #be1f54;
560-
border-color: #be1f54;
557+
background-color: #54a6e5;
561558
}
562559
}
563560

564-
textarea::placeholder {
565-
color: #bbb;
566-
}
561+
.form-link-danger {
562+
&:hover {
563+
background-color: #ff3478;
564+
}
567565

568-
textarea:focus::placeholder {
569-
color: #909090;
566+
&:active {
567+
background-color: #be1f54;
568+
}
570569
}
571570

572571
.hint {
573572
color: #a2a2a2;
574573
}
575574

575+
.section-title {
576+
color: #d4d4d4;
577+
border-bottom-color: #484848;
578+
}
579+
576580
/* Buttons
577581
========================================================================== */
578582

@@ -590,37 +594,37 @@ textarea:focus::placeholder {
590594
);
591595
box-shadow: 0 1px 4px rgb(0 0 0 / 20%), inset 0 0 1px rgb(20 20 20 / 100%),
592596
inset 0 0 3px rgb(0 0 0 / 50%);
593-
}
594597

595-
.button:hover {
596-
color: #fff;
597-
text-shadow: 1px 1px rgb(0 0 0 / 25%);
598-
border-color: #0098ff;
599-
background: linear-gradient(
600-
0deg,
601-
rgb(58 58 58 / 100%) 0%,
602-
rgb(68 68 68 / 100%) 35%,
603-
rgb(79 79 79 / 100%) 100%
604-
);
605-
background-color: #454545;
606-
box-shadow: 0 1px 3px rgb(0 0 0 / 35%), inset 0 0 1px rgb(0 0 0 / 100%),
607-
inset 0 0 3px rgb(0 0 0 / 65%);
608-
transition: 0.2s;
609-
}
598+
&:hover {
599+
color: #fff;
600+
text-shadow: 1px 1px rgb(0 0 0 / 25%);
601+
border-color: #0098ff;
602+
background: linear-gradient(
603+
0deg,
604+
rgb(58 58 58 / 100%) 0%,
605+
rgb(68 68 68 / 100%) 35%,
606+
rgb(79 79 79 / 100%) 100%
607+
);
608+
background-color: #454545;
609+
box-shadow: 0 1px 3px rgb(0 0 0 / 35%), inset 0 0 1px rgb(0 0 0 / 100%),
610+
inset 0 0 3px rgb(0 0 0 / 65%);
611+
transition: 0.2s;
612+
}
610613

611-
.button:active,
612-
.button:focus {
613-
color: #d4d4d4;
614-
text-shadow: 0 -1px 1px rgb(0 0 0 / 55%);
615-
border-color: #0066b4;
616-
background: linear-gradient(
617-
0deg,
618-
rgb(69 69 69 / 100%) 0%,
619-
rgb(53 53 53 / 100%) 35%,
620-
rgb(48 48 48 / 100%) 100%
621-
);
622-
box-shadow: 0 1px 3px rgb(0 0 0 / 30%), inset 0 0 1px rgb(0 0 0 / 100%),
623-
inset -1px -1px 4px rgb(30 30 30 / 40%);
614+
&:active,
615+
&:focus {
616+
color: #d4d4d4;
617+
text-shadow: 0 -1px 1px rgb(0 0 0 / 55%);
618+
border-color: #0066b4;
619+
background: linear-gradient(
620+
0deg,
621+
rgb(69 69 69 / 100%) 0%,
622+
rgb(53 53 53 / 100%) 35%,
623+
rgb(48 48 48 / 100%) 100%
624+
);
625+
box-shadow: 0 1px 3px rgb(0 0 0 / 30%), inset 0 0 1px rgb(0 0 0 / 100%),
626+
inset -1px -1px 4px rgb(30 30 30 / 40%);
627+
}
624628
}
625629

626630
.button-secondary {
@@ -632,74 +636,46 @@ textarea:focus::placeholder {
632636
rgb(53 53 53 / 100%) 100%,
633637
rgb(69 69 69 / 100%) 100%
634638
);
635-
}
636639

637-
.button-secondary:hover {
638-
background-color: #343434;
639-
background: linear-gradient(
640-
0deg,
641-
rgb(48 48 48 / 100%) 0%,
642-
rgb(53 53 53 / 100%) 100%,
643-
rgb(69 69 69 / 100%) 100%
644-
);
645-
}
646-
647-
.button-danger:hover {
648-
background: rgb(133 0 0);
649-
background: linear-gradient(0deg, rgb(133 0 0 / 100%) 0%, rgb(203 0 0 / 100%) 100%);
650-
color: #fff;
651-
text-shadow: 0 1px rgb(0 0 0 / 45%);
652-
border-color: rgb(170 0 0);
653-
}
654-
655-
.button-danger:active,
656-
.button-danger:focus {
657-
background: rgb(133 0 0);
658-
background: linear-gradient(180deg, rgb(133 0 0 / 100%) 0%, rgb(203 0 0 / 100%) 100%);
659-
color: #4d0000;
660-
text-shadow: 0 -1px 1px rgb(255 255 255 / 30%);
661-
border-color: rgb(251 71 51);
662-
}
663-
664-
.ui-dialog button.cancel span {
665-
color: #fff !important;
666-
}
667-
668-
.additional-control {
669-
color: #09f;
670-
}
671-
672-
.additional-control:hover {
673-
background-color: #ff3478;
674-
border-color: #ff3478;
675-
}
676-
677-
.additional-control:active {
678-
}
679-
680-
.additional-control.delete:hover,
681-
.additional-control.delete:active,
682-
.additional-control.add:hover {
640+
&:hover {
641+
background-color: #343434;
642+
background: linear-gradient(
643+
0deg,
644+
rgb(48 48 48 / 100%) 0%,
645+
rgb(53 53 53 / 100%) 100%,
646+
rgb(69 69 69 / 100%) 100%
647+
);
648+
}
683649
}
684650

685-
.additional-control.add:active {
686-
}
651+
.button-danger {
652+
&:hover {
653+
background: rgb(133 0 0);
654+
background: linear-gradient(0deg, rgb(133 0 0 / 100%) 0%, rgb(203 0 0 / 100%) 100%);
655+
color: #fff;
656+
text-shadow: 0 1px rgb(0 0 0 / 45%);
657+
border-color: rgb(170 0 0);
658+
}
687659

688-
.unlim-trigger {
660+
&:active,
661+
&:focus {
662+
background: rgb(133 0 0);
663+
background: linear-gradient(180deg, rgb(133 0 0 / 100%) 0%, rgb(203 0 0 / 100%) 100%);
664+
color: #4d0000;
665+
text-shadow: 0 -1px 1px rgb(255 255 255 / 30%);
666+
border-color: rgb(251 71 51);
667+
}
689668
}
690669

691-
.optional {
692-
}
670+
/* Login
671+
========================================================================== */
693672

694673
.body-login,
695674
.body-reset {
696675
background: #303030;
697676
background: radial-gradient(circle, rgb(77 77 77 / 100%) 0%, rgb(31 31 31 / 100%) 100%);
698677
}
699678

700-
/* Login
701-
========================================================================== */
702-
703679
.login {
704680
& .error {
705681
color: #f864fa;
@@ -719,7 +695,7 @@ textarea:focus::placeholder {
719695
color: #fff;
720696
}
721697

722-
.login-label-link {
698+
.login-form-link {
723699
color: #eee;
724700
text-transform: initial;
725701
font-weight: 400;
@@ -729,11 +705,6 @@ textarea:focus::placeholder {
729705
}
730706
}
731707

732-
.section-title {
733-
color: #d4d4d4;
734-
border-bottom-color: #484848;
735-
}
736-
737708
.qr-code {
738709
border: 1px solid #3b3b3b;
739710
box-shadow: 0 1px 4px rgb(0 0 0 / 35%);

0 commit comments

Comments
 (0)