Skip to content

Commit cfcd931

Browse files
authored
Merge pull request #46 from simonsobs/rationalize-more-CSS
Rationalize more CSS attributes
2 parents 3693679 + d18ff08 commit cfcd931

File tree

6 files changed

+47
-44
lines changed

6 files changed

+47
-44
lines changed

src/components/ColorMapSlider.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ export function ColorMapSlider(props: ColorMapSlideProps) {
108108
display: 'flex',
109109
justifyContent: 'center',
110110
alignItems: 'center',
111-
boxShadow: '0px 2px 6px #AAA',
111+
boxShadow: '0 0 5px #bbb',
112112
}}
113113
>
114114
<div

src/components/styles/color-map-controls.css

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@
1111
.cmap-values-container {
1212
display: flex;
1313
justify-content: center;
14-
background-color: white;
15-
box-shadow: 0px 2px 6px #aaa;
16-
border: 2px solid rgba(0, 0, 0, 0.2);
17-
border-radius: 4px;
14+
background-color: var(--standard-bg-color);
15+
box-shadow: var(--standard-box-shadow);
16+
border: 1px solid var(--border-color-unhovered);
17+
border-radius: var(--standard-border-radius);
1818
padding: 2px 0;
1919
}
2020

src/components/styles/coordinates-display.css

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
.coordinates-display {
22
width: 250px;
33
position: absolute;
4-
border: 2px solid rgba(0, 0, 0, 0.2);
5-
border-radius: 4px;
6-
background-color: rgba(255, 255, 255, 0.7);
7-
box-shadow: 0 0 5px #bbb;
8-
padding: 5px 10px;
4+
border: 1px solid var(--border-color-unhovered);
5+
border-radius: var(--standard-border-radius);
6+
background-color: var(--semi-transparent-bg-color);
7+
box-shadow: var(--standard-box-shadow);
98
z-index: 400;
10-
opacity: 0.7;
9+
opacity: 0.8;
1110
left: calc(50% - 150px);
1211
bottom: 15px;
1312
text-align: center;

src/components/styles/layer-selector.css

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
top: 8px;
44
right: 1em;
55
z-index: 1000;
6-
background-color: #fff;
7-
border-radius: 4px;
8-
border: 1px solid rgba(0, 0, 0, 0.2);
6+
background-color: var(--standard-bg-color);
7+
border-radius: var(--standard-border-radius);
8+
border: 1px solid var(--border-color-unhovered);
99
}
1010

1111
.layer-selector-header {
@@ -24,15 +24,15 @@
2424
background: none;
2525
color: #666666;
2626
border: 1px solid white;
27-
border-radius: 4px;
27+
border-radius: var(--standard-border-radius);
2828
display: flex;
2929
align-items: center;
3030
padding: 2px;
3131
box-sizing: border-box;
3232
}
3333

3434
.lock-menu-btn:hover {
35-
border: 1px solid black;
35+
border-color: var(--border-color-hovered);
3636
color: black;
3737
}
3838

src/components/styles/toggle-switch.css

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@
33
left: 40px;
44
top: 9px;
55
z-index: 5000;
6-
background-color: white;
7-
border-radius: 4px;
6+
background-color: var(--standard-bg-color);
7+
border-radius: var(--standard-border-radius);
88
padding: 3px;
9-
border: 1px solid rgba(0, 0, 0, 0.2);
9+
border: 1px solid var(--border-color-unhovered);
1010
}
1111

1212
.toggle-container:hover:not(.disabled) {
13-
border-color: black;
13+
border-color: var(--border-color-hovered);
1414
}
1515

1616
.toggle-container.disabled {
@@ -57,7 +57,7 @@
5757
width: 12px;
5858
left: 2px;
5959
bottom: 1px;
60-
background-color: white;
60+
background-color: var(--standard-bg-color);
6161
-webkit-transition: 0.4s;
6262
transition: 0.4s;
6363
}
@@ -66,10 +66,6 @@ input:checked + .label .slider {
6666
background-color: black;
6767
}
6868

69-
input:focus + .label .slider {
70-
box-shadow: 0 0 1px black;
71-
}
72-
7369
input:checked + .label .slider:before {
7470
-webkit-transform: translateX(12px);
7571
-ms-transform: translateX(12px);
@@ -78,7 +74,7 @@ input:checked + .label .slider:before {
7874

7975
.slider.round {
8076
border-radius: 34px;
81-
border: 1px solid darkgray;
77+
border: 1px solid var(--border-color-unhovered);
8278
}
8379

8480
.slider.round:before {

src/index.css

Lines changed: 26 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,13 @@
1515
text-rendering: optimizeLegibility;
1616
-webkit-font-smoothing: antialiased;
1717
-moz-osx-font-smoothing: grayscale;
18+
19+
--border-color-unhovered: rgba(0, 0, 0, 0.2);
20+
--border-color-hovered: black;
21+
--standard-border-radius: 4px;
22+
--semi-transparent-bg-color: rgba(255, 255, 255, 0.7);
23+
--standard-bg-color: white;
24+
--standard-box-shadow: 0 0 5px #bbb;
1825
}
1926

2027
html,
@@ -40,14 +47,14 @@ body {
4047

4148
.scale-control {
4249
font-size: 1.3em;
43-
border: 2px solid rgba(0, 0, 0, 0.3);
44-
border-top: none;
45-
right: 3em;
46-
bottom: 20px;
50+
border: 1px solid var(--border-color-unhovered);
51+
right: 1em;
52+
bottom: 15px;
4753
position: absolute;
48-
background-color: rgba(255, 255, 255, 0.7);
49-
box-shadow: 0 0 5px #bbb;
54+
background-color: var(--semi-transparent-bg-color);
55+
box-shadow: var(--standard-box-shadow);
5056
box-sizing: border-box;
57+
border-radius: var(--standard-border-radius);
5158
}
5259

5360
.scale-control > div {
@@ -61,9 +68,10 @@ body {
6168

6269
.source-popup {
6370
font-size: 1.25em;
64-
box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
65-
background-color: white;
66-
border-radius: 12px;
71+
box-shadow: var(--standard-box-shadow);
72+
border: 1px solid var(--border-color-unhovered);
73+
background-color: var(--standard-bg-color);
74+
border-radius: var(--standard-border-radius);
6775
border-top-left-radius: 0;
6876
padding: 2px 15px;
6977
}
@@ -86,12 +94,12 @@ body {
8694

8795
.ol-popup {
8896
position: absolute;
89-
background-color: white;
90-
padding: 10px;
91-
border-radius: 6px;
97+
background-color: var(--standard-bg-color);
98+
padding: 4px 8px;
99+
border-radius: var(--standard-border-radius);
92100
border-top-left-radius: 0;
93-
border: 1px solid #ccc;
94-
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
101+
border: 1px solid var(--border-color-unhovered);
102+
box-shadow: var(--standard-box-shadow);
95103
left: 5px;
96104
top: 2px;
97105
text-wrap: nowrap;
@@ -110,10 +118,10 @@ body {
110118
}
111119

112120
.map-btn {
113-
background-color: white;
121+
background-color: var(--standard-bg-color);
114122
color: #666666;
115-
border: 1px solid rgba(0, 0, 0, 0.2);
116-
border-radius: 4px;
123+
border: 1px solid var(--border-color-unhovered);
124+
border-radius: var(--standard-border-radius);
117125
display: flex;
118126
align-items: center;
119127
padding: 2px;
@@ -125,7 +133,7 @@ body {
125133
}
126134

127135
.map-btn:hover:not(:disabled) {
128-
border-color: black;
136+
border-color: var(--border-color-hovered);
129137
color: black;
130138
}
131139

0 commit comments

Comments
 (0)