From 1dc76f2f6bb4a14ac4c33e03aec7ec99270246f4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
<skjnldsv@protonmail.com>
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) <skjnldsv@protonmail.com>
---
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 0a12ac4b2a6..b1b7df3115f 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 f72aa2930cf..441b48f3856 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 c7c5bfe0c15..23d35b3742f 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 4d916e22f27..a3ff713d813 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 1acae23a545..3affa3d7096 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 748ebd68725..c8fcc9f541e 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 a6f93a3e95d..97a5acde093 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;
--
GitLab