Skip to content

Commit b850a2e

Browse files
Nikhita-14Nikhita-14
authored
Merge branch 'sugarlabs:master' into master
2 parents 5e2ca8f + 295ff55 commit b850a2e

28 files changed

+2169
-209
lines changed

‎css/themes.css‎

Lines changed: 101 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,162 +1,201 @@
11
/* Theme DropDown Styling */
22

33
#themedropdown {
4-
background-color: transparent;
5-
box-shadow: none;
6-
display: flex;
7-
transform: translateX(-25%) !important;
4+
background-color: transparent;
5+
box-shadow: none;
6+
display: flex;
7+
transform: translateX(-25%) !important;
88
}
99

1010
#themedropdown a {
11-
color: #2196F3;
12-
transition: all 0.3s ease;
11+
color: #2196f3;
12+
transition: all 0.3s ease;
1313
}
1414

1515
#themedropdown a:hover {
16-
color: #1E88E5;
17-
background-color: transparent;
18-
transition: all 0.3s ease;
16+
color: #1e88e5;
17+
background-color: transparent;
18+
transition: all 0.3s ease;
1919
}
2020

21+
/* Dark Mode Theme Dropdown */
22+
.dark #themedropdown {
23+
background-color: transparent !important;
24+
}
25+
26+
.dark #themedropdown li {
27+
background-color: transparent !important;
28+
}
29+
30+
.dark #themedropdown li a {
31+
background-color: transparent !important;
32+
}
2133

2234
/* Dark Mode */
2335

2436
.dark .blue {
25-
background-color: #022363 !important;
37+
background-color: #022363 !important;
2638
}
2739

2840
.dark #canvas {
29-
background-color: #1c1c1c !important;
41+
background-color: #1c1c1c !important;
3042
}
3143

3244
.dark .blue.darken-1 {
33-
background-color: #01143b !important;
45+
background-color: #01143b !important;
3446
}
3547

36-
.dark #floatingWindows>.windowFrame {
37-
border: 2px solid var(--border);
38-
background-color: var(--bg);
48+
.dark #floatingWindows > .windowFrame {
49+
border: 2px solid var(--border);
50+
background-color: var(--bg);
3951
}
4052

4153
.dark .wfbtItem {
42-
background-color: #225a91;
54+
background-color: #225a91;
4355
}
4456

45-
.dark #floatingWindows>.windowFrame>.wfTopBar .wftTitle {
46-
color: #e8e8e8;
57+
.dark #floatingWindows > .windowFrame > .wfTopBar .wftTitle {
58+
color: #e8e8e8;
4759
}
4860

49-
.dark #floatingWindows>.windowFrame>.wfWinBody .wfbWidget {
50-
color: #ccc !important;
51-
background-color: #3f3f44 !important;
61+
.dark #floatingWindows > .windowFrame > .wfWinBody .wfbWidget {
62+
color: #ccc !important;
63+
background-color: #505050 !important;
5264
}
5365

5466
.dark .popupMsg {
55-
background-color: #084e86;
56-
color: #e8e8e8;
67+
background-color: #084e86;
68+
color: #e8e8e8;
5769
}
5870

5971
.dark #printText {
60-
border-color: #000000;
72+
border-color: #000000;
6173
}
6274

6375
.dark #loading-image-container {
64-
background-color: var(--bg) !important;
76+
background-color: var(--bg) !important;
6577
}
6678

6779
.dark #loadingText {
68-
color: white !important;
80+
color: white !important;
6981
}
7082

7183
.dark .language-link {
72-
color: #fff;
84+
color: #fff;
7385
}
7486

7587
.modal-content {
76-
background-color: var(--panel-bg);
77-
color: var(--fg);
88+
background-color: var(--panel-bg);
89+
color: var(--fg);
7890
}
7991

8092
.dark #submitLilypond {
81-
background-color: rgb(0, 102, 255);
93+
background-color: rgb(0, 102, 255);
8294
}
8395

8496
.dark #search,
8597
.dark #helpfulSearch,
8698
.dark .ui-autocomplete {
87-
background-color: #1c1c1c !important;
88-
color: #fff !important;
99+
background-color: #1c1c1c !important;
100+
color: #fff !important;
89101
}
90102

91103
.dark .ui-autocomplete li:hover {
92-
background-color: #225a91 !important;
104+
background-color: #225a91 !important;
93105
}
94106

95107
.dark #helpfulSearchDiv {
96-
background-color: transparent !important;
108+
background-color: transparent !important;
97109
}
98110

99111
.dark #crossButton {
100-
color: #fff;
112+
color: #fff;
101113
}
102114

103115
.dark #chooseKeyDiv {
104-
background: #333;
116+
background: #333;
105117
}
106118

107119
.dark #movable {
108-
background: #333;
109-
color: white;
120+
background: #333;
121+
color: white;
110122
}
111123

112-
.dark .dropdown-content li>a {
113-
background-color: #1c1c1c;
114-
color: #3fe0d1;
124+
.dark .dropdown-content li > a {
125+
background-color: #1c1c1c;
126+
color: #3fe0d1;
115127
}
116128

117-
.dark .dropdown-content li>a:hover {
118-
background-color: #333;
129+
.dark .dropdown-content li > a:hover {
130+
background-color: #333;
119131
}
120132

121133
.dark .dropdown-content {
122-
background-color: #1c1c1c;
134+
background-color: #1c1c1c;
123135
}
124136

125137
.dark .modalBox {
126-
background-color: #1C1C1C;
138+
background-color: #1c1c1c;
127139
}
128140

129141
.dark .modal-message {
130-
color: #e2e2e2;
131-
background-color: #1C1C1C;
142+
color: #e2e2e2;
143+
background-color: #1c1c1c;
132144
}
133145

134146
.dark #newdropdown {
135-
border: #000000;
136-
background-color: #1c1c1c;
147+
border: #000000;
148+
background-color: #1c1c1c;
137149
}
138150

139151
.dark #newdropdown li {
140-
background-color: #1c1c1c;
152+
background-color: #1c1c1c;
141153
}
142154

143155
.dark #confirmation-message {
144-
color: #e2e2e2;
156+
color: #e2e2e2;
145157
}
158+
146159
body {
147-
--border: #cccccc;
148-
--bg: #ffffff;
149-
--fg: #666666;
150-
--panel-bg: #f5f5f5;
151-
--accent: #2196F3;
160+
--border: #cccccc;
161+
--bg: #ffffff;
162+
--fg: #666666;
163+
--panel-bg: #f5f5f5;
164+
--accent: #2196f3;
152165
}
153166

154167
body.dark {
155-
--border: #000000;
156-
--bg: #1d1d20;
157-
--fg: #e8e8e8;
158-
--panel-bg: #1c1c1c;
159-
--accent: #3fe0d1;
168+
--border: #000000;
169+
--bg: #1d1d20;
170+
--fg: #e8e8e8;
171+
--panel-bg: #1c1c1c;
172+
--accent: #3fe0d1;
173+
}
174+
175+
/* Your Custom Theme can go here if you don't want to modify the existing dark mode */
176+
177+
/* Selected language highlight in language dropdown */
178+
#languagedropdown li a.selected-language {
179+
background-color: rgba(33, 150, 243, 0.15);
180+
border-left: 3px solid #2196F3;
181+
font-weight: 600;
182+
}
183+
184+
.dark #languagedropdown li a.selected-language {
185+
background-color: rgba(33, 150, 243, 0.25);
186+
border-left: 3px solid #64B5F6;
187+
}
188+
189+
/* Dark Mode Tooltip Styling - Slightly lighter background for better contrast */
190+
.dark .material-tooltip {
191+
background-color: #3a3a3a !important;
192+
color: #ffffff !important;
193+
}
194+
195+
.dark .material-tooltip .backdrop {
196+
background-color: #3a3a3a !important;
160197
}
161198

162-
/* Your Custom Theme can go here if you don't want to modify the existing dark mode */
199+
.dark .material-tooltip span {
200+
color: #ffffff !important;
201+
}

0 commit comments

Comments
 (0)