diff options
| -rw-r--r-- | core/css/apps.scss | 52 | ||||
| -rw-r--r-- | core/css/css-variables.scss | 70 | ||||
| -rw-r--r-- | core/css/functions.scss | 24 | ||||
| -rw-r--r-- | core/css/header.scss | 25 | ||||
| -rw-r--r-- | core/css/icons.scss | 39 | ||||
| -rw-r--r-- | core/css/inputs.scss | 8 | ||||
| -rw-r--r-- | core/css/mobile.scss | 10 | ||||
| -rw-r--r-- | core/css/styles.scss | 6 | ||||
| -rw-r--r-- | core/css/toast.scss | 52 | ||||
| -rw-r--r-- | core/css/variables.scss | 4 |
10 files changed, 120 insertions, 170 deletions
diff --git a/core/css/apps.scss b/core/css/apps.scss index a9b20cfec2b..aab575f5dd2 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -15,6 +15,9 @@ * @license GNU AGPL version 3 or any later version * */ +@use 'variables'; +@use 'sass:math'; +@import 'functions'; /* BASE STYLING ------------------------------------------------------------ */ // no h1 allowed since h1 = logo @@ -78,9 +81,9 @@ kbd { /* APP-NAVIGATION ------------------------------------------------------------ */ /* Navigation: folder like structure */ #app-navigation:not(.vue) { - width: $navigation-width; + width: variables.$navigation-width; position: fixed; - top: $header-height; + top: variables.$header-height; left: 0; z-index: 500; overflow-y: auto; @@ -378,7 +381,7 @@ kbd { margin: 0; padding: 0; background: none; - @include icon-color('triangle-s', 'actions', $color-black, 1, true); + @include icon-color('triangle-s', 'actions', variables.$color-black, 1, true); background-size: 16px; background-repeat: no-repeat; background-position: center; @@ -394,7 +397,7 @@ kbd { z-index: 105; // above a, under button background-color: var(--color-background-hover); border-radius: 50%; - transition: opacity $animation-quick ease-in-out; + transition: opacity variables.$animation-quick ease-in-out; } /* force padding on link no matter if 'a' has an icon class */ @@ -442,7 +445,7 @@ kbd { .app-navigation-entry-utils-menu-button { /* Prevent bg img override if an icon class is set */ button:not([class^='icon-']):not([class*=' icon-']) { - @include icon-color('more', 'actions', $color-black, 1, true); + @include icon-color('more', 'actions', variables.$color-black, 1, true); } &:hover button, &:focus button { @@ -530,7 +533,7 @@ kbd { .app-navigation-entry-deleted { display: inline-flex; padding-left: 44px; - transform: translateX(#{$navigation-width}); + transform: translateX(#{variables.$navigation-width}); .app-navigation-entry-deleted-description { position: relative; white-space: nowrap; @@ -592,7 +595,7 @@ kbd { position: relative; display: flex; // padding is included in height - padding-top: $header-height; + padding-top: variables.$header-height; min-height: 100%; } @@ -601,10 +604,10 @@ kbd { /** * !Important. We are defining the minimum requirement we want for flex - * Just before the mobile breakpoint we have $breakpoint-mobile (1024px) - $navigation-width + * Just before the mobile breakpoint we have variables.$breakpoint-mobile (1024px) - variables.$navigation-width * -> 468px. In that case we want 200px for the list and 268px for the content */ -$min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width; +$min-content-width: variables.$breakpoint-mobile - variables.$navigation-width - variables.$list-min-width; #app-content { z-index: 1000; @@ -614,7 +617,7 @@ $min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width; min-height: 100%; /* margin if navigation element is here */ #app-navigation:not(.hidden) + & { - margin-left: $navigation-width; + margin-left: variables.$navigation-width; } /* no top border for first settings item */ > .section:first-child { @@ -648,16 +651,17 @@ $min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width; */ #app-sidebar { width: 27vw; - min-width: $sidebar-min-width; - max-width: $sidebar-max-width; + min-width: variables.$sidebar-min-width; + max-width: variables.$sidebar-max-width; display: block; - @include position('sticky'); - top: $header-height; + position: -webkit-sticky; + position: sticky; + top: variables.$header-height; right:0; overflow-y: auto; overflow-x: hidden; z-index: 1500; - height: calc(100vh - #{$header-height}); + height: calc(100vh - #{variables.$header-height}); background: var(--color-main-background); border-left: 1px solid var(--color-border); flex-shrink: 0; @@ -727,6 +731,7 @@ $min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width; width: 100%; padding: 0; margin: 0; + background-color: var(--color-main-background); box-shadow: none; border: 0; border-radius: 0; @@ -867,7 +872,7 @@ $min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width; /* POPOVER MENU ------------------------------------------------------------ */ $popoveritem-height: 44px; $popovericon-size: 16px; -$outter-margin: ($popoveritem-height - $popovericon-size) / 2; +$outter-margin: math.div($popoveritem-height - $popovericon-size, 2); .ie, .edge { @@ -1126,19 +1131,20 @@ $outter-margin: ($popoveritem-height - $popovericon-size) / 2; /* CONTENT LIST ------------------------------------------------------------ */ .app-content-list { - @include position('sticky'); - top: $header-height; + position: -webkit-sticky; + position: sticky; + top: variables.$header-height; border-right: 1px solid var(--color-border); display: flex; flex-direction: column; transition: transform 250ms ease-in-out; - min-height: calc(100vh - #{$header-height}); - max-height: calc(100vh - #{$header-height}); + min-height: calc(100vh - #{variables.$header-height}); + max-height: calc(100vh - #{variables.$header-height}); overflow-y: auto; overflow-x: hidden; - flex: 1 1 $list-min-width; - min-width: $list-min-width; - max-width: $list-max-width; + flex: 1 1 variables.$list-min-width; + min-width: variables.$list-min-width; + max-width: variables.$list-max-width; /* Default item */ .app-content-list-item { diff --git a/core/css/css-variables.scss b/core/css/css-variables.scss deleted file mode 100644 index 1fe6e88dbe7..00000000000 --- a/core/css/css-variables.scss +++ /dev/null @@ -1,70 +0,0 @@ -// CSS4 Variables -// Remember, you cannot use scss functions with css4 variables -// All css4 variables must be fixed! Scss is a PRE processor -// css4 variables are processed after scss! -:root { - --color-main-text: #{$color-main-text}; - --color-main-background: #{$color-main-background}; - --color-main-background-translucent: #{$color-main-background-translucent}; - - // To use like this: background-image: linear-gradient(0, var(--gradient-main-background)); - --gradient-main-background: var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%; - - --color-background-hover: #{$color-background-hover}; - --color-background-dark: #{$color-background-dark}; - --color-background-darker: #{$color-background-darker}; - - --color-placeholder-light: #{$color-placeholder-light}; - --color-placeholder-dark: #{$color-placeholder-dark}; - - --color-primary: #{$color-primary}; - --color-primary-hover: #{$color-primary-hover}; - --color-primary-light: #{$color-primary-light}; - --color-primary-light-hover: #{$color-primary-light-hover}; - --color-primary-text: #{$color-primary-text}; - --color-primary-light-text: #{$color-primary-light-text}; - --color-primary-text-dark: #{$color-primary-text-dark}; - --color-primary-element: #{$color-primary-element}; - --color-primary-element-hover: #{$color-primary-element-hover}; - --color-primary-element-light: #{$color-primary-element-light}; - --color-primary-element-lighter: #{$color-primary-element-lighter}; - - --color-error: #{$color-error}; - --color-error-hover: #{$color-error-hover}; - --color-warning: #{$color-warning}; - --color-warning-hover: #{$color-warning-hover}; - --color-success: #{$color-success}; - --color-success-hover: #{$color-success-hover}; - - --color-text-maxcontrast: #{$color-text-maxcontrast}; - --color-text-light: #{$color-main-text}; - --color-text-lighter: #{$color-text-maxcontrast}; - - --image-logo: #{$image-logo}; - --image-login-background: #{$image-login-background}; - --image-logoheader: #{$image-logoheader}; - --image-favicon: #{$image-favicon}; - - --color-loading-light: #{$color-loading-light}; - --color-loading-dark: #{$color-loading-dark}; - - --color-box-shadow: #{$color-box-shadow}; - - --color-border: #{$color-border}; - --color-border-dark: #{$color-border-dark}; - - - --border-radius: #{$border-radius}; - --border-radius-large: #{$border-radius-large}; - --border-radius-pill: #{$border-radius-pill}; - - --font-face: #{$font-face}; - --default-font-size: #{$default-font-size}; - - --default-line-height: #{$default-line-height}; - - --animation-quick: #{$animation-quick}; - --animation-slow: #{$animation-slow}; - - --header-height: #{$header-height}; -} diff --git a/core/css/functions.scss b/core/css/functions.scss index 35db19c3142..62cd200a098 100644 --- a/core/css/functions.scss +++ b/core/css/functions.scss @@ -21,21 +21,6 @@ */ /** - * Removes the "#" from a color. - * - * @param string $color The color - * @return string The color without # - */ -@function remove-hash-from-color($color) { - $color: unquote($color); - $index: str-index(inspect($color), '#'); - @if $index { - $color: str-slice(inspect($color), 2); - } - @return $color; -} - -/** * @see core/src/icons.js */ @function match-color-string($color) { @@ -80,12 +65,3 @@ $varName: "--icon-#{$icon}-#{$color}"; background-image: var(#{$varName}); } - -@mixin position($value) { - @if $value == 'sticky' { - position: -webkit-sticky; // Safari support - position: sticky; - } @else { - position: $value; - } -} diff --git a/core/css/header.scss b/core/css/header.scss index a5a706ae239..4549c18487e 100644 --- a/core/css/header.scss +++ b/core/css/header.scss @@ -12,6 +12,7 @@ * @license GNU AGPL version 3 or any later version * */ +@use 'variables'; /* prevent ugly selection effect on accidental selection */ #header, @@ -48,7 +49,7 @@ top: 0; width: 100%; z-index: 2000; - height: $header-height; + height: variables.$header-height; background-color: var(--color-primary); background-image: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-element-light) 100%); box-sizing: border-box; @@ -78,7 +79,7 @@ @mixin header-menu-height() { min-height: calc(44px * 1.5); // show at least 1.5 entries - max-height: calc(100vh - #{$header-height} * 4); + max-height: calc(100vh - #{variables.$header-height} * 4); } #header { @@ -96,7 +97,7 @@ max-width: 350px; @include header-menu-height(); right: 5px; // relative to parent - top: $header-height; + top: variables.$header-height; margin: 0; &:not(.popovermenu) { @@ -229,7 +230,7 @@ display: flex; justify-content: center; align-items: center; - width: $header-height; + width: variables.$header-height; height: 100%; cursor: pointer; opacity: 0.6; @@ -300,9 +301,9 @@ /* NAVIGATION --------------------------------------------------------------- */ nav[role='navigation'] { display: inline-block; - width: $header-height; - height: $header-height; - margin-left: -$header-height; + width: variables.$header-height; + height: variables.$header-height; + margin-left: -#{variables.$header-height}; position: relative; } @@ -424,7 +425,7 @@ nav[role='navigation'] { /* Apps menu */ #appmenu { display: inline-flex; - min-width: $header-height; + min-width: variables.$header-height; z-index: 2; li { @@ -438,8 +439,8 @@ nav[role='navigation'] { position: relative; display: flex; margin: 0; - height: $header-height; - width: $header-height; + height: variables.$header-height; + width: variables.$header-height; align-items: center; justify-content: center; opacity: .6; @@ -642,13 +643,13 @@ nav[role='navigation'] { background: var(--color-primary) !important; &.skip-content { - left: $navigation-width; + left: variables.$navigation-width; margin-left: 3px; } &:focus, &:active { - top: $header-height; + top: variables.$header-height; } } diff --git a/core/css/icons.scss b/core/css/icons.scss index 9acec4895be..710dd6b0287 100644 --- a/core/css/icons.scss +++ b/core/css/icons.scss @@ -26,6 +26,8 @@ * along with this program. If not, see <http://www.gnu.org/licenses/>. * */ +@use 'variables'; +@import 'functions'; /* GLOBAL ------------------------------------------------------------------- */ [class^='icon-'], [class*=' icon-'] { @@ -117,36 +119,13 @@ audio, canvas, embed, iframe, img, input, object, video { background-size: 32px !important; } -.icon-white { - &.icon-shadow { - filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); - } -} - -.icon-audio-white { - filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); -} - -.icon-audio-off-white { - filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); -} - -.icon-fullscreen-white { - filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); -} - -.icon-screen-white { - filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); -} - -.icon-screen-off-white { - filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); -} - -.icon-video-white { - filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); -} - +.icon-white.icon-shadow, +.icon-audio-white, +.icon-audio-off-white, +.icon-fullscreen-white, +.icon-screen-white, +.icon-screen-off-white, +.icon-video-white, .icon-video-off-white { filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); } diff --git a/core/css/inputs.scss b/core/css/inputs.scss index 057daf672ee..4d444df8f62 100644 --- a/core/css/inputs.scss +++ b/core/css/inputs.scss @@ -11,6 +11,8 @@ * @license GNU AGPL version 3 or any later version * */ +@use 'variables'; +@import 'functions'; /* Specifically override browser styles */ input, textarea, select, button, div[contenteditable=true], div[contenteditable=false] { @@ -281,7 +283,7 @@ input { margin-right: 0; &:disabled { cursor: default; - @include icon-color('confirm-fade', 'actions', $color-black, 2, true); + @include icon-color('confirm-fade', 'actions', variables.$color-black, 2, true); } } @@ -330,8 +332,8 @@ select, /* Radio & Checkboxes */ $checkbox-radio-size: 14px; -$color-checkbox-radio-disabled: nc-darken($color-main-background, 27%); -$color-checkbox-radio-border: nc-darken($color-main-background, 47%); +$color-checkbox-radio-disabled: nc-darken(variables.$color-main-background, 27%); +$color-checkbox-radio-border: nc-darken(variables.$color-main-background, 47%); $color-checkbox-radio-white: #fff; input { diff --git a/core/css/mobile.scss b/core/css/mobile.scss index d1abb0176a5..2dd03480b26 100644 --- a/core/css/mobile.scss +++ b/core/css/mobile.scss @@ -1,4 +1,6 @@ -@media only screen and (max-width: $breakpoint-mobile) { +@use 'variables'; + +@media only screen and (max-width: variables.$breakpoint-mobile) { /* position share dropdown */ #dropdown { @@ -20,7 +22,7 @@ /* APP SIDEBAR TOGGLE and SWIPE ----------------------------------------------*/ #app-navigation { - transform: translateX(-#{$navigation-width}); + transform: translateX(-#{variables.$navigation-width}); } .snapjs-left { #app-navigation { @@ -64,7 +66,7 @@ #app-navigation-toggle-back { position: fixed; display: inline-block !important; - top: $header-height; + top: variables.$header-height; left: 0; width: 44px; height: 44px; @@ -117,7 +119,7 @@ display: none; } #body-settings #controls { - min-width: $breakpoint-mobile !important; + min-width: variables.$breakpoint-mobile !important; } /* do not show dates in filepicker */ diff --git a/core/css/styles.scss b/core/css/styles.scss index bd7e747169b..f1130979134 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -13,6 +13,7 @@ * @license GNU AGPL version 3 or any later version * */ +@use 'variables'; html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section { margin: 0; @@ -179,7 +180,8 @@ body { #controls { box-sizing: border-box; - @include position('sticky'); + position: -webkit-sticky; + position: sticky; height: 44px; padding: 0; margin: 0; @@ -190,7 +192,7 @@ body { -ms-user-select: none; user-select: none; display: flex; - top: $header-height; + top: variables.$header-height; } /* position controls for apps with app-navigation */ diff --git a/core/css/toast.scss b/core/css/toast.scss new file mode 100644 index 00000000000..88d9cbc6785 --- /dev/null +++ b/core/css/toast.scss @@ -0,0 +1,52 @@ +@use 'variables'; +@import 'functions'; + +.toastify.toast { + min-width: 200px; + background: none; + background-color: var(--color-main-background); + color: var(--color-main-text); + box-shadow: 0 0 6px 0 var(--color-box-shadow); + padding: 12px; + padding-right: 34px; + margin-top: 45px; + position: fixed; + z-index: 9000; + border-radius: var(--border-radius); + + .toast-close { + position: absolute; + top: 0; + right: 0; + width: 38px; + opacity: 0.4; + padding: 12px; + @include icon-color('close', 'actions', variables.$color-black, 2, true); + background-position: center; + background-repeat: no-repeat; + text-indent: 200%; + white-space: nowrap; + overflow: hidden; + + &:hover, &:focus, &:active { + cursor: pointer; + opacity: 1; + } + } +} +.toastify.toastify-top { + right: 10px; +} + +.toast-error { + border-left: 3px solid var(--color-error); +} +.toast-info { + border-left: 3px solid var(--color-primary); +} +.toast-warning { + border-left: 3px solid var(--color-warning); +} +.toast-success { + border-left: 3px solid var(--color-success); +} diff --git a/core/css/variables.scss b/core/css/variables.scss index 87ef3fdcb1b..9ec9effb0c6 100644 --- a/core/css/variables.scss +++ b/core/css/variables.scss @@ -19,8 +19,7 @@ * along with this program. If not, see <http://www.gnu.org/licenses/>. * */ - - // SCSS darken/lighten function override +// SCSS darken/lighten function override @function nc-darken($color, $value) { @return darken($color, $value); } @@ -117,3 +116,4 @@ $header-menu-profile-item-height: 66px; // mobile. Keep in sync with core/js/js.js $breakpoint-mobile: 1024px; + |