229 lines
8.1 KiB
CSS
229 lines
8.1 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 {
|
|
/* Primary Breeze colours */
|
|
--color-paper-white: rgba(252, 252, 252, 1);
|
|
--color-cardboard-gray: rgba(239, 240, 241, 1);
|
|
--color-icon-gray: rgba(77, 77, 77, 1);
|
|
--color-charcoal-gray: rgba(49, 54, 59, 1);
|
|
--color-shade-black: rgba(35, 38, 41, 1);
|
|
--color-plasma-blue: rgba(61, 174, 233, 1);
|
|
|
|
/* Secondary Breeze colours */
|
|
--color-icon-red: rgba(218, 68, 83, 1);
|
|
--color-danger-red: rgba(237, 21, 21, 1);
|
|
--color-beware-orange: rgba(246, 116, 0, 1);
|
|
--color-icon-yellow: rgba(253, 188, 75, 1);
|
|
--color-sunbeam-yellow: rgba(201, 206, 59, 1);
|
|
--color-verdant-green: rgba(17, 209, 22, 1);
|
|
--color-icon-blue: rgba(29, 153, 243, 1);
|
|
|
|
/* Other Breeze Colours */
|
|
--color-noble-fir: rgba(39, 174, 96, 1);
|
|
--color-abyss-blue: rgba(41, 128, 185, 1);
|
|
--color-coastal-fog: rgba(127, 140, 141, 1);
|
|
--color-alternate-gray: rgba(189, 195, 199, 1);
|
|
|
|
/* An approximation of the blue hover colour seen in breeze dark */
|
|
--color-hover-blue: rgba(61, 174, 233, 0.3);
|
|
/* An approximation of the grey border colour seen in breeze dark */
|
|
--color-border-grey: rgba(103, 107, 110, 1);
|
|
/*Grey translucent colour for dashboard */
|
|
--color-dashboard-grey: rgba(49, 54, 59, 0.8);
|
|
/* Blue colour used for selected files in files table */
|
|
--color-selected-blue: rgba(61, 174, 233, 0.4);
|
|
|
|
--color-main-text: var(--color-cardboard-gray) !important;
|
|
--color-main-background: var(--color-charcoal-gray) !important;
|
|
--color-main-background-translucent: var(--color-main-background) !important;
|
|
|
|
--color-background-hover: var(--color-hover-blue) !important;
|
|
--color-background-dark: var(--color-main-background) !important;
|
|
--color-background-darker: var(--color-shade-black) !important;
|
|
--color-background-translucent: var(--color-dashboard-grey) !important;
|
|
|
|
--color-primary: var(--color-plasma-blue) !important;
|
|
--color-primary-light: var(--color-primary) !important;
|
|
--color-primary-text: var(--color-paper-white) !important;
|
|
--color-primary-text-dark: var(--color-main-text) !important;
|
|
--color-primary-element: var(--color-primary) !important;
|
|
--color-primary-element-light: var(--color-primary) !important;
|
|
|
|
--color-error: var(--color-icon-red) !important;
|
|
--color-warning: var(--color-beware-orange) !important;
|
|
--color-neutral: var(--color-sunbeam-yellow) !important;
|
|
--color-success: var(--color-noble-fir) !important;
|
|
|
|
--color-text-maxcontrast: var(--color-alternate-gray) !important;
|
|
--color-text-light: var(--color-main-text) !important;
|
|
--color-text-lighter: var(--color-text-maxcontrast) !important;
|
|
--color-text-dark: rgba(0, 0, 0, 1) !important;
|
|
--color-text-selection: var(--color-hover-blue) !important;
|
|
--color-text-link: rgba(30, 168, 226, 1) !important;
|
|
|
|
--color-loading-light: var(--color-alternate-gray) !important;
|
|
--color-loading-dark: var(--color-coastal-fog) !important;
|
|
|
|
--color-box-shadow: rgba(0, 0, 0, 0) !important;
|
|
--color-box-shadow-rgb: rgba(0, 0, 0, 0) !important;
|
|
|
|
--color-border: var(--color-border-grey) !important;
|
|
--color-border-dark: var(--color-border) !important;
|
|
|
|
--color-icon: rgba(242, 242, 242, 1);
|
|
|
|
/* Colour variables for markdown tables */
|
|
--table-color-border: var(--color-border) !important;
|
|
--table-color-heading: var(--color-primary-text) !important;
|
|
--table-color-heading-border: var(--color-border) !important;
|
|
--table-color-background: var(--color-main-background) !important;
|
|
--table-color-background-hover: var(--color-background-hover) !important;
|
|
--table-border-radius: var(--border-radius) !important;
|
|
|
|
/* Variables from the official dark theme that needs to be set incase Nextcloud thinks the light theme is preferred.
|
|
The variables should be adapted to better suit the Breeze Dark theme, but for the moment this will ensure a usable experience. */
|
|
--color-main-background-rgb: rgb(23, 23, 23);
|
|
--color-main-background-blur: rgba(var(--color-main-background-rgb), 0.8);
|
|
--background-invert-if-dark: invert(100%);
|
|
--background-invert-if-bright: no;
|
|
--color-success-rgb: 70, 186, 97;
|
|
--color-success-hover: #6ac780;
|
|
--color-warning-rgb: 236, 167, 0;
|
|
--color-warning-hover: #efb832;
|
|
--color-error-rgb: 233, 50, 45;
|
|
--color-error-hover: #ed5a56;
|
|
--color-scrollbar: #3d3d3d;
|
|
--color-text-maxcontrast-background-blur: #919191;
|
|
--color-text-maxcontrast-default: #8c8c8c;
|
|
--color-placeholder-light: #313131;
|
|
--color-placeholder-dark: #4a4a4a;
|
|
--color-primary-default: #0082c9;
|
|
--color-primary-hover: #04537f;
|
|
--color-primary-light-text: #99c0d6;
|
|
--color-primary-light-hover: #1d272d;
|
|
--color-primary-element-default-hover: #046ca5;
|
|
--color-primary-element-text: #fff;
|
|
--color-primary-element-hover: #04537f;
|
|
--color-primary-element-light-text: #99c0d6;
|
|
--color-primary-element-light-hover: #1d272d;
|
|
--color-primary-element-text-dark: #ededed;
|
|
}
|
|
|
|
/* Login Screen ------------------------------------------------------------- */
|
|
|
|
#body-login {
|
|
background-color: var(--color-main-background) !important;
|
|
background-image: url("../../../index.php/apps/theming/image/background"),
|
|
url("../../../core/img/background.png") !important;
|
|
}
|
|
|
|
#body-login a,
|
|
#body-login p.info {
|
|
color: var(--color-main-text) !important;
|
|
}
|
|
|
|
#body-login input[type="text"],
|
|
#body-login input[type="tel"],
|
|
#body-login input[type="password"],
|
|
#body-login input[type="email"] {
|
|
background: var(--color-background-darker) !important;
|
|
color: var(--color-main-text) !important;
|
|
}
|
|
|
|
#body-login input[type="tel"] {
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
|
|
#body-login .groupbottom input {
|
|
box-shadow: unset !important;
|
|
}
|
|
|
|
#body-login .toggle-password,
|
|
#body-login #email-icon {
|
|
filter: invert(95%);
|
|
}
|
|
|
|
#body-login input[type="submit"],
|
|
#body-login input[type="submit"].primary,
|
|
#body-login input[type="button"],
|
|
#body-login button.primary,
|
|
#body-login .button {
|
|
background-color: var(--color-main-background) !important;
|
|
border: 1px solid var(--color-border) !important;
|
|
color: var(--color-main-text) !important;
|
|
}
|
|
|
|
#body-login input[type="submit"]:hover,
|
|
#body-login input[type="submit"].primary:hover,
|
|
#body-login input[type="button"]:hover,
|
|
#body-login button.primary:hover,
|
|
#body-login .button:hover {
|
|
border-color: var(--color-primary-element) !important;
|
|
opacity: 1;
|
|
}
|
|
|
|
#body-login input[type="submit"]:active,
|
|
#body-login input[type="submit"]:focus,
|
|
#body-login input[type="submit"].primary:active,
|
|
#body-login input[type="submit"].primary:focus,
|
|
#body-login input[type="button"]:active,
|
|
#body-login input[type="button"]:focus,
|
|
#body-login button.primary:active,
|
|
#body-login button.primary:focus,
|
|
#body-login .button:active,
|
|
#body-login .button:focus {
|
|
background-color: var(--color-primary) !important;
|
|
border-color: var(--color-primary-element) !important;
|
|
}
|
|
|
|
#body-login .two-factor-provider:hover,
|
|
#body-login .two-factor-provider:focus,
|
|
#body-login .two-factor-provider:active {
|
|
background-color: var(--color-background-hover);
|
|
border-color: var(--color-primary-element) !important;
|
|
}
|
|
|
|
#body-login .warning input[type="password"] {
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
|
|
#body-login .warning input[type="submit"] {
|
|
background-color: inherit !important;
|
|
border: unset !important;
|
|
}
|
|
|
|
/* SAML Login */
|
|
#saml-select-user-back-end {
|
|
box-sizing: border-box;
|
|
margin: 0 auto;
|
|
width: 260px;
|
|
}
|
|
|
|
#saml-select-user-back-end .login-option {
|
|
background-color: var(--color-main-background);
|
|
border-color: var(--color-border);
|
|
border-radius: 100px;
|
|
box-sizing: border-box;
|
|
height: 50px;
|
|
min-width: 260px;
|
|
}
|
|
|
|
#saml-select-user-back-end .login-option:hover {
|
|
background-color: var(--color-primary);
|
|
border-color: var(--color-primary-element);
|
|
}
|
|
|
|
#saml-select-user-back-end .login-option a {
|
|
line-height: 50px;
|
|
}
|
|
|
|
#saml-select-user-back-end .login-option a:hover {
|
|
text-decoration: none;
|
|
}
|