From 1dc76f2f6bb4a14ac4c33e03aec7ec99270246f4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 14 Jun 2018 09:25:19 +0200 Subject: [PATCH] More vars fixes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/css-variables.scss | 3 ++- core/css/fonts.scss | 9 ++++--- core/css/icons.scss | 42 ++++++++++++++++++----------- core/css/inputs.scss | 8 +++--- core/css/styles.scss | 2 +- core/css/variables.scss | 32 +++++++++++++--------- settings/css/settings.scss | 53 ++++++++++++++++++------------------- 7 files changed, 87 insertions(+), 62 deletions(-) diff --git a/core/css/css-variables.scss b/core/css/css-variables.scss index 0a12ac4b2a..b1b7df3115 100644 --- a/core/css/css-variables.scss +++ b/core/css/css-variables.scss @@ -34,5 +34,6 @@ --color-border: $color-border; --color-border-dark: $color-border-dark; --border-radius: $border-radius; -} + --font-face: $font-face; +} diff --git a/core/css/fonts.scss b/core/css/fonts.scss index f72aa2930c..441b48f385 100644 --- a/core/css/fonts.scss +++ b/core/css/fonts.scss @@ -4,7 +4,8 @@ font-family: 'Open Sans'; font-style: normal; font-weight: normal; - src: local('Open Sans'), local('OpenSans'), url('../fonts/OpenSans-Regular.woff') format('woff'); + src: local('Open Sans'), local('OpenSans'), + url('../fonts/OpenSans-Regular.woff') format('woff'); } } @@ -12,12 +13,14 @@ font-family: 'Open Sans'; font-style: normal; font-weight: 300; - src: local('Open Sans Light'), local('OpenSans-Light'), url('../fonts/OpenSans-Light.woff') format('woff'); + src: local('Open Sans Light'), local('OpenSans-Light'), + url('../fonts/OpenSans-Light.woff') format('woff'); } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; - src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url('../fonts/OpenSans-Semibold.woff') format('woff'); + src: local('Open Sans Semibold'), local('OpenSans-Semibold'), + url('../fonts/OpenSans-Semibold.woff') format('woff'); } diff --git a/core/css/icons.scss b/core/css/icons.scss index c7c5bfe0c1..23d35b3742 100644 --- a/core/css/icons.scss +++ b/core/css/icons.scss @@ -25,7 +25,12 @@ } /* LOADING ------------------------------------------------------------------ */ -.loading, .loading-small, .icon-loading, .icon-loading-dark, .icon-loading-small, .icon-loading-small-dark { +.loading, +.loading-small, +.icon-loading, +.icon-loading-dark, +.icon-loading-small, +.icon-loading-small-dark { position: relative; &:after { z-index: 2; @@ -42,15 +47,15 @@ -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; - border: 2px solid var(--color-loading-dark); - border-top-color: var(--color-loading-light); + border: 2px solid var(--color-loading-light); + border-top-color: var(--color-loading-dark); } } .icon-loading-dark:after, .icon-loading-small-dark:after { - border: 2px solid var(--color-loading-light); - border-top-color: var(--color-loading-dark); + border: 2px solid var(--color-loading-dark); + border-top-color: var(--color-loading-light); } .icon-loading-small:after, @@ -61,7 +66,7 @@ } /* Css replaced elements don't have ::after nor ::before */ -img, object, video, button, textarea, input, select, div[contenteditable=true] { +img, object, video, button, textarea, input, select, div[contenteditable='true'] { .icon-loading { background-image: url('../img/loading.gif'); } @@ -176,11 +181,13 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] { .icon-delete { background-image: url('../img/actions/delete.svg?v=1'); &.no-permission { - &:hover, &:focus { + &:hover, + &:focus { background-image: url('../img/actions/delete.svg?v=1'); } } - &:hover, &:focus { + &:hover, + &:focus { background-image: url('../img/actions/delete-hover.svg?v=1'); filter: initial; } @@ -189,11 +196,13 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] { .icon-delete-white { background-image: url('../img/actions/delete-white.svg?v=1'); &.no-permission { - &:hover, &:focus { + &:hover, + &:focus { background-image: url('../img/actions/delete-white.svg?v=1'); } } - &:hover, &:focus { + &:hover, + &:focus { background-image: url('../img/actions/delete-hover.svg?v=1'); } } @@ -375,14 +384,16 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] { } .icon-starred { - &:hover, &:focus { + &:hover, + &:focus { background-image: url('../img/actions/star.svg?v=1'); } background-image: url('../img/actions/starred.svg?v=1'); } .icon-star { - &:hover, &:focus { + &:hover, + &:focus { background-image: url('../img/actions/starred.svg?v=1'); } } @@ -500,11 +511,13 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] { background-image: url('../img/places/files-dark.svg?v=1'); } -.icon-file, .icon-filetype-text { +.icon-file, +.icon-filetype-text { background-image: url('../img/filetypes/text.svg?v=1'); } -.icon-folder, .icon-filetype-folder { +.icon-folder, +.icon-filetype-folder { background-image: url('../img/filetypes/folder.svg?v=1'); } @@ -614,4 +627,3 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] { .icon-category-search { background-image: url('../img/actions/search.svg?v=1'); } - diff --git a/core/css/inputs.scss b/core/css/inputs.scss index 4d916e22f2..a3ff713d81 100644 --- a/core/css/inputs.scss +++ b/core/css/inputs.scss @@ -14,10 +14,10 @@ /* Specifically override browser styles */ input, textarea, select, button, div[contenteditable=true], div[contenteditable=false] { - font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif; + font-family: var(--font-face) } .select2-container-multi .select2-choices .select2-search-field input, .select2-search input, .ui-widget { - font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif !important; + font-family: var(--font-face) !important; } /* Simple selector to allow easy overriding */ @@ -290,9 +290,11 @@ select, } /* Radio & Checkboxes */ -input { +input, label { --color-checkbox-radio-disabled: nc-darken($color-main-background, 27%); --color-checkbox-radio-border: nc-darken($color-main-background, 47%); +} +input { &[type='checkbox'], &[type='radio'] { &.radio, diff --git a/core/css/styles.scss b/core/css/styles.scss index 1acae23a54..3affa3d709 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -87,7 +87,7 @@ body { font-weight: 400; font-size: .8em; line-height: 1.6em; - font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif; + font-family: var(--font-face); color: var(--color-main-text); height: auto; } diff --git a/core/css/variables.scss b/core/css/variables.scss index 748ebd6872..c8fcc9f541 100644 --- a/core/css/variables.scss +++ b/core/css/variables.scss @@ -1,16 +1,20 @@ -// SCSS darken/lighten function override -@function nc-darken($color, $value) { - @return darken($color, $value); +// SCSS darken/lighten function override +// if no exists +@if function-exists(nc-darken) == false { + @function nc-darken($color, $value) { + @return darken($color, $value); + } } - -@function nc-lighten($color, $value) { - @return lighten($color, $value); +@if function-exists(nc-lighten) == false { + @function nc-lighten($color, $value) { + @return lighten($color, $value); + } } // SCSS variables // DEPRECATED, please use CSS4 vars -$color-main-text: #000; -$color-main-background: #fff; +$color-main-text: #000 !default; +$color-main-background: #fff !default; // used for different active/disabled states $color-background-dark: nc-darken($color-main-background, 7%); @@ -18,7 +22,9 @@ $color-background-darker: nc-darken($color-main-background, 14%); $color-primary: #0082c9; $color-primary-text: #ffffff; -$color-primary-text-dark: nc-darken($color-primary-text, 7%); +// do not use nc-darken in case of overriding because +// primary-text is independent of color-main-text +$color-primary-text-dark: darken($color-primary-text, 7%); $color-primary-element: $color-primary; $color-primary-element-light: nc-lighten($color-primary-element, 15%); @@ -36,8 +42,8 @@ $color-text-lighter: nc-lighten($color-main-text, 30%); $image-logo: url('../img/logo.svg?v=1'); $image-login-background: url('../img/background.png?v=2'); -$color-loading-light: #777; -$color-loading-dark: #ccc; +$color-loading-light: #ccc !default; +$color-loading-dark: #777 !default; $color-box-shadow: rgba(nc-darken($color-main-background, 70%), 0.75); @@ -45,4 +51,6 @@ $color-box-shadow: rgba(nc-darken($color-main-background, 70%), 0.75); $color-border: nc-darken($color-main-background, 7%); // darker border like inputs or very visible elements $color-border-dark: nc-darken($color-main-background, 14%); -$border-radius: 3px; +$border-radius: 3px !default; + +$font-face: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif !default; diff --git a/settings/css/settings.scss b/settings/css/settings.scss index a6f93a3e95..97a5acde09 100644 --- a/settings/css/settings.scss +++ b/settings/css/settings.scss @@ -78,7 +78,7 @@ input { transform: translate(-50%, -50%); background: #fff; color: #333; - border-radius: $border-radius; + border-radius: var(--border-radius); box-shadow: 0 0 7px #888; padding: 15px; .jcrop-holder { @@ -328,7 +328,7 @@ input { opacity: .75; } &.active { - box-shadow: inset 2px 0 $color-primary; + box-shadow: inset 2px 0 var(--color-primary); .menuitem-text { font-weight: 600; } @@ -426,7 +426,7 @@ table.nostyle { padding-top: 5px; } } - border-top: 1px solid #DDD; + border-top: 1px solid var(--color-border); text-overflow: ellipsis; max-width: 200px; white-space: nowrap; @@ -482,7 +482,6 @@ table.nostyle { #new-app-password { width: 245px; font-family: monospace; - background-color: lightyellow; } .app-password-row { @@ -556,14 +555,14 @@ table.grid { th { height: 2em; color: #999; - border-bottom: 1px solid $color-border; + border-bottom: 1px solid var(--color-border); padding: 0 .5em; padding-left: .8em; text-align: left; font-weight: normal; } td { - border-bottom: 1px solid $color-border; + border-bottom: 1px solid var(--color-border); padding: 0 .5em; padding-left: .8em; text-align: left; @@ -639,7 +638,7 @@ span.usersLastLoginTooltip { thead th, thead tr { z-index: 100; - background-color: $color-main-background; + background-color: var(--color-main-background); position: sticky; // positional attribute is required for position to take affect. top: 0; @@ -734,7 +733,7 @@ span.version { color: #555; background-color: transparent; border: 1px solid #555; - border-radius: $border-radius; + border-radius: var(--border-radius); padding: 3px 6px; } a { @@ -804,7 +803,7 @@ span.version { margin-bottom: 10px; } .app-author, .app-licence { - color: $color-text-details; + color: var(--color-text-maxcontrast); } .app-dependencies { margin: 10px 0; @@ -885,7 +884,7 @@ span.version { margin-bottom: 0; /* use 2nd child since app-navigation-toggle is the first */ &:not(:nth-child(2)) { - border-top: 1px solid $color-border; + border-top: 1px solid var(--color-border); } /* correctly display help icons next to headings */ @@ -980,12 +979,12 @@ span.version { height: initial; vertical-align: middle; float: none; - border-bottom: 1px solid $color-border; + border-bottom: 1px solid var(--color-border); padding: 6px; box-sizing: border-box; } &.selected { - background-color: nc-darken($color-main-background, 3%); + background-color: var(--color-background-dark); } } .groups-enable { @@ -1126,13 +1125,13 @@ table.grid td.date { border-radius: 50%; } &.icon-checkmark-white { - background-color: $color-success; + background-color: var(--color-success); } &.icon-error-white { - background-color: $color-warning; + background-color: var(--color-warning); } &.icon-close-white { - background-color: $color-error; + background-color: var(--color-error); } } } @@ -1233,14 +1232,14 @@ table.grid td.date { span { &.success { - background-color: $color-success; - border-radius: $border-radius; + background-color: var(--color-success); + border-radius: var(--border-radius); } &.error { - background-color: $color-error; + background-color: var(--color-error); } &.indeterminate { - background-color: $color-warning; + background-color: var(--color-warning); border-radius: 40% 0; } } @@ -1303,10 +1302,10 @@ doesnotexist:-o-prefocus, .strengthify-wrapper { background-position: left center; } .errors, .errors a { - color: $color-error; + color: var(--color-error); } .warnings, .warnings a { - color: $color-warning; + color: var(--color-warning); } .hint { @@ -1402,7 +1401,7 @@ doesnotexist:-o-prefocus, .strengthify-wrapper { what follows will be manually defined */ grid-template-columns: 44px; grid-auto-columns: min-content; - border-top: $color-border 1px solid; + border-top: var(--color-border) 1px solid; &.disabled { opacity: .5; } @@ -1438,11 +1437,11 @@ doesnotexist:-o-prefocus, .strengthify-wrapper { &#new-user { position: sticky; align-self: normal; - background-color: $color-main-background; + background-color: var(--color-main-background); z-index: 55; /* above multiselect */ top: 0; &.sticky { - box-shadow: 0 -2px 10px 1px $color-box-shadow; + box-shadow: 0 -2px 10px 1px var(--color-box-shadow); } /* fake input for groups validation */ input#newgroups { @@ -1458,12 +1457,12 @@ doesnotexist:-o-prefocus, .strengthify-wrapper { top: $grid-row-height; } &#grid-header { - color: nc-lighten($color-main-text, 60%); + color: var(--color-background-darker); z-index: 60; /* above new-user */ } &:hover { input:not([type='submit']):not(:focus):not(:active) { - border-color: nc-darken($color-main-background, 14%) !important; + border-color: var(--color-border) !important; } } > div, @@ -1471,7 +1470,7 @@ doesnotexist:-o-prefocus, .strengthify-wrapper { grid-row: 1; display: inline-flex; align-items: center; - color: nc-lighten($color-main-text, 33%); + color: var(--color-text-lighter); position: relative; > input:not(:focus):not(:active) { border-color: transparent;