diff options
| author | Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> | 2021-07-22 15:27:03 -0400 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-07-22 15:27:03 -0400 |
| commit | 2b2329a928772b3e0d45fca1e99ef29116c582f2 (patch) | |
| tree | a4486669d6850fa0137e15beb1abce4d933cfd7d /src | |
| parent | 491fb6fc41792b1dfe7e3f9210b07a6b8e1eb0a7 (diff) | |
| parent | b4ad8cc62c51648c41f4b0ea2816f9086ed5c711 (diff) | |
Merge pull request #20 from brown-dash/Ashley
CSS Changes and standardization guidelines
Diffstat (limited to 'src')
68 files changed, 458 insertions, 416 deletions
diff --git a/src/client/ClientRecommender.scss b/src/client/ClientRecommender.scss index 3f9102f15..178c7fdab 100644 --- a/src/client/ClientRecommender.scss +++ b/src/client/ClientRecommender.scss @@ -1,4 +1,4 @@ -// @import "/views/globalCssVariables.scss"; +// @import "/views/global/globalCssVariables.scss"; .space{ border: 1px dashed blue; diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 040571b10..c2cdf7f72 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -30,7 +30,7 @@ import { CollectionDockingView } from "../views/collections/CollectionDockingVie import { CollectionView, CollectionViewType } from "../views/collections/CollectionView"; import { ContextMenu } from "../views/ContextMenu"; import { ContextMenuProps } from "../views/ContextMenuItem"; -import { DFLT_IMAGE_NATIVE_DIM } from "../views/globalCssVariables.scss"; +import { DFLT_IMAGE_NATIVE_DIM } from "../views/global/globalCssVariables.scss"; import { ActiveArrowEnd, ActiveArrowStart, ActiveDash, ActiveFillColor, ActiveInkBezierApprox, ActiveInkColor, ActiveInkWidth, InkingStroke } from "../views/InkingStroke"; import { AudioBox } from "../views/nodes/AudioBox"; import { ColorBox } from "../views/nodes/ColorBox"; diff --git a/src/client/util/CaptureManager.scss b/src/client/util/CaptureManager.scss index 71539ee1e..a5024247e 100644 --- a/src/client/util/CaptureManager.scss +++ b/src/client/util/CaptureManager.scss @@ -1,4 +1,4 @@ -@import "../views/globalCssVariables"; +@import "../views/global/globalCssVariables"; .capture-interface { //background-color: whitesmoke !important; diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index 88bf6f36d..07b2b7dff 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -9,7 +9,7 @@ import { ScriptField } from "../../fields/ScriptField"; import { Cast, NumCast, ScriptCast, StrCast } from "../../fields/Types"; import { emptyFunction, returnTrue } from "../../Utils"; import { Docs, DocUtils } from "../documents/Documents"; -import * as globalCssVariables from "../views/globalCssVariables.scss"; +import * as globalCssVariables from "../views/global/globalCssVariables.scss"; import { UndoManager } from "./UndoManager"; import { SnappingManager } from "./SnappingManager"; import { DocumentView } from "../views/nodes/DocumentView"; diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss index d8342ea56..c9db94419 100644 --- a/src/client/util/SettingsManager.scss +++ b/src/client/util/SettingsManager.scss @@ -1,4 +1,4 @@ -@import "../views/globalCssVariables"; +@import "../views/global/globalCssVariables"; .settings-interface { //background-color: whitesmoke !important; @@ -264,7 +264,7 @@ //margin-top: 4px; &:hover { - background: $main-accent; + background: $medium-gray; } } diff --git a/src/client/views/AntimodeMenu.scss b/src/client/views/AntimodeMenu.scss index a275901be..2bac03af4 100644 --- a/src/client/views/AntimodeMenu.scss +++ b/src/client/views/AntimodeMenu.scss @@ -1,11 +1,11 @@ -@import "./globalCssVariables"; +@import "./global/globalCssVariables"; .antimodeMenu-cont { 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 b514de5f2..795529780 100644 --- a/src/client/views/ContextMenu.scss +++ b/src/client/views/ContextMenu.scss @@ -1,10 +1,10 @@ -@import "globalCssVariables"; +@import "global/globalCssVariables"; .contextMenu-cont { position: absolute; display: flex; z-index: $contextMenu-zindex; - box-shadow: $intermediate-color 0.2vw 0.2vw 0.4vw; + box-shadow: $medium-gray 0.2vw 0.2vw 0.4vw; flex-direction: column; background: whitesmoke; padding-top: 10px; @@ -14,17 +14,17 @@ } // .contextMenu-item:first-child { -// background: $intermediate-color; -// color: $light-color; +// background: $medium-gray; +// color: $white; // } // .contextMenu-item:first-child::placeholder { -// color: $light-color; +// color: $white; // } // .contextMenu-item:first-child:hover { -// background: $intermediate-color; -// color: $light-color; +// background: $medium-gray; +// color: $white; // } .contextMenu-subMenu-cont { @@ -94,7 +94,7 @@ .contextMenu-item:hover { border-width: .11px; border-style: none; - border-color: $intermediate-color; // rgb(187, 186, 186); + border-color: $medium-gray; // rgb(187, 186, 186); border-bottom-style: solid; border-top-style: solid; @@ -122,7 +122,7 @@ transition: all .1s; border-width: .11px; border-style: none; - border-color: $intermediate-color; // rgb(187, 186, 186); + border-color: $medium-gray; // rgb(187, 186, 186); // padding: 10px 0px 10px 0px; white-space: nowrap; font-size: 13px; @@ -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 09ae14016..2a0b494f5 100644 --- a/src/client/views/DocumentButtonBar.scss +++ b/src/client/views/DocumentButtonBar.scss @@ -1,4 +1,4 @@ -@import "globalCssVariables"; +@import "global/globalCssVariables"; $linkGap : 3px; @@ -7,13 +7,13 @@ $linkGap : 3px; } .documentButtonBar-linkButton-empty:hover { - background: $main-accent; + background: $medium-gray; transform: scale(1.05); cursor: pointer; } .documentButtonBar-linkButton-nonempty:hover { - background: $main-accent; + background: $medium-gray; transform: scale(1.05); cursor: pointer; } @@ -25,8 +25,8 @@ $linkGap : 3px; border-radius: 50%; opacity: 0.9; pointer-events: auto; - background-color: $dark-color; - color: $light-color; + background-color: $dark-gray; + color: $white; text-transform: uppercase; letter-spacing: 2px; font-size: 75%; @@ -37,7 +37,7 @@ $linkGap : 3px; align-items: center; &:hover { - background: $main-accent; + background: $medium-gray; transform: scale(1.05); cursor: pointer; } @@ -64,12 +64,12 @@ $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; &:hover { - background-color: $main-accent; + background-color: $medium-gray; } } diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss index db2d56aa8..1715f35e7 100644 --- a/src/client/views/DocumentDecorations.scss +++ b/src/client/views/DocumentDecorations.scss @@ -1,4 +1,4 @@ -@import "globalCssVariables"; +@import "global/globalCssVariables"; $linkGap : 3px; @@ -49,7 +49,7 @@ $linkGap : 3px; .documentDecorations-bottomResizer, .documentDecorations-rightResizer { pointer-events: auto; - background: $alt-accent; + background: $medium-gray; opacity: 0.1; &:hover { opacity: 1; @@ -251,13 +251,13 @@ $linkGap : 3px; } .linkButton-empty:hover { - background: $main-accent; + background: $medium-gray; transform: scale(1.05); cursor: pointer; } .linkButton-nonempty:hover { - background: $main-accent; + background: $medium-gray; transform: scale(1.05); cursor: pointer; } @@ -271,7 +271,7 @@ $linkGap : 3px; flex-direction: row; z-index: 998; position: absolute; - background: $alt-accent; + background: $medium-gray; } .linkButtonWrapper { @@ -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,8 +302,8 @@ $linkGap : 3px; border-radius: 50%; opacity: 0.9; pointer-events: auto; - background-color: $dark-color; - color: $light-color; + background-color: $dark-gray; + color: $white; text-transform: uppercase; letter-spacing: 2px; font-size: 75%; @@ -314,7 +314,7 @@ $linkGap : 3px; align-items: center; &:hover { - background: $main-accent; + background: $medium-gray; transform: scale(1.05); cursor: pointer; } @@ -343,13 +343,13 @@ $linkGap : 3px; border-radius: 50%; opacity: 0.9; font-size: 14; - background-color: $dark-color; - color: $light-color; + background-color: $dark-gray; + color: $white; text-align: center; cursor: pointer; &:hover { - background: $main-accent; + background: $medium-gray; transform: scale(1.05); } } @@ -365,7 +365,7 @@ $linkGap : 3px; width: max-content; font-family: $sans-serif; font-size: 12px; - background-color: $light-color-secondary; + background-color: $light-gray; padding: 2px 12px; list-style: none; diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss index b1ad4868c..c8e64b5c4 100644 --- a/src/client/views/Main.scss +++ b/src/client/views/Main.scss @@ -1,4 +1,4 @@ -@import "globalCssVariables"; +@import "global/globalCssVariables"; @import "nodeModuleOverrides"; :root { @@ -54,7 +54,7 @@ button { background: black; outline: none; border: 0px; - color: $light-color; + color: $white; text-transform: uppercase; letter-spacing: 2px; font-size: 75%; @@ -63,7 +63,7 @@ button { } button:hover { - background: $main-accent; + background: $medium-gray; transform: scale(1.05); cursor: pointer; } diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss index 3f04a0f3a..07ca0257c 100644 --- a/src/client/views/MainView.scss +++ b/src/client/views/MainView.scss @@ -1,4 +1,4 @@ -@import "globalCssVariables"; +@import "global/globalCssVariables"; @import "nodeModuleOverrides"; @@ -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/MainView.tsx b/src/client/views/MainView.tsx index 4eeb1fc95..f34851b00 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -40,7 +40,7 @@ import { ContextMenu } from './ContextMenu'; import { DictationOverlay } from './DictationOverlay'; import { DocumentDecorations } from './DocumentDecorations'; import { GestureOverlay } from './GestureOverlay'; -import { MENU_PANEL_WIDTH, SEARCH_PANEL_HEIGHT } from './globalCssVariables.scss'; +import { MENU_PANEL_WIDTH, SEARCH_PANEL_HEIGHT } from './global/globalCssVariables.scss'; import { KeyManager } from './GlobalKeyHandler'; import { InkStrokeProperties } from './InkStrokeProperties'; import { LightboxView } from './LightboxView'; @@ -180,8 +180,8 @@ export class MainView extends React.Component { const targClass = targets[0].className.toString(); if (SearchBox.Instance._searchbarOpen || SearchBox.Instance.open) { const check = targets.some((thing) => - (thing.className === "collectionSchemaView-searchContainer" || (thing as any)?.dataset.icon === "filter" || - thing.className === "collectionSchema-header-menuOptions")); + (thing.className === "collectionSchemaView-searchContainer" || (thing as any)?.dataset.icon === "filter" || + thing.className === "collectionSchema-header-menuOptions")); !check && SearchBox.Instance.resetSearch(true); } !targClass.includes("contextMenu") && ContextMenu.Instance.closeMenu(); diff --git a/src/client/views/PropertiesButtons.scss b/src/client/views/PropertiesButtons.scss index 29d2bfcb7..484522bc7 100644 --- a/src/client/views/PropertiesButtons.scss +++ b/src/client/views/PropertiesButtons.scss @@ -1,4 +1,4 @@ -@import "globalCssVariables"; +@import "global/globalCssVariables"; $linkGap : 3px; @@ -7,13 +7,13 @@ $linkGap : 3px; } .propertiesButtons-linkButton-empty:hover { - background: $main-accent; + background: $medium-gray; transform: scale(1.05); cursor: pointer; } .propertiesButtons-linkButton-nonempty:hover { - background: $main-accent; + background: $medium-gray; transform: scale(1.05); cursor: pointer; } @@ -24,7 +24,7 @@ $linkGap : 3px; width: 29px; border-radius: 6px; pointer-events: auto; - background-color: #121721; + background-color: $dark-gray; color: #fcfbf7; text-transform: uppercase; letter-spacing: 2px; @@ -38,18 +38,18 @@ $linkGap : 3px; margin-left: 4px; &:hover { - background: $main-accent; + background: $medium-gray; transform: scale(1.05); cursor: pointer; } } .propertiesButtons-linkButton-empty.toggle-on { background-color: white; - color: black; + color: $dark-gray; } .propertiesButtons-linkButton-empty.toggle-hover { background-color: gray; - color: black; + color: $dark-gray; } .propertiesButtons-linkButton-empty.toggle-off { color: white; @@ -111,7 +111,7 @@ $linkGap : 3px; margin-left: 4px; &:hover { - background: $main-accent; + background: $medium-gray; transform: scale(1.05); cursor: pointer; } diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx index 47a4a192c..55f6b8e3c 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<Doc>, props: Opt<DocumentViewProps case StyleProp.Color: const docColor: Opt<string> = 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<Doc>, props: Opt<DocumentViewProps doc?.type === DocumentType.RTF) && showTitle() && !StrCast(doc?.showTitle).includes(":hover") ? 15 : 0; case StyleProp.BackgroundColor: { let docColor: Opt<string> = 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 = (isAnchor ? 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<Doc>, props: Opt<DocumentViewProps Doc.UserDoc().activeCollectionBackground)); break; //if (doc._viewType !== CollectionViewType.Freeform && doc._viewType !== CollectionViewType.Time) return "rgb(62,62,62)"; - default: docColor = docColor || (darkScheme() ? "black" : "white"); break; + default: docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : Colors.WHITE); break; } if (docColor && (!doc || props?.layerProvider?.(doc) === false)) docColor = Color(docColor.toLowerCase()).fade(0.5).toString(); return docColor; @@ -159,7 +160,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps case DocumentType.COL: return StrCast(doc?.boxShadow, isBackground() || doc?._isGroup || docProps?.LayoutTemplateString ? undefined : // groups have no drop shadow -- they're supposed to be "invisible". LayoutString's imply collection is being rendered as something else (e.g., title of a Slide) - `${darkScheme() ? "rgb(30, 32, 31) " : "#9c9396 "} ${StrCast(doc.boxShadow, "0.2vw 0.2vw 0.8vw")}`); + `${darkScheme() ? Colors.DARK_GRAY : Colors.MEDIUM_GRAY} ${StrCast(doc.boxShadow, "0.2vw 0.2vw 0.8vw")}`); case DocumentType.LABEL: if (doc?.annotationOn !== undefined) return "black 2px 2px 1px"; diff --git a/src/client/views/TemplateMenu.scss b/src/client/views/TemplateMenu.scss index bbed8cd96..f81cbdaab 100644 --- a/src/client/views/TemplateMenu.scss +++ b/src/client/views/TemplateMenu.scss @@ -1,4 +1,4 @@ -@import "globalCssVariables"; +@import "global/globalCssVariables"; .templating-menu { position: absolute; pointer-events: auto; @@ -24,7 +24,7 @@ cursor: pointer; &:hover { - background: $main-accent; + background: $medium-gray; transform: scale(1.05); } } @@ -32,7 +32,7 @@ .template-list { font-family: $sans-serif; font-size: 12px; - background-color: $light-color-secondary; + background-color: $light-gray; padding: 2px 12px; list-style: none; position: relative; diff --git a/src/client/views/_nodeModuleOverrides.scss b/src/client/views/_nodeModuleOverrides.scss index b8a7db034..56346b68b 100644 --- a/src/client/views/_nodeModuleOverrides.scss +++ b/src/client/views/_nodeModuleOverrides.scss @@ -2,7 +2,7 @@ // goldenlayout stuff div .lm_header { - background: $dark-color; + background: $dark-gray; } .lm_tab { diff --git a/src/client/views/animationtimeline/Keyframe.scss b/src/client/views/animationtimeline/Keyframe.scss index 84c8de287..38eb103c6 100644 --- a/src/client/views/animationtimeline/Keyframe.scss +++ b/src/client/views/animationtimeline/Keyframe.scss @@ -1,4 +1,4 @@ -@import "./../globalCssVariables.scss"; +@import "./../global/globalCssVariables.scss"; $timelineColor: #9acedf; @@ -15,11 +15,11 @@ $timelineDark: #77a1aa; height: 200px; top: 50%; position: relative; - background-color: $light-color; + background-color: $white; .menutable { tr:nth-child(odd) { - background-color: $light-color-secondary; + background-color: $light-gray; } } } @@ -67,7 +67,7 @@ $timelineDark: #77a1aa; height: 100%; position: absolute; pointer-events: none; - background: linear-gradient(to left, $timelineColor 10%, $light-color); + background: linear-gradient(to left, $timelineColor 10%, $white); } .fadeRight { @@ -75,7 +75,7 @@ $timelineDark: #77a1aa; height: 100%; position: absolute; pointer-events: none; - background: linear-gradient(to right, $timelineColor 10%, $light-color); + background: linear-gradient(to right, $timelineColor 10%, $white); } .divider { diff --git a/src/client/views/animationtimeline/Keyframe.tsx b/src/client/views/animationtimeline/Keyframe.tsx index e84022366..82b0218bf 100644 --- a/src/client/views/animationtimeline/Keyframe.tsx +++ b/src/client/views/animationtimeline/Keyframe.tsx @@ -1,7 +1,7 @@ import * as React from "react"; import "./Keyframe.scss"; import "./Timeline.scss"; -import "../globalCssVariables.scss"; +import "../global/globalCssVariables.scss"; import { observer } from "mobx-react"; import { observable, reaction, action, IReactionDisposer, observe, computed, runInAction, trace } from "mobx"; import { Doc, DocListCast, DocListCastAsync, Opt } from "../../../fields/Doc"; diff --git a/src/client/views/animationtimeline/Timeline.scss b/src/client/views/animationtimeline/Timeline.scss index f90249771..48422b789 100644 --- a/src/client/views/animationtimeline/Timeline.scss +++ b/src/client/views/animationtimeline/Timeline.scss @@ -1,4 +1,4 @@ -@import "./../globalCssVariables.scss"; +@import "./../global/globalCssVariables.scss"; $timelineColor: #9acedf; $timelineDark: #77a1aa; @@ -161,7 +161,7 @@ $timelineDark: #77a1aa; width: 100%; height: 300px; position: absolute; - background-color: $light-color-secondary; + background-color: $light-gray; border-bottom: 2px solid $timelineDark; transition: transform 500ms ease; @@ -251,7 +251,7 @@ $timelineDark: #77a1aa; top: 0px; width: 100px; height: 30%; - border: 1px solid $dark-color; + border: 1px solid $dark-gray; font-size: 12px; line-height: 11px; background-color: $timelineDark; diff --git a/src/client/views/animationtimeline/TimelineMenu.scss b/src/client/views/animationtimeline/TimelineMenu.scss index 7ee0a43d5..43a89419e 100644 --- a/src/client/views/animationtimeline/TimelineMenu.scss +++ b/src/client/views/animationtimeline/TimelineMenu.scss @@ -1,10 +1,10 @@ -@import "./../globalCssVariables.scss"; +@import "./../global/globalCssVariables.scss"; .timeline-menu-container{ position: absolute; display: flex; - box-shadow: $intermediate-color 0.2vw 0.2vw 0.4vw; + box-shadow: $medium-gray 0.2vw 0.2vw 0.4vw; flex-direction: column; background: whitesmoke; z-index: 10000; @@ -39,7 +39,7 @@ border-top-left-radius: 15px; border-top-right-radius: 15px; text-transform: uppercase; - background: $dark-color; + background: $dark-gray; letter-spacing: 2px; .timeline-menu-header-desc{ @@ -79,10 +79,10 @@ .timeline-menu-item:hover { border-width: .11px; border-style: none; - border-color: $intermediate-color; + border-color: $medium-gray; border-bottom-style: solid; border-top-style: solid; - background: $darker-alt-accent; + background: $medium-blue; } .timeline-menu-desc { diff --git a/src/client/views/animationtimeline/TimelineOverview.scss b/src/client/views/animationtimeline/TimelineOverview.scss index 283163ea7..c8d96c399 100644 --- a/src/client/views/animationtimeline/TimelineOverview.scss +++ b/src/client/views/animationtimeline/TimelineOverview.scss @@ -1,4 +1,4 @@ -@import "./../globalCssVariables.scss"; +@import "./../global/globalCssVariables.scss"; $timelineColor: #9acedf; $timelineDark: #77a1aa; diff --git a/src/client/views/animationtimeline/Track.scss b/src/client/views/animationtimeline/Track.scss index aec587a79..f45e0556d 100644 --- a/src/client/views/animationtimeline/Track.scss +++ b/src/client/views/animationtimeline/Track.scss @@ -1,4 +1,4 @@ -@import "./../globalCssVariables.scss"; +@import "./../global/globalCssVariables.scss"; .track-container { @@ -6,8 +6,8 @@ .inner { top: 0px; width: calc(100%); - background-color: $light-color; - border: 1px solid $dark-color; + background-color: $white; + border: 1px solid $dark-gray; position: relative; z-index: 100; } diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss index f4736eb29..a054f0ae1 100644 --- a/src/client/views/collections/CollectionDockingView.scss +++ b/src/client/views/collections/CollectionDockingView.scss @@ -1,4 +1,4 @@ -@import "../../views/globalCssVariables.scss"; +@import "../../views/global/globalCssVariables.scss"; .lm_title { @@ -110,7 +110,7 @@ } .flexlayout__splitter { - background-color: black; + background-color: $dark-gray; } .flexlayout__splitter:hover { @@ -179,7 +179,7 @@ position: absolute; box-sizing: border-box; background-color: #222; - color: black; + color: $dark-gray; } .flexlayout__tab_button { @@ -268,7 +268,7 @@ } .flexlayout__tab_header_outer { - background-color: black; + background-color: $dark-gray; position: absolute; left: 0; right: 0; @@ -332,28 +332,28 @@ } .flexlayout__border_top { - background-color: black; + background-color: $dark-gray; border-bottom: 1px solid #ddd; box-sizing: border-box; overflow: hidden; } .flexlayout__border_bottom { - background-color: black; + background-color: $dark-gray; border-top: 1px solid #333; box-sizing: border-box; overflow: hidden; } .flexlayout__border_left { - background-color: black; + background-color: $dark-gray; border-right: 1px solid #333; box-sizing: border-box; overflow: hidden; } .flexlayout__border_right { - background-color: black; + background-color: $dark-gray; border-left: 1px solid #333; box-sizing: border-box; overflow: hidden; diff --git a/src/client/views/collections/CollectionLinearView.scss b/src/client/views/collections/CollectionLinearView.scss index ca72b98a5..ec8805907 100644 --- a/src/client/views/collections/CollectionLinearView.scss +++ b/src/client/views/collections/CollectionLinearView.scss @@ -1,4 +1,4 @@ -@import "../globalCssVariables"; +@import "../global/globalCssVariables"; @import "../_nodeModuleOverrides"; .collectionLinearView-outer { @@ -12,8 +12,8 @@ align-items: center; >span { - background: $dark-color; - color: $light-color; + background: $dark-gray; + color: $white; border-radius: 18px; margin-right: 6px; cursor: pointer; @@ -63,8 +63,8 @@ >label { margin-top: "auto"; margin-bottom: "auto"; - background: $dark-color; - color: $light-color; + background: $dark-gray; + color: $white; display: inline-block; border-radius: 18px; font-size: 12.5px; @@ -82,7 +82,7 @@ } label:hover { - background: $main-accent; + background: $medium-gray; transform: scale(1.15); } diff --git a/src/client/views/collections/CollectionMenu.scss b/src/client/views/collections/CollectionMenu.scss index dc5231a3a..c0fc774d3 100644 --- a/src/client/views/collections/CollectionMenu.scss +++ b/src/client/views/collections/CollectionMenu.scss @@ -1,5 +1,4 @@ -@import "../globalCssVariables"; - +@import "../global/globalCssVariables"; .collectionMenu-cont { position: relative; @@ -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; } } @@ -407,11 +406,11 @@ } .switchToText { - color: $main-accent; + color: $medium-gray; } .switchToText:hover { - color: $dark-color; + color: $dark-gray; } } @@ -424,11 +423,11 @@ .collectionMenu-urlInput { padding: 12px 10px 11px 10px; border: 0px; - color: black; - font-size: 10px; + 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: 10.5px; + font-size: $small-text; .collectionSchemaViewChrome-toggle { display: flex; @@ -527,19 +526,19 @@ .collectionSchemaViewChrome-toggler { width: 100px; height: 35px; - background-color: black; + background-color: $black; position: relative; } .collectionSchemaViewChrome-togglerButton { width: 47px; height: 30px; - background-color: $light-color-secondary; + background-color: $light-gray; // position: absolute; 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 diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 8f2847139..18926264d 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -16,7 +16,7 @@ import { SelectionManager } from "../../util/SelectionManager"; import { SnappingManager } from "../../util/SnappingManager"; import { Transform } from "../../util/Transform"; import { undoBatch } from "../../util/UndoManager"; -import { COLLECTION_BORDER_WIDTH, SCHEMA_DIVIDER_WIDTH } from '../../views/globalCssVariables.scss'; +import { COLLECTION_BORDER_WIDTH, SCHEMA_DIVIDER_WIDTH } from '../../views/global/globalCssVariables.scss'; import { ContextMenu } from "../ContextMenu"; import { ContextMenuProps } from "../ContextMenuItem"; import '../DocumentDecorations.scss'; diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss index 9f56a0c0e..4b123c8b6 100644 --- a/src/client/views/collections/CollectionStackingView.scss +++ b/src/client/views/collections/CollectionStackingView.scss @@ -1,4 +1,4 @@ -@import "../globalCssVariables"; +@import "../global/globalCssVariables"; .collectionMasonryView { display: inline; @@ -96,8 +96,8 @@ height: 2vw; width: 100%; font-family: $sans-serif; - background: $dark-color; - color: $light-color; + background: $dark-gray; + color: $white; } .collectionStackingView-columnDragger { @@ -128,7 +128,7 @@ margin-left: 2px; margin-right: 2px; margin-top: 2px; - background: $main-accent; + background: $medium-gray; height: 5px; &.active { @@ -180,11 +180,11 @@ .collectionStackingView-sectionHeader { text-align: center; margin: auto; - background: $main-accent; + background: $medium-gray; // overflow: hidden; overflow is visible so the color menu isn't hidden -ftong .editableView-input { - color: black; + color: $dark-gray; } .editableView-input:hover, @@ -205,7 +205,7 @@ display: flex; align-items: center; justify-content: center; - color: black; + 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<StackingDocument, if (value && this.columnHeaders) { const schemaHdrField = new SchemaHeaderField(value); this.columnHeaders.push(schemaHdrField); - DocUtils.addFieldEnumerations(undefined, this.pivotField, [{ title: value, _backgroundColor: schemaHdrField.color }]); + DocUtils.addFieldEnumerations(undefined, this.pivotField, [{ title: value, _backgroundColor: "schemaHdrField.color" }]); return true; } return false; diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss index 72ab51784..ec461ab94 100644 --- a/src/client/views/collections/CollectionTreeView.scss +++ b/src/client/views/collections/CollectionTreeView.scss @@ -1,4 +1,4 @@ -@import "../globalCssVariables"; +@import "../global/globalCssVariables"; .collectionTreeView-dropTarget { border-width: $COLLECTION_BORDER_WIDTH; @@ -12,7 +12,7 @@ top: 0; padding-left: 10px; padding-right: 10px; - background: $light-color-secondary; + background: $light-gray; font-size: 13px; overflow: auto; user-select: none; @@ -40,7 +40,7 @@ } .delete-button { - color: $intermediate-color; + color: $medium-gray; // float: right; margin-left: 15px; // margin-top: 3px; @@ -71,7 +71,7 @@ .collectionTreeView-subtitle { font-style: italic; font-size: 8pt; - color: $intermediate-color; + color: $medium-gray; } .docContainer { diff --git a/src/client/views/collections/CollectionView.scss b/src/client/views/collections/CollectionView.scss index a5aef86de..5db489c0a 100644 --- a/src/client/views/collections/CollectionView.scss +++ b/src/client/views/collections/CollectionView.scss @@ -1,8 +1,8 @@ -@import "../globalCssVariables"; +@import "../global/globalCssVariables"; .collectionView { border-width: 0; - border-color: $light-color-secondary; + border-color: $light-gray; border-style: solid; border-radius: 0 0 $border-radius $border-radius; box-sizing: border-box; diff --git a/src/client/views/collections/TreeView.scss b/src/client/views/collections/TreeView.scss index 3f6fc8b0c..1ebc5873e 100644 --- a/src/client/views/collections/TreeView.scss +++ b/src/client/views/collections/TreeView.scss @@ -1,4 +1,4 @@ -@import "../globalCssVariables"; +@import "../global/globalCssVariables"; .treeView-label { max-height: 1.5em; @@ -14,7 +14,7 @@ .bullet-outline { position: relative; width: $TREE_BULLET_WIDTH; - color: $intermediate-color; + color: $medium-gray; transform: scale(0.5); display: inline-flex; align-items: center; @@ -45,7 +45,7 @@ .bullet { position: relative; width: $TREE_BULLET_WIDTH; - color: $intermediate-color; + color: $medium-gray; margin-top: 3px; transform: scale(1.3, 1.3); border: #80808030 1px solid; diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx index c1125c233..401bdcb02 100644 --- a/src/client/views/collections/TreeView.tsx +++ b/src/client/views/collections/TreeView.tsx @@ -20,7 +20,7 @@ import { SnappingManager } from '../../util/SnappingManager'; import { Transform } from '../../util/Transform'; import { undoBatch, UndoManager } from '../../util/UndoManager'; import { EditableView } from "../EditableView"; -import { TREE_BULLET_WIDTH } from '../globalCssVariables.scss'; +import { TREE_BULLET_WIDTH } from '../global/globalCssVariables.scss'; import { DocumentView, DocumentViewProps, StyleProviderFunc, DocumentViewInternal } from '../nodes/DocumentView'; import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox'; import { RichTextMenu } from '../nodes/formattedText/RichTextMenu'; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.scss index c5b8fc5e8..5fa01b102 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.scss +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.scss @@ -1,4 +1,4 @@ -@import "globalCssVariables"; +@import "global/globalCssVariables"; .collectionFreeFormRemoteCursors-cont { diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss index eb0538c41..79e063f7f 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss @@ -1,4 +1,4 @@ -@import "../../globalCssVariables"; +@import "../../global/globalCssVariables"; .collectionfreeformview-none { position: inherit; @@ -226,7 +226,7 @@ // linear-gradient(to bottom, $light-color-secondary 1px, transparent 1px); // background-size: 30px 30px; // } - border: 0px solid $light-color-secondary; + border: 0px solid $light-gray; border-radius: inherit; box-sizing: border-box; position: absolute; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index accb80c5a..a4e310e6c 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -28,7 +28,7 @@ import { SelectionManager } from "../../../util/SelectionManager"; import { SnappingManager } from "../../../util/SnappingManager"; import { Transform } from "../../../util/Transform"; import { undoBatch } from "../../../util/UndoManager"; -import { COLLECTION_BORDER_WIDTH } from "../../../views/globalCssVariables.scss"; +import { COLLECTION_BORDER_WIDTH } from "../../../views/global/globalCssVariables.scss"; import { Timeline } from "../../animationtimeline/Timeline"; import { ContextMenu } from "../../ContextMenu"; import { DocumentDecorations } from "../../DocumentDecorations"; @@ -834,10 +834,10 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P map(doc => ({ ...this.childDataProvider(doc, ""), ...this.childSizeProvider(doc, "") })); if (measuredDocs.length) { const ranges = measuredDocs.reduce(({ xrange, yrange }, { x, y, width, height }) => // computes range of content - ({ - xrange: { min: Math.min(xrange.min, x), max: Math.max(xrange.max, x + width) }, - yrange: { min: Math.min(yrange.min, y), max: Math.max(yrange.max, y + height) } - }) + ({ + xrange: { min: Math.min(xrange.min, x), max: Math.max(xrange.max, x + width) }, + yrange: { min: Math.min(yrange.min, y), max: Math.max(yrange.max, y + height) } + }) , { xrange: { min: Number.MAX_VALUE, max: -Number.MAX_VALUE }, yrange: { min: Number.MAX_VALUE, max: -Number.MAX_VALUE } diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaCells.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaCells.tsx index f75179cea..90f64f163 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaCells.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaCells.tsx @@ -26,7 +26,7 @@ import { SnappingManager } from "../../../util/SnappingManager"; import { undoBatch } from "../../../util/UndoManager"; import '../../../views/DocumentDecorations.scss'; import { EditableView } from "../../EditableView"; -import { MAX_ROW_HEIGHT } from '../../globalCssVariables.scss'; +import { MAX_ROW_HEIGHT } from '../../global/globalCssVariables.scss'; import { DocumentIconContainer } from "../../nodes/DocumentIcon"; import { OverlayView } from "../../OverlayView"; import "./CollectionSchemaView.scss"; diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index b57fee0e4..4cc34cd32 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -1,7 +1,7 @@ @import "../../globalCssVariables"; .collectionSchemaView-container { border-width: $COLLECTION_BORDER_WIDTH; - border-color: $intermediate-color; + border-color: $medium-gray; border-style: solid; border-radius: $border-radius; box-sizing: border-box; @@ -33,13 +33,13 @@ cursor: col-resize; } // .documentView-node:first-child { - // background: $light-color; + // background: $white; // } } .collectionSchemaView-searchContainer { border-width: $COLLECTION_BORDER_WIDTH; - border-color: $intermediate-color; + border-color: $medium-gray; border-style: solid; border-radius: $border-radius; box-sizing: border-box; @@ -72,7 +72,7 @@ cursor: col-resize; } // .documentView-node:first-child { - // background: $light-color; + // background: $white; // } } @@ -245,7 +245,7 @@ button.add-column { } } label { - color: $main-accent; + color: $medium-gray; font-weight: normal; letter-spacing: 2px; text-transform: uppercase; @@ -260,11 +260,11 @@ button.add-column { background-color: white; transition: background-color 0.2s; &:hover { - background-color: $light-color-secondary; + background-color: $light-gray; } &.active { font-weight: bold; - border: 2px solid $light-color-secondary; + border: 2px solid $light-gray; } svg { color: gray; @@ -277,7 +277,7 @@ button.add-column { //width: 100%; background-color: white; input { - border: 2px solid $light-color-secondary; + border: 2px solid $light-gray; padding: 3px; height: 28px; font-weight: bold; @@ -303,7 +303,7 @@ button.add-column { border-top: 0; } &:hover { - background-color: $light-color-secondary; + background-color: $light-gray; } } } @@ -329,7 +329,7 @@ button.add-column { height: 100%; background-color: white; &.row-focused .rt-td { - background-color: #bfffc0; //$light-color-secondary; + background-color: #bfffc0; //$light-gray; } &.row-wrapped { .rt-td { diff --git a/src/client/views/collections/collectionSchema/SchemaTable.tsx b/src/client/views/collections/collectionSchema/SchemaTable.tsx index 0d5c9e077..de08c327a 100644 --- a/src/client/views/collections/collectionSchema/SchemaTable.tsx +++ b/src/client/views/collections/collectionSchema/SchemaTable.tsx @@ -21,7 +21,7 @@ import { DocumentType } from "../../../documents/DocumentTypes"; import { CompileScript, Transformer, ts } from "../../../util/Scripting"; import { Transform } from "../../../util/Transform"; import { undoBatch } from "../../../util/UndoManager"; -import { COLLECTION_BORDER_WIDTH, SCHEMA_DIVIDER_WIDTH } from '../../globalCssVariables.scss'; +import { COLLECTION_BORDER_WIDTH, SCHEMA_DIVIDER_WIDTH } from '../../global/globalCssVariables.scss'; import { ContextMenu } from "../../ContextMenu"; import '../../../views/DocumentDecorations.scss'; import { DocumentView } from "../../nodes/DocumentView"; diff --git a/src/client/views/globalCssVariables.scss b/src/client/views/global/globalCssVariables.scss index ccc9306c4..ead5e166e 100644 --- a/src/client/views/globalCssVariables.scss +++ b/src/client/views/global/globalCssVariables.scss @@ -1,28 +1,37 @@ @import url("https://fonts.googleapis.com/css?family=Noto+Sans:400,700|Crimson+Text:400,400i,700"); // colors -$light-color: #fcfbf7; -$light-color-secondary:#f1efeb; -//$main-accent: #61aaa3; -$main-accent: #aaaaa3; -// $alt-accent: #cdd5ec; -// $alt-accent: #cdeceb; -//$alt-accent: #59dff7; -$alt-accent: #c2c2c5; -$lighter-alt-accent: rgb(207, 220, 240); -$darker-alt-accent: #b2cef8; -$intermediate-color: #9c9396; -$dark-color: #121721; -$link-color: #add8e6; -$antimodemenu-height: 35px; +$white: #ffffff; +$light-gray:#dfdfdf; +$medium-gray: #9F9F9F; +$dark-gray: #323232; +$black: #000000; + +$light-blue: #BDDDF5; +$medium-blue: #4476F7; +$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; -$serif: "Crimson Text", -serif; + // misc values $border-radius: 0.3em; -// $search-thumnail-size: 130; // dragged items @@ -35,7 +44,7 @@ $docDecorations-zindex: 998; // then doc decorations appear over everything else $remoteCursors-zindex: 997; // ... not sure what level the remote cursors should go -- is this right? $COLLECTION_BORDER_WIDTH: 0; $SCHEMA_DIVIDER_WIDTH: 4; -$MINIMIZED_ICON_SIZE:25; +$MINIMIZED_ICON_SIZE:24; $MAX_ROW_HEIGHT: 44px; $DFLT_IMAGE_NATIVE_DIM: 900px; $MENU_PANEL_WIDTH: 60px; diff --git a/src/client/views/globalCssVariables.scss.d.ts b/src/client/views/global/globalCssVariables.scss.d.ts index 11e62e1eb..11e62e1eb 100644 --- a/src/client/views/globalCssVariables.scss.d.ts +++ b/src/client/views/global/globalCssVariables.scss.d.ts diff --git a/src/client/views/global/globalEnums.tsx b/src/client/views/global/globalEnums.tsx new file mode 100644 index 000000000..1e0381c33 --- /dev/null +++ b/src/client/views/global/globalEnums.tsx @@ -0,0 +1,34 @@ +export enum Colors { + BLACK = "#000000", + DARK_GRAY = "#323232", + MEDIUM_GRAY = "#9F9F9F", + LIGHT_GRAY = "#DFDFDF", + WHITE = "#FFFFFF", + MEDIUM_BLUE = "#4476F7", + LIGHT_BLUE = "#BDDDF5", + PINK = "#E0217D", + YELLOW = "#F5D747", + DROP_SHADOW = "#32323215", +} + +export enum FontSizes { + //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 diff --git a/src/client/views/linking/LinkEditor.scss b/src/client/views/linking/LinkEditor.scss index 7e6999cdc..839ebf894 100644 --- a/src/client/views/linking/LinkEditor.scss +++ b/src/client/views/linking/LinkEditor.scss @@ -1,4 +1,4 @@ -@import "../globalCssVariables"; +@import "../global/globalCssVariables"; .linkEditor { width: 100%; @@ -20,7 +20,7 @@ } .linkEditor-info { - //border-bottom: 0.5px solid $light-color-secondary; + //border-bottom: 0.5px solid $light-gray; //padding-bottom: 1px; padding-top: 5px; padding-left: 5px; @@ -195,7 +195,7 @@ } .linkEditor-group { - background-color: $light-color-secondary; + background-color: $light-gray; padding: 6px; margin: 3px 0; border-radius: 3px; @@ -254,8 +254,8 @@ } .linkEditor-option { - background-color: $light-color-secondary; - border: 1px solid $intermediate-color; + background-color: $light-gray; + border: 1px solid $medium-gray; border-top: 0; padding: 3px; cursor: pointer; @@ -272,7 +272,7 @@ .linkEditor-typeButton { background-color: transparent; - color: $dark-color; + color: $dark-gray; height: 20px; padding: 0 3px; padding-bottom: 2px; @@ -285,7 +285,7 @@ width: calc(100% - 40px); &:hover { - background-color: $light-color; + background-color: $white; } } diff --git a/src/client/views/linking/LinkMenu.scss b/src/client/views/linking/LinkMenu.scss index a90bf8b0a..a2ea42999 100644 --- a/src/client/views/linking/LinkMenu.scss +++ b/src/client/views/linking/LinkMenu.scss @@ -1,4 +1,4 @@ -@import "../globalCssVariables"; +@import "../global/globalCssVariables"; .linkMenu { width: auto; diff --git a/src/client/views/linking/LinkMenuItem.scss b/src/client/views/linking/LinkMenuItem.scss index 4e13ef8c8..4f9881565 100644 --- a/src/client/views/linking/LinkMenuItem.scss +++ b/src/client/views/linking/LinkMenuItem.scss @@ -1,7 +1,7 @@ -@import "../globalCssVariables"; +@import "../global/globalCssVariables"; .linkMenu-item { - // border-top: 0.5px solid $main-accent; + // border-top: 0.5px solid $medium-gray; position: relative; display: flex; border-bottom: 0.5px solid black; @@ -102,7 +102,7 @@ .link-metadata { padding: 0 10px 0 16px; margin-bottom: 4px; - color: $main-accent; + color: $medium-gray; font-style: italic; font-size: 10.5px; } @@ -143,8 +143,8 @@ padding-right: 6px; border-radius: 50%; pointer-events: auto; - background-color: $dark-color; - color: $light-color; + background-color: $dark-gray; + color: $white; font-size: 65%; transition: transform 0.2s; text-align: center; @@ -162,7 +162,7 @@ } &:hover { - background: $main-accent; + background: $medium-gray; cursor: pointer; } } diff --git a/src/client/views/nodes/DocumentLinksButton.scss b/src/client/views/nodes/DocumentLinksButton.scss index 735aa669f..daffaf9e7 100644 --- a/src/client/views/nodes/DocumentLinksButton.scss +++ b/src/client/views/nodes/DocumentLinksButton.scss @@ -1,4 +1,4 @@ -@import "../globalCssVariables.scss"; +@import "../global/globalCssVariables.scss"; .documentLinksButton-cont { @@ -37,7 +37,7 @@ font-weight: bold; &:hover { - background: $main-accent; + background: $medium-gray; transform: scale(1.05); cursor: pointer; } diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss index bdbece621..8f86417d6 100644 --- a/src/client/views/nodes/DocumentView.scss +++ b/src/client/views/nodes/DocumentView.scss @@ -1,4 +1,4 @@ -@import "../globalCssVariables"; +@import "../global/globalCssVariables"; .documentView-effectsWrapper { border-radius: inherit; @@ -22,7 +22,7 @@ transition: outline .3s linear; cursor: grab; - // background: $light-color; //overflow: hidden; + // background: $white; //overflow: hidden; transform-origin: left top; &.minimized { @@ -218,6 +218,6 @@ .documentView-node:first-child { position: relative; - background: "#B59B66"; //$light-color; + background: "#B59B66"; //$white; } }
\ No newline at end of file diff --git a/src/client/views/nodes/FontIconBox.scss b/src/client/views/nodes/FontIconBox.scss index 33ac85a0e..718af2c16 100644 --- a/src/client/views/nodes/FontIconBox.scss +++ b/src/client/views/nodes/FontIconBox.scss @@ -1,5 +1,7 @@ +@import "../global/globalCssVariables"; + .fontIconBox-label { - color: white; + color: $white; margin-right: 4px; margin-top: 1px; position: relative; @@ -22,8 +24,8 @@ position: absolute; top: -10px; right: -10px; - color: white; - background: #f44b42; + color: $white; + background: $pink; font-weight: 300; border-radius: 100%; width: 25px; @@ -37,7 +39,7 @@ .menuButton-circle, .menuButton-round { border-radius: 100%; - background-color: black; + background-color: $dark-gray; padding: 0; .fontIconBox-label { @@ -47,13 +49,14 @@ } &:hover { - background-color: #aaaaa3; + background-color: $light-gray; } } .menuButton-square { padding-top: 3px; padding-bottom: 3px; + background-color: $dark-gray; .fontIconBox-label { border-radius: 0px; diff --git a/src/client/views/nodes/KeyValueBox.scss b/src/client/views/nodes/KeyValueBox.scss index eb7c2f32b..ffcba4981 100644 --- a/src/client/views/nodes/KeyValueBox.scss +++ b/src/client/views/nodes/KeyValueBox.scss @@ -1,10 +1,10 @@ -@import "../globalCssVariables"; +@import "../global/globalCssVariables"; .keyValueBox-cont { overflow-y: scroll; width:100%; height: 100%; - background-color: $light-color; - border: 1px solid $intermediate-color; + background-color: $white; + border: 1px solid $medium-gray; border-radius: $border-radius; box-sizing: border-box; display: inline-block; @@ -56,8 +56,8 @@ $header-height: 30px; width:100%; position: relative; display: inline-block; - background: $intermediate-color; - color: $light-color; + background: $medium-gray; + color: $white; text-transform: uppercase; letter-spacing: 2px; font-size: 12px; @@ -66,7 +66,7 @@ $header-height: 30px; th { font-weight: normal; &:first-child { - border-right: 1px solid $light-color; + border-right: 1px solid $white; } } } @@ -76,9 +76,9 @@ $header-height: 30px; display: flex; width:100%; height:$header-height; - background: $light-color; + background: $white; .formattedTextBox-cont { - background: $light-color; + background: $white; } } .keyValueBox-cont { @@ -116,8 +116,8 @@ $header-height: 30px; display: flex; width:100%; height:30px; - background: $light-color-secondary; + background: $light-gray; .formattedTextBox-cont { - background: $light-color-secondary; + background: $light-gray; } }
\ No newline at end of file diff --git a/src/client/views/nodes/KeyValuePair.scss b/src/client/views/nodes/KeyValuePair.scss index f78767234..5b660e582 100644 --- a/src/client/views/nodes/KeyValuePair.scss +++ b/src/client/views/nodes/KeyValuePair.scss @@ -1,4 +1,4 @@ -@import "../globalCssVariables"; +@import "../global/globalCssVariables"; .keyValuePair-td-key { diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss index 1ba86232b..5d1c5f4eb 100644 --- a/src/client/views/nodes/PresBox.scss +++ b/src/client/views/nodes/PresBox.scss @@ -1,7 +1,4 @@ -$light-blue: #AEDDF8; -$dark-blue: #5B9FDD; -$light-background: #ececec; -$dark-grey: #656565; +@import "../global/globalCssVariables"; .presBox-cont { cursor: auto; @@ -10,7 +7,6 @@ $dark-grey: #656565; pointer-events: inherit; z-index: 2; font-family: Roboto; - box-shadow: #AAAAAA .2vw .2vw .4vw; width: 100%; min-width: 20px; height: 100%; @@ -47,8 +43,8 @@ $dark-grey: #656565; align-items: center; height: 30px; width: 100%; - color: white; - background-color: #323232; + color: $white; + background-color: $dark-gray; .toolbar-button { cursor: pointer; @@ -110,7 +106,7 @@ $dark-grey: #656565; } .toolbar-divider { - border-left: solid #ffffff70 0.5px; + border-left: solid $medium-gray 0.5px; height: 20px; } } @@ -118,7 +114,7 @@ $dark-grey: #656565; .dropdown { font-size: 10; margin-left: 5px; - color: darkgrey; + color: $medium-gray; transition: 0.5s ease; } @@ -174,7 +170,7 @@ $dark-grey: #656565; .ribbon-colorBox { cursor: pointer; - border: solid 1px black; + border: solid 1px $black; display: flex; margin-left: 5px; margin-top: 5px; @@ -191,9 +187,9 @@ $dark-grey: #656565; font-size: 11; font-weight: 200; height: 20; - background-color: #ececec; - color: black; - border: solid 1px black; + background-color: $white; + color: $black; + border: solid 1px $black; display: flex; margin-left: 5px; margin-top: 5px; @@ -220,11 +216,11 @@ $dark-grey: #656565; align-items: center; height: 100%; width: 100%; - background: black; + background: $black; } .ribbon-propertyUpDownItem:hover { - background: darkgrey; + background: $medium-gray; transform: scale(1.05); } } @@ -239,7 +235,7 @@ $dark-grey: #656565; .multiThumb-slider { display: grid; - background-color: $light-background; + background-color: $white; height: 10px; border-radius: 10px; overflow: hidden; @@ -257,8 +253,8 @@ $dark-grey: #656565; -webkit-appearance: none; height: 10px; cursor: ew-resize; - background: $dark-blue; - box-shadow: -100vw 0 0 100vw $light-background; + background: $medium-blue; + box-shadow: -100vw 0 0 100vw $white; } .toolbar-slider.end::-webkit-slider-thumb { @@ -267,7 +263,7 @@ $dark-grey: #656565; -webkit-appearance: none; height: 10px; cursor: ew-resize; - background: $dark-blue; + background: $medium-blue; box-shadow: -100vw 0 0 100vw $light-blue; } } @@ -282,7 +278,7 @@ $dark-grey: #656565; height: 10px; border-radius: 10px; -webkit-appearance: none; - background-color: $light-background; + background-color: $white; } .toolbar-slider:focus { @@ -301,7 +297,7 @@ $dark-grey: #656565; -webkit-appearance: none; height: 10px; cursor: ew-resize; - background: $dark-blue; + background: $medium-blue; box-shadow: -100vw 0 0 100vw $light-blue; } @@ -318,7 +314,7 @@ $dark-grey: #656565; width: 15px; min-width: 15px; cursor: pointer; - background: $light-background; + background: $white; } .presBox-checkbox:focus { @@ -326,7 +322,7 @@ $dark-grey: #656565; } .presBox-checkbox:hover { - background: #c0c0c0; + background: $light-gray; } .presBox-checkbox:checked { @@ -381,9 +377,9 @@ $dark-grey: #656565; text-align: center; font-size: 16; width: 90%; - color: black; + color: $black; transform: translate(5%, 0px); - border-bottom: solid 2px darkgrey; + border-bottom: solid 2px $medium-gray; } @@ -396,8 +392,8 @@ $dark-grey: #656565; justify-self: left; margin-top: 5px; padding-left: 10px; - background-color: $light-background; - border: solid 1px black; + background-color: $white; + border: solid 1px $black; min-width: 80px; max-width: 200px; width: 100%; @@ -416,7 +412,7 @@ $dark-grey: #656565; } .ribbon-frameSelector { - border: black solid 1px; + border: $black solid 1px; width: 60px; height: 20px; margin-top: 5px; @@ -433,12 +429,12 @@ $dark-grey: #656565; cursor: pointer; position: relative; height: 100%; - background: $light-background; + background: $white; display: flex; align-items: center; justify-content: center; text-align: center; - color: black; + color: $black; } .numKeyframe { @@ -446,7 +442,7 @@ $dark-grey: #656565; font-size: 10; font-weight: 600; position: relative; - color: black; + color: $black; display: flex; width: 100%; height: 100%; @@ -489,7 +485,7 @@ $dark-grey: #656565; padding-left: 10; padding-right: 10; border-radius: 10px; - background-color: #979797; + background-color: $medium-gray; } .ribbon-final-button:hover { @@ -508,13 +504,13 @@ $dark-grey: #656565; align-items: center; margin-bottom: 5px; height: 25px; - color: lightgrey; + color: $light-gray; width: 100%; max-width: 120; padding-left: 10; padding-right: 10; border-radius: 10px; - background-color: black; + background-color: $black; } .ribbon-final-button-hidden:hover { @@ -525,15 +521,15 @@ $dark-grey: #656565; .ribbon-frameList { width: calc(100% - 5px); height: 50px; - background-color: #ececec; - border: 1px solid #9f9f9f; + background-color: $white; + border: 1px solid $medium-gray; grid-template-rows: max-content; .frameList-header { display: grid; width: 100%; height: 20px; - background-color: #9f9f9f; + background-color: $medium-gray; .frameList-headerButtons { display: flex; @@ -588,7 +584,7 @@ $dark-grey: #656565; font-size: 10.5; font-weight: 300; height: 20; - background-color: #979797; + background-color: $medium-gray; color: white; display: flex; margin-top: 5px; @@ -607,8 +603,8 @@ $dark-grey: #656565; transition: all 0.4s; font-weight: 400; opacity: 1; - color: white; - background-color: black; + color: $white; + background-color: $black; } .ribbon-toggle { @@ -616,10 +612,10 @@ $dark-grey: #656565; font-size: 10.5; font-weight: 200; height: 20; - background-color: $light-background; + background-color: $white; border: solid 1px rgba(0, 0, 0, 0.5); display: flex; - color: black; + color: $black; margin-top: 5px; margin-bottom: 5px; border-radius: 5px; @@ -660,13 +656,13 @@ $dark-grey: #656565; position: relative; font-size: 13; padding-bottom: 10px; - border-bottom: solid 1px $dark-grey; + border-bottom: solid 1px $dark-gray; .presBox-dropdown:hover { - border: solid 1px $dark-blue; + border: solid 1px $medium-blue; .presBox-dropdownIcon { - color: $dark-blue; + color: $medium-blue; } } @@ -675,12 +671,12 @@ $dark-grey: #656565; display: grid; grid-template-columns: auto 20%; position: relative; - border: solid 1px black; - background-color: $light-background; + border: solid 1px $black; + background-color: $light-gray; border-radius: 5px; font-size: 10; height: 25; - color: black; + color: $black; padding-left: 5px; align-items: center; margin-top: 5px; @@ -744,7 +740,7 @@ $dark-grey: #656565; height: 100px; padding-top: 5px; padding-bottom: 5px; - border: solid 1px black; + border: solid 1px $black; // overflow: auto; ::-webkit-scrollbar { @@ -794,7 +790,7 @@ $dark-grey: #656565; cursor: pointer; position: relative; text-align: center; - border-left: solid 1px darkgrey; + border-left: solid 1px $medium-gray; width: 20%; height: 100%; display: flex; @@ -825,7 +821,7 @@ $dark-grey: #656565; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.8); z-index: 200; background-color: white; - color: black; + color: $black; position: absolute; overflow: hidden; } @@ -841,12 +837,12 @@ $dark-grey: #656565; align-items: center; justify-content: center; transform: translate(0px, -1px); - background-color: $light-background; + background-color: $white; width: 40px; height: 15px; align-self: center; justify-self: center; - border: solid 1px black; + border: solid 1px $black; border-top: 0px; border-bottom-right-radius: 7px; border-bottom-left-radius: 7px; @@ -855,15 +851,15 @@ $dark-grey: #656565; .layout-container { padding: 5px; display: grid; - background-color: $light-background; + background-color: $white; grid-template-columns: repeat(auto-fit, minmax(90px, 100px)); width: 100%; - border: solid 1px black; + border: solid 1px $black; min-width: 100px; overflow: hidden; .layout:hover { - border: solid 2px #5c9edd; + border: solid 2px $medium-blue; } .layout { @@ -878,7 +874,7 @@ $dark-grey: #656565; width: 90px; overflow: hidden; background-color: white; - border: solid darkgrey 1px; + border: solid $medium-gray 1px; display: grid; grid-template-rows: auto; align-items: center; @@ -893,7 +889,7 @@ $dark-grey: #656565; height: 13; font-size: 12; display: flex; - background-color: #f1efec; + background-color: #white; } .subtitle { @@ -906,7 +902,7 @@ $dark-grey: #656565; height: 13; font-size: 9; display: flex; - background-color: #f1efec; + background-color: $white; } .content { @@ -919,7 +915,7 @@ $dark-grey: #656565; height: 13; font-size: 10; display: flex; - background-color: #f1efec; + background-color: $white; height: 33; text-align: left; font-size: 8px; @@ -960,8 +956,8 @@ $dark-grey: #656565; select { - background: #323232; - color: white; + background: $dark-gray; + color: $white; } .presBox-button { @@ -975,8 +971,8 @@ $dark-grey: #656565; text-align: center; letter-spacing: normal; width: inherit; - background: #323232; - color: white; + background: $dark-gray; + color: $white; } .presBox-button.active { @@ -984,7 +980,7 @@ $dark-grey: #656565; } .presBox-button.active:hover { - background-color: #233163; + background-color: $medium-blue; } .presBox-button.edit { @@ -1053,8 +1049,8 @@ $dark-grey: #656565; font-size: 100; display: flex; align-items: center; - background: #323232; - color: white; + background: $dark-gray; + color: $white; } .presBox-viewPicker { @@ -1086,7 +1082,7 @@ $dark-grey: #656565; top: 10; opacity: 0.1; transition: all 0.4s; - color: white; + color: $white; } .miniPres:hover { @@ -1094,8 +1090,8 @@ $dark-grey: #656565; } .presPanelOverlay { - background-color: #323232; - color: white; + background-color: $dark-gray; + color: $white; border-radius: 5px; grid-template-rows: 100%; height: 25; @@ -1129,7 +1125,7 @@ $dark-grey: #656565; .presPanel-divider { width: 0.5px; height: 80%; - border-right: solid 1px #5a5a5a; + border-right: solid 1px $medium-gray; } .presPanel-button-frame { @@ -1161,12 +1157,12 @@ $dark-grey: #656565; } .presPanel-button:hover { - background-color: #5a5a5a; + background-color: $medium-gray; transform: scale(1.2); } .presPanel-button-text:hover { - background-color: #5a5a5a; + background-color: $medium-gray; } diff --git a/src/client/views/nodes/RadialMenu.scss b/src/client/views/nodes/RadialMenu.scss index daa620d12..312b51013 100644 --- a/src/client/views/nodes/RadialMenu.scss +++ b/src/client/views/nodes/RadialMenu.scss @@ -1,4 +1,4 @@ -@import "../globalCssVariables"; +@import "../global/globalCssVariables"; .radialMenu-cont { position: absolute; @@ -53,7 +53,7 @@ s transition: all .1s; border-width: .11px; border-style: none; - border-color: $intermediate-color; // rgb(187, 186, 186); + border-color: $medium-gray; // rgb(187, 186, 186); // padding: 10px 0px 10px 0px; white-space: nowrap; font-size: 13px; diff --git a/src/client/views/nodes/WebBox.scss b/src/client/views/nodes/WebBox.scss index aae9cd37f..19b69ff5a 100644 --- a/src/client/views/nodes/WebBox.scss +++ b/src/client/views/nodes/WebBox.scss @@ -1,4 +1,4 @@ -@import "../globalCssVariables.scss"; +@import "../global/globalCssVariables.scss"; .webBox { diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.scss b/src/client/views/nodes/formattedText/FormattedTextBox.scss index 53aceb533..3cedab1a4 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.scss +++ b/src/client/views/nodes/formattedText/FormattedTextBox.scss @@ -1,4 +1,4 @@ -@import "../../globalCssVariables"; +@import "../../global/globalCssVariables"; .ProseMirror { width: 100%; @@ -31,7 +31,7 @@ audiotag:hover { padding: 0; border-width: 0px; border-radius: inherit; - border-color: $intermediate-color; + border-color: $medium-gray; box-sizing: border-box; background-color: inherit; border-style: solid; @@ -363,7 +363,7 @@ footnote::after { @media only screen and (max-width: 1000px) { - @import "../../globalCssVariables"; + @import "../../global/globalCssVariables"; .ProseMirror { width: 100%; @@ -381,7 +381,7 @@ footnote::after { padding: 0; border-width: 0px; border-radius: inherit; - border-color: $intermediate-color; + border-color: $medium-gray; box-sizing: border-box; background-color: inherit; border-style: solid; diff --git a/src/client/views/nodes/formattedText/RichTextMenu.scss b/src/client/views/nodes/formattedText/RichTextMenu.scss index 1d24d6833..c94e93541 100644 --- a/src/client/views/nodes/formattedText/RichTextMenu.scss +++ b/src/client/views/nodes/formattedText/RichTextMenu.scss @@ -1,4 +1,4 @@ -@import "../../globalCssVariables"; +@import "../../global/globalCssVariables"; .button-dropdown-wrapper { position: relative; @@ -24,7 +24,7 @@ top: 35px; left: 0; background-color: #323232; - color: $light-color-secondary; + color: $light-gray; border: 1px solid #4d4d4d; border-radius: 0 6px 6px 6px; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25); diff --git a/src/client/views/nodes/formattedText/TooltipTextMenu.scss b/src/client/views/nodes/formattedText/TooltipTextMenu.scss index 0e4b752ac..8c4d77da9 100644 --- a/src/client/views/nodes/formattedText/TooltipTextMenu.scss +++ b/src/client/views/nodes/formattedText/TooltipTextMenu.scss @@ -1,4 +1,4 @@ -@import "../views/globalCssVariables"; +@import "../views/global/globalCssVariables"; .ProseMirror-menu-dropdown-wrap { display: inline-block; position: relative; @@ -50,7 +50,7 @@ padding: 3px; &:hover { - background-color: $light-color-secondary; + background-color: $light-gray; } } } @@ -294,9 +294,9 @@ top: 31px; background-color: #323232; border: 1px solid #4d4d4d; - color: $light-color-secondary; + color: $light-gray; // border: none; - // border: 1px solid $light-color-secondary; + // border: 1px solid $light-gray; border-radius: 0 6px 6px 6px; padding: 3px; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25); @@ -323,7 +323,7 @@ } .separated-button { - border-top: 1px solid $light-color-secondary; + border-top: 1px solid $light-gray; padding-top: 6px; } diff --git a/src/client/views/search/CheckBox.scss b/src/client/views/search/CheckBox.scss index cc858bec6..2a0085ade 100644 --- a/src/client/views/search/CheckBox.scss +++ b/src/client/views/search/CheckBox.scss @@ -1,4 +1,4 @@ -@import "../globalCssVariables"; +@import "../global/globalCssVariables"; .checkboxfilter { display: flex; @@ -13,7 +13,7 @@ margin-top: 0px; .check-container:hover~.check-box { - background-color: $darker-alt-accent; + background-color: $medium-blue; } .check-container { @@ -40,7 +40,7 @@ overflow: visible; background-color: transparent; border-style: solid; - border-color: $alt-accent; + border-color: $medium-gray; border-width: 2px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; diff --git a/src/client/views/search/CollectionFilters.scss b/src/client/views/search/CollectionFilters.scss index b54cdcbd1..845b16f67 100644 --- a/src/client/views/search/CollectionFilters.scss +++ b/src/client/views/search/CollectionFilters.scss @@ -1,4 +1,4 @@ -@import "../globalCssVariables"; +@import "../global/globalCssVariables"; .collection-filters { display: flex; diff --git a/src/client/views/search/IconBar.scss b/src/client/views/search/IconBar.scss index 013dcd57e..6aaf7918d 100644 --- a/src/client/views/search/IconBar.scss +++ b/src/client/views/search/IconBar.scss @@ -1,4 +1,4 @@ -@import "../globalCssVariables"; +@import "../global/globalCssVariables"; .icon-bar { display: flex; diff --git a/src/client/views/search/IconButton.scss b/src/client/views/search/IconButton.scss index 4ec03c7c9..3cb08d756 100644 --- a/src/client/views/search/IconButton.scss +++ b/src/client/views/search/IconButton.scss @@ -1,4 +1,4 @@ -@import "../globalCssVariables"; +@import "../global/globalCssVariables"; .type-outer { display: flex; @@ -9,7 +9,7 @@ .type-icon { height: 30px; width: 30px; - color: $light-color; + color: $white; // background-color: rgb(194, 194, 197); background-color: gray; border-radius: 50%; @@ -43,7 +43,7 @@ .type-icon:hover { transform: scale(1.1); - background-color: $darker-alt-accent; + background-color: $medium-blue; opacity: 1; +.filter-description { diff --git a/src/client/views/search/IconButton.tsx b/src/client/views/search/IconButton.tsx index 349690b20..2dd6b1b79 100644 --- a/src/client/views/search/IconButton.tsx +++ b/src/client/views/search/IconButton.tsx @@ -4,7 +4,7 @@ import { action, IReactionDisposer, observable, reaction, runInAction } from 'mo import { observer } from 'mobx-react'; import * as React from 'react'; import { DocumentType } from "../../documents/DocumentTypes"; -import '../globalCssVariables.scss'; +import '../global/globalCssVariables.scss'; import { IconBar } from './IconBar'; import "./IconButton.scss"; import "./SearchBox.scss"; @@ -104,7 +104,7 @@ export class IconButton extends React.Component<IconButtonProps>{ 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/NaviconButton.scss b/src/client/views/search/NaviconButton.scss index c23bab461..8a70b29de 100644 --- a/src/client/views/search/NaviconButton.scss +++ b/src/client/views/search/NaviconButton.scss @@ -1,4 +1,4 @@ -@import "../globalCssVariables"; +@import "../global/globalCssVariables"; $height-icon: 15px; $width-line: 30px; @@ -20,7 +20,7 @@ $translateX: 0; .line { display: block; - background: $alt-accent; + background: $medium-gray; width: $width-line; height: $height-line; position: absolute; diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss index 4f5b7e41a..6a2fe6f19 100644 --- a/src/client/views/search/SearchBox.scss +++ b/src/client/views/search/SearchBox.scss @@ -1,4 +1,4 @@ -@import "../globalCssVariables"; +@import "../global/globalCssVariables"; @import "./NaviconButton.scss"; .searchBox-container { @@ -20,7 +20,7 @@ display: flex; justify-content: center; align-items: center; - background-color: black; + background-color: $dark-gray; .searchBox-lozenges { position: absolute; @@ -86,7 +86,7 @@ &.searchBox-input { margin:5px; border-radius:20px; - border:black; + border:$dark-gray; display: block; width: 130px; -webkit-transition: width 0.4s; @@ -114,7 +114,7 @@ } &.searchBox-close { - color: $light-color; + color: $white; max-height: $searchpanel-height; } } @@ -132,7 +132,7 @@ .no-result { width: 500px; - background: $light-color-secondary; + background: $light-gray; padding: 10px; height: 50px; text-transform: uppercase; diff --git a/src/client/views/search/SelectorContextMenu.scss b/src/client/views/search/SelectorContextMenu.scss index 48cacc608..a114f679c 100644 --- a/src/client/views/search/SelectorContextMenu.scss +++ b/src/client/views/search/SelectorContextMenu.scss @@ -1,7 +1,7 @@ -@import "../globalCssVariables"; +@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 diff --git a/src/client/views/search/ToggleBar.scss b/src/client/views/search/ToggleBar.scss index 79f866acb..3a164f133 100644 --- a/src/client/views/search/ToggleBar.scss +++ b/src/client/views/search/ToggleBar.scss @@ -1,9 +1,9 @@ -@import "../globalCssVariables"; +@import "../global/globalCssVariables"; .toggle-title { display: flex; align-items: center; - color: $light-color; + color: $white; text-transform: uppercase; flex-direction: row; justify-content: space-around; @@ -25,7 +25,7 @@ // height: 50px; height: 30px; width: 100px; - background-color: $alt-accent; + background-color: $medium-gray; border-radius: 10px; padding: 5px; display: flex; @@ -36,6 +36,6 @@ width: 40px; height: 100%; border-radius: 10px; - background-color: $light-color; + background-color: $white; } }
\ No newline at end of file diff --git a/src/client/views/webcam/DashWebRTCVideo.scss b/src/client/views/webcam/DashWebRTCVideo.scss index 41307a808..249aee9d6 100644 --- a/src/client/views/webcam/DashWebRTCVideo.scss +++ b/src/client/views/webcam/DashWebRTCVideo.scss @@ -1,4 +1,4 @@ -@import "../globalCssVariables"; +@import "../global/globalCssVariables"; .webcam-cont { background: whitesmoke; diff --git a/src/mobile/AudioUpload.scss b/src/mobile/AudioUpload.scss index 6e64d9e2e..dce0c724f 100644 --- a/src/mobile/AudioUpload.scss +++ b/src/mobile/AudioUpload.scss @@ -1,4 +1,4 @@ -@import "../client/views/globalCssVariables.scss"; +@import "../client/views/global/globalCssVariables.scss"; .audioUpload_cont { display: flex; diff --git a/src/mobile/ImageUpload.scss b/src/mobile/ImageUpload.scss index 890258918..6669a3d21 100644 --- a/src/mobile/ImageUpload.scss +++ b/src/mobile/ImageUpload.scss @@ -1,4 +1,4 @@ -@import "../client/views/globalCssVariables.scss"; +@import "../client/views/global/globalCssVariables.scss"; .imgupload_cont { display: flex; diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx index 2183d2172..98696496f 100644 --- a/src/mobile/ImageUpload.tsx +++ b/src/mobile/ImageUpload.tsx @@ -5,7 +5,7 @@ import * as rp from 'request-promise'; import { DocServer } from '../client/DocServer'; import { Docs } from '../client/documents/Documents'; import { Networking } from '../client/Network'; -import { DFLT_IMAGE_NATIVE_DIM } from '../client/views/globalCssVariables.scss'; +import { DFLT_IMAGE_NATIVE_DIM } from '../client/views/global/globalCssVariables.scss'; import { MainViewModal } from '../client/views/MainViewModal'; import { Doc, Opt } from '../fields/Doc'; import { List } from '../fields/List'; |