You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
268 lines
6.4 KiB
268 lines
6.4 KiB
/** 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; |
|
} |
|
|
|
$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)); |
|
} |
|
} |
|
|
|
.nc-theming-main-background { |
|
background-color: $color-primary; |
|
} |
|
|
|
.nc-theming-main-text { |
|
color: $color-primary-text; |
|
} |
|
|
|
.nc-theming-contrast { |
|
color: $color-primary-text; |
|
} |
|
|
|
@if ($invert) { |
|
#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); |
|
} |
|
|
|
#body-login { |
|
|
|
input, |
|
#alternative-logins li a { |
|
border: 1px solid nc-lighten($color-primary-text, 50%); |
|
} |
|
input.primary, |
|
button.primary, |
|
#alternative-logins li a { |
|
background-color: $color-primary; |
|
color: $color-primary-text; |
|
} |
|
a, |
|
label, |
|
footer p, |
|
#alternative-logins legend, |
|
.lost-password-container #lost-password { |
|
color: $color-primary-text; |
|
} |
|
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); |
|
} |
|
} |
|
} @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; |
|
} |
|
|
|
/* 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-background-mime') and $theming-background-mime != '' { |
|
#body-login, |
|
#firstrunwizard .firstrunwizard-header, |
|
#theming-preview { |
|
background-image: $image-login-background; |
|
background-color: $color-primary; |
|
} |
|
} @else { |
|
#theming-preview { |
|
background-image: $image-login-background; |
|
background-color: $color-primary; |
|
} |
|
} |
|
|
|
@if variable_exists('theming-logoheader-mime') and $theming-logoheader-mime != '' { |
|
#theming .advanced-option-logoheader .image-preview, |
|
body:not(#body-login) #header .logo { |
|
background-image: url(#{$image-logoheader}); |
|
} |
|
} @else { |
|
#theming .advanced-option-favicon .image-preview { |
|
background-image: none; |
|
} |
|
} |
|
|
|
@if variable_exists('theming-favicon-mime') and $theming-favicon-mime != '' { |
|
#theming .advanced-option-favicon .image-preview { |
|
background-image: url(#{$image-favicon}); |
|
} |
|
} @else { |
|
#theming .advanced-option-favicon .image-preview { |
|
background-image: none; |
|
} |
|
} |
|
|
|
input.primary, |
|
#alternative-logins li a { |
|
background-color: $color-primary-element; |
|
border: 1px solid $color-primary-text; |
|
color: $color-primary-text; |
|
} |
|
|
|
@if ($invert) { |
|
#body-login { |
|
.body-login-container { |
|
background-color: $color-main-background; |
|
} |
|
#submit-wrapper .icon-confirm-white { |
|
background-image: url('../../../core/img/actions/confirm.svg'); |
|
} |
|
.body-login-container { |
|
h2 { |
|
color: $color-main-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'); |
|
} |
|
} |
|
} |
|
#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; |
|
background-color: $color-primary; |
|
} |
|
#body-login { |
|
|
|
a, label, p { |
|
color: $color-primary-text; |
|
} |
|
|
|
} |
|
} @else { |
|
#body-login { |
|
background-color: $color-primary; |
|
} |
|
} |
|
|
|
/** Handle primary buttons for bright colors */ |
|
@if (luma($color-primary) > 0.8) { |
|
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; |
|
} |
|
} |
|
|
|
@if ($has-legal-links == 'true') { |
|
footer { |
|
height: 92px; |
|
} |
|
}
|
|
|