diff options
Diffstat (limited to 'apps/theming/css')
| -rw-r--r-- | apps/theming/css/default.css | 121 | ||||
| -rw-r--r-- | apps/theming/css/settings-admin.scss | 148 | ||||
| -rw-r--r-- | apps/theming/css/theming.scss | 285 |
3 files changed, 91 insertions, 463 deletions
diff --git a/apps/theming/css/default.css b/apps/theming/css/default.css index 4bd9fb13bb8..41f0272f017 100644 --- a/apps/theming/css/default.css +++ b/apps/theming/css/default.css @@ -1,57 +1,118 @@ +/** SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors */ +/** SPDX-License-Identifier: AGPL-3.0-or-later */ :root { --color-main-background: #ffffff; --color-main-background-rgb: 255,255,255; --color-main-background-translucent: rgba(var(--color-main-background-rgb), .97); + --color-main-background-blur: rgba(var(--color-main-background-rgb), .8); + --filter-background-blur: blur(25px); --gradient-main-background: var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%; --color-background-hover: #f5f5f5; + /** Can be used e.g. to colorize selected table rows */ --color-background-dark: #ededed; + /** This should only be used for elements, not as a text background! Otherwise it will not work for accessibility. */ --color-background-darker: #dbdbdb; --color-placeholder-light: #e6e6e6; --color-placeholder-dark: #cccccc; - --color-primary: #0082c9; - --color-primary-text: #ffffff; - --color-primary-hover: #329bd3; - --color-primary-light: #e5f2f9; - --color-primary-light-text: #0082c9; - --color-primary-light-hover: #1e2b32; - --color-primary-text-dark: #ededed; - --color-primary-element: #0082c9; - --color-primary-element-hover: #198ece; - --color-primary-element-light: #17adff; - --color-primary-element-lighter: #d8ecf6; --color-main-text: #222222; - --color-text-maxcontrast: #767676; - --color-text-light: #222222; - --color-text-lighter: #767676; - --color-error: #e9322d; - --color-error-hover: #ed5a56; - --color-warning: #eca700; - --color-warning-hover: #efb832; - --color-success: #46ba61; - --color-success-hover: #6ac780; + --color-text-maxcontrast: #6b6b6b; + --color-text-maxcontrast-default: #6b6b6b; + --color-text-maxcontrast-background-blur: #595959; + /** @deprecated use ` --color-main-text` instead */ + --color-text-light: var(--color-main-text); + /** @deprecated use `--color-text-maxcontrast` instead */ + --color-text-lighter: var(--color-text-maxcontrast); + --color-scrollbar: var(--color-border-maxcontrast) transparent; + --color-error: #DB0606; + --color-error-rgb: 219,6,6; + --color-error-hover: #df2525; + --color-error-text: #c20505; + --color-warning: #A37200; + --color-warning-rgb: 163,114,0; + --color-warning-hover: #8a6000; + --color-warning-text: #7f5900; + --color-success: #2d7b41; + --color-success-rgb: 45,123,65; + --color-success-hover: #428854; + --color-success-text: #286c39; + --color-info: #0071ad; + --color-info-rgb: 0,113,173; + --color-info-hover: #197fb5; + --color-info-text: #006499; + --color-favorite: #A37200; --color-loading-light: #cccccc; --color-loading-dark: #444444; --color-box-shadow-rgb: 77,77,77; --color-box-shadow: rgba(var(--color-box-shadow-rgb), 0.5); --color-border: #ededed; --color-border-dark: #dbdbdb; - --font-face: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', Arial, sans-serif, 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; + --color-border-maxcontrast: #7d7d7d; + --font-face: system-ui, -apple-system, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --default-font-size: 15px; + --font-size-small: 13px; + /* 1.5 x font-size for accessibility */ + --default-line-height: 1.5; --animation-quick: 100ms; --animation-slow: 300ms; - --border-radius: 3px; - --border-radius-large: 10px; + /** Border width for input elements such as text fields and selects */ + --border-width-input: 1px; + --border-width-input-focused: 2px; + + /* Border radii (new values) */ + --border-radius-small: 4px; /* For smaller elements */ + --border-radius-element: 8px; /* For interactive elements such as buttons, input, navigation and list items */ + --border-radius-container: 12px; /* For smaller containers like action menus */ + --border-radius-container-large: 16px; /* For larger containers like body or modals */ + + /* Border radii (deprecated) */ + --border-radius: var(--border-radius-small); + --border-radius-large: var(--border-radius-element); + --border-radius-rounded: 28px; --border-radius-pill: 100px; - --default-line-height: 24px; + + --default-clickable-area: 34px; + --clickable-area-large: 48px; + --clickable-area-small: 24px; + --default-grid-baseline: 4px; + --header-height: 50px; + --header-menu-item-height: 44px; + /* An alpha mask to be applied to all icons on the navigation bar (header menu). + * Icons are have a size of 20px but usually we use MDI which have a content of 16px so 2px padding top bottom, + * for better gradient we must at first begin at those 2px (10% of height) as start and stop positions. + */ + --header-menu-icon-mask: linear-gradient(var(--color-background-plain-text) 25%, color-mix(in srgb, var(--color-background-plain-text), 55% transparent) 90%) alpha; + --navigation-width: 300px; --sidebar-min-width: 300px; --sidebar-max-width: 500px; - --list-min-width: 200px; - --list-max-width: 300px; - --header-menu-item-height: 44px; - --header-menu-profile-item-height: 66px; + /* Border radius of the body container */ + --body-container-radius: var(--border-radius-container-large); + /* Margin of the body container */ + --body-container-margin: calc(var(--default-grid-baseline) * 2); + /* Height of the body container to fully fill the view port */ + --body-height: calc(100% - env(safe-area-inset-bottom) - var(--header-height) - var(--body-container-margin)); --breakpoint-mobile: 1024px; - --primary-invert-if-bright: unset; - --background-invert-if-dark: unset; + --background-invert-if-dark: no; + --background-invert-if-bright: invert(100%); + --background-image-invert-if-bright: no; + --primary-invert-if-bright: no; + --primary-invert-if-dark: invert(100%); + --color-primary: #00679e; + --color-primary-text: #ffffff; + --color-primary-hover: #3285b1; + --color-primary-light: #e5eff5; + --color-primary-light-text: #00293f; + --color-primary-light-hover: #dbe4ea; + --color-primary-element: #00679e; + --color-primary-element-hover: #005a8a; + --color-primary-element-text: #ffffff; + --color-primary-element-text-dark: #f5f5f5; + --color-primary-element-light: #e5eff5; + --color-primary-element-light-hover: #dbe4ea; + --color-primary-element-light-text: #00293f; + --gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%); + --color-background-plain: #00679e; + --color-background-plain-text: #ffffff; + --image-background: url('/apps/theming/img/background/jenna-kim-the-globe.webp'); } diff --git a/apps/theming/css/settings-admin.scss b/apps/theming/css/settings-admin.scss deleted file mode 100644 index 5cec0e98199..00000000000 --- a/apps/theming/css/settings-admin.scss +++ /dev/null @@ -1,148 +0,0 @@ -#theming { - input { - width: 230px; - } - - input:focus, - input:active { - padding-right: 30px; - } - - .fileupload { - display: none; - } - - div > label { - position: relative; - } - - .theme-undo { - position: absolute; - top: -7px; // input padding - right: 4px; // input right margin + border - cursor: pointer; - opacity: .3; - padding: 7px; - vertical-align: top; - display: inline-block; - visibility: hidden; - height: 32px; // height of input - width: 32px; // height of input - } - form.uploadButton { - width: 411px; - } - form .theme-undo, - .theme-remove-bg { - cursor: pointer; - opacity: .3; - padding: 7px; - vertical-align: top; - display: inline-block; - float: right; - position: relative; - top: 4px; - right: 0px; - visibility: visible; - height: 32px; - width: 32px; - } - input[type='text']:hover + .theme-undo, - input[type='text'] + .theme-undo:hover, - input[type='text']:focus + .theme-undo, - input[type='text']:active + .theme-undo, - input[type='url']:hover + .theme-undo, - input[type='url'] + .theme-undo:hover, - input[type='url']:focus + .theme-undo, - input[type='url']:active + .theme-undo{ - visibility: visible; - } - - label span { - display: inline-block; - min-width: 175px; - padding: 8px 0px; - vertical-align: top; - } - - .icon-upload, - .uploadButton .icon-loading-small { - padding: 8px 20px; - width: 20px; - margin: 2px 0px; - min-height: 32px; - display: inline-block; - } - - #theming_settings_status { - height: 26px; - margin: 10px; - } - - #theming_settings_loading { - display: inline-block; - vertical-align: middle; - margin-right: 10px; - } - - #theming_settings_msg { - vertical-align: middle; - border-radius: 3px; - } - - #theming-preview { - width: 230px; - height: 140px; - background-size: cover; - background-position: center center; - text-align: center; - margin-left: 178px; - margin-top: 10px; - margin-bottom: 20px; - cursor: pointer; - background-color: var(--color-primary); - background-image: var(--image-background, var(--image-background-plain, url('../../../core/img/background.svg'), linear-gradient(40deg, #0082c9 0%, #30b6ff 100%))); - - #theming-preview-logo { - cursor: pointer; - width: 20%; - height: 20%; - margin-top: 20px; - display: inline-block; - background-position: center; - background-repeat: no-repeat; - background-size: contain; - background-image: var(--image-logo, url('../../../core/img/logo/logo.svg')); - } - } - - .theming-hints { - margin-top: 20px; - } - - .image-preview { - display: inline-block; - width: 80px; - height: 36px; - background-position: center; - background-repeat: no-repeat; - background-size: contain; - } - - #theming-preview-logoheader { - // Only using --image-logoheader to show the custom value only - background-image: var(--image-logoheader); - } - - #theming-preview-favicon { - background-image: var(--image-favicon); - } -} - -/* transition effects for theming value changes */ -#header { - transition: background-color 500ms linear; - svg, img { - transition: 500ms filter linear; - } -}
\ No newline at end of file diff --git a/apps/theming/css/theming.scss b/apps/theming/css/theming.scss deleted file mode 100644 index a5b55a5a738..00000000000 --- a/apps/theming/css/theming.scss +++ /dev/null @@ -1,285 +0,0 @@ -/** Calculate luma as it is also used in OCA\Theming\Util::calculateLuma */ -@function luma($c) { - $-local-red: red(rgba($c, 1.0)); - $-local-green: green(rgba($c, 1.0)); - $-local-blue: blue(rgba($c, 1.0)); - - @return (0.2126 * $-local-red + 0.7152 * $-local-green + 0.0722 * $-local-blue) / 255; -} - -@mixin faded-background { - background-color: $color-primary; - - @if ($color-primary == #0082C9) { - background-image: linear-gradient(40deg, $color-primary 0%, lighten($color-primary, 20%) 100%); - } @else { - /** This will be overwritten by the faded-background-image mixin if needed */ - background-image: none; - } -} - -@mixin faded-background-image { - @include faded-background; - background-size: contain; - - @if ($color-primary == #0082C9) { - background-image: $image-login-background, linear-gradient(40deg, $color-primary 0%, lighten($color-primary, 20%) 100%); - } - - @if($has-custom-background == true) { - background-size: cover; - background-repeat: no-repeat; - background-image: $image-login-background; - } -} - -$has-custom-background: variable_exists('theming-background-mime') and $theming-background-mime != ''; -$has-custom-logo: variable_exists('theming-logo-mime') and $theming-logo-mime != ''; -$invert: luma($color-primary) > 0.6; - -@if ($has-custom-logo == false) { - @if ($invert) { - $image-logo: url(icon-color-path('logo', 'logo', #000000, 1, true)); - } @else { - $image-logo: url(icon-color-path('logo', 'logo', #ffffff, 1, true)); - } -} - -@if ($invert) { - // too bright, use dark text to mix the primary - $color-primary-light: mix($color-primary, $color-main-text, 10%); - - #appmenu:not(.inverted) svg { - filter: invert(1); - } - #appmenu.inverted svg { - filter: none; - } - .searchbox input[type="search"] { - background-repeat: no-repeat; - background-position: 6px center; - background-color: transparent; - @include icon-color('search', 'actions', $color-black, 1, true); - } - #contactsmenu .icon-contacts { - @include icon-color('contacts', 'places', $color-black, 1, true); - } - #settings .icon-settings-white { - @include icon-color('settings', 'actions', $color-black, 1, true); - } - #appmenu .icon-more-white { - @include icon-color('more', 'actions', $color-black, 1, true); - } -} @else { - #appmenu:not(.inverted) svg { - filter: none; - } - #appmenu.inverted svg { - filter: invert(1); - } -} - -/* Colorized svg images */ -.icon-file, .icon-filetype-text { - background-image: url(./img/core/filetypes/text.svg?v=#{$theming-cachebuster}); -} - -.icon-folder, .icon-filetype-folder { - background-image: url(./img/core/filetypes/folder.svg?v=#{$theming-cachebuster}); -} - -.icon-filetype-folder-drag-accept { - background-image: url(./img/core/filetypes/folder-drag-accept.svg?v=#{$theming-cachebuster}) !important; -} - -#theming-preview-logo, -#header .logo { - background-image: $image-logo; -} - -#body-user, -#body-settings, -#body-public { - #header, - .profile__header, - .preview-card__header { - @include faded-background; - } -} - -#body-login, -#firstrunwizard .firstrunwizard-header, -#theming-preview { - @include faded-background-image; -} - -/* override styles for login screen in guest.css */ -@if ($has-custom-logo) { - // custom logo - #theming-preview-logo, - #header .logo { - background-size: contain; - } - - #body-login #header .logo { - margin-bottom: 22px; - } -} @else { - // default logo - @if ($invert) { - #theming-preview-logo, - #header .logo { - opacity: .6; - } - } -} - -@if variable_exists('theming-logoheader-mime') and $theming-logoheader-mime != '' { - #theming .advanced-option-logoheader .image-preview, - body:not(#body-login) #header .logo { - background-image: $image-logoheader; - } -} @else { - #theming .advanced-option-favicon .image-preview { - background-image: none; - } -} - -input.primary { - background-color: $color-primary-element; - border: 1px solid $color-primary-text; - color: $color-primary-text; -} - -#body-login { - input.primary:enabled:hover, - input.primary:enabled:focus, - button.primary:enabled:hover, - button.primary:enabled:focus, - a.primary:enabled:hover, - a.primary:enabled:focus { - color: $color-primary-text; - background-image: linear-gradient(40deg, $color-primary 0%, lighten($color-primary, 20%) 100%); - } -} - -@if ($invert) { - #body-login { - .body-login-container { - background-color: transparentize(nc-lighten($color-primary, 30%), 0.2); - color: $color-primary-text !important; - - h2 { - color: $color-primary-text; - } - .icon-search.icon-white { - // CSS variable is not used here since it is on the public page layout, - // where the dark theme doesn't apply at the moment - background-image: url('../../../core/img/actions/search.svg'); - } - } - - input { - border: 1px solid nc-lighten($color-primary-text, 50%); - } - input.primary, - button.primary { - background-color: $color-primary; - color: $color-primary-text; - } - :not(div.alternative-logins) > a, - label, - footer p, - .alternative-logins legend, - .lost-password-container #lost-password, - .warning, .update, .error { - color: $color-primary-text !important; - } - input[type='checkbox'].checkbox--white + label:before { - border-color: nc-darken($color-primary-element, 40%) !important; - } - input[type='checkbox'].checkbox--white:not(:disabled):not(:checked) + label:hover:before, - input[type='checkbox'].checkbox--white:focus + label:before { - border-color: nc-darken($color-primary-element, 30%) !important; - } - input[type='checkbox'].checkbox--white:checked + label:before { - border-color: nc-darken($color-primary-element, 30%) !important; - background-color: nc-darken($color-primary-element, 30%) !important; - @include icon-color('checkbox-mark', 'actions', $color-white, 1, true); - } - #submit-wrapper .icon-confirm-white { - background-image: url('../../../core/img/actions/confirm.svg'); - } - - .two-factor-provider { - &:hover, &:focus { - border-color: $color-primary-text; - } - img { - filter: invert(1); - } - } - } - #body-public #header .icon-more-white { - background-image: var(--icon-more-000); - } -} - -// plain background color for login page -@if $image-login-plain == 'true' { - #body-login, #firstrunwizard .firstrunwizard-header, #theming-preview { - background-image: none !important; - } - #body-login { - - :not(.alternative-logins) a, label, p { - color: $color-primary-text; - } - - } -} - -/** Handle primary buttons for bright colors */ -@if (luma($color-primary) > 0.8) { - :root { - --color-primary-light-text: var(--color-primary-text); - } - select, - button, .button, - input:not([type='range']), - textarea, - div[contenteditable=true], - .pager li a { - &.primary:not(:disabled) { - background-color: var(--color-background-dark); - color: var(--color-main-text); - border-color: var(--color-text-lighter); - - &:hover, &:focus, &:active { - background-color: var(--color-background-darker); - color: var(--color-main-text); - border-color: var(--color-text); - } - } - } -} - -@if ($color-primary == #ffffff) { - /* show grey border below header */ - #body-user #header, - #body-settings #header, - #body-public #header { - border-bottom: 1px solid #ebebeb; - } - - /* show triangle in header in grey */ - #appmenu li a.active:before, - .header-right #settings #expand:before { - border-bottom-color:#ebebeb; - } - - /* show border around quota bar in files app */ - .app-files #quota .quota-container { - border: 1px solid #ebebeb; - } -} |