mirror of
https://github.com/mwalbeck/nextcloud-breeze-dark.git
synced 2024-11-09 09:47:12 +00:00
128 lines
3.8 KiB
CSS
128 lines
3.8 KiB
CSS
/**
|
|
* Breeze Dark theme for Nextcloud
|
|
*
|
|
* @copyright Copyright (c) 2019, Magnus Walbeck <mw@mwalbeck.org>
|
|
*
|
|
* @license GNU AGPL version 3 or any later version, see COPYING file for more.
|
|
*/
|
|
|
|
:root {
|
|
--color-main-text: rgba(239, 240, 241, 1) !important;
|
|
--color-main-background: rgba(49, 54, 59, 1) !important;
|
|
--color-main-background-translucent: var(--color-main-background) !important;
|
|
|
|
--color-background-dark: var(--color-background-hover) !important;
|
|
--color-background-darker: rgba(35, 38, 41, 1) !important;
|
|
--color-background-alternate: rgba(77, 77, 77, 1);
|
|
--color-background-hover: rgba(61, 174, 233, 0.25) !important;
|
|
|
|
--color-primary: rgba(29, 153, 243, 1) !important;
|
|
--color-primary-text: var(--color-main-text) !important;
|
|
--color-primary-element: rgba(61, 174, 233, 1) !important;
|
|
|
|
--color-error: rgba(218, 68, 83, 1) !important;
|
|
--color-warning: rgba(246, 116, 0, 1) !important;
|
|
--color-success: rgba(39, 174, 96, 1) !important;
|
|
|
|
--color-text-maxcontrast: var(--color-text-inactive) !important;
|
|
--color-text-light: var(--color-main-text) !important;
|
|
--color-text-lighter: var(--color-main-text) !important;
|
|
--color-text-active: rgba(252, 252, 252, 1);
|
|
--color-text-inactive: rgba(189, 195, 199, 1);
|
|
--color-text-link: rgba(41, 128, 185, 1);
|
|
--color-text-background: rgba(189, 195, 199, 0.6);
|
|
|
|
--color-box-shadow: var(--color-primary) !important;
|
|
|
|
--color-border: rgba(112, 111, 110, 1) !important;
|
|
--color-border-dark: var(--color-border) !important;
|
|
--color-border-active: var(--color-primary-element);
|
|
|
|
--color-icon: rgba(242, 242, 242, 1);
|
|
}
|
|
|
|
input, label {
|
|
--color-checkbox-radio-border: var(--color-border);
|
|
--color-checkbox-radio-disabled: var(--color-background-alternate);
|
|
}
|
|
|
|
|
|
/* Login Screen ------------------------------------------------------------- */
|
|
|
|
body#body-login {
|
|
background-image:
|
|
url('../../../apps/theming/image/background'),
|
|
url('../../../core/img/background.png');
|
|
background-color: var(--color-main-background);
|
|
}
|
|
|
|
#body-login a {
|
|
color: var(--color-main-text) !important;
|
|
}
|
|
|
|
#body-login p.info {
|
|
color: var(--color-text-inactive);
|
|
}
|
|
|
|
#body-login form .grouptop input,
|
|
#body-login form .groupbottom input,
|
|
#body-login .lost-password-container form input,
|
|
#body-login #email,
|
|
#body-login #username,
|
|
#body-login #password {
|
|
background: var(--color-background-darker);
|
|
color: var(--color-main-text);
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.two-factor-provider:hover,
|
|
.two-factor-provider:focus,
|
|
.two-factor-provider:active {
|
|
border-color: var(--color-background-hover) !important;
|
|
background-color: var(--color-background-hover);
|
|
}
|
|
|
|
#body-login .totp-form input[type="tel"] {
|
|
background: var(--color-background-darker);
|
|
color: var(--color-main-text);
|
|
border: 1px solid var(--color-border);
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
#email-icon,
|
|
#username-icon,
|
|
#password-icon,
|
|
#body-login form img[src$="/core/img/actions/toggle.svg"] {
|
|
filter: invert(95%);
|
|
}
|
|
|
|
input.primary,
|
|
button.primary,
|
|
input[type="submit"],
|
|
#alternative-logins .button {
|
|
border: 1px solid var(--color-border) !important;
|
|
background-color: var(--color-main-background) !important;
|
|
color: var(--color-main-text) !important;
|
|
}
|
|
|
|
input.primary:hover,
|
|
input.primary:focus,
|
|
input.primary:active,
|
|
button.primary:hover,
|
|
button.primary:focus,
|
|
button.primary:active,
|
|
input[type="submit"]:hover,
|
|
input[type="submit"]:focus,
|
|
input[type="submit"]:active,
|
|
#alternative-logins .button:hover,
|
|
#alternative-logins .button:focus,
|
|
#alternative-logins .button:active {
|
|
background-color: var(--color-primary-element) !important;
|
|
color: var(--color-text-active) !important;
|
|
border-color: var(--color-border-active) !important;
|
|
}
|
|
|
|
#body-login .groupbottom input#show {
|
|
border: none;
|
|
}
|