Merge pull request #46 from simonsobs/rationalize-more-CSS

Rationalize more CSS attributes

Author: jernestmyers

src/components/ColorMapSlider.tsx

@@ -108,7 +108,7 @@ export function ColorMapSlider(props: ColorMapSlideProps) {
               display: 'flex',
               justifyContent: 'center',
               alignItems: 'center',
-              boxShadow: '0px 2px 6px #AAA',
+              boxShadow: '0 0 5px #bbb',
             }}
           >
             <div

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

@@ -11,10 +11,10 @@
 .cmap-values-container {
   display: flex;
   justify-content: center;
-  background-color: white;
-  box-shadow: 0px 2px 6px #aaa;
-  border: 2px solid rgba(0, 0, 0, 0.2);
-  border-radius: 4px;
+  background-color: var(--standard-bg-color);
+  box-shadow: var(--standard-box-shadow);
+  border: 1px solid var(--border-color-unhovered);
+  border-radius: var(--standard-border-radius);
   padding: 2px 0;
 }
 

src/components/styles/coordinates-display.css

@@ -1,13 +1,12 @@
 .coordinates-display {
   width: 250px;
   position: absolute;
-  border: 2px solid rgba(0, 0, 0, 0.2);
-  border-radius: 4px;
-  background-color: rgba(255, 255, 255, 0.7);
-  box-shadow: 0 0 5px #bbb;
-  padding: 5px 10px;
+  border: 1px solid var(--border-color-unhovered);
+  border-radius: var(--standard-border-radius);
+  background-color: var(--semi-transparent-bg-color);
+  box-shadow: var(--standard-box-shadow);
   z-index: 400;
-  opacity: 0.7;
+  opacity: 0.8;
   left: calc(50% - 150px);
   bottom: 15px;
   text-align: center;

src/components/styles/layer-selector.css

@@ -3,9 +3,9 @@
   top: 8px;
   right: 1em;
   z-index: 1000;
-  background-color: #fff;
-  border-radius: 4px;
-  border: 1px solid rgba(0, 0, 0, 0.2);
+  background-color: var(--standard-bg-color);
+  border-radius: var(--standard-border-radius);
+  border: 1px solid var(--border-color-unhovered);
 }
 
 .layer-selector-header {
@@ -24,15 +24,15 @@
   background: none;
   color: #666666;
   border: 1px solid white;
-  border-radius: 4px;
+  border-radius: var(--standard-border-radius);
   display: flex;
   align-items: center;
   padding: 2px;
   box-sizing: border-box;
 }
 
 .lock-menu-btn:hover {
-  border: 1px solid black;
+  border-color: var(--border-color-hovered);
   color: black;
 }
 

src/components/styles/toggle-switch.css

@@ -3,14 +3,14 @@
   left: 40px;
   top: 9px;
   z-index: 5000;
-  background-color: white;
-  border-radius: 4px;
+  background-color: var(--standard-bg-color);
+  border-radius: var(--standard-border-radius);
   padding: 3px;
-  border: 1px solid rgba(0, 0, 0, 0.2);
+  border: 1px solid var(--border-color-unhovered);
 }
 
 .toggle-container:hover:not(.disabled) {
-  border-color: black;
+  border-color: var(--border-color-hovered);
 }
 
 .toggle-container.disabled {
@@ -57,7 +57,7 @@
   width: 12px;
   left: 2px;
   bottom: 1px;
-  background-color: white;
+  background-color: var(--standard-bg-color);
   -webkit-transition: 0.4s;
   transition: 0.4s;
 }
@@ -66,10 +66,6 @@ input:checked + .label .slider {
   background-color: black;
 }
 
-input:focus + .label .slider {
-  box-shadow: 0 0 1px black;
-}
-
 input:checked + .label .slider:before {
   -webkit-transform: translateX(12px);
   -ms-transform: translateX(12px);
@@ -78,7 +74,7 @@ input:checked + .label .slider:before {
 
 .slider.round {
   border-radius: 34px;
-  border: 1px solid darkgray;
+  border: 1px solid var(--border-color-unhovered);
 }
 
 .slider.round:before {

src/index.css

@@ -15,6 +15,13 @@
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+
+  --border-color-unhovered: rgba(0, 0, 0, 0.2);
+  --border-color-hovered: black;
+  --standard-border-radius: 4px;
+  --semi-transparent-bg-color: rgba(255, 255, 255, 0.7);
+  --standard-bg-color: white;
+  --standard-box-shadow: 0 0 5px #bbb;
 }
 
 html,
@@ -40,14 +47,14 @@ body {
 
 .scale-control {
   font-size: 1.3em;
-  border: 2px solid rgba(0, 0, 0, 0.3);
-  border-top: none;
-  right: 3em;
-  bottom: 20px;
+  border: 1px solid var(--border-color-unhovered);
+  right: 1em;
+  bottom: 15px;
   position: absolute;
-  background-color: rgba(255, 255, 255, 0.7);
-  box-shadow: 0 0 5px #bbb;
+  background-color: var(--semi-transparent-bg-color);
+  box-shadow: var(--standard-box-shadow);
   box-sizing: border-box;
+  border-radius: var(--standard-border-radius);
 }
 
 .scale-control > div {
@@ -61,9 +68,10 @@ body {
 
 .source-popup {
   font-size: 1.25em;
-  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
-  background-color: white;
-  border-radius: 12px;
+  box-shadow: var(--standard-box-shadow);
+  border: 1px solid var(--border-color-unhovered);
+  background-color: var(--standard-bg-color);
+  border-radius: var(--standard-border-radius);
   border-top-left-radius: 0;
   padding: 2px 15px;
 }
@@ -86,12 +94,12 @@ body {
 
 .ol-popup {
   position: absolute;
-  background-color: white;
-  padding: 10px;
-  border-radius: 6px;
+  background-color: var(--standard-bg-color);
+  padding: 4px 8px;
+  border-radius: var(--standard-border-radius);
   border-top-left-radius: 0;
-  border: 1px solid #ccc;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+  border: 1px solid var(--border-color-unhovered);
+  box-shadow: var(--standard-box-shadow);
   left: 5px;
   top: 2px;
   text-wrap: nowrap;
@@ -110,10 +118,10 @@ body {
 }
 
 .map-btn {
-  background-color: white;
+  background-color: var(--standard-bg-color);
   color: #666666;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  border-radius: 4px;
+  border: 1px solid var(--border-color-unhovered);
+  border-radius: var(--standard-border-radius);
   display: flex;
   align-items: center;
   padding: 2px;
@@ -125,7 +133,7 @@ body {
 }
 
 .map-btn:hover:not(:disabled) {
-  border-color: black;
+  border-color: var(--border-color-hovered);
   color: black;
 }