nextcloud/theme/main.css

598 lines
21 KiB
CSS

/* Latte Theme */
/* Frappe Theme */
/* Macchiato Theme */
/* Mocha Theme */
[data-theme-light] {
--color-main-background: rgba(239, 241, 245, 0.93) ;
--color-main-background-rgb: rgb(239, 241, 245);
--color-main-background-translucent: rgba(239, 241, 245, 0.97);
--color-main-background-blur: rgba(239, 241, 245, 0.8);
--filter-background-blur: blur(25px);
--gradient-main-background: var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%;
--color-background-hover: rgb(188, 192, 204);
--color-background-dark: #cfd2dc;
--color-background-darker: rgb(204, 208, 218);
--color-placeholder-light: #b0b4c1;
--color-placeholder-dark: rgb(172, 176, 190);
--color-main-text: rgb(76, 79, 105);
--color-text-maxcontrast: rgb(92, 95, 119);
--color-text-maxcontrast-default: #72758c;
--color-text-maxcontrast-background-blur: rgb(108, 111, 133);
--color-text-light: var(--color-main-text);
--color-text-lighter: var(--color-text-maxcontrast);
--color-scrollbar: rgb(136, 57, 239);
--color-error: rgb(210, 15, 57);
--color-error-rgb: rgb(210, 15, 57);
--color-error-hover: #df103d;
--color-error-text: #bd0e33;
--color-warning: rgb(254, 100, 11);
--color-warning-rgb: rgb(254, 100, 11);
--color-warning-hover: #fe6c17;
--color-warning-text: #ee5801;
--color-success: rgb(64, 160, 43);
--color-success-rgb: rgb(64, 160, 43);
--color-success-hover: #45ac2e;
--color-success-text: #3a9027;
--color-info: rgb(30, 102, 245);
--color-info-rgb: rgb(30, 102, 245);
--color-info-hover: #296ef6;
--color-info-text: #0b56ed;
--color-loading-light: rgb(156, 160, 176);
--color-loading-dark: rgb(92, 95, 119);
--color-box-shadow-rgb: #e0e3ea;
--color-box-shadow: #e1e5eb;
--color-border: rgb(220, 224, 232);
--color-border-dark: var(--color-placeholder-light);
--color-border-maxcontrast: var(--color-placeholder-light);
--color-primary: rgb(230, 69, 83);
--color-primary-default: rgb(230, 69, 83);
--color-primary-text: rgb(220, 224, 232);
--color-primary-hover: #e43847;
--color-primary-light: rgb(64, 160, 43);
--color-primary-light-text: rgb(220, 224, 232);
--color-primary-light-hover: #3d9829;
--color-primary-element: rgb(230, 69, 83);
--color-primary-element-hover: #e43847;
--color-primary-element-text: rgb(220, 224, 232);
--color-primary-element-text-dark: rgb(230, 233, 239);
--color-primary-element-light: rgb(30, 102, 245);
--color-primary-element-light-hover: #115df4;
--color-primary-element-light-text: rgb(220, 224, 232);
--gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
--font-face: system-ui, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Cantarell, Ubuntu, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--default-font-size: 15px;
--animation-quick: 100ms;
--animation-slow: 300ms;
--border-radius: 3px;
--border-radius-large: 10px;
--border-radius-rounded: 28px;
--border-radius-pill: 100px;
--default-clickable-area: 44px;
--default-line-height: 24px;
--default-grid-baseline: 4px;
--header-height: 50px;
--navigation-width: 300px;
--sidebar-min-width: 300px;
--sidebar-max-width: 500px;
--list-min-width: 200px;
--list-max-width: 300px;
--header-menu-item-height: 44px;
--header-menu-profile-item-height: 66px;
--breakpoint-mobile: 1024px;
--background-invert-if-dark: invert(100%);
--background-invert-if-bright: no;
--background-image-invert-if-bright: no;
--primary-invert-if-bright: no;
--primary-invert-if-dark: invert(100%);
}
[data-theme-dark] {
--color-main-background: rgba(48, 52, 70, 0.93) ;
--color-main-background-rgb: rgb(48, 52, 70);
--color-main-background-translucent: rgba(48, 52, 70, 0.97);
--color-main-background-blur: rgba(48, 52, 70, 0.8);
--filter-background-blur: blur(25px);
--gradient-main-background: var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%;
--color-background-hover: rgb(81, 87, 109);
--color-background-dark: #494d63;
--color-background-darker: rgb(65, 69, 89);
--color-placeholder-light: #686f88;
--color-placeholder-dark: rgb(98, 104, 128);
--color-main-text: rgb(198, 208, 245);
--color-text-maxcontrast: rgb(181, 191, 226);
--color-text-maxcontrast-default: #aab1d0;
--color-text-maxcontrast-background-blur: rgb(165, 173, 206);
--color-text-light: var(--color-main-text);
--color-text-lighter: var(--color-text-maxcontrast);
--color-scrollbar: rgb(202, 158, 230);
--color-error: rgb(231, 130, 132);
--color-error-rgb: rgb(231, 130, 132);
--color-error-hover: #e8888a;
--color-error-text: #e16466;
--color-warning: rgb(239, 159, 118);
--color-warning-rgb: rgb(239, 159, 118);
--color-warning-hover: #f0a47d;
--color-warning-text: #eb8956;
--color-success: rgb(166, 209, 137);
--color-success-rgb: rgb(166, 209, 137);
--color-success-hover: #aad38f;
--color-success-text: #93c770;
--color-info: rgb(140, 170, 238);
--color-info-rgb: rgb(140, 170, 238);
--color-info-hover: #92aeef;
--color-info-text: #6b92e9;
--color-loading-light: rgb(115, 121, 148);
--color-loading-dark: rgb(181, 191, 226);
--color-box-shadow-rgb: #34384d;
--color-box-shadow: #3d425a;
--color-border: rgb(35, 38, 52);
--color-border-dark: var(--color-placeholder-light);
--color-border-maxcontrast: var(--color-placeholder-light);
--color-primary: rgb(234, 153, 156);
--color-primary-default: rgb(234, 153, 156);
--color-primary-text: rgb(35, 38, 52);
--color-primary-hover: #e7898c;
--color-primary-light: rgb(166, 209, 137);
--color-primary-light-text: rgb(35, 38, 52);
--color-primary-light-hover: #9dcc7d;
--color-primary-element: rgb(234, 153, 156);
--color-primary-element-hover: #e7898c;
--color-primary-element-text: rgb(35, 38, 52);
--color-primary-element-text-dark: rgb(41, 44, 60);
--color-primary-element-light: rgb(140, 170, 238);
--color-primary-element-light-hover: #7c9eec;
--color-primary-element-light-text: rgb(35, 38, 52);
--gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
--font-face: system-ui, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Cantarell, Ubuntu, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--default-font-size: 15px;
--animation-quick: 100ms;
--animation-slow: 300ms;
--border-radius: 3px;
--border-radius-large: 10px;
--border-radius-rounded: 28px;
--border-radius-pill: 100px;
--default-clickable-area: 44px;
--default-line-height: 24px;
--default-grid-baseline: 4px;
--header-height: 50px;
--navigation-width: 300px;
--sidebar-min-width: 300px;
--sidebar-max-width: 500px;
--list-min-width: 200px;
--list-max-width: 300px;
--header-menu-item-height: 44px;
--header-menu-profile-item-height: 66px;
--breakpoint-mobile: 1024px;
--background-invert-if-dark: invert(100%);
--background-invert-if-bright: no;
--background-image-invert-if-bright: no;
--primary-invert-if-bright: no;
--primary-invert-if-dark: invert(100%);
}
[data-theme-dark-highcontrast] {
--color-main-background: rgba(30, 30, 46, 0.93) ;
--color-main-background-rgb: rgb(30, 30, 46);
--color-main-background-translucent: rgba(30, 30, 46, 0.97);
--color-main-background-blur: rgba(30, 30, 46, 0.8);
--filter-background-blur: blur(25px);
--gradient-main-background: var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%;
--color-background-hover: rgb(69, 71, 90);
--color-background-dark: #393a4f;
--color-background-darker: rgb(49, 50, 68);
--color-placeholder-light: #5f6279;
--color-placeholder-dark: rgb(88, 91, 112);
--color-main-text: rgb(205, 214, 244);
--color-text-maxcontrast: rgb(186, 194, 222);
--color-text-maxcontrast-default: #aab1cb;
--color-text-maxcontrast-background-blur: rgb(166, 173, 200);
--color-text-light: var(--color-main-text);
--color-text-lighter: var(--color-text-maxcontrast);
--color-scrollbar: rgb(203, 166, 247);
--color-error: rgb(243, 139, 168);
--color-error-rgb: rgb(243, 139, 168);
--color-error-hover: #f491ac;
--color-error-text: #ef688e;
--color-warning: rgb(250, 179, 135);
--color-warning-rgb: rgb(250, 179, 135);
--color-warning-hover: #fab78d;
--color-warning-text: #f89c62;
--color-success: rgb(166, 227, 161);
--color-success-rgb: rgb(166, 227, 161);
--color-success-hover: #aae4a6;
--color-success-text: #8ada83;
--color-info: rgb(137, 180, 250);
--color-info-rgb: rgb(137, 180, 250);
--color-info-hover: #8fb8fa;
--color-info-text: #649cf8;
--color-loading-light: rgb(108, 112, 134);
--color-loading-dark: rgb(186, 194, 222);
--color-box-shadow-rgb: #232338;
--color-box-shadow: #2c2c46;
--color-border: rgb(17, 17, 27);
--color-border-dark: var(--color-placeholder-light);
--color-border-maxcontrast: var(--color-placeholder-light);
--color-primary: rgb(235, 160, 172);
--color-primary-default: rgb(235, 160, 172);
--color-primary-text: rgb(17, 17, 27);
--color-primary-hover: #e8909e;
--color-primary-light: rgb(166, 227, 161);
--color-primary-light-text: rgb(17, 17, 27);
--color-primary-light-hover: #98df92;
--color-primary-element: rgb(235, 160, 172);
--color-primary-element-hover: #e8909e;
--color-primary-element-text: rgb(17, 17, 27);
--color-primary-element-text-dark: rgb(24, 24, 37);
--color-primary-element-light: rgb(137, 180, 250);
--color-primary-element-light-hover: #76a8f9;
--color-primary-element-light-text: rgb(17, 17, 27);
--gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
--font-face: system-ui, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Cantarell, Ubuntu, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--default-font-size: 15px;
--animation-quick: 100ms;
--animation-slow: 300ms;
--border-radius: 3px;
--border-radius-large: 10px;
--border-radius-rounded: 28px;
--border-radius-pill: 100px;
--default-clickable-area: 44px;
--default-line-height: 24px;
--default-grid-baseline: 4px;
--header-height: 50px;
--navigation-width: 300px;
--sidebar-min-width: 300px;
--sidebar-max-width: 500px;
--list-min-width: 200px;
--list-max-width: 300px;
--header-menu-item-height: 44px;
--header-menu-profile-item-height: 66px;
--breakpoint-mobile: 1024px;
--background-invert-if-dark: invert(100%);
--background-invert-if-bright: no;
--background-image-invert-if-bright: no;
--primary-invert-if-bright: no;
--primary-invert-if-dark: invert(100%);
}
[data-theme-light-highcontrast] {
--color-main-background: rgba(36, 39, 58, 0.93) ;
--color-main-background-rgb: rgb(36, 39, 58);
--color-main-background-translucent: rgba(36, 39, 58, 0.97);
--color-main-background-blur: rgba(36, 39, 58, 0.8);
--filter-background-blur: blur(25px);
--gradient-main-background: var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%;
--color-background-hover: rgb(73, 77, 100);
--color-background-dark: #3e425a;
--color-background-darker: rgb(54, 58, 79);
--color-placeholder-light: #616781;
--color-placeholder-dark: rgb(91, 96, 120);
--color-main-text: rgb(202, 211, 245);
--color-text-maxcontrast: rgb(184, 192, 224);
--color-text-maxcontrast-default: #aab1ce;
--color-text-maxcontrast-background-blur: rgb(165, 173, 203);
--color-text-light: var(--color-main-text);
--color-text-lighter: var(--color-text-maxcontrast);
--color-scrollbar: rgb(198, 160, 246);
--color-error: rgb(237, 135, 150);
--color-error-rgb: rgb(237, 135, 150);
--color-error-hover: #ee8d9b;
--color-error-text: #e8677a;
--color-warning: rgb(245, 169, 127);
--color-warning-rgb: rgb(245, 169, 127);
--color-warning-hover: #f6ad85;
--color-warning-text: #f2925c;
--color-success: rgb(166, 218, 149);
--color-success-rgb: rgb(166, 218, 149);
--color-success-hover: #aadc9a;
--color-success-text: #8fd17a;
--color-info: rgb(138, 173, 244);
--color-info-rgb: rgb(138, 173, 244);
--color-info-hover: #90b1f5;
--color-info-text: #6795f1;
--color-loading-light: rgb(110, 115, 141);
--color-loading-dark: rgb(184, 192, 224);
--color-box-shadow-rgb: #292b41;
--color-box-shadow: #32344f;
--color-border: rgb(24, 25, 38);
--color-border-dark: var(--color-placeholder-light);
--color-border-maxcontrast: var(--color-placeholder-light);
--color-primary: rgb(238, 153, 160);
--color-primary-default: rgb(238, 153, 160);
--color-primary-text: rgb(24, 25, 38);
--color-primary-hover: #eb8890;
--color-primary-light: rgb(166, 218, 149);
--color-primary-light-text: rgb(24, 25, 38);
--color-primary-light-hover: #9bd587;
--color-primary-element: rgb(238, 153, 160);
--color-primary-element-hover: #eb8890;
--color-primary-element-text: rgb(24, 25, 38);
--color-primary-element-text-dark: rgb(30, 32, 48);
--color-primary-element-light: rgb(138, 173, 244);
--color-primary-element-light-hover: #79a1f2;
--color-primary-element-light-text: rgb(24, 25, 38);
--gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
--font-face: system-ui, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Cantarell, Ubuntu, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--default-font-size: 15px;
--animation-quick: 100ms;
--animation-slow: 300ms;
--border-radius: 3px;
--border-radius-large: 10px;
--border-radius-rounded: 28px;
--border-radius-pill: 100px;
--default-clickable-area: 44px;
--default-line-height: 24px;
--default-grid-baseline: 4px;
--header-height: 50px;
--navigation-width: 300px;
--sidebar-min-width: 300px;
--sidebar-max-width: 500px;
--list-min-width: 200px;
--list-max-width: 300px;
--header-menu-item-height: 44px;
--header-menu-profile-item-height: 66px;
--breakpoint-mobile: 1024px;
--background-invert-if-dark: invert(100%);
--background-invert-if-bright: no;
--background-image-invert-if-bright: no;
--primary-invert-if-bright: no;
--primary-invert-if-dark: invert(100%);
}
/*Theme selection hide old description*/
.theming__preview .checkbox-radio-switch__text,
.theming__preview--light h3, .theming__preview--light p,
.theming__preview--dark h3, .theming__preview--dark p,
.theming__preview--light-highcontrast h3, .theming__preview--light-highcontrast p,
.theming__preview--dark-highcontrast h3, .theming__preview--dark-highcontrast p {
visibility: hidden;
}
.theming__preview .checkbox-radio-switch__text::before {
visibility: visible;
content: "Enable this theme";
}
.theming__preview--light h3::before {
content: "Latte theme";
visibility: visible;
}
.theming__preview--light p::before {
content: "The catppuccino light theme";
visibility: visible;
}
.theming__preview--light .theming__preview-image,
.theming__preview--dark .theming__preview-image,
.theming__preview--light-highcontrast .theming__preview-image,
.theming__preview--dark-highcontrast .theming__preview-image {
display: none;
}
.theming__preview--dark h3::before {
content: "Frappe Theme";
visibility: visible;
}
.theming__preview--dark p::before {
content: "The milde and cozy catppuccino dark theme";
visibility: visible;
}
.theming__preview--light-highcontrast h3::before {
content: "Macchiato Theme";
visibility: visible;
}
.theming__preview--light-highcontrast p::before {
content: "Catpuccinos perfect mix between Mocha and Frappe";
visibility: visible;
}
.theming__preview--dark-highcontrast h3::before {
content: "Mocha Theme";
visibility: visible;
}
.theming__preview--dark-highcontrast p::before {
content: "Catppuccinos dark theme withe bright colors";
visibility: visible;
}
/*Setting left nav Pannel to be transparent without blur*/
.app-navigation {
background-color: var(--color-main-background) !important;
backdrop-filter: None !important;
}
/*Setting markdown editor link color to primary light*/
.paragraph-content a {
color: var(--color-primary-element-light) !important;
}
#files-public-content .paragraph-content a {
color: var(--color-info-text) !important;
}
/*Fixing Dashboards toggel item widget visibility (e.g. weather)*/
.action-item__menutoggle {
background-color: var(--color-primary-element-light) !important;
}
/*Fixing Dashboard Welcome msg visibility*/
.app-dashboard h2:nth-child(1) {
color: var(--color-main-text) !important;
}
/*Fixing Mail sidebar 1 text visibility when selected*/
.app-navigation-entry.active a {
color: var(--color-primary-element-text) !important;
}
/*Fixing Mail sidebar 2 text visibility when selected*/
.list-item__wrapper.list-item__wrapper--active .list-item-content__main span,
.list-item__wrapper.list-item__wrapper--active .list-item-content__main span .envelope__preview-text {
color: var(--color-primary-element-text) !important;
}
/*Fixing visibility of left header label and right header icons*/
.header-right .header-menu button,
.header-right .header-menu .unified-search__button[data-v-3883344d],
.app-menu-main li .app-menu-entry--label,
.header-right .memories-searchbar .input-field__input::placeholder,
.header-right .button-vue__icon {
color: var(--color-main-text) !important;
}
/*Fixing visibility of Memory search icon*/
.header-right .memories-searchbar .input-field__icon--leading {
filter: brightness(0) saturate(100%) invert(93%) sepia(17%) saturate(7243%) hue-rotate(295deg) brightness(97%) contrast(89%);
}
/*Fixing share link folder icon*/
#files-public-content .files-fileList .thumbnail-wrapper .thumbnail {
filter: brightness(0) saturate(100%) invert(93%) sepia(17%) saturate(7243%) hue-rotate(295deg) brightness(97%) contrast(89%);
}
#files-public-content .files-fileList .date,
#files-public-content .files-fileList .date * {
color: var(--color-main-text) !important;
}
.editor hr {
background-color: var(--color-main-text) !important;
color: var(--color-main-text) !important;
}
.files-list .action-item button,
.files-list .action-item input {
color: var(--color-main-background-rgb) !important;
}
/*Fixing (drop down selected) buttons */
.button-vue.button-vue--vue-tertiary svg {
fill: var(--color-main-text) !important;
}
.button-vue.button-vue--vue-tertiary {
color: var(--color-main-text) !important;
}
.vs__selected,
.action-item .v-popper .button-vue {
color: var(--color-main-background-rgb) !important;
}
.vs__selected svg,
.action-item .v-popper .button-vue svg {
fill: var(--color-main-background-rgb) !important;
}
/*Exception Done button of Deck*/
.completed-button.button-vue .button-vue__wrapper svg {
fill: var(--color-main-background-rgb) !important;
}
.completed-button.button-vue .button-vue__wrapper{
color: var(--color-main-background-rgb) !important;
}
/*Fixing notecard msg background*/
.notecard {
--note-background: color-mix(in srgb, var(--note-theme) 15%, var(--color-main-background-rgb)) !important;
}
/* Fix settings popups */
.navigation-list__link.navigation-list__link--active{
color: var(--color-main-background-rgb) !important;
}
._formBoxItem_v5un7_20 {
--color-primary-element-extra-light: color-mix(in srgb, var(--color-primary-element-light) 15%, var(--color-main-background-rgb)) !important;
}
._formBoxItem_v5un7_20 a,
._formBoxItem_v5un7_20 button{
color: var(--color-info) !important;
}
button[aria-label="Sharing options"] svg,
button[aria-label="Locked by editing online in Text"] svg,
.action button svg {
fill: var(--color-main-text) !important;
//background-color: var(--color-background-dark) !important
}
.action-separator{
border-bottom: 2px solid var(--color-placeholder-light) !important;
}
/* Fixing file share header */
.app-sidebar-tabs .button-vue {
color: var(--color-main-text) !important;
}
.app-sidebar-tabs .button-vue svg {
fill: var(--color-main-text) !important;
}
/* Fixing editor */
.entry-single-action svg,
button[title="Insert emoji"] svg,
button.emoji-mart-anchor svg,
button.avatar-list svg {
fill: var(--color-main-text) !important;
}
.close-icon svg {
fill: var(--color-error-text) !important;
}
/* Fixing Tasks */
.app-navigation-toggle-wrapper svg,
button[aria-label="Toggle starred"] svg {
fill: var(--color-text-maxcontrast) !important;
}
.priority .star-outline-icon svg{
fill: var(--color-error-text) !important;
}
.cookbook-app-content .set-center-icon svg,
.cookbook-app-content .set-all-icon svg {
fill: var(--color-text-maxcontrast) !important;
}
button[aria-label="Rename"] .material-design-icon.pencil-icon svg{
fill: var(--color-text-maxcontrast) !important;
}
.task-list .task-item__body--active {
background-color: color-mix(in srgb, var(--color-primary-element-light) 15%, var(--color-main-background-rgb)) !important;
}
.stack__header {
border: 2px solid var(--color-primary) !important;
border-radius: var(--border-radius-large) !important;
padding: 2px !important;
}
.stack__header::before {
background-color: rgba(0, 0, 0, 0) !important;
}
.card.card__editable {
border-color: var(--color-placeholder-light) !important;
}
/*Hiding photos app*/
header li.app-menu-entry:has(> a[href="/apps/photos/"]) {
display: none !important;
}
/*# sourceMappingURL=main.css.map */