diff options
Diffstat (limited to 'apps/theming/css/theming.scss')
-rw-r--r-- | apps/theming/css/theming.scss | 285 |
1 files changed, 0 insertions, 285 deletions
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; - } -} |