mirror of
https://github.com/notion-enhancer/notion-enhancer.git
synced 2025-04-11 15:59:03 +00:00
124 lines
2.5 KiB
CSS
124 lines
2.5 KiB
CSS
/**
|
|
* notion-enhancer
|
|
* (c) 2023 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
|
* (https://notion-enhancer.github.io/) under the MIT license
|
|
*/
|
|
|
|
@keyframes skeleton-shimmer {
|
|
0% {
|
|
transform: translateX(-100%);
|
|
}
|
|
100% {
|
|
transform: translateX(100%);
|
|
}
|
|
}
|
|
|
|
::selection {
|
|
background: var(--theme--accent-primary_transparent);
|
|
}
|
|
*:focus-visible {
|
|
outline: 3px solid var(--theme--accent-primary);
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 10px;
|
|
height: 10px;
|
|
background: transparent;
|
|
}
|
|
::-webkit-scrollbar-track,
|
|
::-webkit-scrollbar-corner {
|
|
background: var(--theme--scrollbar-track);
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--theme--scrollbar-thumb);
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--theme--scrollbar-thumb_hover);
|
|
}
|
|
|
|
body {
|
|
display: grid;
|
|
grid-template-rows: 1fr;
|
|
grid-template-columns: 224.14px auto;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
color: var(--theme--fg-primary);
|
|
font-family: var(--theme--font-sans);
|
|
overflow: hidden;
|
|
}
|
|
|
|
body > #skeleton {
|
|
background: var(--theme--bg-secondary);
|
|
}
|
|
body > #skeleton .row {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 15px;
|
|
height: 30px;
|
|
}
|
|
body > #skeleton .shimmer {
|
|
height: 14px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
border-radius: 4px;
|
|
background: var(--theme--bg-hover);
|
|
}
|
|
body > #skeleton .shimmer.icon {
|
|
margin-left: 1px;
|
|
margin-right: 9px;
|
|
height: 18px;
|
|
width: 18px;
|
|
}
|
|
body > #skeleton .shimmer::before {
|
|
content: "";
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 100%;
|
|
z-index: 1;
|
|
animation: 1s linear infinite skeleton-shimmer;
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent 0,
|
|
var(--theme--bg-hover) 50%,
|
|
transparent 100%
|
|
);
|
|
}
|
|
body > #skeleton .row-group {
|
|
height: 21px;
|
|
margin-top: 18px;
|
|
}
|
|
body > #skeleton .row-group:first-child {
|
|
margin-top: 10px;
|
|
}
|
|
body > #skeleton .row-group .shimmer {
|
|
height: 11px;
|
|
}
|
|
|
|
.notion-enhancer--menu-description mark {
|
|
color: inherit;
|
|
padding: 0 4px;
|
|
border-radius: 3px;
|
|
background-color: var(--theme--bg-hover);
|
|
}
|
|
.notion-enhancer--menu-description a {
|
|
text-decoration: underline;
|
|
transition: 100ms ease-in;
|
|
}
|
|
.notion-enhancer--menu-description a:hover {
|
|
color: var(--theme--accent-secondary);
|
|
}
|
|
|
|
/* https://coloris.js.org/ */
|
|
.clr-picker {
|
|
background-color: var(--theme--bg-secondary) !important;
|
|
}
|
|
.clr-color {
|
|
background-color: var(--theme--bg-hover) !important;
|
|
border-color: var(--theme--fg-border) !important;
|
|
color: var(--theme--fg-primary) !important;
|
|
}
|
|
.clr-preview:after,
|
|
.clr-preview:before {
|
|
border-color: var(--theme--fg-border) !important;
|
|
}
|