obsidian-vault/.obsidian/themes/AbsoluteGruv/theme.css

/* 1. Font */
body {
    /* font stacks taken directly from Notion */
    --font-monospace: "Source Code Pro", "Source Code Pro", "Source Code Pro";
    -webkit-font-smoothing: auto;
}

/* 2. Colours */
:root
{
    /* 2.1 Dark theme color variables */
    --bg0-dark:       #1d2021;
    --bg1-dark:       #3c3836;
    --bg-dark:        #282828;
    --bg2-dark:       #504945;
    --bg3-dark:       #665c54;
    --bg4-dark:       #7c6f64;
    --bg5-dark:       #928374;
    --bg_visual:      #503946;
    --bg_red:         #cc241d;
    --bg_green:       #98971a;
    --bg_blue:        #458588;
    --bg_yellow:      #d79921;
    --shadow:         #00000070;

    --fg-dark:        #ebdbb2;
    --grey0-dark:     #7f897d;
    --grey1-dark:     #859289;
    --grey2-dark:     #9aa79d;

    --faded-red:     #fb4934;
    --faded-orange:  #fe8019;
    --faded-yellow:  #fabd2f;
    --faded-green:   #b8bb26;
    --faded-aqua:    #8ec07c;
    --faded-blue:    #83a598;
    --faded-purple:  #d3869b;

    --dim-red:       #cc241d;
    --dim-orange:    #d65d0e;
    --dim-yellow:    #d79921;
    --dim-green:     #98971a;
    --dim-aqua:      #689d6a;
    --dim-blue:      #458588;
    --dim-purple:    #b16286;


    /* 2.2 Light theme color variables */
    --bg0-light:     #f0edd8;
    --bg1-light:     #f6f1dd;
    --bg-light:      #fdf6e3;
    --bg2-light:     #f3efda;
    --bg3-light:     #edead5;
    --bg4-light:     #e4e1cd;
    --bg5-light:     #dfdbc8;
    --grey0-light:   #a4ad9e;
    --grey1-light:   #939f91;
    --grey2-light:   #879686;
    --shadow-light:  #3c474d20;


    --bg_visual_light:      #eaedc8;
    --bg_red_light:         #fbe3da;
    --bg_green_light:       #f0f1d2;
    --bg_blue_light:        #e9f0e9;
    --bg_yellow_light:      #faedcd;

    --fg-light:       #5c6a72;

    --light-red:     #f85552;
    --light-orange:  #f57d26;
    --light-yellow:  #bf983d;
    --light-green:   #899c40;
    --light-aqua:    #569d79;
    --light-blue:    #5a93a2;
    --light-purple:  #b87b9d;

    --light-dim-red:    #f1706f;
    --light-dim-orange: #f39459;
    --light-dim-yellow: #e4b649;
    --light-dim-green:  #a4bb4a;
    --light-dim-aqua:   #6ec398;
    --light-dim-blue:   #6cb3c6;
    --light-dim-purple: #e092be;


}

/* 2.3 Dark theme implementation */
.theme-dark
{
    --background-primary:         var(--bg-dark);
    --background-primary-alt:     var(--bg-dark);
    --background-secondary:       var(--bg-dark);
    --background-secondary-alt:   var(--bg-dark);
    --text-normal:                var(--fg-dark);
    --text-faint:                 var(--grey1-dark);
    --text-title-h1:              var(--dim-red);
    --text-title-h2:              var(--dim-orange);
    --text-title-h3:              var(--dim-yellow);
    --text-title-h4:              var(--dim-green);
    --text-title-h5:              var(--dim-aqua);
    --text-title-h6:              var(--dim-purple);
    --text-link:                  var(--faded-blue);
    --text-a:                     var(--dim-aqua);
    --text-a-hover:               var(--faded-aqua);
    --text-mark:                  rgba(215, 153, 33, 0.4); /* light-yellow */
    --pre-code:                   var(--bg1-dark);
    --text-highlight-bg:          var(--bg_green);
    --interactive-accent:         var(--dim-aqua);
    --interactive-before:         var(--bg5-dark);
    --background-modifier-border: var(--bg5-dark);
    --text-accent:                var(--dim-blue);
    --interactive-accent-rgb:     var(--dim-blue);
    --inline-code:                var(--dim-blue);
    --code-block:                 var(--fg-dark);
    --vim-cursor:                 var(--faded-blue);
    --text-selection:             var(--bg5-dark);
}

/* 2.4 Light theme implementation */
.theme-light
{
    --background-primary:         var(--bg-light);
    --background-primary-alt:     var(--bg-light);
    --background-secondary:       var(--bg-light);
    --background-secondary-alt:   var(--bg-light);
    --text-normal:                var(--fg-light);
    --text-faint:                 var(--grey1-light);
    --text-title-h1:              var(--light-red);
    --text-title-h2:              var(--light-orange);
    --text-title-h3:              var(--light-yellow);
    --text-title-h4:              var(--light-green);
    --text-title-h5:              var(--light-aqua);
    --text-title-h6:              var(--light-purple);
    --text-link:                  var(--light-blue);
    --text-a:                     var(--light-dim-blue);
    --text-a-hover:               var(--light-blue);
    --text-mark:                  rgba(215, 153, 33, 0.4); /* light-yellow */
    --pre-code:                   var(--bg1-light);
    --text-highlight-bg:          var(--light-dim-green);
    --interactive-accent:         var(--bg5-light);
    --interactive-before:         var(--bg5-light);
    --background-modifier-border: var(--bg5-light);
    --text-accent:                var(--bg5-light);
    --interactive-accent-rgb:     var(--light-dim-green);
    --inline-code:                var(--light-blue);
    --code-block:                 var(--fg-light);
    --vim-cursor:                 var(--light-blue);
    --text-selection:             rgba(189, 174, 147, 0.5); /* light3 */
}

.theme-dark code[class*="language-"],
.theme-dark pre[class*="language-"],
.theme-light code[class*="language-"],
.theme-light pre[class*="language-"]
{
    text-shadow: none !important;
    background-color: var(--pre-code) !important;
}

/* 3. General UI */
.view-header-title {
    font-weight: 700;
  }

  /* 3.1. Title bar */
  .titlebar {
    background-color: var(--background-secondary-alt);
  }

  .titlebar-inner {
    color: var(--text-normal);
  }

.graph-view.color-circle,
.graph-view.color-fill-highlight,
.graph-view.color-line-highlight
{
    color: var(--interactive-accent-rgb) !important;
}
.graph-view.color-text
{
    color: var(--text-a-hover) !important;
}
/*
.graph-view.color-fill
{
    color: var(--background-secondary);
}*/
.graph-view.color-line
{
  color: #504945;
}


html,
body
{
    font-size: 16px !important;
}

strong
{
    font-weight: 600 !important;
}

a,
.cm-hmd-internal-link
{
    color: var(--text-a) !important;
    text-decoration: none !important;
}

a:hover,
.cm-hmd-internal-link:hover,
.cm-url
{
    color: var(--text-a-hover) !important;
    text-decoration: none !important;
}

mark
{
    background-color: var(--text-mark) !important;
}

.view-actions a
{
    color: var(--text-normal) !important;
}

.view-actions a:hover
{
    color: var(--text-a) !important;
}

.HyperMD-codeblock-bg
{
    background-color: var(--pre-code) !important;
}

.HyperMD-codeblock
{
    line-height: 1.4em !important;
    color: var(--code-block) !important;
}

.HyperMD-codeblock-begin
{
    border-top-left-radius: 4px !important;
    border-top-right-radius: 4px !important;
}

.HyperMD-codeblock-end
{
    border-bottom-left-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
}

th
{
    font-weight: 600 !important;
}

thead
{
    border-bottom: 2px solid var(--background-modifier-border) !important;
}

.HyperMD-table-row
{
    line-height: normal !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    /* background-color: var(--pre-code) !important; */
}

.HyperMD-table-row-0
{
    padding-top: 4px !important;
}

.CodeMirror-foldgutter-folded,
.is-collapsed .nav-folder-collapse-indicator
{
    color: var(--text-a) !important;
}

.nav-file, .nav-folder {
  padding: 0px 2px;
}

.nav-file-title, .nav-folder-title {
  width: 100%;
  cursor: default;
  display: flex;
  flex-direction: row;
}

.nav-file .is-active {
  --background-secondary-alt: var(--bg-dark);
  --text-normal: #ebdbb2;
}

.nav-file-title-content, .nav-folder-title-content {
  text-indent: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: block;
}

/*.nav-file-tag
{
    color: var(--text-a) !important;
}

.is-active .nav-file-title
{
    color: var(--text-a) !important;
    background-color: var(--background-primary-alt) !important;
}

.nav-file-title
{
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}*/

/*img
{
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}*/

.HyperMD-list-line
{
    padding-top: 0 !important;
}

.CodeMirror-code,
.CodeMirror-linenumber,
.cm-formatting
{
    font-family: var(--font-monospace) !important;
    font-size: 0.9em;
}

.markdown-preview-section pre code,
.markdown-preview-section code
{
    font-size: 0.9em !important;
    background-color: var(--pre-code) !important;
}

.markdown-preview-section pre code
{
    padding: 4px !important;
    line-height: 1.4em !important;
    display: block !important;
    color: var(--code-block) !important;
}

.markdown-preview-section code
{
    color: #83a598 !important;
    background-color: #3c3836 !important;
    padding: 3px !important;
}

.cm-s-obsidian,
.cm-inline-code
{
    -webkit-font-smoothing: auto !important;
}

.cm-inline-code
{
    color: var(--inline-code) !important;
    background-color: var(--pre-code) !important;
    padding: 1px !important;
}

.workspace-leaf-header-title
{
    font-weight: 600 !important;
}

.side-dock-title
{
    padding-top: 15px !important;
    font-size: 20px !important;
}

.side-dock-ribbon-tab:hover,
.side-dock-ribbon-action:hover,
.side-dock-ribbon-action.is-active:hover,
.nav-action-button:hover,
.side-dock-collapse-btn:hover
{
    color: var(--text-a);
}

.side-dock
{
    border-right: 0 !important;
}

.cm-s-obsidian,
.markdown-preview-view
{
    /* padding-left: 10px !important; */
    padding-right: 10px !important;
}

/* vertical resize-handle */
.workspace-split.mod-vertical > * > .workspace-leaf-resize-handle,
.workspace-split.mod-left-split > .workspace-leaf-resize-handle,
.workspace-split.mod-right-split > .workspace-leaf-resize-handle
{
    width: 1px !important;
    background-color: var(--background-secondary-alt);
}

/* horizontal resize-handle */
.workspace-split.mod-horizontal > * > .workspace-leaf-resize-handle
{
    height: 1px !important;
    background-color: var(--background-secondary-alt);
}

/* Remove vertical split padding */
.workspace-split.mod-root .workspace-split.mod-vertical .workspace-leaf-content,
.workspace-split.mod-vertical > .workspace-split,
.workspace-split.mod-vertical > .workspace-leaf,
.workspace-tabs
{
    padding-right: 0px;
}

.workspace-tabs .workspace-leaf {
    border:  transparent;
}

.markdown-embed-title
{
    font-weight: 600 !important;
}

.markdown-embed
{
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
}

.cm-header-1,
.markdown-preview-section h1
{
    font-weight: 500 !important;
    font-size: 34px !important;
    color: var(--text-title-h1) !important;
}

.cm-header-2,
.markdown-preview-section h2
{
    font-weight: 500 !important;
    font-size: 26px !important;
    color: var(--text-title-h2) !important;
}

.cm-header-3,
.markdown-preview-section h3
{
    font-weight: 500 !important;
    font-size: 22px !important;
    color: var(--text-title-h3) !important;
}

.cm-header-4,
.markdown-preview-section h4
{
    font-weight: 500 !important;
    font-size: 20px !important;
    color: var(--text-title-h4) !important;
}

.cm-header-5,
.markdown-preview-section h5
{
    font-weight: 500 !important;
    font-size: 18px !important;
    color: var(--text-title-h5) !important;
}

.cm-header-6,
.markdown-preview-section h6
{
    font-weight: 500 !important;
    font-size: 18px !important;
    color: var(--text-title-h6) !important;
}

.suggestion-item.is-selected
{
    background-color: var(--text-selection);
}

.empty-state-container:hover
{
    background-color: var(--background-secondary-alt);
    border: 5px solid var(--interactive-accent) !important;
}

.checkbox-container
{
    background-color: var(--interactive-before);
}

.checkbox-container:after
{
    background-color: var(--interactive-accent);
}

.mod-cta
{
    color: var(--background-secondary-alt) !important;
    font-weight: 600 !important;
}

.mod-cta a
{
    color: var(--background-secondary-alt) !important;
    font-weight: 600 !important;
}

.mod-cta:hover
{
    background-color: var(--interactive-before) !important;
    font-weight: 600 !important;
}

.CodeMirror-cursor
{
    background-color: var(--vim-cursor) !important;
    opacity: 60% !important;
}

input.task-list-item-checkbox {
    border: 1px solid var(--faded-blue);
    appearance: none;
    -webkit-appearance: none;
}

input.task-list-item-checkbox:checked
{
    background-color: var(--faded-blue);
    box-shadow: inset 0 0 0 2px var(--background-primary);
}

::selection
{
    background-color: var(--text-selection) !important;
}

.mermaid .note
{
    fill: var(--dark3) !important;
}

.frontmatter-container {
    display: none;
}

/* Bullet point relationship lines */
.cm-hmd-list-indent .cm-tab, ul ul { position: relative; }
.cm-hmd-list-indent .cm-tab::before, ul ul::before {
 content:'';
 border-left: 1px solid var(--dim-blue);
 position: absolute;
}
.cm-hmd-list-indent .cm-tab::before { left: 0; top: -5px; bottom: -4px;
}
ul ul::before { left: -11px; top: 0; bottom: 0;
}

/*----------------------------------------------------------------------------------------*/
/* ENhanced GRub */
/*----------------------------------------------------------------------------------------*/

/* sidebar tabs */

body:not(.show-sidebar-tabs) .workspace-tab-header-container,
body:not(.show-sidebar-tabs) .workspace-tab-header-container * {
    transition: var(--medium-transition)
}

body:not(.show-sidebar-tabs) .workspace-tab-header-container:is(:hover *,
:hover) {
    transition: var(--quick-transition);
    transition-delay: var(--transition-delay-passing-over-protection)
}

body:not(.show-sidebar-tabs) .workspace-tab-header-container:not(:hover) {
    height: 11px;
    box-shadow: var(--small-reverted-inset-shadow);
    padding-top: 0;
    padding-bottom: 0
}

body:not(.show-sidebar-tabs) .workspace-tabs:nth-child(3) .workspace-tab-header-container:not(:hover) {
    box-shadow: var(--medium-reverted-inset-shadow)
}

body:not(.show-sidebar-tabs) .workspace-tabs:not(:nth-child(3)) .workspace-tab-header-container {
    border-top: var(--basic-border)
}

body:not(.show-sidebar-tabs) .workspace-tabs.workspace-tabs.workspace-tabs.workspace-tabs .workspace-tab-header-container:hover {
    height: 55px;
    box-shadow: var(--big-reverted-inset-shadow);
    padding-bottom: 4px
}

body:not(.show-sidebar-tabs) .workspace-tab-header-container:hover .workspace-tab-header {
    margin-top: 10px
}

body:not(.show-sidebar-tabs) .workspace-tabs .workspace-tab-header-container:not(:hover) .workspace-tab-header,
body:not(.show-sidebar-tabs) .workspace-tabs .workspace-tab-header-container:not(:hover) .workspace-tab-header svg {
    opacity: 0;
    border: none
}

/* title bar showing */


body:not(.show-titlebar) .titlebar {
    display: none
}

.mod-macos:not(.show-titlebar) .mod-left-split .workspace-tabs:nth-child(3) .workspace-tab-header-container {
    height: calc(var(--mac-traffic-light-padding) + 37px);
    padding-top: calc(var(--mac-traffic-light-padding) + 5px)
}

body.mod-macos:not(.show-titlebar) .workspace-split.mod-left-split.is-collapsed~.mod-root .workspace-leaf:nth-child(2) .view-header {
    padding-left: 7vh
}

.theme-dark:not(.show-titlebar):not(.is-mobile),
.theme-light:not(.show-titlebar):not(.is-mobile) {
    padding: 0!important
}

/* code below breaks notifications */
/*
body:not(.show-titlebar) .workspace-ribbon.mod-left {
    margin-top: calc(var(--mac-traffic-light-padding) + var(--normal-top-padding))
}

body:not(.show-titlebar) .workspace-ribbon.mod-right {
    margin-top: var(--normal-top-padding)
}

body.show-titlebar .workspace-ribbon.mod-left {
    margin-top: 0
}

body:not(.show-titlebar-text) .titlebar-text {
    display: none
}

.titlebar-text {
    font-family: var(--menu-font);
    color: var(--text-normal);
    margin-left: var(--cover-width);
    --cover-width: 18ch
}

.titlebar-text::AFTER {
    content: "                                       ";
    white-space: pre-wrap;
    background-color: var(--bg2);
    margin-left: calc(var(--cover-width) * -1)
}

.titlebar {
    background-color: var(--bg2);
    border-bottom: var(--thin-border)
}

body:not(.show-titlebar) .workspace-ribbon-collapse-btn {
    border-top: var(--basic-border)
}

.workspace-ribbon-collapse-btn svg {
    stroke-width: 4px
}

body:not(.show-titlebar):not(.is-mobile)>div.notice-container {
    top: 0
}

div.notice-container .notice {
    font-family: var(--button-font);
    font-size: calc(var(--button-font-size) * .9);
    letter-spacing: .6px;
    color: var(--text-normal);
    background-color: var(--notice-bg);
    box-shadow: var(--small-shadow), var(--notice-inset-shadow);
    padding: 5px 12px 7px;
    border: var(--notice-border);
    border-radius: var(--roundish)
}

body.mod-macos:not(.show-sidebar-tabs):not(.show-titlebar) .mod-left-split .workspace-tabs:nth-child(3) .workspace-tab-header-container:not(:hover) {
    height: 17px
}

body.mod-macos:not(.show-sidebar-tabs):not(.show-titlebar) .mod-left-split .workspace-tabs:nth-child(3) .workspace-tab-header-container:hover .workspace-tab-header {
    margin-top: 2px
}*/

/* show scrollbar */

body:not(.show-scrollbar) ::-WEBKIT-SCROLLBAR {
    display: none
}

body:not(.show-scrollbar) .workspace-split.mod-root .workspace-leaf-content[data-type=style-settings] ::-WEBKIT-SCROLLBAR {
    display: none
}

.workspace-split.mod-root .workspace-leaf-content[data-type=style-settings] {
    font-size: var(--menu-font-size)
}

.mod-root .workspace-leaf-content[data-type=style-settings] .view-content {
    padding: 20px
}

/* images left ailgned */

body:not(.left-aligned-embeds) .image-embed[alt]::AFTER {
    text-align: center;
    white-space: pre
}

body:not(.left-aligned-embeds) .view-content img:not(.link-favicon) {
    margin-right: auto;
    margin-left: auto
}

body:not(.left-aligned-embeds) div.mermaid {
    text-align: center
}

.mermaid {
    font-size: .9em;
    --mermaid-font: var(--original-font)
}

.pdf-embed iframe {
    border-radius: var(--roundish)
}

body:not(.left-aligned-embeds) .pdf-embed.pdf-embed {
    margin-right: auto!important;
    margin-left: auto!important
}

body:not(.left-aligned-embeds) :is(.oz-pdf-widget-cm6,
div.oz-image-widget-cm6,
div.oz-image-widget)>:is(embed,
img) {
    margin-right: auto;
    margin-left: auto
}

body div.oz-image-widget>img:active {
    border: none
}

/* remove collapsed panes' borders */ /* @dxps' suggestion */

body:not(.collapsed-borders) .workspace-ribbon.mod-left.is-collapsed {
    border-right-color: var(--background-secondary-alt);
}

body:not(.collapsed-borders) .workspace-ribbon.mod-right.is-collapsed {
    border-left-color: var(--background-secondary-alt);
}

/* remove status bar border */ /* @dxps' suggestion */

body:not(.status-bar-border) .status-bar {
    border-top-color: var(--background-secondary-alt);
}


/*img{
    margin-left: initial;
}*/

/* bold color */

strong,
.cm-s-obsidian .cm-strong.cm-header,
.cm-s-obsidian .cm-strong.cm-header.cm-header-1,
.cm-s-obsidian .cm-strong.cm-header.cm-header-2,
.cm-s-obsidian .cm-strong.cm-header.cm-header-3,
.cm-s-obsidian .cm-strong.cm-header.cm-header-4,
.cm-s-obsidian .cm-strong.cm-header.cm-header-5,
.cm-s-obsidian .cm-strong.cm-header.cm-header-6,
.cm-s-obsidian .cm-strong.cm-header.cm-header-1,
.cm-s-obsidian .cm-strong.cm-header.cm-header-2,
.cm-s-obsidian .cm-strong.cm-header.cm-header-3,
.cm-s-obsidian .cm-strong.cm-header.cm-header-4,
.cm-s-obsidian .cm-strong.cm-header.cm-header-5,
.cm-s-obsidian .cm-strong.cm-header.cm-header-6,
.cm-header.cm-header-3.cm-hmd-internal-link,
.markdown-preview-section strong,
.cm-s-obsidian .cm-strong {
  color: #ebdbb2;
}

/*------------------------------------------------------------------------------*/
/* @settings
name: Gruvmeplease ⟡
id: grubbed
settings:
    -
     id: show-hide-elements
     title: 🙈 Show/Hide UI Elements
     description: Re-enable elements hidden by this theme
     type: heading
     level: 1
     collapsed: true
    -
     id: show-sidebar-tabs
     title: Permanently show the Sidebar Tabs
     type: class-toggle
     description: When false, the Sidebar Tabs become visible upon hovering.
     default: false
    -
     id: show-titlebar
     title: Re-enable Title Bar
     type: class-toggle
     description: Enable this to have a title bar, for example to move the Obsidian window
     default: false
    -
     id: show-scrollbar
     title: Re-enable Scrollbars
     type: class-toggle
     description: When false, only the scroll bars in the Editor are shown.
     default: false
    - 
     id: collapsed-borders
     title: Re-enable collapsed panes' borders
     type: class-toggle
     description: When false, collapsed panes' borders won't show.
     default: false
    -
     id: status-bar-border
     title: Re-enable status bar border
     type: class-toggle
     description: When false, status bar's border won't show.
     default: false
*/