wbrawner/server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

More vars fixes

Browse source 
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv) 2018-06-14 09:25:19 +02:00
parent 26918e4103
commit 1dc76f2f6b
No known key found for this signature in database
GPG key ID: 60C25B8C072916CF
7 changed files with 87 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
core/css/css-variables.scss
View file

@ -34,5 +34,6 @@
--color-border: $color-border;
--color-border-dark: $color-border-dark;
--border-radius: $border-radius;
}
--font-face: $font-face;
}

9
core/css/fonts.scss
View file

@ -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');
}

42
core/css/icons.scss
View file

@ -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');
}

8
core/css/inputs.scss
View file

@ -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,

2
core/css/styles.scss
View file

@ -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;
}

32
core/css/variables.scss
View file

@ -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;

53
settings/css/settings.scss
View file

@ -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;