gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-03-01 14:22:32 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

split out themes.css

Browse Source
This commit is contained in:
zadam 2019-05-01 08:57:44 +02:00
parent 3ccf553fda
commit e7c053d273
4 changed files with 180 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

179
src/public/stylesheets/style.css
View File

@ -1,182 +1,3 @@
:root {
--main-font-family: inherit;
--main-font-size: normal;
--tree-font-family: inherit;
--tree-font-size: normal;
--detail-font-family: inherit;
--detail-font-size: normal;
--detail-text-font-family: inherit;
--main-background-color: white;
--main-text-color: black;
--main-border-color: #ccc;
--accented-background-color: #eee;
--more-accented-background-color: #ccc;
--header-background-color: #f8f8f8;
--button-background-color: #eee;
--button-disabled-background-color: #ccc;
--button-border-color: #ddd;
--button-text-color: black;
--button-border-radius: 5px;
--muted-text-color: #444;
--input-text-color: black;
--input-background-color: white;
--modal-background-color: white;
--hover-item-text-color: black;
--hover-item-background-color: #eee;
--active-item-text-color: black;
--active-item-background-color: #ccc;
--menu-text-color: black;
--menu-background-color: white;
--tooltip-background-color: #f8f8f8;
--link-color: blue;
}
body.theme-black {
--main-background-color: black;
--main-text-color: white;
--main-border-color: #ddd;
--accented-background-color: #222;
--more-accented-background-color: #444;
--header-background-color: black;
--button-background-color: #333;
--button-border-color: #444;
--button-text-color: white;
--button-border-radius: 5px;
--muted-text-color: #ccc;
--input-text-color: white;
--input-background-color: black;
--modal-background-color: #222;
--hover-item-text-color: black;
--hover-item-background-color: #aaa;
--active-item-text-color: black;
--active-item-background-color: #ccc;
--menu-text-color: white;
--menu-background-color: #222;
--tooltip-background-color: black;
--link-color: lightskyblue;
}
body.theme-black .CodeMirror {
filter: invert(100%) hue-rotate(180deg);
}
body.theme-dark {
--main-background-color: #333;
--main-text-color: white;
--main-border-color: #ddd;
--accented-background-color: #555;
--more-accented-background-color: #777;
--header-background-color: #333;
--button-background-color: #555;
--button-border-color: #444;
--button-text-color: white;
--button-border-radius: 5px;
--muted-text-color: #ccc;
--input-text-color: white;
--input-background-color: #333;
--modal-background-color: #555;
--hover-item-text-color: black;
--hover-item-background-color: #aaa;
--active-item-text-color: black;
--active-item-background-color: #ccc;
--menu-text-color: white;
--menu-background-color: #222;
--tooltip-background-color: #333;
--link-color: lightskyblue;
}
body.theme-dark .CodeMirror {
filter: invert(90%) hue-rotate(180deg);
}
body {
/* -- Overrides generic colors. ------------------------------------------------------------- */
--ck-color-base-foreground: var(--accented-background-color);
--ck-color-focus-border: var(--main-border-color);
--ck-color-text: var(--main-text-color);
--ck-color-shadow-drop: var(--main-background-color);
--ck-color-shadow-inner: var(--main-background-color);
/* -- Overrides the default .ck-button class colors. ---------------------------------------- */
--ck-color-button-default-background: var(--accented-background-color);
--ck-color-button-default-hover-background: var(--more-accented-background-color);
--ck-color-button-default-active-background: var(--more-accented-background-color);
--ck-color-button-default-active-shadow: var(--more-accented-background-color);
--ck-color-button-default-disabled-background: var(--accented-background-color);
--ck-color-button-on-background: var(--accented-background-color);
--ck-color-button-on-hover-background: var(--more-accented-background-color);
--ck-color-button-on-active-background: var(--more-accented-background-color);
--ck-color-button-on-active-shadow: var(--more-accented-background-color);
--ck-color-button-on-disabled-background: var(--main-background-color);
--ck-color-button-action-background: var(--accented-background-color);
--ck-color-button-action-hover-background: var(--more-accented-background-color);
--ck-color-button-action-active-background: var(--more-accented-background-color);
--ck-color-button-action-active-shadow: var(--more-accented-background-color);
--ck-color-button-action-disabled-background: var(--main-background-color);
--ck-color-button-action-text: var(--main-text-color);
--ck-color-button-save: hsl(120, 100%, 46%);
--ck-color-button-cancel: hsl(15, 100%, 56%);
/* -- Overrides the default .ck-dropdown class colors. -------------------------------------- */
--ck-color-dropdown-panel-background: var(--accented-background-color);
--ck-color-dropdown-panel-border: var(--main-border-color);
/* -- Overrides the default .ck-input class colors. ----------------------------------------- */
--ck-color-input-background: var(--accented-background-color);
--ck-color-input-border: var(--main-border-color);
--ck-color-input-text: var(--main-text-color);
--ck-color-input-disabled-background: var(--main-background-color);
--ck-color-input-disabled-border: var(--main-border-color);
--ck-color-input-disabled-text: var(--muted-text-color);
/* -- Overrides the default .ck-list class colors. ------------------------------------------ */
--ck-color-list-background: var(--accented-background-color);
--ck-color-list-button-hover-background: var(--ck-color-base-foreground);
--ck-color-list-button-on-background: var(--ck-color-base-active);
--ck-color-list-button-on-background-focus: var(--ck-color-base-active-focus);
--ck-color-list-button-on-text: var(--ck-color-base-background);
/* -- Overrides the default .ck-balloon-panel class colors. --------------------------------- */
--ck-color-panel-background: var(--accented-background-color);
--ck-color-panel-border: var(--main-border-color);
/* -- Overrides the default .ck-toolbar class colors. --------------------------------------- */
--ck-color-toolbar-background: var(--accented-background-color);
--ck-color-toolbar-border: var(--main-border-color);
/* -- Overrides the default .ck-tooltip class colors. --------------------------------------- */
--ck-color-tooltip-background: var(--accented-background-color);
--ck-color-tooltip-text: var(--main-text-color);
/* -- Overrides the default colors used by the ckeditor5-image package. --------------------- */
--ck-color-image-caption-background: var(--main-background-color);
--ck-color-image-caption-text: var(--main-text-color);
/* -- Overrides the default colors used by the ckeditor5-widget package. -------------------- */
--ck-color-widget-blurred-border: var(--main-border-color);
--ck-color-widget-hover-border: var(--main-border-color);
--ck-color-widget-editable-focus-background: var(--main-background-color);
/* -- Overrides the default colors used by the ckeditor5-link package. ---------------------- */
--ck-color-link-default: var(--link-color);
--ck-color-table-focused-cell-background: var(--more-accented-background-color);
}
html {
/* this fixes FF filter vs. position fixed bug: https://github.com/zadam/trilium/issues/233 */
height: 100%;

178
src/public/stylesheets/themes.css Normal file
View File

@ -0,0 +1,178 @@
:root {
--main-font-family: inherit;
--main-font-size: normal;
--tree-font-family: inherit;
--tree-font-size: normal;
--detail-font-family: inherit;
--detail-font-size: normal;
--detail-text-font-family: inherit;
--main-background-color: white;
--main-text-color: black;
--main-border-color: #ccc;
--accented-background-color: #eee;
--more-accented-background-color: #ccc;
--header-background-color: #f8f8f8;
--button-background-color: #eee;
--button-disabled-background-color: #ccc;
--button-border-color: #ddd;
--button-text-color: black;
--button-border-radius: 5px;
--muted-text-color: #444;
--input-text-color: black;
--input-background-color: white;
--modal-background-color: white;
--hover-item-text-color: black;
--hover-item-background-color: #eee;
--active-item-text-color: black;
--active-item-background-color: #ccc;
--menu-text-color: black;
--menu-background-color: white;
--tooltip-background-color: #f8f8f8;
--link-color: blue;
}
body.theme-black {
--main-background-color: black;
--main-text-color: white;
--main-border-color: #ddd;
--accented-background-color: #222;
--more-accented-background-color: #444;
--header-background-color: black;
--button-background-color: #333;
--button-border-color: #444;
--button-text-color: white;
--button-border-radius: 5px;
--muted-text-color: #ccc;
--input-text-color: white;
--input-background-color: black;
--modal-background-color: #222;
--hover-item-text-color: black;
--hover-item-background-color: #aaa;
--active-item-text-color: black;
--active-item-background-color: #ccc;
--menu-text-color: white;
--menu-background-color: #222;
--tooltip-background-color: black;
--link-color: lightskyblue;
}
body.theme-black .CodeMirror {
filter: invert(100%) hue-rotate(180deg);
}
body.theme-dark {
--main-background-color: #333;
--main-text-color: white;
--main-border-color: #ddd;
--accented-background-color: #555;
--more-accented-background-color: #777;
--header-background-color: #333;
--button-background-color: #555;
--button-border-color: #444;
--button-text-color: white;
--button-border-radius: 5px;
--muted-text-color: #ccc;
--input-text-color: white;
--input-background-color: #333;
--modal-background-color: #555;
--hover-item-text-color: black;
--hover-item-background-color: #aaa;
--active-item-text-color: black;
--active-item-background-color: #ccc;
--menu-text-color: white;
--menu-background-color: #222;
--tooltip-background-color: #333;
--link-color: lightskyblue;
}
body.theme-dark .CodeMirror {
filter: invert(90%) hue-rotate(180deg);
}
body {
/* -- Overrides generic colors. ------------------------------------------------------------- */
--ck-color-base-foreground: var(--accented-background-color);
--ck-color-focus-border: var(--main-border-color);
--ck-color-text: var(--main-text-color);
--ck-color-shadow-drop: var(--main-background-color);
--ck-color-shadow-inner: var(--main-background-color);
/* -- Overrides the default .ck-button class colors. ---------------------------------------- */
--ck-color-button-default-background: var(--accented-background-color);
--ck-color-button-default-hover-background: var(--more-accented-background-color);
--ck-color-button-default-active-background: var(--more-accented-background-color);
--ck-color-button-default-active-shadow: var(--more-accented-background-color);
--ck-color-button-default-disabled-background: var(--accented-background-color);
--ck-color-button-on-background: var(--accented-background-color);
--ck-color-button-on-hover-background: var(--more-accented-background-color);
--ck-color-button-on-active-background: var(--more-accented-background-color);
--ck-color-button-on-active-shadow: var(--more-accented-background-color);
--ck-color-button-on-disabled-background: var(--main-background-color);
--ck-color-button-action-background: var(--accented-background-color);
--ck-color-button-action-hover-background: var(--more-accented-background-color);
--ck-color-button-action-active-background: var(--more-accented-background-color);
--ck-color-button-action-active-shadow: var(--more-accented-background-color);
--ck-color-button-action-disabled-background: var(--main-background-color);
--ck-color-button-action-text: var(--main-text-color);
--ck-color-button-save: hsl(120, 100%, 46%);
--ck-color-button-cancel: hsl(15, 100%, 56%);
/* -- Overrides the default .ck-dropdown class colors. -------------------------------------- */
--ck-color-dropdown-panel-background: var(--accented-background-color);
--ck-color-dropdown-panel-border: var(--main-border-color);
/* -- Overrides the default .ck-input class colors. ----------------------------------------- */
--ck-color-input-background: var(--accented-background-color);
--ck-color-input-border: var(--main-border-color);
--ck-color-input-text: var(--main-text-color);
--ck-color-input-disabled-background: var(--main-background-color);
--ck-color-input-disabled-border: var(--main-border-color);
--ck-color-input-disabled-text: var(--muted-text-color);
/* -- Overrides the default .ck-list class colors. ------------------------------------------ */
--ck-color-list-background: var(--accented-background-color);
--ck-color-list-button-hover-background: var(--ck-color-base-foreground);
--ck-color-list-button-on-background: var(--ck-color-base-active);
--ck-color-list-button-on-background-focus: var(--ck-color-base-active-focus);
--ck-color-list-button-on-text: var(--ck-color-base-background);
/* -- Overrides the default .ck-balloon-panel class colors. --------------------------------- */
--ck-color-panel-background: var(--accented-background-color);
--ck-color-panel-border: var(--main-border-color);
/* -- Overrides the default .ck-toolbar class colors. --------------------------------------- */
--ck-color-toolbar-background: var(--accented-background-color);
--ck-color-toolbar-border: var(--main-border-color);
/* -- Overrides the default .ck-tooltip class colors. --------------------------------------- */
--ck-color-tooltip-background: var(--accented-background-color);
--ck-color-tooltip-text: var(--main-text-color);
/* -- Overrides the default colors used by the ckeditor5-image package. --------------------- */
--ck-color-image-caption-background: var(--main-background-color);
--ck-color-image-caption-text: var(--main-text-color);
/* -- Overrides the default colors used by the ckeditor5-widget package. -------------------- */
--ck-color-widget-blurred-border: var(--main-border-color);
--ck-color-widget-hover-border: var(--main-border-color);
--ck-color-widget-editable-focus-background: var(--main-background-color);
/* -- Overrides the default colors used by the ckeditor5-link package. ---------------------- */
--ck-color-link-default: var(--link-color);
--ck-color-table-focused-cell-background: var(--more-accented-background-color);
}

1
src/views/desktop.ejs
View File

@ -328,6 +328,7 @@
<script src="libraries/chrome-tabs/chrome-tabs.js"></script>
<link href="libraries/chrome-tabs/chrome-tabs.css" rel="stylesheet">
<link href="stylesheets/themes.css" rel="stylesheet">
<link href="stylesheets/style.css" rel="stylesheet">
<link href="stylesheets/desktop.css" rel="stylesheet">

1
src/views/mobile.ejs
View File

@ -98,6 +98,7 @@
<script src="javascripts/mobile.js" crossorigin type="module"></script>
<link href="stylesheets/themes.css" rel="stylesheet">
<link href="stylesheets/style.css" rel="stylesheet">
<link href="stylesheets/mobile.css" rel="stylesheet">