From e1a5dc67004e0b228cdf93acc2af5b5647f5c218 Mon Sep 17 00:00:00 2001 From: Filip Barl Date: Wed, 21 Mar 2018 11:47:25 +0100 Subject: [PATCH] Linked all non-rgba colors. --- client/app/styles/_base.scss | 70 +++++++++++++++++----------------- client/app/styles/_colors.scss | 12 ++++++ 2 files changed, 47 insertions(+), 35 deletions(-) diff --git a/client/app/styles/_base.scss b/client/app/styles/_base.scss index add723e9a..d6d0861d7 100644 --- a/client/app/styles/_base.scss +++ b/client/app/styles/_base.scss @@ -15,8 +15,8 @@ a { .browsehappy { margin: 0.2em 0; - background: #ccc; - color: #000; + background: $color-silver; + color: $color-black; padding: 0.2em 0; } @@ -76,7 +76,7 @@ a { .overlay { @extend .hideable; - background-color: white; + background-color: $color-white; position: absolute; width: 100%; height: 100%; @@ -267,9 +267,9 @@ a { .tooltip { display: none; - background-color: black; + background-color: $color-black; position: absolute; - color: white; + color: $color-white; text-align: center; line-height: 22px; border-radius: 3px; @@ -295,7 +295,7 @@ a { width: 0; position: absolute; border-color: transparent; - border-top-color: black; + border-top-color: $color-black; margin-left: -6px; } } @@ -573,7 +573,7 @@ a { .highlight-shadow { fill: none; - stroke: white; + stroke: $color-white; stroke-width: 0.7; stroke-opacity: $node-highlight-shadow-opacity; } @@ -585,7 +585,7 @@ a { .metric-fill { stroke: none; - fill: #A0BE7E; + fill: $color-olivine; fill-opacity: 0.7; } @@ -677,7 +677,7 @@ a { margin-bottom: 12px; padding-bottom: 2px; border-radius: 2px; - background-color: #fff; + background-color: $color-white; @extend .shadow-2; // keep node-details above the terminal. z-index: 2; @@ -742,7 +742,7 @@ a { } &-label { - color: white; + color: $color-white; margin: 0; width: 348px; padding-top: 0; @@ -1139,7 +1139,7 @@ a { a { &:hover { - background-color: #f1f1f6; + background-color: $color-athens-gray; cursor: pointer; } } @@ -1189,7 +1189,7 @@ a { &-layer-topology { background-color: rgba(#eee, 0.95); - border: 1px solid #ccc; + border: 1px solid $color-silver; color: $text-tertiary-color; font-size: 16px; font-weight: bold; @@ -1260,8 +1260,8 @@ a { &-wrapper { width: 100%; height: 100%; - border: 0px solid #000000; - color: #f0f0f0; + border: 0px solid $color-black; + color: $color-gallery; } &-header { @@ -1318,7 +1318,7 @@ a { bottom: 0; left: 0; right: 0; - background-color: black; + background-color: $color-black; padding: 8px; border-radius: 0 0 0 4px; @@ -1355,8 +1355,8 @@ a { } &-cursor { - color: #000; - background: #f0f0f0; + color: $color-black; + background: $color-gallery; } } @@ -1453,7 +1453,7 @@ a { .fa { margin-left: 4px; - color: darkred; + color: $color-red-berry; } &-wrapper { @@ -1621,7 +1621,7 @@ a { } .sidebar-gridmode { - background-color: #e9e9f1; + background-color: $color-athens-gray-dark; border-color: $background-darker-color; opacity: 0.9; } @@ -1686,7 +1686,7 @@ a { &-input { overflow: hidden; - background: #fff; + background: $color-white; position: relative; z-index: 1; display: flex; @@ -1789,7 +1789,7 @@ a { .help-panel { z-index: 2048; - background-color: white; + background-color: $color-white; @extend .shadow-2; display: flex; position: relative; @@ -1807,7 +1807,7 @@ a { &-header { background-color: $color-weaveblue; padding: 12px 24px; - color: white; + color: $color-white; h2 { margin: 0; @@ -1826,7 +1826,7 @@ a { padding: 4px 5px; margin-left: 2px; font-size: 110%; - color: #8383ac; + color: $color-lavender; cursor: pointer; border: 1px solid rgba(131, 131, 172, 0); border-radius: 10%; @@ -1848,7 +1848,7 @@ a { text-transform: uppercase; line-height: 150%; font-size: 125%; - color: #8383ac; + color: $color-lavender; padding: 4px 0; border-bottom: 1px solid rgba(131, 131, 172, 0.1); } @@ -1856,7 +1856,7 @@ a { h3 { text-transform: uppercase; font-size: 90%; - color: #8383ac; + color: $color-lavender; padding: 4px 0; } @@ -1874,13 +1874,13 @@ a { padding: 3px 5px; font-size: 11px; line-height: 10px; - color: #555; + color: $color-dim-gray; vertical-align: middle; - background-color: #fcfcfc; - border: solid 1px #ccc; - border-bottom-color: #bbb; + background-color: $color-alabaster; + border: solid 1px $color-silver; + border-bottom-color: $color-gray; border-radius: 3px; - box-shadow: inset 0 -1px 0 #bbb; + box-shadow: inset 0 -1px 0 $color-gray; } div.key { width: 60px; @@ -1919,7 +1919,7 @@ a { &-current-topology { text-transform: uppercase; - color: #8383ac; + color: $color-lavender; } &-fields { @@ -1971,7 +1971,7 @@ a { .debug-panel { @extend .shadow-2; - background-color: #fff; + background-color: $color-white; top: 80px; position: absolute; padding: 10px; @@ -2058,7 +2058,7 @@ a { // because we want consistent behaviour between the // visual and row locking logic that happens on hover. tbody tr.selected, tbody tr.focused { - background-color: #d7ecf5; + background-color: $color-link-water; border: 1px solid $color-weaveblue; } @@ -2070,7 +2070,7 @@ a { .scroll-body { table { - border-bottom: 1px solid #ccc; + border-bottom: 1px solid $color-silver; } thead { @@ -2096,7 +2096,7 @@ a { thead { box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.16); - border-bottom: 1px solid #aaa; + border-bottom: 1px solid $color-gray; } tbody { diff --git a/client/app/styles/_colors.scss b/client/app/styles/_colors.scss index 3cda958f6..a0fb32cbf 100644 --- a/client/app/styles/_colors.scss +++ b/client/app/styles/_colors.scss @@ -6,3 +6,15 @@ $color-kimberly-dark: #656597; $color-weaveblue: #00d2ff; $color-primary-charcoal: #32324b; $color-japanese-laurel: #008000; +$color-silver: #ccc; +$color-lavender: #8383ac; +$color-gray: #aaa; +$color-gallery: #eee; +$color-athens-gray: #eeeef4; +$color-alabaster: #fcfcfc; +$color-dim-gray: #666; +/* New theme colors */ +$color-athens-gray-dark: #e9e9f1; +$color-red-berry: #8b0000; +$color-olivine: #a0be7e; +$color-link-water: #d7ecf5;