Skip to content

Commit 493539b

Browse files
Commanderk3Commanderk3
authored
internal to external css (#4514)
* internal to external css * format * translation * return if exist * new project style * new project title
1 parent ad64fe3 commit 493539b

File tree

5 files changed

+222
-164
lines changed

5 files changed

+222
-164
lines changed

‎css/activities.css‎

Lines changed: 92 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,98 @@ body:not(.dark) #helpfulSearchDiv {
3232
background-color: #f9f9f9 !important;
3333
}
3434

35+
#newdropdown {
36+
font-size: 16px;
37+
background-color: #fff;
38+
border: 1px solid #cccccc;
39+
color: #000000;
40+
padding: 24px;
41+
width: 400px;
42+
border-radius: 8px;
43+
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
44+
}
45+
46+
#newdropdown li {
47+
text-align: center;
48+
width: fit-content;
49+
margin: 0 auto;
50+
}
51+
52+
.new-project-title {
53+
line-height: normal;
54+
font-size: 24px;
55+
text-align: left;
56+
color: #0066FF;
57+
}
58+
59+
#confirmation-message {
60+
font-size: 16px;
61+
text-align: left;
62+
color: black;
63+
}
64+
65+
.modalBox {
66+
position: fixed;
67+
top: 50%;
68+
left: 50%;
69+
transform: translate(-50%, -50%);
70+
width: 400px;
71+
padding: 24px;
72+
background-color: #fff;
73+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
74+
border-radius: 8px;
75+
z-index: 10000;
76+
text-align: left;
77+
}
78+
79+
.modal-title {
80+
color: #0066FF;
81+
font-size: 24px;
82+
margin: 0 0 16px 0;
83+
}
84+
85+
.modal-message {
86+
color: black;
87+
font-size: 16px;
88+
margin-bottom: 24px;
89+
}
90+
91+
.clear-button-container {
92+
display: flex;
93+
justify-content: flex-start;
94+
}
95+
96+
.confirm-button {
97+
border: none;
98+
border-radius: 4px;
99+
padding: 8px 16px;
100+
font-weight: bold;
101+
cursor: pointer;
102+
background-color: #0066FF;
103+
color: white;
104+
margin-right: 16px;
105+
transition: background-color 0.2s ease;
106+
}
107+
108+
.confirm-button:hover {
109+
background-color: #023a76;
110+
}
111+
112+
.cancel-button {
113+
border: none;
114+
border-radius: 4px;
115+
padding: 8px 16px;
116+
font-weight: bold;
117+
cursor: pointer;
118+
transition: background-color 0.2s ease;
119+
background-color: #f1f1f1;
120+
color: black;
121+
}
122+
123+
.cancel-button:hover {
124+
background-color: #afafaf;
125+
}
126+
35127
.modal {
36128
display: none;
37129
position: fixed;
@@ -58,16 +150,6 @@ body:not(.dark) #helpfulSearchDiv {
58150
text-align: left;
59151
}
60152

61-
#submitLilypond {
62-
background-color: rgb(0, 102, 255);
63-
border: none;
64-
border-radius: 4px;
65-
padding: 8px 16px;
66-
font-weight: bold;
67-
cursor: pointer;
68-
margin-right: 16px;
69-
}
70-
71153
.close {
72154
color: #aaa;
73155
float: right;

‎css/themes.css‎

Lines changed: 108 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
11
/* Theme DropDown Styling */
22

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

10-
#themedropdown a{
10+
#themedropdown a {
1111
color: #2196F3;
1212
transition: all 0.3s ease;
1313
}
14-
#themedropdown a:hover{
14+
15+
#themedropdown a:hover {
1516
color: #1E88E5;
1617
background-color: transparent;
1718
transition: all 0.3s ease;
@@ -21,100 +22,122 @@
2122
/* Dark Mode */
2223

2324
.dark .blue {
24-
background-color: #022363 !important;
25-
}
26-
27-
.dark #canvas {
28-
background-color: #1c1c1c;
29-
}
30-
31-
.dark .blue.darken-1 {
32-
background-color: #01143b !important;
33-
}
34-
35-
.dark #floatingWindows > .windowFrame {
36-
border: 2px solid #000000;
37-
background-color: #454545;
38-
}
39-
40-
.dark .wfbtItem {
41-
background-color: #225a91;
42-
}
43-
44-
.dark #floatingWindows > .windowFrame > .wfTopBar .wftTitle {
45-
color: #e8e8e8;
46-
}
47-
48-
.dark .popupMsg {
49-
background-color: #084e86;
50-
color: #e8e8e8;
51-
}
52-
53-
.dark #printText {
54-
border-color: #000000;
55-
}
56-
57-
.dark #loading-image-container {
58-
background: #1a1a1a !important;
59-
background-color: #1a1a1a !important;
60-
}
61-
62-
.dark #loadingText {
63-
color: white !important;
64-
}
65-
66-
.dark .language-link {
67-
color: #fff;
68-
}
69-
70-
.dark .modal-content {
71-
background-color: #1c1c1c;
72-
color: #fff;
73-
}
74-
75-
.dark #submitLilypond {
76-
background-color: rgb(0, 102, 255);
77-
}
78-
79-
.dark #search,
80-
#helpfulSearch,
81-
.ui-autocomplete {
82-
background-color: #1c1c1c !important;
83-
color: #fff !important;
84-
}
85-
86-
.dark .ui-autocomplete li:hover {
87-
background-color: #225a91 !important;
88-
}
89-
90-
.dark #helpfulSearchDiv {
91-
background-color: transparent !important;
92-
}
93-
94-
.dark #crossButton {
95-
color: #fff;
96-
}
97-
98-
.dark #chooseKeyDiv {
99-
background: #333;
100-
}
101-
25+
background-color: #022363 !important;
26+
}
27+
28+
.dark #canvas {
29+
background-color: #1c1c1c;
30+
}
31+
32+
.dark .blue.darken-1 {
33+
background-color: #01143b !important;
34+
}
35+
36+
.dark #floatingWindows>.windowFrame {
37+
border: 2px solid #000000;
38+
background-color: #454545;
39+
}
40+
41+
.dark .wfbtItem {
42+
background-color: #225a91;
43+
}
44+
45+
.dark #floatingWindows>.windowFrame>.wfTopBar .wftTitle {
46+
color: #e8e8e8;
47+
}
48+
49+
.dark .popupMsg {
50+
background-color: #084e86;
51+
color: #e8e8e8;
52+
}
53+
54+
.dark #printText {
55+
border-color: #000000;
56+
}
57+
58+
.dark #loading-image-container {
59+
background: #1a1a1a !important;
60+
background-color: #1a1a1a !important;
61+
}
62+
63+
.dark #loadingText {
64+
color: white !important;
65+
}
66+
67+
.dark .language-link {
68+
color: #fff;
69+
}
70+
71+
.dark .modal-content {
72+
background-color: #1c1c1c;
73+
color: #fff;
74+
}
75+
76+
.dark #submitLilypond {
77+
background-color: rgb(0, 102, 255);
78+
}
79+
80+
.dark #search,
81+
#helpfulSearch,
82+
.ui-autocomplete {
83+
background-color: #1c1c1c !important;
84+
color: #fff !important;
85+
}
86+
87+
.dark .ui-autocomplete li:hover {
88+
background-color: #225a91 !important;
89+
}
90+
91+
.dark #helpfulSearchDiv {
92+
background-color: transparent !important;
93+
}
94+
95+
.dark #crossButton {
96+
color: #fff;
97+
}
98+
99+
.dark #chooseKeyDiv {
100+
background: #333;
101+
}
102+
102103
.dark #movable {
103104
background: #333;
104105
color: white;
105106
}
106107

107-
.dark .dropdown-content li > a {
108+
.dark .dropdown-content li>a {
108109
background-color: #1c1c1c;
109110
color: #3fe0d1;
110111
}
111112

112-
.dark .dropdown-content li > a:hover {
113+
.dark .dropdown-content li>a:hover {
113114
background-color: #333;
114115
}
115116

116117
.dark .dropdown-content {
117118
background-color: #1c1c1c;
118119
}
119120

121+
.dark .modalBox {
122+
background-color: #1C1C1C;
123+
}
124+
125+
.dark .modal-message {
126+
color: #e2e2e2;
127+
background-color: #1C1C1C;
128+
}
129+
130+
.dark #newdropdown {
131+
border: #000000;
132+
background-color: #1c1c1c;
133+
}
134+
135+
.dark #newdropdown li {
136+
background-color: #1c1c1c;
137+
}
138+
139+
.dark #confirmation-message {
140+
color: #e2e2e2;
141+
}
142+
120143
/* Your Custom Theme can go here if you don't want to modify the existing dark mode */

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -464,7 +464,7 @@
464464
<div id="guitarText"></div>
465465
<input type="checkbox" id="guitarCheck" tabindex="-1" />
466466
<p></p>
467-
<p><button id="submitLilypond"></button></p>
467+
<p><button class = "confirm-button" id="submitLilypond"></button></p>
468468
<!-- <button id="submitPDF"></button></p> -->
469469
</div>
470470
</div>

0 commit comments

Comments
 (0)