Oscar Plaisant 9662f353ee update
2024-03-28 23:43:36 +01:00

729 lines
17 KiB
CSS

:root {
--custom-accent: #8BA4CC;
--custom-accent-muted: #304F80;
--custom-accent-muted-transparent: rgba(48, 79, 128, 0.3);
--custom-accent-muted-selection: rgba(48, 79, 128, 0.99);
--custom-text-on-accent: #000000;
--custom-text-muted: #cacaca;
--custom-text-faint: #909090;
/* --mica-base-bg-start: #1B202A;
--mica-base-bg-end: #1A1F28;
--mica-content-bg-start: #212834;
--mica-content-bg-end: #202732;
--mica-border: #1A1F28; */
--mica-base-bg-start: #202028;
--mica-base-bg-end: #1B2020;
--mica-content-bg-start: #222832;
--mica-content-bg-start-transparent: rgba(34, 40, 50, 0.3);
--mica-content-bg-end: #212223;
--mica-content-bg-end-transparent: rgba(33, 34, 35, 0.3);
--mica-border: #1A1F28;
}
/* background */
body {
background: linear-gradient(135deg, var(--mica-base-bg-start), var(--mica-base-bg-end));
}
.workspace > .workspace-split {
padding-bottom: 12px;
}
.workspace-tabs,
.workspace-ribbon,
.workspace-ribbon.is-collapsed,
.workspace-ribbon.mod-left.is-collapsed,
.workspace-ribbon.mod-right.is-collapsed,
.titlebar,
.workspace-tabs .workspace-leaf,
.workspace-tab-header-container,
.workspace-tab-container-before,
.workspace-tab-container-before.is-before-active,
.workspace-tab-container-before.is-before-active .workspace-tab-header-inner,
.workspace-tab-container-after,
.workspace-tab-container-after.is-after-active,
.workspace-tab-container-after.is-after-active .workspace-tab-header-inner,
.workspace-tab-header.is-before-active,
.workspace-tab-header.is-before-active .workspace-tab-header-inner,
.workspace-tab-header.is-after-active,
.workspace-tab-header.is-after-active .workspace-tab-header-inner,
.workspace-leaf .view-header-title-container:after,
.workspace-leaf.mod-active .view-header-title-container:after,
.status-bar,
::-webkit-scrollbar {
background: transparent;
border: 0;
}
/* workspace */
.workspace-tab-header-container {
height: 48px;
}
.workspace-ribbon {
width: 48px;
}
.side-dock-ribbon {
flex: 0 0 48px;
}
.workspace-ribbon.mod-right {
position: absolute;
right: 0;
}
.workspace-ribbon.is-collapsed {
border: none !important;
}
.workspace-ribbon-collapse-btn {
margin-top: -4px;
}
.workspace-tab-header.is-active {
background: transparent;
color: white;
}
.workspace-tab-header-inner-icon {
margin-top: 7px;
}
.workspace-leaf-resize-handle {
background: transparent;
}
.workspace {
padding-top: 6px;
}
.workspace-split {
/* margin-top: 6px; */
background: linear-gradient(135deg, var(--mica-content-bg-start), var(--mica-content-bg-end));
background-attachment: fixed;
}
.workspace-split.mod-left-split {
border-top-left-radius: 8px;
border-left: 2px solid var(--mica-border);
border-top: 2px solid var(--mica-border);
}
.workspace-split.mod-left-split.is-collapsed + .workspace-split.mod-root {
border-top-left-radius: 8px;
}
.workspace-split.mod-root, .workspace-split.mod-right-split {
border-top: 2px solid var(--mica-border);
}
.workspace-split .workspace-tabs {
border-bottom: 2px solid var(--mica-border);
}
.workspace-split.mod-root {
border-left: 2px solid var(--mica-border);
border-right: 2px solid var(--mica-border);
}
.workspace-split .nav-header {
height: 48px;
padding: 4px 6px;
border-bottom: 2px solid var(--mica-border);
}
.workspace-tab-header-container {
border-bottom: 2px solid var(--mica-border);
background: linear-gradient(160deg, transparent, rgba(255, 255, 255, 0.02));
}
.workspace-tabs {
padding-right: 0;
}
.nav-action-button {
margin-top: 4px;
}
.workspace-leaf-content .nav-header + * {
padding: 6px 0;
}
.workspace-tab-container-before {
width: 6px;
}
/* box-shadow: 0 0 4px 0px rgba(0,0,0,0.2); */
.workspace-split.mod-root .view-header {
border-bottom: 2px solid var(--mica-border) !important;
}
.workspace-split.mod-root .view-content {
background: transparent;
}
.workspace-split.mod-root > .workspace-leaf .view-header-title-container:after {
background: transparent !important;
}
.workspace-leaf-content .view-actions {
margin-right: 12px;
}
.workspace-leaf-content .view-actions .view-action svg {
margin-top: 4px;
}
body:not(.is-mobile) .workspace-leaf-content[data-type="markdown"] .view-actions .view-action svg {
margin-top: 12px;
}
.workspace > .workspace-split {
padding-bottom: 0;
}
.workspace-leaf-content .view-header {
background: transparent !important;
border: none !important;
}
/* scroll */
::-webkit-scrollbar {
width: 6px;
}
.workspace-leaf-content .nav-header + *:hover::-webkit-scrollbar-thumb {
border: none;
/* background-color: var(--scrollbar-thumb-bg); */
}
.workspace-leaf-content .view-content:hover *::-webkit-scrollbar-thumb {
border: none;
/* background-color: var(--scrollbar-thumb-bg); */
}
::-webkit-scrollbar-thumb {
border-radius: 0;
background-clip: content-box;
border-left: 4px solid transparent;
/* background-color: var(--mica-border); */
transition: background-color 0.2s;
}
/* nav */
.nav-header .nav-buttons-container {
justify-content: flex-start;
}
/* make links slightly lighter + accented */
.nav-file-title, .nav-folder-title {
--text-muted: var(--custom-text-muted);
}
.tree-item-self {
--text-muted: var(--custom-text-muted);
--interactive-accent: var(--custom-accent-muted);
--text-on-accent: var(--custom-text-on-accent);
}
/* file tree */
.nav-file-title, .nav-folder-title {
min-width: calc(100% - 12px);
border-radius: 6px;
}
.nav-file-title:hover, .nav-folder-title:hover {
}
.nav-file-title.is-active {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.5);
font-weight: bold;
}
/* make the buttons slightly lighter + accented */
.side-dock-ribbon-action {
--text-faint: var(--custom-text-faint);
--text-muted: var(--custom-text-muted);
}
.workspace-tab-header {
--text-faint: var(--custom-text-faint);
--text-muted: var(--custom-text-muted);
}
.nav-action-button {
--text-faint: var(--custom-text-faint);
--text-muted: var(--custom-text-muted);
--interactive-accent: var(--custom-accent-muted);
--text-on-accent: var(--custom-text-on-accent);
--text-accent: var(--custom-accent-muted);
}
/* change flash animation */
.is-flashing {
background: transparent;
}
.is-flashing .nav-file-title {
background: linear-gradient(90deg,
rgba(255, 255, 255, 0.05) 0%,
rgba(255, 255, 255, 0.05) 30%,
rgba(255, 255, 255, 0.3) 50%,
rgba(255, 255, 255, 0.05) 70%,
rgba(255, 255, 255, 0.05) 100%);
animation: flashing 5s infinite;
animation-timing-function: linear;
background-size: 200px 100%;
/* --text-highlight-bg: var(--custom-accent); */
}
@keyframes flashing {
0% {
background-position: 0% 0;
}
100%{
background-position: 400px 0;
}
}
/* change note header to match h1 */
body:not(.plugin-sliding-panes):not(.is-mobile) .workspace-leaf-content[data-type="markdown"] .view-header {
height: 56px;
}
body:not(.plugin-sliding-panes):not(.is-mobile) .workspace-leaf-content[data-type="markdown"] .view-header .view-header-title {
font-size: 38px;
line-height: 56px;
font-family: "Futura Md BT", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
body:not(.plugin-sliding-panes):not(.is-mobile) .workspace-leaf-content[data-type="markdown"] .view-header .view-header-icon {
padding-top: 17px;
width: 48px;
text-align: center;
}
/* sliding panes fix */
.plugin-sliding-panes .workspace-leaf-content[data-type="markdown"] {
background: linear-gradient(135deg, var(--mica-content-bg-start), var(--mica-content-bg-end));
background-attachment: fixed;
}
/* change tree header */
.nav-folder.mod-root > .nav-folder-title .nav-folder-title-content {
font-size: 22px;
padding-bottom: 10px;
font-family: "Futura Md BT", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* title bar */
.titlebar {
}
.titlebar .titlebar-text {
text-align: left;
width: auto;
left: 100px;
padding-left: 22px;
z-index: 5;
}
.mod-macos .titlebar .titlebar-text {
left: 200px;
}
.titlebar .titlebar-text::after {
z-index: 5;
opacity: 0.7;
content: " - https://tmz.io/sodalite v0.6.5";
}
/* status bar */
.status-bar {
border: none;
position: absolute;
margin-top: -18px;
right: 100px;
font-size: 12px;
}
.mod-macos .status-bar {
right: 0;
}
@media only screen and (max-width: 1280px) {
.status-bar {
display: none;
}
}
/* buttons */
button.mod-cta {
background: var(--custom-accent-muted);
}
button.mod-cta:hover {
background: var(--custom-accent);
}
/* popups */
.suggestion-container, .menu {
margin-top: 6px;
border-radius: 8px;
background:
rgba(0,0,0,0.3)
linear-gradient(160deg, transparent, rgba(255, 255, 255, 0.02));
border: 2px solid var(--mica-border);
backdrop-filter: blur(12px);
box-shadow: 0 3.2px 7.2px 0 rgba(0,0,0,.132),0 .6px 1.8px 0 rgba(0,0,0,.108);
}
/* modals */
body:not(.is-mobile) .modal-container .modal-bg {
background-color: rgba(0, 0, 0, .3);
backdrop-filter: blur(12px);
}
.modal-container .modal {
background: linear-gradient(135deg, var(--mica-base-bg-start), var(--mica-base-bg-end));
box-shadow: 0 6.4px 14.4px 0 rgba(0,0,0,.132),0 1.2px 3.6px 0 rgba(0,0,0,.108);
overflow: visible !important;
}
.modal-container .modal .modal-content {
padding: 0;
}
.modal-container .modal .modal-title {
font-family: "Futura Md BT", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 32px;
}
.modal-container .modal .vertical-tab-content {
background: transparent;
padding-top: 20px;
}
.modal-container .modal .vertical-tab-header {
background: transparent;
padding-top: 0;
}
.modal-container .modal .vertical-tab-content-container {
background: linear-gradient(135deg, var(--mica-content-bg-start), var(--mica-content-bg-end));
padding: 0;
border-left: 2px solid var(--mica-border);
}
.modal-container .modal .vertical-tab-nav-item {
background: transparent;
}
.modal-container .modal .vertical-tab-nav-item.is-active {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.5);
border-radius: 6px;
margin: 0 8px;
font-weight: bold;
}
.modal-container .modal .modal-close-button {
right: -40px;
}
.modal-container .prompt {
background: transparent;
}
.modal-container .prompt .suggestion-item.is-selected {
background: linear-gradient(160deg, transparent, rgba(255, 255, 255, 0.1));
}
/* tooltips */
.tooltip {
background:
rgba(0,0,0,0.4)
linear-gradient(160deg, transparent, rgba(255,255,255,0.05));
backdrop-filter: blur(18px);
}
.tooltip .tooltip-arrow {
backdrop-filter: blur(18px);
border-bottom: 5px solid rgba(0,0,0,0.4);
}
.tooltip.mod-right .tooltip-arrow {
border-right: 5px solid rgba(0,0,0,0.4);
}
.tooltip.mod-left .tooltip-arrow {
border-left: 5px solid rgba(0,0,0,0.4);
}
.tooltip.mod-top .tooltip-arrow {
border-top: 5px solid rgba(0,0,0,0.4);
}
/* notice */
.notice-container .notice {
background:
var(--custom-accent-muted-transparent)
linear-gradient(160deg, transparent, rgba(255,255,255,0.05));
backdrop-filter: blur(18px);
}
/* content */
.view-content {
height: 100%;
}
/* selection */
::selection, .CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection, .CodeMirror-selected, .CodeMirror-focused .CodeMirror-selected {
background: var(--custom-accent-muted-selection);
color: white;
}
/* scroll-below */
body:not(.is-mobile) .workspace-leaf-content > .nav-header,
body:not(.plugin-sliding-panes):not(.is-mobile) .workspace-leaf-content > .view-header {
position: absolute;
z-index: 90;
width: 100%;
backdrop-filter: blur(18px);
background:
linear-gradient(135deg, var(--mica-content-bg-start-transparent),
var(--mica-content-bg-end-transparent)) !important;
background-attachment: fixed !important;
}
body:not(.is-mobile) .workspace-leaf-content > .nav-header + * {
padding-top: calc(48px + 6px);
}
body:not(.is-mobile) .workspace-leaf-content > .nav-header + *::-webkit-scrollbar-track {
margin-top: 48px;
}
body:not(.plugin-sliding-panes):not(.is-mobile) .workspace-leaf-content[data-type="markdown"] .markdown-preview-sizer {
padding-top: 56px;
}
body:not(.plugin-sliding-panes):not(.is-mobile) .workspace-leaf-content[data-type="markdown"] .markdown-preview-view::-webkit-scrollbar-track {
margin-top: 56px;
}
body:not(.plugin-sliding-panes):not(.is-mobile) .workspace-leaf-content[data-type="markdown"] .CodeMirror-scroll {
padding-top: 56px;
}
body:not(.plugin-sliding-panes):not(.is-mobile) .workspace-leaf-content[data-type="markdown"] .CodeMirror-vscrollbar::-webkit-scrollbar-track {
margin-top: 56px;
}
body:not(.plugin-sliding-panes):not(.is-mobile) .workspace-leaf-content[data-type="markdown"] .cm-scroller {
padding-top: 56px;
}
body:not(.plugin-sliding-panes):not(.is-mobile) .workspace-leaf-content[data-type="markdown"] .cm-scroller::-webkit-scrollbar-track {
margin-top: 56px;
}
/* graph */
.graph-controls {
border-radius: 0 0 8px 0;
border: none;
border-right: 2px solid var(--mica-border);
border-bottom: 2px solid var(--mica-border);
top: 0;
left: 0;
background: linear-gradient(160deg, transparent, rgba(255, 255, 255, 0.02));
backdrop-filter: blur(10px);
}
body:not(.is-mobile) .workspace-split.mod-root .graph-controls {
top: 32px;
}
.graph-controls.is-close {
background: linear-gradient(160deg, transparent, rgba(255, 255, 255, 0.02));
}
.graph-controls .setting-item-name {
--text-muted: var(--custom-text-muted);
}
body.is-mobile .graph-controls {
background: linear-gradient(135deg, var(--mica-content-bg-start), var(--mica-content-bg-end));
background-attachment: fixed;
backdrop-filter: none;
}
.graph-view.color-line {
color: #404050;
}
.graph-view.color-line-highlight {
color: #507090;
}
/* preview frontmatter */
.frontmatter-container {
background: linear-gradient(160deg, transparent, rgba(255, 255, 255, 0.02));
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.05);
margin-bottom: 20px;
}
/* side dock */
.side-dock-settings {
margin-bottom: 0;
}
/* checkboxes */
.setting-item-control .checkbox-container.is-enabled {
background: var(--custom-accent-muted);
}
/* sync icon */
.status-bar-item .status-bar-item-icon.sync-status-icon {
position: relative;
}
.status-bar-item .status-bar-item-icon.sync-status-icon svg {
width: 21px;
height: 21px;
}
.status-bar-item .status-bar-item-icon.sync-status-icon::after {
display: block;
width: 100%;
height: 26px;
position: fixed;
content: ' ';
left: 0;
top: 0;
z-index: -1;
pointer-events: none;
-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
}
/* .status-bar-item .status-bar-item-icon.sync-status-icon.mod-success::after {
background: linear-gradient(90deg,
transparent 0%,
transparent 30%,
rgba(40, 255, 40, 0.2) 50%,
transparent 70%,
transparent 100%);
animation: sync-flashing-success 5s 1;
animation-timing-function: linear;
background-size: 500px 100%;
} */
.status-bar-item .status-bar-item-icon.sync-status-icon.mod-working::after {
background: linear-gradient(90deg,
transparent 0%,
transparent 30%,
rgba(40, 40, 255, 0.2),
transparent 70%,
transparent 100%);
animation: sync-flashing 5s infinite, sync-fadein 1s 1;
animation-timing-function: linear;
background-size: 500px 100%;
background-repeat: repeat-x;
}
@keyframes sync-flashing {
0% {
background-position: 0% 0;
}
100%{
background-position: 1000px 0;
}
}
@keyframes sync-fadein {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
100%{
opacity: 1;
}
}
/* collapse */
.CodeMirror-gutter.CodeMirror-linenumbers, .CodeMirror-gutter.CodeMirror-foldgutter {
background: transparent;
}
.markdown-source-view.mod-cm6 .cm-gutters {
background: transparent !important;
}
/* content colors */
.cm-s-obsidian span.cm-hashtag {
color: var(--text-accent);
}
/* add icons to tree */
.nav-folder .nav-folder-title-content::before {
content: '📂 ';
}
.nav-folder.is-collapsed .nav-folder-title-content::before {
content: '📁 ';
}
.workspace-leaf-content[data-type="file-explorer"] .nav-folder.mod-root > .nav-folder-title .nav-folder-title-content::before {
content: '🏠 '
}
.workspace-leaf-content[data-type="file-explorer"] .nav-file .nav-file-title-content::before {
content: '📝 '
}
/* special icon example */
.workspace-leaf-content[data-type="file-explorer"] .nav-file-title[data-path^="samplepaththatdoesntexist"] .nav-file-title-content::before {
content: '⚡ ';
}