# Breakdown of `custom-style.scss` from [[Digital Garden Plug-in]]
(did not check `_theme.9b318fccc.css` since format isnt user friendly)
### body.theme
```SCSS
body.theme-dark {
--text-accent: #006f8b;
--text-accent-hover: #0084a5;
--interactive-accent: #006f8b;
// --h1-color: var(--interactive-accent);
}
body.theme-light {
--text-accent: #004d61;
--text-accent-hover: #006f8b;
--interactive-accent: #004d61;
// --h1-color: var(--interactive-accent);
}
```
>[!quote]- via obsidian-base.scss
>
>```scss
>body {
> /* Text */
> --text-accent: var(--color-accent);
> --text-accent-hover: var(--color-accent-2);
> --interactive-accent: var(--color-accent-1);
> ```
>
> futhermore...
>
>```scss
> .theme-light {
> --color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
> --color-accent-1: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) + 2.5%));
> --color-accent-2: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) + 5%));
>
>.theme-dark {
> --color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
> --color-accent-1: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) - 3.8%));
> --color-accent-2: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) + 3.8%));
>```
>
>furthermore...
>
>```scss
>body {
> /* Accent HSL values */
> --accent-h: 254;
> --accent-s: 80%;
> --accent-l: 68%;
>```
>
>![[Developer Index#^3a97e4]]
>[!quote]- via style.scss
>
>```scss
>:root {
> --text-accent: rgb(97, 186, 245);
>```
### body
```scss
body {
--graph-main: var(--text-accent-hover);
--graph-muted: rgba(126, 126, 126, 0.5);
```
>[!quote]- via digital-garden-base.scss
>
>```scss
>body{
> --graph-main: var(--text-accent);
> --graph-muted: var(--text-muted);
> ```
##### .timestamps
```scss
.timestamps {
display: flex;
flex-direction: row;
font-size: 0.8em;
color: var(--text-muted);
gap: 10px;
margin-top: 20px;
div {
display: flex;
flex-direction: row;
gap: 3px;
align-items: center;
}
}
```
>[!quote]- via digital-garden-base.scss (same)
>
>```scss
>.timestamps {
> display: flex;
> flex-direction: row;
> font-size: 0.8em;
> color: var(--text-muted);
> gap: 10px;
> margin-top: 20px;
>
> div {
> display: flex;
> flex-direction: row;
> gap: 3px;
> align-items: center;
> }
> }
>```
##### .notelink
```scss
.notelink {
img {
height: 16px;
width: auto;
}
margin-right: 8px;
}
```
>[!quote]- via digital-garden-base.scss
>
>```scss
>.notelink {
> padding: 5px 0 5px 25px;
> display: flex;
> align-items: center;
> a {
> &:hover {
> text-decoration: underline !important;
> }
> }
> svg {
> flex-shrink: 0;
> }
>}
>```
##### (headers)
```scss
h1 {
font-size: 1.5em !important; /* 40px/16=2.5em */
// img {
// height: 32px;
// width: auto;
// }
}
h2 {
font-size: 1.25em !important; /* 30px/16=1.875em */
}
h3 {
font-size: 1.17em !important;
}
h4 {
font-size: 1em !important;
font-weight: bolder !important;
}
h5 {
font-size: 0.83em !important;
font-weight: bolder !important;
}
h6 {
font-size: 0.67em !important;
font-weight: bolder !important;
}
```
>[!quote]- via style.scss
>
>```scss
>h1 {
> color: #ffef60;
>}
>
>h2 {
> color: #f06449;
>}
>
>h3 {
> color: #d4fcc3;
>}
>
>h4 {
> color: #72dcff;
>}
>```
##### table
```scss
table {
width: 100% !important; /* fills table all the way across */
border: 1px solid lightgray !important; /* outside border */
td,
th {
padding: 5px 10px !important;
hr {
margin: 5px !important;
}
}
}
```
>[!quote]- via obsidian-base.scss
>
>```scss
>body {
> --table-background: transparent;
> --table-border-width: 1px;
> --table-border-color: var(--background-modifier-border);
> --table-white-space: normal;
> --table-header-background: var(--table-background);
> --table-header-background-hover: inherit;
> --table-header-border-width: var(--table-border-width);
> --table-header-border-color: var(--table-border-color);
> --table-header-font: inherit;
> --table-header-size: var(--font-smaller);
> --table-header-weight: var(--font-normal);
> --table-header-color: var(--text-muted);
> --table-text-size: inherit;
> --table-text-color: inherit;
> --table-column-max-width: none;
> --table-column-alt-background: var(--table-background);
> --table-column-first-border-width: var(--table-border-width);
> --table-column-last-border-width: var(--table-border-width);
> --table-row-background-hover: var(--table-background);
> --table-row-alt-background: var(--table-background);
> --table-row-last-border-width: var(--table-border-width);
>```
>
>possibly more at line 7110 and further
##### .graph
```scss
.graph {
flex: unset !important;
@media (max-width: 1490px) {
display: block !important;
order: 3;
}
}
```
##### .toc
```scss
.toc {
@media (max-width: 1490px) {
display: block !important;
}
}
```
##### .sidebar-container
```scss
.sidebar-container {
& > div:not(.graph) {
width: 320px;
max-height: 365px;
overflow-y: auto;
}
@media (max-width: 1490px) {
flex-wrap: wrap;
flex-direction: row;
justify-content: space-between;
}
}
```
##### nav.filetree-sidebar (left-side)
```scss
nav.filetree-sidebar { //this is the area on left
// top: 85px;
// left: 20px;
// position: fixed;
// height: calc(100% - 160px);
display: flex;
flex-direction: column;
// border-radius: 10px;
overflow-x: hidden;
background-color: var(--background-primary); //this may not work, remove entire line
.search-button {
margin: 10px;
min-width: 160px;
margin-bottom: 20px;
border-radius: 5px;
}
& > .folder {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
margin-right: -10px;
}
.notelink {
border-radius: 10px;
padding: 5px 0 5px 8px;
a::before {
margin-right: 2px;
}
}
.notelink.active-note {
transform: unset;
}
.fa-sticky-note {
display: none !important;
}
// h1::before {
// content: " ";
// display: block;
// width: 100%;
// height: 3em;
// background-size: contain;
// background-repeat: no-repeat;
// background-image: url(/img/logo.svg);
// background-position: center;
// }
}
```
##### nav.toc (right-side)
```scss
nav.toc { //this is area on right
ol {
list-style: none;
padding-left: 20px; //changed 10px -> 20px
border-left: 2px solid var(--background-secondary);
}
& > ol {
padding-left: 0;
border-left: none;
}
}
```
>[!quote]- via digital-garden-base.scss
>
>```scss
>.toc {
> padding-right: 5px;
> background-color: var(--background-primary);
> padding: 10px;
> border-radius: 10px;
> ol {
> list-style: none;
> padding-left: 10px;
> border-left: 2px solid var(--background-secondary); //left line under H2
> }
>
> & > ol {
> padding-left: 0;
> border-left: none; //left line - under H1
> }
>}
>
>.toc-container {
> font-size: 1rem;
> max-height: 220px;
> overflow-y: auto;
> margin-bottom: 10px;
> border-left: 1px solid var(--text-accent);
> ul {
> list-style-type: none;
> padding-inline-start: 15px !important;
> margin-top: 0;
> margin-bottom: 0;
> }
> ul:not(:first-child) {
> margin-bottom: 3px;
> }
>
> li {
> padding-top: 4px;
> &::before {
> content: "# " !important;
> color: var(--text-accent);
> font-size: 0.8rem;
> }
> a {
> text-decoration: none;
> &:hover {
> text-decoration: underline;
> }
> }
> }
>}
>
>.toc-title-container {
> display: flex;
> justify-content: flex-start;
> .toc-title {
> font-size: 1.2rem !important;
> color: var(--h6-color);
> width: fit-content;
> padding: 3px 7px 3px 0;
> border-radius: 10px 10px 0 0;
> }
>}
>```
#### header
```scss
// header {
// margin-bottom: 1.8em;
// }
.cm-s-obsidian {
.table-wrapper {
overflow-x: scroll;
}
picture {
max-width: 100%;
height: auto;
img {
width: 100%;
height: auto;
}
}
}
// .cm-s-obsidian > *[id] {
// position: relative;
// cursor: pointer;
// &:hover {
// border: 1px dotted;
// border-color: var(--text-accent);
// margin-left: -10px;
// margin-right: -10px;
// padding: 10px;
// }
// &:hover::before {
// content: "Double-click to copy link";
// position: absolute;
// right: 0;
// top: -1.55em;
// font-weight: normal;
// font-size: 12px;
// color: var(--text-accent);
// font-variant: initial;
// letter-spacing: 0.24px;
// line-height: 14px;
// }
// }
//.referred {
// border: 1px dashed;
// border-color: var(--text-accent);
// padding: 10px;
// margin-left: -10px;
// margin-right: -10px;
//}
```
\[TBD]
##### \#search-results
`font-size` changes what the body of the files in the results looks like
```scss
#search-results .searchresult {
font-size: 0.75rem; //changes the body of the resulting files
}
```
>[!quote]- via styles.scss
>
>```scss
>#search-results {
> margin-top: 20px;
> overflow-y: auto;
> padding: 20px;
> display: flex;
> justify-content: center;
> max-height: 50vh;
>}
>
>#search-results .searchresult {
> margin-bottom: 15px;
> list-style: none;
> background-color: var(--background-secondary);
> padding: 10px;
> border-radius: 10px;
> font-size: 1.2rem;
> cursor: pointer;
>
> &.active {
> border: 2px solid var(--text-accent);
> }
>}
>```
##### \#floating-control
```scss
#floating-control {
position: fixed;
color: var(--link-color);
bottom: 1vmax; //location of dark/light theme toggle
right: 1vmax; //location of dark/light theme toggle
font-size: 24px;
z-index: 999999;
display: flex;
flex-direction: row;
justify-content: flex-end;
gap: 10px;
.svg-icon,
i {
cursor: pointer;
height: 24px;
width: auto;
}
#theme-switch {
.light {
display: none;
}
.dark {
display: none;
}
.auto {
display: none;
}
}
#theme-switch.light {
.light {
display: inline;
}
}
#theme-switch.dark {
.dark {
display: inline;
}
}
#theme-switch.auto {
.auto {
display: inline;
}
}
}
.fnote {
display: none;
background-color: var(--background-primary);
border: 1px solid var(--text-accent);
position: fixed;
bottom: 10px;
left: 0;
right: 0;
padding: 10px;
text-align: center;
z-index: 999;
}
.footnote-ref {
line-height: 85%;
.fnote-marker {
background-color: var(--text-accent);
padding: 2px 5px;
color: white;
border-radius: 4px;
text-decoration: none;
font-size: 0.7em;
margin-top: -3px;
&:hover {
opacity: 0.7;
}
}
}
.shownote {
display: block;
}
```
##### \#forest-graph
```scss
#forest-graph {
display: flex;
justify-content: center;
align-items: center;
padding-bottom: 20px;
flex-direction: column;
.forest-body {
display: inline-flex;
flex-direction: column;
transform: rotate(45deg);
margin: 60px;
align-items: flex-end;
@media (max-width: 575.99px) {
transform: rotate(45deg) scale(0.9);
}
.forest-row {
display: flex;
flex-direction: row;
align-items: flex-end;
a {
width: 25px;
height: 25px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
margin-top: -2px;
margin-left: -2px;
img {
transform: rotate(-45deg);
}
}
.plane {
cursor: inherit;
}
}
}
.forest-legends {
margin-top: 10px;
display: flex;
gap: 10px;
width: 100%;
justify-content: center;
flex-wrap: wrap;
font-size: 0.8em;
color: var(--text-muted);
img {
height: 1.5em;
width: auto;
margin-right: 5px;
}
}
}
.toc-container li::before {
content: "" !important;
}
```
\[TBD]
##### nav.navbar
```scss
nav.navbar {
// top: 10px;
// right: 10px;
// left: 10px;
// width: calc(100% - 20px);
// border-radius: 10px;
// border: var(--cards-border-width) solid var(--background-modifier-border);
z-index: 99999;
.navbar-inner {
h1::before {
content: " ";
display: inline-block;
width: 1em;
height: 1.2em;
background-size: contain;
background-repeat: no-repeat;
background-image: url(/img/logo.svg);
margin-right: 5px;
background-position: bottom;
}
span {
margin-left: 10px;
}
}
.search-button {
border-radius: 5px;
@media (max-width: 800px) {
margin-right: 10px;
}
}
}
```
>[!quote]- via digital-garden-base.scss
>
>```scss
>.navbar {
> background-color: var(--background-secondary);
> position: absolute;
> width: 100%;
> top: 0;
> left: 0;
> right: 0;
> z-index: 3;
> padding-left: var(--file-margins);
> display: flex;
> justify-content: space-between;
> align-items: center;
> @media (max-width: 1400px) {
> position: fixed;
> }
>
> @media (max-width: 800px) {
> h1 {
> font-size: 18px !important;
> }
> }
>
> .navbar-inner {
> display: flex;
> align-items: center;
> cursor: pointer;
> }
>
> .search-button {
> @media (max-width: 800px) {
> min-width: 36px;
> margin: 10px 25px 10px 25px;
> }
> }
>
> .search-text {
> display: flex;
> justify-content: center;
> @media (max-width: 800px) {
> display: none;
> }
> }
>}
>```
##### .cards
```scss
.cards {
table.dataview {
width: var(--table-width);
}
th,
td {
border: none !important;
flex-wrap: wrap;
gap: 5px;
a.tag {
padding: 3px !important;
}
}
table.dataview.table-view-table {
thead.table-view-thead {
display: none;
&::before {
display: none;
}
}
tbody {
tr {
position: relative;
td {
img.inset-cover {
height: 70px;
width: auto;
position: absolute;
top: 0px;
right: 0px;
padding: 0;
}
}
}
}
}
}
.cards-cover-no-border {
table.dataview.table-view-table {
tbody {
tr {
td:first-child {
width: 100%;
img {
padding: 0;
}
}
td:nth-child(2) {
min-height: 70px;
}
td {
svg {
width: 14px;
height: auto;
}
}
}
}
}
}
.cards-title-hide-icons {
table.dataview.table-view-table {
tbody {
tr {
td:nth-child(2),
td:first-child {
a::before {
display: none;
}
}
}
}
}
}
code[class*="language-"],
pre[class*="language-"] {
text-shadow: unset;
}
}
```
### .callout
```scss
// .callout {
// background-color: transparent !important;
// border: 1px solid rgba(var(--callout-color), 1) !important;
// position: relative;
// overflow: visible;
// margin-top: calc(1em + 10px);
// .callout-title {
// display: inline-flex;
// position: absolute;
// top: -10px;
// background-color: var(--background-primary);
// padding-left: 5px;
// padding-right: 5px;
// }
// }
```
### body....data-note-icon
```scss
body.title-note-icon .cm-s-obsidian > header > h1[data-note-icon="stone"]::before,
body.filetree-note-icon .filename[data-note-icon="stone"]::before,
body.links-note-icon .internal-link[data-note-icon="stone"]::before,
body.backlinks-note-icon .backlink[data-note-icon="stone"]::before {
background-image: url(/img/stone.svg);
}
body.title-note-icon .cm-s-obsidian > header > h1[data-note-icon="signpost"]::before,
body.filetree-note-icon .filename[data-note-icon="signpost"]::before,
body.links-note-icon .internal-link[data-note-icon="signpost"]::before,
body.backlinks-note-icon .backlink[data-note-icon="signpost"]::before {
background-image: url(/img/signpost.svg);
}
body.title-note-icon .cm-s-obsidian > header > h1[data-note-icon="withered"]::before,
body.filetree-note-icon .filename[data-note-icon="withered"]::before,
body.links-note-icon .internal-link[data-note-icon="withered"]::before,
body.backlinks-note-icon .backlink[data-note-icon="withered"]::before {
background-image: url(/img/withered.svg);
}
```
### .align-icon
```scss
.align-icon {
display: inline-flex;
align-items: center;
}
```
### .pill
```scss
.pill {
background-color: var(--tag-background);
border: var(--tag-border-width) solid var(--tag-border-color);
border-radius: var(--tag-radius);
color: var(--tag-color);
font-size: var(--tag-size);
text-decoration: var(--tag-decoration);
padding: var(--tag-padding-y) var(--tag-padding-x);
line-height: 1;
&:hover {
background-color: var(--tag-background-hover);
border: var(--tag-border-width) solid var(--tag-border-color-hover);
color: var(--tag-color-hover);
text-decoration: var(--tag-decoration-hover);
}
}
```
### .aliases
```scss
.aliases {
display: flex;
flex-direction: row;
gap: 5px;
align-items: center;
margin-top: 20px;
color: var(--tag-color);
.heading:only-child {
display: none;
}
}
```
### .header-tags
```scss
.header-tags {
gap: 5px;
display: flex;
}
```
### .fullpage-overlay
```scss
.fullpage-overlay {
position: fixed;
}
```
### .sidebar
```scss
.sidebar {
.toc-container {
max-height: unset;
@media (max-width: 1400px) {
max-height: 320px;
}
}
.backlinks {
flex: unset;
@media (max-width: 1400px) {
order: 3;
}
}
}
```