From 8a450440589373e440147a4886c7be01e5f82cc9 Mon Sep 17 00:00:00 2001 From: Kyattsukuro Date: Fri, 23 Jan 2026 19:48:00 +0100 Subject: [PATCH] theme follow nextcloud changes --- theme/main.css | 566 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 566 insertions(+) create mode 100644 theme/main.css diff --git a/theme/main.css b/theme/main.css new file mode 100644 index 0000000..ee8ce96 --- /dev/null +++ b/theme/main.css @@ -0,0 +1,566 @@ +/* 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: #dee2e9; + --color-border-maxcontrast: #c1c8d6; + --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: #2c2f41; + --color-border-maxcontrast: #20222f; + --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: #1a1a29; + --color-border-maxcontrast: #0f0f18; + --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: #212234; + --color-border-maxcontrast: #161722; + --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 */ +.vs__selected, +.action-item .button-vue { + color: var(--color-main-background-rgb) !important; +} + +.vs__selected svg, +.action-item .button-vue svg { + fill: 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; +} + +.header-close 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; +} + +/*Hiding photos app*/ +header li.app-menu-entry:has(> a[href="/apps/photos/"]) { + display: none !important; +} + + +/*# sourceMappingURL=main.css.map */