aboutsummaryrefslogtreecommitdiffstats
path: root/apps/theming/css/theming.scss
diff options
context:
space:
mode:
Diffstat (limited to 'apps/theming/css/theming.scss')
-rw-r--r--apps/theming/css/theming.scss285
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;
- }
-}