Skip to content

Commit f210a58

Browse files
swkeepswkeep
committed
fix: optimize style.css
1 parent 2160759 commit f210a58

2 files changed

Lines changed: 167 additions & 24 deletions

File tree

‎interactionDUI/dui_source/src/style.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,6 @@ body {
103103
&__badge {
104104
position: absolute;
105105
right: 1rem;
106-
transition: all 0.2s ease;
107106
padding: 0.35em 0.65em;
108107
font-size: 0.65em;
109108
color: #fff;

‎interactionDUI/dui_source/src/themes.scss‎

Lines changed: 167 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -641,49 +641,67 @@
641641
}
642642

643643
[data-theme='theme-3'] {
644+
--primary-color: rgba(0, 200, 255, 1);
645+
--primary-glow: rgba(0, 200, 255, 0.3);
646+
--background-base: rgba(245, 245, 245, 0.95);
647+
--text-dark: rgba(20, 20, 20, 0.9);
648+
--text-light: rgba(255, 255, 255, 0.95);
649+
--easing: cubic-bezier(0.16, 1, 0.3, 1);
650+
644651
.menus-container {
645-
background-color: rgba(245, 245, 245, 0.95);
646-
padding: 12px;
652+
background: rgba(248, 248, 248, 0.85);
653+
border-radius: 16px;
654+
padding: 16px;
655+
box-shadow:
656+
0 8px 32px rgba(0, 0, 0, 0.08),
657+
0 4px 12px rgba(0, 0, 0, 0.05);
658+
border: 1px solid rgba(255, 255, 255, 0.3);
659+
transition: all 0.4s var(--easing);
647660
}
648661

649662
.container {
650-
color: black;
663+
color: var(--text-dark);
664+
font-weight: 500;
651665
}
652666

653667
.menu {
654668
&__option {
655669
position: relative;
656-
padding: 6px 0;
657-
margin: 0;
658-
659-
&:last-child::after {
660-
display: none;
661-
}
662670

663671
&__radio {
664-
position: absolute;
665-
opacity: 0;
666-
667672
&:checked+.label {
668-
background-color: rgba(0, 0, 0, 1);
669-
border: 1px solid white;
673+
background: linear-gradient(135deg, rgba(20, 20, 20, 0.95), rgba(40, 40, 40, 0.95));
674+
color: var(--text-light);
675+
border: 1px solid rgba(255, 255, 255, 0.15);
676+
box-shadow:
677+
inset 0 0 0 1px rgba(255, 255, 255, 0.1),
678+
0 4px 20px var(--primary-glow);
670679

671680
&:before {
672681
border-color: var(--primary-color);
673-
background-color: rgb(0, 0, 0);
674-
box-shadow: inset 0 0 0 4px var(--primary-color);
675-
}
676-
677-
&--radio:before {
678-
border-radius: 50%;
679-
background-color: white;
682+
background-color: transparent;
683+
box-shadow:
684+
inset 0 0 0 2px var(--primary-color),
685+
0 0 12px var(--primary-glow);
680686
}
681687
}
682688
}
683689

684690
.label {
685-
background-color: rgb(63, 63, 63);
686-
border: 1px solid transparent;
691+
background: rgba(230, 230, 230, 0.9);
692+
border-radius: 10px;
693+
padding: 12px 16px;
694+
border: 1px solid rgba(0, 0, 0, 0.08);
695+
color: var(--text-dark);
696+
transition: all 0.3s var(--easing);
697+
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
698+
699+
&--radio:before {
700+
border-radius: 50%;
701+
border: 2px solid rgba(0, 0, 0, 0.2);
702+
background: white;
703+
transition: all 0.3s var(--easing);
704+
}
687705
}
688706
}
689707
}
@@ -906,6 +924,132 @@
906924
}
907925
}
908926

927+
[data-theme='theme-6'] {
928+
.menus-container {
929+
background-color: rgba(40, 30, 20, 0.95);
930+
background-image:
931+
repeating-linear-gradient(0deg,
932+
rgba(80, 60, 40, 0.3),
933+
rgba(80, 60, 40, 0.3) 1px,
934+
transparent 1px,
935+
transparent 20px),
936+
repeating-linear-gradient(90deg,
937+
rgba(100, 80, 60, 0.2),
938+
rgba(100, 80, 60, 0.2) 1px,
939+
transparent 1px,
940+
transparent 20px);
941+
border: 3px solid #5d4037;
942+
border-radius: 4px;
943+
box-shadow:
944+
0 0 0 2px #3e2723,
945+
inset 0 0 15px rgba(0, 0, 0, 0.7);
946+
padding: 1rem;
947+
}
948+
949+
.menu {
950+
&__option {
951+
&__radio {
952+
&:checked+.label {
953+
background: linear-gradient(90deg, rgba(84, 53, 37, 0.8) 0%, rgba(121, 85, 72, 0.8) 100%);
954+
border-left: 8px solid #8d6e63;
955+
border-top: 4px solid #a1887f;
956+
border-right: 4px solid #a1887f;
957+
border-bottom: 4px solid #a1887f;
958+
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
959+
960+
&--radio:before {
961+
display: none;
962+
}
963+
}
964+
}
965+
966+
.label {
967+
background: linear-gradient(90deg, rgba(60, 45, 35, 0.8) 0%, rgba(90, 70, 60, 0.8) 100%);
968+
border-left: 4px solid #5d4037;
969+
padding: 0.8rem 1rem;
970+
border-radius: 4px;
971+
972+
&--radio:before {
973+
display: none;
974+
}
975+
976+
&__icon {
977+
color: #bcaaa4;
978+
}
979+
}
980+
}
981+
}
982+
983+
.indicator {
984+
background: linear-gradient(90deg, rgba(70, 55, 45, 0.9) 0%, rgba(100, 80, 70, 0.9) 100%);
985+
border: 2px solid #5d4037;
986+
border-radius: 4px;
987+
padding: 0.8rem 1.5rem;
988+
font-family: 'Courier New', monospace;
989+
letter-spacing: 1px;
990+
991+
&__fill {
992+
background: linear-gradient(90deg, #8d6e63 0%, #6d4c41 100%);
993+
height: 6px;
994+
border-radius: 3px;
995+
box-shadow: 0 0 5px rgba(141, 110, 99, 0.5);
996+
}
997+
998+
&--success {
999+
border-color: #4caf50;
1000+
1001+
.indicator__inner {
1002+
color: #81c784;
1003+
}
1004+
}
1005+
1006+
&--fail {
1007+
border-color: #e53935;
1008+
1009+
.indicator__inner {
1010+
color: #ef9a9a;
1011+
}
1012+
}
1013+
1014+
&--glow {
1015+
box-shadow:
1016+
0 0 20px rgba(188, 170, 164, 0.5),
1017+
inset 0 0 10px rgba(0, 0, 0, 0.5);
1018+
border-color: #bcaaa4;
1019+
}
1020+
1021+
&--warning {
1022+
background: repeating-linear-gradient(45deg,
1023+
#5d4037,
1024+
#5d4037 10px,
1025+
#6d5147 10px,
1026+
#6d5147 20px);
1027+
border-color: #ffa000;
1028+
1029+
.indicator__inner {
1030+
color: #ffb74d;
1031+
text-shadow: 0 0 5px rgba(255, 176, 77, 0.5);
1032+
}
1033+
}
1034+
}
1035+
1036+
&[data-dark='true'] {
1037+
.menus-container {
1038+
background-color: rgba(30, 20, 10, 0.95);
1039+
border-color: #4a3427;
1040+
}
1041+
1042+
.indicator {
1043+
background: linear-gradient(90deg, rgba(50, 35, 25, 0.9) 0%, rgba(80, 60, 50, 0.9) 100%);
1044+
border-color: #4a3427;
1045+
}
1046+
1047+
.menu__option .label {
1048+
background: linear-gradient(90deg, rgba(50, 35, 25, 0.8) 0%, rgba(70, 50, 40, 0.8) 100%);
1049+
}
1050+
}
1051+
}
1052+
9091053
[data-theme='theme-7'] {
9101054
--primary-color: rgba(0, 255, 100, 1);
9111055
--primary-color-glow: rgba(0, 255, 100, 0.5);

0 commit comments

Comments
 (0)