neil/silverbullet
1
0
Fork 0
Code Activity

Eliminiate vertical jump with directives

Browse Source
This commit is contained in:
Zef Hemel
2022-12-19 11:50:48 +01:00
parent 7b764a94fa
commit d032672076
4 changed files with 134 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/styles/theme.scss
+50 -40
View File
@@ -1,6 +1,8 @@
#sb-root {
--highlight-color: #464cfc;
--directive-color: #0000000f;
--directive-border-color: #0000000f;
--directive-font-color: #5b5b5b;
--ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--editor-font: "iA-Mono", "Menlo";
font-family: var(--ui-font);
@@ -33,13 +35,14 @@
font-family: var(--editor-font);
}
.sb-notifications > div {
.sb-notifications>div {
border: rgb(41, 41, 41) 1px solid;
}
.sb-notification-info {
background-color: rgb(187, 221, 247);
}
.sb-notification-error {
background-color: rgb(255, 84, 84);
}
@@ -250,8 +253,9 @@
.sb-line-li .sb-meta {
color: rgb(150, 150, 150);
}
/* Then undo other meta */
.sb-line-li .sb-meta ~ .sb-meta {
.sb-line-li .sb-meta~.sb-meta {
color: #650007;
}
@@ -377,13 +381,15 @@ sb-admonition-warning .sb-admonition-icon {
// Directives
.sb-directive-body {
border-left: 1px solid var(--directive-color);
border-right: 1px solid var(--directive-color);
border-left: 1px solid var(--directive-border-color);
border-right: 1px solid var(--directive-border-color);
}
.cm-line.sb-directive-start, .cm-line.sb-directive-end {
color: #5b5b5b;
.cm-line.sb-directive-start,
.cm-line.sb-directive-end {
color: var(--directive-font-color);
background-color: rgb(233, 233, 233, 50%);
padding: 3px;
}
@@ -392,7 +398,7 @@ sb-admonition-warning .sb-admonition-icon {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-style: solid;
border-color: var(--directive-color);
border-color: var(--directive-border-color);
border-width: 1px 1px 0 1px;
}
@@ -400,37 +406,36 @@ sb-admonition-warning .sb-admonition-icon {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-style: solid;
border-color: var(--directive-color);
border-color: var(--directive-border-color);
border-width: 0 1px 1px 1px;
}
.sb-directive-start-outside {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-style: solid;
border-color: var(--directive-color);
border-left-width: 1px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 0;
padding-top: 5px !important;
color: transparent !important;
.sb-directive-placeholder {
color: var(--directive-font-color) !important;
opacity: 0.25;
padding-left: 5ch;
}
* {
color: transparent !important;
}
}
.sb-directive-end-outside {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-style: solid;
border-color: var(--directive-color);
border-left-width: 1px;
border-bottom-width: 1px;
border-right-width: 1px;
border-top-width: 0;
padding-bottom: 5px !important;
}
color: transparent !important;
.sb-directive-end-outside.sb-directive-start-outside {
border-top-width: 1px;
border-bottom-width: 1px;
.sb-directive-placeholder {
color: var(--directive-font-color) !important;
opacity: 0.25;
padding-left: 5ch;
}
* {
color: transparent !important;
}
}
.sb-emphasis {
@@ -473,7 +478,9 @@ sb-admonition-warning .sb-admonition-icon {
text-decoration: none;
cursor: pointer;
}
a.sb-wiki-link-page-missing, .sb-wiki-link-page-missing > .sb-wiki-link-page {
a.sb-wiki-link-page-missing,
.sb-wiki-link-page-missing>.sb-wiki-link-page {
color: #9e4705;
background-color: rgba(77, 141, 255, 0.07);
border-radius: 5px;
@@ -516,8 +523,11 @@ html[data-theme="dark"] {
.sb-actions button:hover {
color: #37a1ed;
}
.sb-line-h1, .sb-line-h2, .sb-line-h3, .sb-line-h4 {
.sb-line-h1,
.sb-line-h2,
.sb-line-h3,
.sb-line-h4 {
color: #d1d1d1;
}
@@ -525,7 +535,7 @@ html[data-theme="dark"] {
background-color: rgb(41, 40, 35, 0.5);
}
.sb-saved > input {
.sb-saved>input {
color: rgb(225, 225, 225);
}
@@ -540,7 +550,7 @@ html[data-theme="dark"] {
border-bottom: 1px solid #6c6c6c;
}
.sb-line-li .sb-meta ~ .sb-meta,
.sb-line-li .sb-meta~.sb-meta,
.sb-line-fenced-code .sb-meta {
color: #d17278;
}
@@ -556,7 +566,7 @@ html[data-theme="dark"] {
background-color: #333;
}
.sb-notifications > div {
.sb-notifications>div {
border: rgb(197, 197, 197) 1px solid;
background-color: #333;
}
@@ -570,11 +580,11 @@ html[data-theme="dark"] {
}
.sb-table-widget {
tbody tr:nth-of-type(even) {
background-color: #686868;
background-color: #686868;
}
}
}
}