mwalbeck/nextcloud-breeze-dark
1
0
Fork 0
mirror of https://github.com/mwalbeck/nextcloud-breeze-dark.git synced 2024-11-14 20:16:26 +00:00
Code Issues Releases Wiki Activity
25
nextcloud-breeze-dark/css/guest-automatic.css
Magnus Walbeck db9a99f7e2
Add extra variables from the default dark theme so they take preceden… (#328) 
* Add extra variables from the default dark theme so they take precedent incase the default light theme is active
2023-02-28 14:18:32 +01:00

230 lines
8.9 KiB
CSS
Raw Permalink Blame History

/**
* 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.
*/
@media (prefers-color-scheme: dark) {
: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;
}
}
Reference in New Issue View Git Blame Copy Permalink