Skip to content

Commit cf6f913

Browse files
author
minjk-bl
committed
Edit style colors to root css variables
1 parent deb0eba commit cf6f913

35 files changed

Lines changed: 315 additions & 314 deletions

‎visualpython/css/boardFrame.css‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -16,26 +16,26 @@
1616
position: relative;
1717
float: left;
1818

19-
border-left: 1px solid var(--border-gray-color);
19+
border-left: 1px solid var(--vp-border-gray-color);
2020
box-sizing: border-box;
2121
}
2222
.vp-board-header {
2323
box-sizing: border-box;
2424
width: 100%;
2525
height: 50px;
2626
text-align: right;
27-
background-color: #FFFFFF;
28-
border-bottom: 1px solid var(--border-gray-color);
27+
background-color: var(--vp-background-color);
28+
border-bottom: 1px solid var(--vp-border-gray-color);
2929
}
3030
.vp-board-title {
3131
width: 100%;
3232
height: 50px;
33-
background-color: white;
33+
background-color: var(--vp-background-color);
3434
display: flex;
3535
flex-direction: row;
3636
position: relative;
3737
z-index: 10;
38-
border-bottom: 0.25px solid var(--border-gray-color);
38+
border-bottom: 0.25px solid var(--vp-border-gray-color);
3939
box-sizing: border-box;
4040
}
4141
.vp-board-title input {
@@ -48,8 +48,8 @@
4848
}
4949
.vp-board-title input:focus {
5050
transition: 0.7s;
51-
border: 0.5px solid var(--highlight-color) !important;
52-
color: var(--font-highlight);
51+
border: 0.5px solid var(--vp-highlight-color) !important;
52+
color: var(--vp-font-highlight);
5353
}
5454
.vp-board-title input::selection {
5555
background-color: #FDEFDD;
@@ -72,13 +72,13 @@
7272
position: relative;
7373
color: #000;
7474
background-size: 5px 5px;
75-
background-image: repeating-linear-gradient( to right, var(--grid-line-color) 0, var(--grid-line-color) 0.25px, transparent 1px, transparent 50px ), repeating-linear-gradient( to bottom, var(--grid-line-color) 0, var(--grid-line-color) 0.25px, transparent 1px, transparent 50px );
76-
background-color: white;
75+
background-image: repeating-linear-gradient( to right, var(--vp-grid-line-color) 0, var(--vp-grid-line-color) 0.25px, transparent 1px, transparent 50px ), repeating-linear-gradient( to bottom, var(--vp-grid-line-color) 0, var(--vp-grid-line-color) 0.25px, transparent 1px, transparent 50px );
76+
background-color: var(--vp-background-color);
7777
}
7878
.vp-board-footer {
7979
width: 100%;
8080
height: 50px;
81-
border-top: 1px solid var(--border-gray-color);
81+
border-top: 1px solid var(--vp-border-gray-color);
8282
line-height: 50px;
8383
}
8484
.vp-board-footer-buttons {
@@ -106,8 +106,8 @@
106106
margin-top: 25px;
107107
width: 150px;
108108
float: right;
109-
background: #FFFFFF;
110-
border: 0.25px solid var(--border-gray-color);
109+
background: var(--vp-background-color);
110+
border: 0.25px solid var(--vp-border-gray-color);
111111
border-radius: 3px;
112112
box-sizing: border-box;
113113
box-shadow: 1px 1px 2px rgb(0 0 0 / 10%);
@@ -119,7 +119,7 @@
119119
margin-inline-start: 0px;
120120
margin-inline-end: 0px;
121121
padding-inline-start: 0px;
122-
color: var(--font-primary);
122+
color: var(--vp-font-primary);
123123
}
124124
.vp-board-header-button-inner ul li {
125125
overflow: hidden;
@@ -131,14 +131,14 @@
131131
line-height: 22px;
132132
text-align: left;
133133
vertical-align: middle;
134-
color: var(--font-primary);
135-
background-color: #FFFFFF;
134+
color: var(--vp-font-primary);
135+
background-color: var(--vp-background-color);
136136
margin-bottom: 2px;
137137
float: none;
138138
}
139139
.vp-board-header-button-inner ul li:hover {
140-
color: var(--font-highlight);
141-
/* background-color: var(--light-gray-color); */
140+
color: var(--vp-font-highlight);
141+
/* background-color: var(--vp-light-gray-color); */
142142
}
143143

144144
/* block */
@@ -156,7 +156,7 @@
156156
flex-direction: column;
157157
justify-content: center;
158158
touch-action: none;
159-
color: var(--font-primary);
159+
color: var(--vp-font-primary);
160160
font-family: 'AppleSDGothicNeo';
161161

162162
}
@@ -171,7 +171,7 @@
171171
position: relative;
172172
display: flex;
173173
flex-direction: row;
174-
background: var(--border-gray-color);
174+
background: var(--vp-border-gray-color);
175175
z-index: 10;
176176
text-overflow: ellipsis;
177177
white-space: nowrap;
@@ -222,7 +222,7 @@
222222

223223
/* block color labeling */
224224
.vp-block.vp-focus .vp-block-header {
225-
border: 2px solid var(--highlight-color);
225+
border: 2px solid var(--vp-highlight-color);
226226
}
227227
.vp-block.vp-focus-child .vp-block-header {
228228
background-color: rgb(196, 196, 196);
@@ -285,9 +285,9 @@
285285
display: flex;
286286
}
287287
.vp-block-button {
288-
background-color: white;
289-
color: var(--font-primary);
290-
border: 0.25px solid var(--border-gray-color);
288+
background-color: var(--vp-background-color);
289+
color: var(--vp-font-primary);
290+
border: 0.25px solid var(--vp-border-gray-color);
291291
box-sizing: border-box;
292292
box-shadow: 1px 1px 2px rgb(0 0 0 / 10%);
293293
border-radius: 2px;
@@ -296,7 +296,7 @@
296296
text-align: center;
297297
}
298298
.vp-block-button:hover {
299-
background-color: var(--highlight-color);
299+
background-color: var(--vp-highlight-color);
300300
color: white;
301301
cursor: pointer;
302302
transition: 0.2s;
@@ -309,7 +309,7 @@
309309
border: 2px solid transparent;
310310
}
311311
.vp-block-markdown.vp-focus .vp-block-header {
312-
border: 2px solid var(--highlight-color);
312+
border: 2px solid var(--vp-highlight-color);
313313
}
314314
.vp-block-markdown .vp-block-header:empty::after {
315315
content: 'Double click to edit.';
@@ -329,24 +329,24 @@
329329
/* block menu */
330330
.vp-block-menu-box {
331331
position: fixed;
332-
background: #FFFFFF;
332+
background: var(--vp-background-color);
333333
width: 125px;
334334
line-height: 15px;
335-
border: 0.25px solid var(--border-gray-color);
335+
border: 0.25px solid var(--vp-border-gray-color);
336336
border-radius: 3px;
337337
padding: 5px;
338338
z-index: 50;
339339
}
340340
.vp-block-menu-item {
341-
color: var(--font-primary);
341+
color: var(--vp-font-primary);
342342
padding: 5px;
343343
font-size: 14px;
344344
}
345345
.vp-block-menu-item:hover {
346-
color: var(--font-highlight);
346+
color: var(--vp-font-highlight);
347347
cursor: pointer;
348348
}
349349
#vp_block_menu_delete:hover {
350-
background: var(--highlight-color);
350+
background: var(--vp-highlight-color);
351351
color: white;
352352
}

‎visualpython/css/component/alertModal.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
width: 400px;
1616
height: 150px;
1717
padding: 15px;
18-
background-color: white;
18+
background-color: var(--vp-background-color);
1919
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
2020
}
2121
.vp-alertModal-inner {

‎visualpython/css/component/dataSelector.css‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
padding-right: 23px;
1919
}
2020
.vp-ds-box input.vp-ds-target:disabled {
21-
background: var(--light-gray-color) !important;
21+
background: var(--vp-light-gray-color) !important;
2222
cursor: not-allowed;
2323
}
2424
.vp-ds-box input.vp-ds-target:disabled + .vp-ds-filter {
@@ -45,13 +45,13 @@
4545
left: calc(50% - 325px);
4646
width: 650px;
4747
height: 580px;
48-
background: white;
49-
border: 1px solid var(--border-gray-color);
48+
background: var(--vp-background-color);
49+
border: 1px solid var(--vp-border-gray-color);
5050
z-index: 1300;
5151
/* font */
5252
font-family: AppleSDGothicNeo;
5353
font-size: 14px;
54-
color: var(--font-primary);
54+
color: var(--vp-font-primary);
5555
}
5656
.vp-ds-data-box {
5757
width: 100%;
@@ -61,7 +61,7 @@
6161
}
6262
.vp-ds-type-box,
6363
.vp-ds-variable-box {
64-
border: 0.25px solid var(--border-gray-color);
64+
border: 0.25px solid var(--vp-border-gray-color);
6565
height: 130px;
6666
grid-row-gap: 0px;
6767
align-content: baseline;
@@ -71,18 +71,18 @@
7171
padding-left: 5px;
7272
height: 25px;
7373
line-height: 25px;
74-
border-bottom: 1px solid var(--border-gray-color);
74+
border-bottom: 1px solid var(--vp-border-gray-color);
7575
}
7676
.vp-ds-type-item:hover,
7777
.vp-ds-var-item:hover {
78-
background: var(--light-gray-color);
79-
color: var(--font-highlight);
78+
background: var(--vp-light-gray-color);
79+
color: var(--vp-font-highlight);
8080
cursor: pointer;
8181
}
8282
.vp-ds-type-item.selected,
8383
.vp-ds-var-item.selected {
84-
background: var(--light-gray-color);
85-
color: var(--font-highlight);
84+
background: var(--vp-light-gray-color);
85+
color: var(--vp-font-highlight);
8686
font-weight: bold;
8787
}
8888
.vp-ds-option-box {

‎visualpython/css/component/fileNavigation.css‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,10 @@
2323
min-height: 400px;
2424
width: 70%;
2525
height: 55%;
26-
background-color: white;
26+
background-color: var(--vp-background-color);
2727
}
2828
#fnpRootFolder:hover {
29-
color: var(--font-highlight);
29+
color: var(--vp-font-highlight);
3030
cursor: pointer;
3131
}
3232

@@ -39,7 +39,7 @@
3939
padding-top: 10px;
4040
}
4141
.fnp-sidebar-menu.selected {
42-
color: var(--font-highlight)
42+
color: var(--vp-font-highlight)
4343
}
4444
.fnp-sidebar-menu {
4545
padding: 5px 0px 5px 15px;
@@ -199,7 +199,7 @@
199199
padding-left: 0px;
200200
margin-left:5px;
201201
white-space: nowrap;
202-
color: var(--font-primary);
202+
color: var(--vp-font-primary);
203203
font-size: 13px;
204204
}
205205
.fileNavigationPage-dir-text:hover {
@@ -223,7 +223,7 @@
223223
transition: 0.7s;
224224
}
225225
.fileNavigationPage-directory-nowLocation {
226-
color: var(--font-primary);
226+
color: var(--vp-font-primary);
227227
}
228228
.fileNavigationPage-directory-nowLocation:hover {
229229
cursor: pointer;
@@ -242,7 +242,7 @@
242242
#vp_fileNavigationExt {
243243
width: 130px;
244244
vertical-align: middle;
245-
color: var(--font-primary);
245+
color: var(--vp-font-primary);
246246
font-family: 'AppleSDGothicNeo';
247247
font-size: 13px;
248248
border-radius: 3px;

‎visualpython/css/component/infoModal.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
width: 400px;
1616
height: 165px;
1717
padding: 2rem;
18-
background-color: white;
18+
background-color: var(--vp-background-color);
1919
border-radius: 5px;
2020
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
2121
font-family: AppleSDGothicNeo;
@@ -32,7 +32,7 @@
3232
}
3333
.vp-infoModal-icon {
3434
font-size: 26px;
35-
color: var(--font-primary);
35+
color: var(--vp-font-primary);
3636
/* LAB: img to background-image */
3737
background-image: url(../../img/info_circle.svg);
3838
background-repeat: no-repeat;
@@ -41,7 +41,7 @@
4141
height: 24px;
4242
}
4343
.vp-infoModal-titleStr {
44-
color: var(--font-primary);
44+
color: var(--vp-font-primary);
4545
font-size: 15px;
4646
}
4747
.vp-infoModal-style-flex-column-evenly {

‎visualpython/css/component/innerFuncViewer.css‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* UDF Editor - CodeMirror */
22
.vp-if-body .CodeMirror { border: 1px solid silver; }
3-
.vp-if-body .CodeMirror.CodeMirror-focused { border: 1px solid var(--highlight-color); }
3+
.vp-if-body .CodeMirror.CodeMirror-focused { border: 1px solid var(--vp-highlight-color); }
44
.vp-if-body .CodeMirror-empty { outline: 1px solid #c22; }
55
.vp-if-body .CodeMirror-empty.CodeMirror-focused { outline: none; }
66
.vp-if-body .CodeMirror pre.CodeMirror-placeholder { color: #999; }
@@ -28,9 +28,9 @@
2828
width: 130px;
2929
top: 23px;
3030
right: 0px;
31-
border: 0.25px solid var(--border-gray-color);
31+
border: 0.25px solid var(--vp-border-gray-color);
3232
border-radius: 3px;
33-
background: #FFFFFF;
33+
background: var(--vp-background-color);
3434
padding: 5px;
3535
z-index: 5;
3636
}
@@ -42,7 +42,7 @@
4242
cursor: pointer;
4343
}
4444
.vp-if-menu-item:hover {
45-
color: var(--font-highlight);
45+
color: var(--vp-font-highlight);
4646
}
4747
.vp-if-search-box {
4848
position: relative;
@@ -82,7 +82,7 @@
8282
height: 30px;
8383
line-height: 30px;
8484
padding: 0px 7px;
85-
border: 0.25px solid var(--border-gray-color);
85+
border: 0.25px solid var(--vp-border-gray-color);
8686
box-sizing: border-box;
8787
cursor: pointer;
8888
}
@@ -109,11 +109,11 @@
109109
cursor: pointer;
110110
}
111111
.vp-if-item-header.selected input.vp-if-item-title {
112-
color: var(--font-highlight);
112+
color: var(--vp-font-highlight);
113113
}
114114
.vp-if-item-header input.vp-if-item-title:focus {
115115
transition: 0.7s;
116-
border: 0.5px solid var(--highlight-color) !important;
116+
border: 0.5px solid var(--vp-highlight-color) !important;
117117
cursor: text;
118118
}
119119
.vp-if-item-menu {
@@ -127,5 +127,5 @@
127127
.vp-if-item-code {
128128
display: none;
129129
position: relative;
130-
border: 0.25px solid var(--border-gray-color);
130+
border: 0.25px solid var(--vp-border-gray-color);
131131
}

0 commit comments

Comments
 (0)