From 4fe24111c6eafc58927fcca9d8c46a5b92cc4078 Mon Sep 17 00:00:00 2001 From: Ashley Cai Date: Sat, 10 Jul 2021 00:17:09 -0700 Subject: Standardizing Colors, changing global CSS variables --- src/client/views/collections/CollectionMenu.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'src/client/views/collections/CollectionMenu.scss') diff --git a/src/client/views/collections/CollectionMenu.scss b/src/client/views/collections/CollectionMenu.scss index dc5231a3a..328d7c081 100644 --- a/src/client/views/collections/CollectionMenu.scss +++ b/src/client/views/collections/CollectionMenu.scss @@ -1,4 +1,4 @@ -@import "../globalCssVariables"; +@import "../global/globalCssVariables"; .collectionMenu-cont { @@ -407,7 +407,7 @@ } .switchToText { - color: $main-accent; + color: $medium-gray; } .switchToText:hover { @@ -534,7 +534,7 @@ .collectionSchemaViewChrome-togglerButton { width: 47px; height: 30px; - background-color: $light-color-secondary; + background-color: $light-gray; // position: absolute; transition: all 0.5s ease; // top: 3px; -- cgit v1.2.3-70-g09d2 From 1a1fc27a66c95c947dc8d2a812484f37586133cd Mon Sep 17 00:00:00 2001 From: Ashley Cai Date: Thu, 15 Jul 2021 12:37:31 -0700 Subject: Starting Color consistency --- src/client/views/AntimodeMenu.scss | 2 +- src/client/views/ContextMenu.scss | 2 +- src/client/views/DocumentButtonBar.scss | 4 +- src/client/views/DocumentDecorations.scss | 8 +-- src/client/views/MainView.scss | 58 +++++++++++----------- src/client/views/PropertiesButtons.scss | 6 +-- src/client/views/StyleProvider.tsx | 31 ++++++------ src/client/views/_nodeModuleOverrides.scss | 2 +- src/client/views/animationtimeline/Timeline.scss | 2 +- .../views/animationtimeline/TimelineMenu.scss | 4 +- src/client/views/animationtimeline/Track.scss | 2 +- .../views/collections/CollectionDockingView.scss | 14 +++--- .../views/collections/CollectionLinearView.scss | 4 +- src/client/views/collections/CollectionMenu.scss | 2 +- .../views/collections/CollectionStackingView.scss | 6 +-- .../views/collections/CollectionStackingView.tsx | 2 +- src/client/views/global/globalCssVariables.scss | 18 ++++--- src/client/views/global/globalEnums.tsx | 17 ++++--- src/client/views/linking/LinkEditor.scss | 2 +- src/client/views/linking/LinkMenuItem.scss | 2 +- src/client/views/nodes/FontIconBox.scss | 13 +++-- src/client/views/search/CheckBox.scss | 2 +- src/client/views/search/IconButton.scss | 2 +- src/client/views/search/IconButton.tsx | 2 +- src/client/views/search/SearchBox.scss | 4 +- src/client/views/search/SelectorContextMenu.scss | 4 +- 26 files changed, 111 insertions(+), 104 deletions(-) (limited to 'src/client/views/collections/CollectionMenu.scss') diff --git a/src/client/views/AntimodeMenu.scss b/src/client/views/AntimodeMenu.scss index 8670b1747..2bac03af4 100644 --- a/src/client/views/AntimodeMenu.scss +++ b/src/client/views/AntimodeMenu.scss @@ -5,7 +5,7 @@ position: absolute; z-index: 10001; height: $antimodemenu-height; - background: #323232; + background: $dark-gray; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25); // border-radius: 0px 6px 6px 6px; z-index: 1001; diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss index 2590e34c6..795529780 100644 --- a/src/client/views/ContextMenu.scss +++ b/src/client/views/ContextMenu.scss @@ -137,7 +137,7 @@ .contextMenu-item:hover { transition: all 0.1s ease; - background: $lighter-alt-accent; + background: $light-blue; } .contextMenu-description { diff --git a/src/client/views/DocumentButtonBar.scss b/src/client/views/DocumentButtonBar.scss index e816c52a3..2a0b494f5 100644 --- a/src/client/views/DocumentButtonBar.scss +++ b/src/client/views/DocumentButtonBar.scss @@ -25,7 +25,7 @@ $linkGap : 3px; border-radius: 50%; opacity: 0.9; pointer-events: auto; - background-color: $dark-color; + background-color: $dark-gray; color: $white; text-transform: uppercase; letter-spacing: 2px; @@ -64,7 +64,7 @@ $linkGap : 3px; text-align: center; border-radius: 50%; pointer-events: auto; - background-color: $dark-color; + background-color: $dark-gray; border: none; transition: 0.2s ease all; diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss index 47a8326bb..1715f35e7 100644 --- a/src/client/views/DocumentDecorations.scss +++ b/src/client/views/DocumentDecorations.scss @@ -286,8 +286,8 @@ $linkGap : 3px; text-align: center; border-radius: 50%; pointer-events: auto; - color: $dark-color; - border: $dark-color 1px solid; + color: $dark-gray; + border: $dark-gray 1px solid; } .linkButton-linker:hover { @@ -302,7 +302,7 @@ $linkGap : 3px; border-radius: 50%; opacity: 0.9; pointer-events: auto; - background-color: $dark-color; + background-color: $dark-gray; color: $white; text-transform: uppercase; letter-spacing: 2px; @@ -343,7 +343,7 @@ $linkGap : 3px; border-radius: 50%; opacity: 0.9; font-size: 14; - background-color: $dark-color; + background-color: $dark-gray; color: $white; text-align: center; cursor: pointer; diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss index d76458460..07ca0257c 100644 --- a/src/client/views/MainView.scss +++ b/src/client/views/MainView.scss @@ -56,50 +56,50 @@ touch-action: none; .searchBox-container { - background: lightgray; + background: $light-gray; } } .mainView-container { - color: black; + color: $dark-gray; .lm_title { - background: #cacaca; - color: black; + background: $light-gray; + color: $dark-gray; } } .mainView-container-dark { - color: lightgray; + color: $light-gray; .lm_goldenlayout { - background: dimgray; + background: $medium-gray; } .lm_title { - background: black; + background: $dark-gray; color: unset; } .marquee { - border-color: white; + border-color: $white; } #search-input { - background: lightgray; + background: $light-gray; } .searchBox-container { - background: rgb(45, 45, 45); + background: $dark-gray; } .contextMenu-cont, .contextMenu-item { - background: dimGray; + background: $medium-gray; } .contextMenu-item:hover { - background: gray; + background: $medium-gray; } } @@ -113,7 +113,7 @@ .mainView-propertiesDragger { //background-color: rgb(140, 139, 139); - background-color: lightgrey; + background-color: $light-gray; height: 55px; width: 17px; position: absolute; @@ -163,10 +163,10 @@ flex-direction: column; position: relative; height: 100%; - background: dimgray; + background: $medium-gray; .documentView-node-topmost { - background: lightgrey; + background: $light-gray; } } @@ -174,32 +174,32 @@ right: 0; position: absolute; z-index: 2; - background-color: rgb(159, 159, 159); + background-color: $medium-gray; .editable-title { - background-color: lightgrey; + background-color: $light-gray; } } } .mainView-libraryHandle { - background-color: lightgrey; + background-color: $light-gray; } .mainView-innerContent-dark { .propertiesView { background-color: #252525; input { - background-color: dimgrey; + background-color: $medium-gray; } .propertiesView-sharingTable { - background-color: dimgrey; + background-color: $medium-gray; } .editable-title { - background-color: dimgrey; + background-color: $medium-gray; } .propertiesView-field { - background-color: dimgrey; + background-color: $medium-gray; } } .mainView-propertiesDragger, @@ -209,17 +209,17 @@ } .mainView-container-dark { .contextMenu-cont { - background: dimgrey; - color: white; + background: $medium-gray; + color: $white; input::placeholder { - color:white; + color:$white; } } } .mainView-menuPanel { min-width: var(--menuPanelWidth); - background-color: #121721; + background-color: $dark-gray; .collectionStackingView { scrollbar-width: none; @@ -233,13 +233,13 @@ padding: 7px; padding-left: 7px; width: 100%; - background: black; + background: $dark-gray; .mainView-menuPanel-button-wrap { width: 45px; /* padding: 5px; */ touch-action: none; - background: black; + background: $dark-gray; transform-origin: top left; /* margin-bottom: 5px; */ margin-top: 5px; @@ -247,7 +247,7 @@ border-radius: 8px; &:hover { - background: rgb(61, 61, 61); + background: $black; cursor: pointer; } } diff --git a/src/client/views/PropertiesButtons.scss b/src/client/views/PropertiesButtons.scss index 4ef7763be..484522bc7 100644 --- a/src/client/views/PropertiesButtons.scss +++ b/src/client/views/PropertiesButtons.scss @@ -24,7 +24,7 @@ $linkGap : 3px; width: 29px; border-radius: 6px; pointer-events: auto; - background-color: $dark-color; + background-color: $dark-gray; color: #fcfbf7; text-transform: uppercase; letter-spacing: 2px; @@ -45,11 +45,11 @@ $linkGap : 3px; } .propertiesButtons-linkButton-empty.toggle-on { background-color: white; - color: $dark-color; + color: $dark-gray; } .propertiesButtons-linkButton-empty.toggle-hover { background-color: gray; - color: $dark-color; + color: $dark-gray; } .propertiesButtons-linkButton-empty.toggle-off { color: white; diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx index 9e61351c4..1bf47f6ac 100644 --- a/src/client/views/StyleProvider.tsx +++ b/src/client/views/StyleProvider.tsx @@ -1,4 +1,5 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { Colors } from './global/globalEnums'; import { IconProp } from '@fortawesome/fontawesome-svg-core'; import 'golden-layout/src/css/goldenlayout-base.css'; import 'golden-layout/src/css/goldenlayout-dark-theme.css'; @@ -97,14 +98,14 @@ export function DefaultStyleProvider(doc: Opt, props: Opt = StrCast(doc?.[fieldKey + "color"], StrCast(doc?._color)); if (docColor) return docColor; - const backColor = backgroundCol();// || (darkScheme() ? "black" : "white"); + const backColor = backgroundCol(); if (!backColor) return undefined; const nonAlphaColor = backColor.startsWith("#") ? (backColor as string).substring(0, 7) : backColor.startsWith("rgba") ? backColor.replace(/,.[^,]*\)/, ")").replace("rgba", "rgb") : backColor const col = Color(nonAlphaColor).rgb(); const colsum = (col.red() + col.green() + col.blue()); - if (colsum / col.alpha() > 400 || col.alpha() < 0.25) return "black"; - return "white"; + if (colsum / col.alpha() > 400 || col.alpha() < 0.25) return Colors.DARK_GRAY; + return Colors.WHITE; case StyleProp.Hidden: return BoolCast(doc?._hidden); case StyleProp.BorderRounding: return StrCast(doc?.[fieldKey + "borderRounding"]); case StyleProp.TitleHeight: return 15; @@ -114,30 +115,30 @@ export function DefaultStyleProvider(doc: Opt, props: Opt = StrCast(doc?.[fieldKey + "backgroundColor"], StrCast(doc?._backgroundColor, isCaption ? "rgba(0,0,0,0.4)" : "")); - if (MainView.Instance.LastButton === doc) return darkScheme() ? "dimgrey" : "lightgrey"; + if (MainView.Instance.LastButton === doc) return darkScheme() ? Colors.MEDIUM_GRAY : Colors.LIGHT_GRAY; switch (doc?.type) { case DocumentType.PRESELEMENT: docColor = docColor || (darkScheme() ? "" : ""); break; - case DocumentType.PRES: docColor = docColor || (darkScheme() ? "#3e3e3e" : "white"); break; - case DocumentType.FONTICON: docColor = docColor || "black"; break; - case DocumentType.RTF: docColor = docColor || (darkScheme() ? "#2d2d2d" : "#f1efeb"); break; - case DocumentType.FILTER: docColor = docColor || (darkScheme() ? "#2d2d2d" : "rgba(105, 105, 105, 0.432)"); break; + case DocumentType.PRES: docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : Colors.WHITE); break; + case DocumentType.FONTICON: docColor = docColor || Colors.DARK_GRAY; break; + case DocumentType.RTF: docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : Colors.LIGHT_GRAY); break; + case DocumentType.FILTER: docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : "rgba(105, 105, 105, 0.432)"); break; case DocumentType.INK: docColor = doc?.isInkMask ? "rgba(0,0,0,0.7)" : undefined; break; case DocumentType.SLIDER: break; case DocumentType.EQUATION: docColor = docColor || "transparent"; break; case DocumentType.LABEL: docColor = docColor || (doc.annotationOn !== undefined ? "rgba(128, 128, 128, 0.18)" : undefined); break; - case DocumentType.BUTTON: docColor = docColor || (darkScheme() ? "#2d2d2d" : "lightgray"); break; - case DocumentType.LINKANCHOR: docColor = isAnchor ? "lightblue" : "transparent"; break; + case DocumentType.BUTTON: docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : Colors.LIGHT_GRAY); break; + case DocumentType.LINKANCHOR: docColor = isAnchor ? Colors.LIGHT_BLUE : "transparent"; break; case DocumentType.LINK: docColor = docColor || "transparent"; break; case DocumentType.IMG: case DocumentType.WEB: case DocumentType.PDF: case DocumentType.SCREENSHOT: - case DocumentType.VID: docColor = docColor || (darkScheme() ? "#2d2d2d" : "lightgray"); break; + case DocumentType.VID: docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : Colors.LIGHT_GRAY); break; case DocumentType.COL: if (StrCast(Doc.LayoutField(doc)).includes("SliderBox")) break; - docColor = docColor ? docColor : + docColor = docColor ? Colors.DARK_GRAY : doc?._isGroup ? "#00000004" : // very faint highlight to show bounds of group - (Doc.IsSystem(doc) ? (darkScheme() ? "rgb(62,62,62)" : "lightgrey") : // system docs (seen in treeView) get a grayish background + (Doc.IsSystem(doc) ? (darkScheme() ? Colors.DARK_GRAY : Colors.LIGHT_GRAY) : // system docs (seen in treeView) get a grayish background isBackground() ? "cyan" : // ?? is there a good default for a background collection doc.annotationOn ? "#00000015" : // faint interior for collections on PDFs, images, etc StrCast((props?.renderDepth || 0) > 0 ? @@ -145,7 +146,7 @@ export function DefaultStyleProvider(doc: Opt, props: Opt, props: Optspan { - background: $dark-color; + background: $dark-gray; color: $white; border-radius: 18px; margin-right: 6px; @@ -63,7 +63,7 @@ >label { margin-top: "auto"; margin-bottom: "auto"; - background: $dark-color; + background: $dark-gray; color: $white; display: inline-block; border-radius: 18px; diff --git a/src/client/views/collections/CollectionMenu.scss b/src/client/views/collections/CollectionMenu.scss index 328d7c081..7e507d6b5 100644 --- a/src/client/views/collections/CollectionMenu.scss +++ b/src/client/views/collections/CollectionMenu.scss @@ -411,7 +411,7 @@ } .switchToText:hover { - color: $dark-color; + color: $dark-gray; } } diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss index f103d9581..4b123c8b6 100644 --- a/src/client/views/collections/CollectionStackingView.scss +++ b/src/client/views/collections/CollectionStackingView.scss @@ -96,7 +96,7 @@ height: 2vw; width: 100%; font-family: $sans-serif; - background: $dark-color; + background: $dark-gray; color: $white; } @@ -184,7 +184,7 @@ // overflow: hidden; overflow is visible so the color menu isn't hidden -ftong .editableView-input { - color: $dark-color; + color: $dark-gray; } .editableView-input:hover, @@ -205,7 +205,7 @@ display: flex; align-items: center; justify-content: center; - color: $dark-color; + color: $dark-gray; .editableView-container-editing-oneLine, .editableView-container-editing { diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 30f8e0112..7aa8dfd56 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -480,7 +480,7 @@ export class CollectionStackingView extends CollectionSubView{ hoverStyle = { opacity: 1, backgroundColor: "rgb(128, 128, 128)" - //backgroundColor: "rgb(178, 206, 248)" //$darker-alt-accent + //backgroundColor: "rgb(178, 206, 248)" //$medium-blue }; render() { diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss index 8d6bc86cb..6a2fe6f19 100644 --- a/src/client/views/search/SearchBox.scss +++ b/src/client/views/search/SearchBox.scss @@ -20,7 +20,7 @@ display: flex; justify-content: center; align-items: center; - background-color: $dark-color; + background-color: $dark-gray; .searchBox-lozenges { position: absolute; @@ -86,7 +86,7 @@ &.searchBox-input { margin:5px; border-radius:20px; - border:$dark-color; + border:$dark-gray; display: block; width: 130px; -webkit-transition: width 0.4s; diff --git a/src/client/views/search/SelectorContextMenu.scss b/src/client/views/search/SelectorContextMenu.scss index 438b6a0c2..a114f679c 100644 --- a/src/client/views/search/SelectorContextMenu.scss +++ b/src/client/views/search/SelectorContextMenu.scss @@ -1,7 +1,7 @@ @import "../global/globalCssVariables"; .parents { - background: $lighter-alt-accent; + background: $light-blue; padding: 10px; // width: 300px; @@ -10,7 +10,7 @@ } .collection { - border-color: $darker-alt-accent; + border-color: $medium-blue; border-bottom-style: solid; } } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 98893e0944f7e04455a30fa128b1c91954c8a16d Mon Sep 17 00:00:00 2001 From: Ashley Cai Date: Tue, 20 Jul 2021 15:12:24 -0700 Subject: Padding and font size --- src/client/views/collections/CollectionMenu.scss | 4 ++-- src/client/views/global/globalCssVariables.scss | 19 ++++++++++++++----- src/client/views/global/globalEnums.tsx | 18 ++++++++++++++++-- 3 files changed, 32 insertions(+), 9 deletions(-) (limited to 'src/client/views/collections/CollectionMenu.scss') diff --git a/src/client/views/collections/CollectionMenu.scss b/src/client/views/collections/CollectionMenu.scss index 7e507d6b5..1a9a6d5d9 100644 --- a/src/client/views/collections/CollectionMenu.scss +++ b/src/client/views/collections/CollectionMenu.scss @@ -425,7 +425,7 @@ padding: 12px 10px 11px 10px; border: 0px; color: black; - font-size: 10px; + font-size: 9px; letter-spacing: 2px; outline-color: black; background: rgb(238, 238, 238); @@ -508,7 +508,7 @@ .collectionSchemaViewChrome-cont { display: flex; - font-size: 10.5px; + font-size: 9px; .collectionSchemaViewChrome-toggle { display: flex; diff --git a/src/client/views/global/globalCssVariables.scss b/src/client/views/global/globalCssVariables.scss index 3a36377f7..ead5e166e 100644 --- a/src/client/views/global/globalCssVariables.scss +++ b/src/client/views/global/globalCssVariables.scss @@ -8,21 +8,30 @@ $black: #000000; $light-blue: #BDDDF5; $medium-blue: #4476F7; -$pink: "#E0217D"; -$yellow: "#F5D747"; +$pink: #E0217D; +$yellow: #F5D747; $drop-shadow: "#32323215"; +//padding +$minimum-padding: 4px; +$medium-padding: 16px; +$large-padding: 32px; + +//icon sizes +$icon-size: 28px; + $antimodemenu-height: 36px; // fonts -$sans-serif: "Noto Sans", -sans-serif; +$sans-serif: "Noto Sans", sans-serif; +$large-header: 16px; +$body-text: 12px; +$small-text: 9px; // $sans-serif: "Roboto Slab", sans-serif; // misc values $border-radius: 0.3em; -// $search-thumnail-size: 130; // dragged items diff --git a/src/client/views/global/globalEnums.tsx b/src/client/views/global/globalEnums.tsx index 80558e1c1..1e0381c33 100644 --- a/src/client/views/global/globalEnums.tsx +++ b/src/client/views/global/globalEnums.tsx @@ -7,14 +7,28 @@ export enum Colors { MEDIUM_BLUE = "#4476F7", LIGHT_BLUE = "#BDDDF5", PINK = "#E0217D", - YELLOW = "#F5D747" + YELLOW = "#F5D747", + DROP_SHADOW = "#32323215", } export enum FontSizes { - LargeHeader = "16px" + //Bolded + LARGE_HEADER = "16px", + //Bolded or unbolded + BODY_TEXT = "12px", + + //Bolded + SMALL_TEXT = "9px", } export enum Padding { + MINIMUM_PADDING = "4px", + SMALL_PADDING = "8px", + MEDIUM_PADDING = "16px", + LARGE_PADDING = "32px", +} +export enum IconSizes { + ICON_SIZE = "28px", } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From af33c5a46f0680dad41532a86557193bf8af3b08 Mon Sep 17 00:00:00 2001 From: Ashley Cai Date: Tue, 20 Jul 2021 15:21:54 -0700 Subject: standardizing edits --- src/client/views/collections/CollectionMenu.scss | 135 +++++++++++------------ 1 file changed, 67 insertions(+), 68 deletions(-) (limited to 'src/client/views/collections/CollectionMenu.scss') diff --git a/src/client/views/collections/CollectionMenu.scss b/src/client/views/collections/CollectionMenu.scss index 1a9a6d5d9..c0fc774d3 100644 --- a/src/client/views/collections/CollectionMenu.scss +++ b/src/client/views/collections/CollectionMenu.scss @@ -1,6 +1,5 @@ @import "../global/globalCssVariables"; - .collectionMenu-cont { position: relative; display: inline-flex; @@ -8,8 +7,8 @@ opacity: 0.9; z-index: 901; transition: top .5s; - background: #323232; - color: white; + background: $dark-gray; + color: $white; transform-origin: top left; top: 0; width: 100%; @@ -18,7 +17,7 @@ border-radius: 100%; width: 18px; height: 18px; - border: solid 1px #f5f5f5; + border: solid 1px $white; display: flex; align-items: center; justify-content: center; @@ -28,7 +27,7 @@ border-radius: 100%; width: 70%; height: 70%; - background: white; + background: $white; } .collectionMenu { @@ -43,7 +42,7 @@ margin-left: 3px; margin-right: 3px; width: 1.5px; - background-color: #656060; + background-color: $medium-gray; } .collectionViewBaseChrome { @@ -51,11 +50,11 @@ align-items: center; .collectionViewBaseChrome-viewPicker { - font-size: 75%; - outline-color: black; - color: white; + font-size: $small-text; + outline-color: $black; + color: $white; border: none; - background: #323232; + background: $dark-gray; } .collectionViewBaseChrome-viewPicker:focus { @@ -64,16 +63,16 @@ } .collectionViewBaseChrome-viewPicker:active { - outline-color: black; + outline-color: $black; } .collectionViewBaseChrome-button { - font-size: 75%; + font-size: $small-text; text-transform: uppercase; letter-spacing: 2px; - background: rgb(238, 238, 238); - color: purple; - outline-color: black; + background: $white; + color: $pink; + outline-color: $black; border: none; padding: 12px 10px 11px 10px; margin-left: 10px; @@ -82,11 +81,11 @@ .collectionViewBaseChrome-cmdPicker { margin-left: 3px; margin-right: 0px; - font-size: 75%; + font-size: $small-text; text-transform: capitalize; - color: white; + color: $white; border: none; - background: #323232; + background: $dark-gray; } .collectionViewBaseChrome-cmdPicker:focus { @@ -105,7 +104,7 @@ overflow: hidden; .commandEntry-drop { - color: white; + color: $white; width: 30px; margin-top: auto; margin-bottom: auto; @@ -113,11 +112,11 @@ } .commandEntry-outerDiv:hover{ - background-color: rgba(0,0,0,0.2); + background-color: $drop-shadow; .collectionViewBaseChrome-viewPicker, .collectionViewBaseChrome-cmdPicker{ - background: rgb(41,41,41); + background: $dark-gray; } } @@ -142,7 +141,7 @@ height: 100%; display: flex; background: transparent; - color: grey; + color: $medium-gray; justify-content: center; } @@ -150,31 +149,31 @@ margin-left: 5px; display: grid; border: none; - border-right: solid gray 1px; + border-right: solid $medium-gray 1px; .collectionViewBaseChrome-filterIcon { position: relative; display: flex; margin: auto; - background: #323232; - color: white; + background: $dark-gray; + color: $white; width: 30px; height: 30px; align-items: center; justify-content: center; border: none; - border-right: solid gray 1px; + border-right: solid $medium-gray 1px; } .collectionViewBaseChrome-viewSpecsInput { padding: 12px 10px 11px 10px; border: 0px; - color: grey; + color: $medium-gray; text-align: center; letter-spacing: 2px; - outline-color: black; - font-size: 75%; - background: rgb(238, 238, 238); + outline-color: $black; + font-size: $small-text; + background: $white; height: 100%; width: 75px; } @@ -187,8 +186,8 @@ z-index: 100; display: flex; flex-direction: column; - background: rgb(238, 238, 238); - box-shadow: grey 2px 2px 4px; + background: $white; + box-shadow: $medium-gray 2px 2px 4px; .qs-datepicker { left: unset; @@ -204,13 +203,13 @@ .collectionViewBaseChrome-viewSpecsMenu-rowLeft, .collectionViewBaseChrome-viewSpecsMenu-rowMiddle, .collectionViewBaseChrome-viewSpecsMenu-rowRight { - font-size: 75%; + font-size: $small-text; letter-spacing: 2px; - color: grey; + color: $medium-gray; margin-left: 10px; padding: 5px; border: none; - outline-color: black; + outline-color: $black; } } @@ -236,19 +235,19 @@ margin-left: 10; .collectionGridViewChrome-viewPicker { - font-size: 75%; + font-size: $small-text; //text-transform: uppercase; //letter-spacing: 2px; - background: #121721; - color: white; - outline-color: black; - color: white; + background: $dark-gray; + color: $white; + outline-color: $black; + color: $white; border: none; - border-right: solid gray 1px; + border-right: solid $medium-gray 1px; } .collectionGridViewChrome-viewPicker:active { - outline-color: black; + outline-color: $black; } .grid-control { @@ -268,11 +267,11 @@ .collectionGridViewChrome-entryBox { width: 50%; - color: black; + color: $black; } .collectionGridViewChrome-columnButton { - color: black; + color: $black; } } } @@ -302,7 +301,7 @@ align-items: center; display: flex; grid-auto-columns: auto; - font-size: 75%; + font-size: $small-text; letter-spacing: 2px; .collectionStackingViewChrome-pivotField-label, @@ -311,7 +310,7 @@ grid-column: 1; margin-right: 7px; user-select: none; - font-family: 'Roboto'; + font-family: $sans-serif; letter-spacing: normal; } @@ -329,13 +328,13 @@ } .collectionStackingViewChrome-sortIcon:hover { - background-color: rgba(0,0,0,0.2); + background-color: $drop-shadow; } .collectionStackingViewChrome-pivotField, .collectionTreeViewChrome-pivotField, .collection3DCarouselViewChrome-scrollSpeed { - color: white; + color: $white; grid-column: 2; grid-row: 1; width: 90%; @@ -344,7 +343,7 @@ height: 80%; border-radius: 7px; align-items: center; - background: #eeeeee; + background: $white; .editable-view-input, input, @@ -352,16 +351,16 @@ .editableView-container-editing { margin: auto; border: 0px; - color: grey !important; + color: $light-gray !important; text-align: center; letter-spacing: 2px; - outline-color: black; + outline-color: $black; height: 100%; } .react-autosuggest__container { margin: 0; - color: grey; + color: $medium-gray; padding: 0px; } } @@ -424,11 +423,11 @@ .collectionMenu-urlInput { padding: 12px 10px 11px 10px; border: 0px; - color: black; - font-size: 9px; + color: $black; + font-size: $small-text; letter-spacing: 2px; - outline-color: black; - background: rgb(238, 238, 238); + outline-color: $black; + background: $white; width: 100%; min-width: 350px; margin-right: 10px; @@ -477,10 +476,10 @@ width: 20; height: 30; bottom: 0; - background: #323232; + background: $dark-gray; display: inline-flex; align-items: center; - color: white; + color: $white; } .backKeyframe { @@ -502,13 +501,13 @@ margin: auto; } - border-right: solid gray 1px; + border-right: solid $medium-gray 1px; } } .collectionSchemaViewChrome-cont { display: flex; - font-size: 9px; + font-size: $small-text; .collectionSchemaViewChrome-toggle { display: flex; @@ -527,7 +526,7 @@ .collectionSchemaViewChrome-toggler { width: 100px; height: 35px; - background-color: black; + background-color: $black; position: relative; } @@ -539,7 +538,7 @@ transition: all 0.5s ease; // top: 3px; margin-top: 3px; - color: gray; + color: $medium-gray; letter-spacing: 2px; text-transform: uppercase; display: flex; @@ -579,7 +578,7 @@ } .react-autosuggest__input { - border: 1px solid #aaa; + border: 1px solid $light-gray; border-radius: 4px; width: 100%; } @@ -603,11 +602,11 @@ overflow-y: auto; max-height: 400px; width: 180px; - border: 1px solid #aaa; - background-color: #fff; - font-family: Helvetica, sans-serif; + border: 1px solid $light-gray; + background-color: $white; + font-family: $sans-serif; font-weight: 300; - font-size: 16px; + font-size: $large-header; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; z-index: 2; @@ -625,5 +624,5 @@ } .react-autosuggest__suggestion--highlighted { - background-color: #ddd; + background-color: $light-gray; } \ No newline at end of file -- cgit v1.2.3-70-g09d2