mirror of
https://github.com/notion-enhancer/notion-enhancer.git
synced 2025-04-05 13:19:03 +00:00
collect theme variables: dark colours
This commit is contained in:
parent
2f90f65f1c
commit
a0edfd1c27
GPG Key ID:
C7A48B7846AA706D
@ -19,16 +19,18 @@
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.smooth-scrollbars .notion-light-theme ::-webkit-scrollbar-thumb {
|
||||
background-color: #d9d8d6;
|
||||
border: 1px solid #cacac8;
|
||||
}
|
||||
.smooth-scrollbars .notion-light-theme ::-webkit-scrollbar-thumb:hover {
|
||||
background: #cacac8;
|
||||
}
|
||||
.smooth-scrollbars .notion-dark-theme ::-webkit-scrollbar-thumb {
|
||||
background-color: #505457;
|
||||
background-color: var(--theme_dark-scrollbar);
|
||||
border: var(--theme_dark-scrollbar-border);
|
||||
}
|
||||
.smooth-scrollbars .notion-dark-theme ::-webkit-scrollbar-thumb:hover {
|
||||
background: #696d6f;
|
||||
background: var(--theme_dark-scrollbar_hover);
|
||||
}
|
||||
|
||||
.smooth-scrollbars .notion-light-theme ::-webkit-scrollbar-thumb {
|
||||
background-color: var(--theme_light-scrollbar);
|
||||
border: 1px solid var(--theme_light-scrollbar-border);
|
||||
}
|
||||
.smooth-scrollbars .notion-light-theme ::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--theme_light-scrollbar_hover);
|
||||
}
|
||||
|
||||
@ -5,5 +5,6 @@
|
||||
* (https://dragonwocky.me/) under the MIT license
|
||||
*/
|
||||
|
||||
@import './theme.css';
|
||||
@import './scrollbars.css';
|
||||
@import './titlebar.css';
|
||||
|
||||
243
mods/core/theme.css
Normal file
243
mods/core/theme.css
Normal file
@ -0,0 +1,243 @@
|
||||
/*
|
||||
* notion-enhancer
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com>
|
||||
* (c) 2020 TarasokUA
|
||||
* (https://dragonwocky.me/) under the MIT license
|
||||
*/
|
||||
|
||||
:root {
|
||||
/** light **/
|
||||
|
||||
--theme_light-dragarea: #e6e6e6;
|
||||
--theme_light-button_hover: rgb(239, 239, 239);
|
||||
--theme_light-button_hover-border: transparent;
|
||||
--theme_light-button_close: #e81123;
|
||||
--theme_light-button_close-fill: white;
|
||||
|
||||
--theme_light-scrollbar: #d9d8d6;
|
||||
--theme_light-scrollbar-border: #cacac8;
|
||||
--theme_light-scrollbar_hover: #cacac8;
|
||||
|
||||
/** dark **/
|
||||
|
||||
--theme_dark-main: rgb(47, 52, 55);
|
||||
--theme_dark-sidebar: rgb(55, 60, 63);
|
||||
--theme_dark-dragarea: #272d2f;
|
||||
--theme_dark-primary: rgb(46, 170, 220);
|
||||
--theme_dark-primary_hover: rgb(6, 156, 205);
|
||||
--theme_dark-primary_click: rgb(0, 141, 190);
|
||||
--theme_dark-primary_indicator: rgb(235, 87, 87);
|
||||
|
||||
--theme_dark-card: rgb(63, 68, 71);
|
||||
--theme_dark-card_border: rgb(63, 68, 71);
|
||||
--theme_dark-button_hover: rgb(71, 76, 80);
|
||||
--theme_dark-button_close: #e81123;
|
||||
--theme_dark-button_close-fill: white;
|
||||
--theme_dark-button_hover-border: transparent;
|
||||
--theme_dark-table_border: rgba(255, 255, 255, 0.1);
|
||||
|
||||
--theme_dark-scrollbar: #505457;
|
||||
--theme_dark-scrollbar-border: transparent;
|
||||
--theme_dark-scrollbar_hover: #696d6f;
|
||||
|
||||
--theme_dark-text_gray: rgba(151, 154, 155, 0.95);
|
||||
--theme_dark-text_brown: rgb(147, 114, 100);
|
||||
--theme_dark-text_orange: rgb(255, 163, 68);
|
||||
--theme_dark-text_yellow: rgb(255, 220, 73);
|
||||
--theme_dark-text_green: rgb(77, 171, 154);
|
||||
--theme_dark-text_blue: rgb(82, 156, 202);
|
||||
--theme_dark-text_purple: rgb(154, 109, 215);
|
||||
--theme_dark-text_pink: rgb(226, 85, 161);
|
||||
--theme_dark-text_red: rgb(255, 115, 105);
|
||||
--theme_dark-bg_gray: rgba(151, 154, 155, 0.5);
|
||||
--theme_dark-bg_brown: rgba(147, 114, 100, 0.5);
|
||||
--theme_dark-bg_orange: rgba(255, 163, 68, 0.5);
|
||||
--theme_dark-bg_yellow: rgba(255, 220, 73, 0.5);
|
||||
--theme_dark-bg_green: rgba(77, 171, 154, 0.5);
|
||||
--theme_dark-bg_blue: rgba(82, 156, 202, 0.5);
|
||||
--theme_dark-bg_purple: rgba(154, 109, 215, 0.5);
|
||||
--theme_dark-bg_pink: rgba(226, 85, 161, 0.5);
|
||||
--theme_dark-bg_red: rgba(255, 115, 105, 0.5);
|
||||
--theme_dark-line_gray: rgb(69, 75, 78);
|
||||
--theme_dark-line_brown: rgb(67, 64, 64);
|
||||
--theme_dark-line_orange: rgb(89, 74, 58);
|
||||
--theme_dark-line_yellow: rgb(89, 86, 59);
|
||||
--theme_dark-line_green: rgb(53, 76, 75);
|
||||
--theme_dark-line_blue: rgb(54, 73, 84);
|
||||
--theme_dark-line_purple: rgb(68, 63, 87);
|
||||
--theme_dark-line_pink: rgb(83, 59, 76);
|
||||
--theme_dark-line_red: rgb(89, 65, 65);
|
||||
}
|
||||
|
||||
/** backgrounds **/
|
||||
|
||||
.notion-dark-theme [style*='background: rgb(55, 60, 63)'],
|
||||
.notion-dark-theme [style*='background: rgba(69, 75, 78, 0.3)'] {
|
||||
background: var(--theme_dark-sidebar) !important;
|
||||
}
|
||||
.notion-body.dark,
|
||||
.notion-dark-theme [style*='background: rgb(47, 52, 55)'] {
|
||||
background: var(--theme_dark-main) !important;
|
||||
}
|
||||
|
||||
/** databases **/
|
||||
|
||||
.notion-dark-theme [style*='box-shadow: rgb(47, 52, 55) -3px 0px 0px'] {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.notion-dark-theme .notion-table-view > :first-child > :first-child,
|
||||
.notion-dark-theme [style*='background: rgb(71, 76, 80)'],
|
||||
.notion-dark-theme [style*='background: rgb(80, 85, 88)'],
|
||||
.notion-dark-theme [style*='background: rgb(98, 102, 104)'] {
|
||||
background: var(--theme_dark-button_hover) !important;
|
||||
box-shadow: 0 0 0 0.5px var(--theme_dark-button_hover-border);
|
||||
}
|
||||
|
||||
.notion-dark-theme [style*='background: rgb(63, 68, 71)'] {
|
||||
background: var(--theme_dark-card) !important;
|
||||
}
|
||||
.notion-dark-theme .notion-frame [style*='background: rgb(63, 68, 71)'] {
|
||||
border: 0.5px solid var(--theme_dark-card_border);
|
||||
}
|
||||
|
||||
.notion-dark-theme [style*='border-top: 1px solid rgba(255, 255, 255, 0.14)'],
|
||||
.notion-dark-theme [style*='border-top: 1px solid rgba(255, 255, 255, 0.07)'] {
|
||||
border-top: 1px solid var(--theme_dark-table_border) !important;
|
||||
}
|
||||
.notion-dark-theme
|
||||
[style*='box-shadow: rgba(255, 255, 255, 0.14) -1px 0px 0px'] {
|
||||
box-shadow: var(--theme_dark-table_border) -1px 0px 0px !important;
|
||||
}
|
||||
.notion-dark-theme
|
||||
[style*='border-bottom: 1px solid rgba(255, 255, 255, 0.14)'],
|
||||
.notion-dark-theme
|
||||
[style*='border-bottom: 1px solid rgba(255, 255, 255, 0.07)'] {
|
||||
border-bottom: 1px solid var(--theme_dark-table_border) !important;
|
||||
}
|
||||
.notion-dark-theme
|
||||
[style*='box-shadow: rgba(255, 255, 255, 0.14) 0px 1px 0px'] {
|
||||
box-shadow: var(--theme_dark-table_border) 0px 1px 0px !important;
|
||||
}
|
||||
.notion-dark-theme [style*='border-right: 1px solid rgba(255, 255, 255, 0.14)'],
|
||||
.notion-dark-theme
|
||||
[style*='border-right: 1px solid rgba(255, 255, 255, 0.07)'] {
|
||||
border-right: 1px solid var(--theme_dark-table_border) !important;
|
||||
}
|
||||
.notion-dark-theme
|
||||
[style*='box-shadow: rgba(255, 255, 255, 0.07) 0px -1px 0px'] {
|
||||
box-shadow: var(--theme_dark-table_border) 0px -1px 0px !important;
|
||||
}
|
||||
.notion-dark-theme [style*='border-left: 1px solid rgba(255, 255, 255, 0.14)'],
|
||||
.notion-dark-theme [style*='border-left: 1px solid rgba(255, 255, 255, 0.07)'] {
|
||||
border-left: 1px solid var(--theme_dark-table_border) !important;
|
||||
}
|
||||
.notion-dark-theme
|
||||
[style*='box-shadow: rgba(255, 255, 255, 0.14) 0px 1px 0px inset'] {
|
||||
box-shadow: var(--theme_dark-table_border) 0px 1px 0px inset !important;
|
||||
}
|
||||
|
||||
/** colours **/
|
||||
|
||||
.notion-dark-theme [style*='background: rgb(46, 170, 220)'] {
|
||||
background: var(--theme_dark-primary) !important;
|
||||
}
|
||||
.notion-dark-theme [style*='background: rgb(6, 156, 205)'] {
|
||||
background: var(--theme_dark-primary_hover) !important;
|
||||
}
|
||||
.notion-dark-theme [style*='background: rgb(0, 141, 190)'] {
|
||||
background: var(--theme_dark-primary_click) !important;
|
||||
}
|
||||
.notion-dark-theme [style*='background: rgb(235, 87, 87)'] {
|
||||
background: var(--theme_dark-primary_indicator) !important;
|
||||
}
|
||||
|
||||
.notion-dark-theme [style*='color:rgba(151,154,155,0.95)'] {
|
||||
color: var(--theme_dark-text_gray) !important;
|
||||
}
|
||||
.notion-dark-theme [style*='background: rgba(151, 154, 155, 0.5)'],
|
||||
.notion-dark-theme [style*='background:rgb(69,75,78)'] {
|
||||
background: var(--theme_dark-bg_gray) !important;
|
||||
}
|
||||
.notion-dark-theme [style*='background: rgb(69, 75, 78)'] {
|
||||
background: var(--theme_dark-line_gray) !important;
|
||||
}
|
||||
.notion-dark-theme [style*='color:rgb(147,114,100)'] {
|
||||
color: var(--theme_dark-text_brown) !important;
|
||||
}
|
||||
.notion-dark-theme [style*='background: rgba(147, 114, 100, 0.5)'],
|
||||
.notion-dark-theme [style*='background:rgb(67,64,64)'] {
|
||||
background: var(--theme_dark-bg_brown) !important;
|
||||
}
|
||||
.notion-dark-theme [style*='background: rgb(67, 64, 64)'] {
|
||||
background: var(--theme_dark-line_brown) !important;
|
||||
}
|
||||
.notion-dark-theme [style*='color:rgb(255,163,68)'] {
|
||||
color: var(--theme_dark-text_orange) !important;
|
||||
}
|
||||
.notion-dark-theme [style*='background: rgba(255, 163, 68, 0.5)'],
|
||||
.notion-dark-theme [style*='background:rgb(89,74,58)'] {
|
||||
background: var(--theme_dark-bg_orange) !important;
|
||||
}
|
||||
.notion-dark-theme [style*='background: rgb(89, 74, 58)'] {
|
||||
background: var(--theme_dark-line_orange) !important;
|
||||
}
|
||||
.notion-dark-theme [style*='color:rgb(255,220,73)'] {
|
||||
color: var(--theme_dark-text_yellow) !important;
|
||||
}
|
||||
.notion-dark-theme [style*='background: rgba(255, 220, 73, 0.5)'],
|
||||
.notion-dark-theme [style*='background:rgb(89,86,59)'] {
|
||||
background: var(--theme_dark-bg_yellow) !important;
|
||||
}
|
||||
.notion-dark-theme [style*='background: rgb(89, 86, 59)'] {
|
||||
background: var(--theme_dark-line_yellow) !important;
|
||||
}
|
||||
.notion-dark-theme [style*='color:rgb(77,171,154)'] {
|
||||
color: var(--theme_dark-text_green) !important;
|
||||
}
|
||||
.notion-dark-theme [style*='background: rgba(77, 171, 154, 0.5)'],
|
||||
.notion-dark-theme [style*='background:rgb(53,76,75)'] {
|
||||
background: var(--theme_dark-bg_green) !important;
|
||||
}
|
||||
.notion-dark-theme [style*='background: rgb(53, 76, 75)'] {
|
||||
background: var(--theme_dark-line_green) !important;
|
||||
}
|
||||
.notion-dark-theme [style*='color:rgb(82,156,202)'] {
|
||||
color: var(--theme_dark-text_blue) !important;
|
||||
}
|
||||
.notion-dark-theme [style*='background: rgba(82, 156, 202, 0.5)'],
|
||||
.notion-dark-theme [style*='background:rgb(54,73,84)'] {
|
||||
background: var(--theme_dark-bg_blue) !important;
|
||||
}
|
||||
.notion-dark-theme [style*='background: rgb(54, 73, 84)'] {
|
||||
background: var(--theme_dark-line_blue) !important;
|
||||
}
|
||||
.notion-dark-theme [style*='color:rgb(154,109,215)'] {
|
||||
color: var(--theme_dark-text_purple) !important;
|
||||
}
|
||||
.notion-dark-theme [style*='background: rgba(154, 109, 215, 0.5)'],
|
||||
.notion-dark-theme [style*='background:rgb(68,63,87)'] {
|
||||
background: var(--theme_dark-bg_purple) !important;
|
||||
}
|
||||
.notion-dark-theme [style*='background: rgb(68, 63, 87)'] {
|
||||
background: var(--theme_dark-line_purple) !important;
|
||||
}
|
||||
.notion-dark-theme [style*='color:rgb(226,85,161)'] {
|
||||
color: var(--theme_dark-text_pink) !important;
|
||||
}
|
||||
.notion-dark-theme [style*='background: rgba(226, 85, 161, 0.5)'],
|
||||
.notion-dark-theme [style*='background:rgb(83,59,76)'] {
|
||||
background: var(--theme_dark-bg_pink) !important;
|
||||
}
|
||||
.notion-dark-theme [style*='background: rgb(83, 59, 76)'] {
|
||||
background: var(--theme_dark-line_pink) !important;
|
||||
}
|
||||
.notion-dark-theme [style*='color:rgb(255,115,105)'] {
|
||||
color: var(--theme_dark-text_red) !important;
|
||||
}
|
||||
.notion-dark-theme [style*='background: rgba(255, 115, 105, 0.5);'],
|
||||
.notion-dark-theme [style*='background:rgb(89,65,65)'] {
|
||||
background: var(--theme_dark-bg_red) !important;
|
||||
}
|
||||
.notion-dark-theme [style*='background: rgb(89, 65, 65)'] {
|
||||
background: var(--theme_dark-line_red) !important;
|
||||
}
|
||||
@ -6,28 +6,22 @@
|
||||
*/
|
||||
|
||||
.frameless .notion-topbar {
|
||||
height: calc(var(--dragarea-height, 10px) + 45px) !important;
|
||||
height: calc(var(--configured-dragarea_height, 10px) + 45px) !important;
|
||||
}
|
||||
|
||||
.frameless .window-dragarea {
|
||||
height: var(--dragarea-height, 10px);
|
||||
height: var(--configured-dragarea_height, 10px);
|
||||
width: 100%;
|
||||
}
|
||||
.frameless .notion-light-theme .window-dragarea {
|
||||
background: #e6e6e6;
|
||||
}
|
||||
.frameless .notion-dark-theme .window-dragarea {
|
||||
background: #272d2f;
|
||||
background: var(--theme_dark-dragarea);
|
||||
}
|
||||
.frameless .notion-light-theme .window-dragarea {
|
||||
background: var(--theme_light-dragarea);
|
||||
}
|
||||
|
||||
.window-buttons-area {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
@media (max-width: 760px) {
|
||||
.frameless .notion-topbar {
|
||||
height: calc(var(--dragarea-height, 10px) + 80px) !important;
|
||||
height: calc(var(--configured-dragarea_height, 10px) + 80px) !important;
|
||||
}
|
||||
.frameless .notion-topbar > :nth-child(2) {
|
||||
height: 80px !important;
|
||||
@ -50,6 +44,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
.window-buttons-area {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
.window-button {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
@ -72,15 +71,25 @@
|
||||
.window-button svg line {
|
||||
stroke: currentColor;
|
||||
}
|
||||
.notion-light-theme .window-button:hover {
|
||||
background: rgb(239, 239, 239);
|
||||
}
|
||||
|
||||
.notion-dark-theme .window-button:hover {
|
||||
background: rgb(71, 76, 80);
|
||||
background: var(--theme_dark-button_hover);
|
||||
box-shadow: 0 0 0 0.5px var(--theme_dark-button_hover-border);
|
||||
}
|
||||
.window-button.btn-close:hover {
|
||||
background: #e81123;
|
||||
.notion-dark-theme .window-button.btn-close:hover {
|
||||
background: var(--theme_dark-button_close);
|
||||
}
|
||||
.window-button.btn-close:hover svg line {
|
||||
stroke: white;
|
||||
.notion-dark-theme .window-button.btn-close:hover svg line {
|
||||
stroke: var(--theme_dark-button_close-fill);
|
||||
}
|
||||
|
||||
.notion-light-theme .window-button.btn-close:hover {
|
||||
background: var(--theme_light-button_close);
|
||||
}
|
||||
.notion-light-theme .window-button.btn-close:hover svg line {
|
||||
stroke: var(--theme_light-button_close-fill);
|
||||
}
|
||||
.notion-light-theme .window-button:hover {
|
||||
background: var(--theme_light-button_hover);
|
||||
box-shadow: 0 0 0 0.5px var(--theme_light-button_hover-border);
|
||||
}
|
||||
|
||||
@ -37,7 +37,7 @@ module.exports = (defaults) =>
|
||||
dragarea.className = 'window-dragarea';
|
||||
document.querySelector('.notion-topbar').prepend(dragarea);
|
||||
document.documentElement.style.setProperty(
|
||||
'--dragarea-height',
|
||||
'--configured-dragarea_height',
|
||||
`${settings.dragarea_height}px`
|
||||
);
|
||||
let sidebar_width;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user