Notas-Asir/.obsidian/themes/W95/theme.css

/* @settings

name: W95 Display Properties
id: w95-display-props
settings:
    -
        id: w95-display-props-font
        title: Font
        type: heading
        level: 3
    -
        id: font-ui-smaller
        title: Smaller font size (px)
        type: variable-number
        default: 11
        format: px
    -
        id: font-ui-small
        title: Small font size (px)
        type: variable-number
        default: 12
        format: px
    -
        id: font-ui-medium
        title: Medium font size (px)
        type: variable-number
        default: 14
        format: px
    -
        id: font-ui-large
        title: Large font size (px)
        type: variable-number
        default: 20
        format: px
    - 
        id: w95-display-theme
        title: Appearance
        type: heading
        level: 3
    -
        id: w95-display-themes
        title: Scheme
        type: class-select
        allowEmpty: false
        default: w95-default
        options:
        -
          label: W95 Standard
          value: w95-default
        -
          label: Reactionary
          value: w95-reactionary
        -
          label: Brick
          value: w95-scheme-brick
        -
          label: Desert
          value: w95-scheme-desert
        -
          label: Eggplant
          value: w95-scheme-eggplant
        -
          label: Lilac
          value: w95-scheme-lilac
        -
          label: Maple
          value: w95-scheme-maple
        -
          label: Marine (high color)
          value: w95-scheme-marine
        -
          label: Mystery
          value: w95-scheme-mystery
        -
          label: Plum (high color)
          value: w95-scheme-plum
        -
          label: Pumpkin
          value: w95-scheme-pumpkin
        -
          label: Rainy Day
          value: w95-scheme-rainy-day
        -
          label: Rose
          value: w95-scheme-rose
        -
          label: Slate
          value: w95-scheme-slate
        -
          label: Spruce
          value: w95-scheme-spruce
        -
          label: Storm (VGA)
          value: w95-scheme-storm
        -
          label: Teal (VGA)
          value: w95-scheme-teal
        -
          label: Wheat
          value: w95-scheme-wheat
*/

.theme-dark,
.theme-light {
  --accent-h: 240;
  --accent-s: 100%;
  --accent-l: 24%;

  --interactive-normal: var(--accent-1);
  --interactive-hover: var(--accent-1);
  --interactive-accent: var(--accent-6);
  --interactive-accent-hover: var(--background-primary);

  --background-primary: #bdbebd;
  --background-secondary: #bdbebd;
  --nav-item-background-active: #00007b;
  --nav-item-color-active: var(--accent-1);
  --scrollbar-track: var(--color-base-25);
  --scrollbar-thumb: var(--color-base-20);

  --border-highlight: var(--accent-1);
  --border-shadow: var(--color-base-55);
}

.theme-dark.w95-scheme-rose,
.theme-light.w95-scheme-rose {
  --background-primary: #cdaeb4;
  --background-secondary: #cdaeb4;

  --border-highlight: #e6d6de;
  --border-shadow: #8a525c;

  --scrollbar-track: #ead8df;
  --scrollbar-thumb: #e6c6cc;

  --nav-item-background-active: #9c5d6a;
  --interactive-accent: #9c5d6a;
}

.theme-dark.w95-scheme-brick,
.theme-light.w95-scheme-brick {
  --background-primary: #bdbea4;
  --background-secondary: #bdbea4;

  --border-highlight: #dedecd;
  --border-shadow: #514e35;

  --scrollbar-track: #d4d5c1;
  --scrollbar-thumb: #d5d6ba;

  --nav-item-background-active: #8b855a;
  --interactive-accent: #8b855a;
}

.theme-dark.w95-scheme-desert,
.theme-light.w95-scheme-desert {
  --background-primary: #d5cab5;
  --background-secondary: #d5cab4;

  --border-highlight: #e6e6de;
  --border-shadow: #594d37;

  --scrollbar-track: #e1dacc;
  --scrollbar-thumb: #e6dcc8;

  --nav-item-background-active: #007d7b;
  --interactive-accent:;
}

.theme-dark.w95-scheme-eggplant,
.theme-light.w95-scheme-eggplant {
  --background-primary: #8baea4;
  --background-secondary: #8baea4;

  --border-highlight: #c5d6d5;
  --border-shadow: #304943;

  --scrollbar-track: #aec5be;
  --scrollbar-thumb: #b1d6cc;

  --nav-item-background-active: #527d73;
  --interactive-accent: #527d73;
}

.theme-dark.w95-scheme-lilac,
.theme-light.w95-scheme-lilac {
  --background-primary: #aca5d6;
  --background-secondary: #aca5d6;

  --border-highlight: #d5d2ee;
  --border-shadow: #3e3d45;

  --scrollbar-track: #cdcae3;
  --scrollbar-thumb: #bfb9e4;

  --nav-item-background-active: #524cab;
  --interactive-accent: #524cab;
}

.theme-dark.w95-scheme-maple,
.theme-light.w95-scheme-maple {
  --background-primary: #e6d6ac;
  --background-secondary: #e6d6ac;

  --border-highlight: #eeead5;
  --border-shadow: #736026;

  --scrollbar-track: #e4d7b1;
  --scrollbar-thumb: #f1e2ba;

  --nav-item-background-active: #c5a540;
  --interactive-accent: #c5a540;
}

.theme-dark.w95-scheme-marine,
.theme-light.w95-scheme-marine {
  --background-primary: #83beb5;
  --background-secondary: #83beb5;

  --border-highlight: #c5dfd5;
  --border-shadow: #7b8a84;

  --scrollbar-track: #aad6d0;
  --scrollbar-thumb: #9edcd2;

  --nav-item-background-active: #00147b;
  --interactive-accent: #00147b;

  --background-editor-primary: #c5dfd5;
}

.theme-dark.w95-scheme-mystery,
.theme-light.w95-scheme-mystery {
  --background-primary: #687868;
  --background-secondary: #687868;

  --border-highlight: #92a292;
  --border-shadow: #414c41;

  --scrollbar-track: #a1aea1;
  --scrollbar-thumb: #859585;

  --nav-item-background-active: #b77840;
  --interactive-accent: #b77840;
}

.theme-dark.w95-scheme-plum,
.theme-light.w95-scheme-plum {
  --background-primary: #a4958b;
  --background-secondary: #a4958b;

  --border-highlight: #d5cec4;
  --border-shadow: #d5cec4;

  --scrollbar-track: #cac0b9;
  --scrollbar-thumb: #bfb1a7;

  --nav-item-background-active: #a4958b;
  --interactive-accent: #a4958b;

  --background-editor-primary: #a4958b;
}

.theme-dark.w95-scheme-pumpkin,
.theme-light.w95-scheme-pumpkin {
  --background-primary: #eed29c;
  --background-secondary: #eed29c;

  --border-highlight: #eed29c;
  --border-shadow: #7c5e19;

  --scrollbar-track: #f8e6c4;
  --scrollbar-thumb: #f6dca9;

  --nav-item-background-active: #7b157a;
  --interactive-accent: #7b157a;
}

.theme-dark.w95-scheme-rainy-day,
.theme-light.w95-scheme-rainy-day {
  --background-primary: #7b95ac;
  --background-secondary: #7b95ac;

  --border-highlight: #bdcad5;
  --border-shadow: #4a617b;

  --scrollbar-track: #b0c2d3;
  --scrollbar-thumb: #9ab4cc;

  --nav-item-background-active: #4a617b;
  --interactive-accent: #4a617b;
}

.theme-dark.w95-scheme-slate,
.theme-light.w95-scheme-slate {
  --background-primary: #9cb6c5;
  --background-secondary: #9cb6c5;

  --border-highlight: #cddade;
  --border-shadow: #527d94;

  --scrollbar-track: #c6d6df;
  --scrollbar-thumb: #b2cad8;

  --nav-item-background-active: #527d94;
  --interactive-accent: #527d94;
}

.theme-dark.w95-scheme-spruce,
.theme-light.w95-scheme-spruce {
  --background-primary: #9cc6a4;
  --background-secondary: #9cc6a4;

  --border-highlight: #cde2cd;
  --border-shadow: #529562;

  --scrollbar-track: #bfd8c4;
  --scrollbar-thumb: #b3d8ba;

  --nav-item-background-active: #529562;
  --interactive-accent: #529562;
}

.theme-dark.w95-scheme-storm,
.theme-light.w95-scheme-storm {
  --background-primary: #bdbebd;
  --background-secondary: #bdbebd;

  --border-highlight: #ffffff;
  --border-shadow: #7b7d7b;

  --scrollbar-track: #dedfde;
  --scrollbar-thumb: #cbcccb;

  --nav-item-background-active: #7b157a;
  --interactive-accent: #7b157a;
}

.theme-dark.w95-scheme-teal,
.theme-light.w95-scheme-teal {
  --background-primary: #bdbebd;
  --background-secondary: #bdbebd;

  --border-highlight: #ffffff;
  --border-shadow: #7b7d7b;

  --scrollbar-track: #dedfde;
  --scrollbar-thumb: #cbcccb;

  --nav-item-background-active: #0b7d7b;
  --interactive-accent: #0b7d7b;
}

.theme-dark.w95-scheme-wheat,
.theme-light.w95-scheme-wheat {
  --background-primary: #dede9c;
  --background-secondary: #dede9c;

  --border-highlight: #eeeecd;
  --border-shadow: #bdba39;

  --scrollbar-track: #dede9c;
  --scrollbar-thumb: #dede9c;

  --nav-item-background-active: #7b7d00;
  --interactive-accent: #7b7d00;
}

.theme-dark.w95-reactionary,
.theme-light.w95-reactionary {
  --background-primary: #d4d0c8;
  --background-secondary: #d4d0c8;

  --text-normal: #181612;

  --nav-item-background-active: #3a6ea5;
  --nav-item-color-active: var(--accent-1);
}

.theme-dark,
.theme-light {
  color-scheme: light;
  --highlight-mix-blend-mode: darken;
  --mono-rgb-0: 255, 255, 255;
  --mono-rgb-100: 0, 0, 0;
  --color-red-rgb: 233, 49, 71;
  --color-red: #e93147;
  --color-orange-rgb: 236, 117, 0;
  --color-orange: #ec7500;
  --color-yellow-rgb: 224, 172, 0;
  --color-yellow: #e0ac00;
  --color-green-rgb: 8, 185, 78;
  --color-green: #08b94e;
  --color-cyan-rgb: 0, 191, 188;
  --color-cyan: #00bfbc;
  --color-blue-rgb: 8, 109, 221;
  --color-blue: #086ddd;
  --color-purple-rgb: 120, 82, 238;
  --color-purple: #7852ee;
  --color-pink-rgb: 213, 57, 132;
  --color-pink: #d53984;
  --color-base-00: #ffffff;
  --color-base-05: #fcfcfc;
  --color-base-10: #fafafa;
  --color-base-20: #f6f6f6;
  --color-base-25: #e3e3e3;
  --color-base-30: #e0e0e0;
  --color-base-35: #d4d4d4;
  --color-base-40: #bdbdbd;
  --color-base-50: #ababab;
  --color-base-55: #808080;
  --color-base-60: #707070;
  --color-base-70: #5c5c5c;
  --color-base-100: #222222;
  --color-accent-hsl: var(--accent-h), var(--accent-s), var(--accent-l);
  --color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
  --color-accent-1: hsl(calc(var(--accent-h) - 1), calc(var(--accent-s) * 1.01), calc(var(--accent-l) * 1.075));
  --color-accent-2: hsl(calc(var(--accent-h) - 3), calc(var(--accent-s) * 1.02), calc(var(--accent-l) * 1.15));
  --background-secondary-alt: var(--color-base-05);
  --background-modifier-box-shadow: rgba(0, 0, 0, 0.1);
  --background-modifier-cover: rgba(220, 220, 220, 0.4);
  --input-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12),
  0 2px 3px 0 rgba(0, 0, 0, .05),
  0 1px 1.5px 0 rgba(0, 0, 0, .03),
  0 1px 2px 0 rgba(0, 0, 0, .04),
  0 0 0 0 transparent;
  --input-shadow-hover: inset 0 0 0 1px rgba(0, 0, 0, 0.17),
  0 2px 3px 0 rgba(0, 0, 0, .1),
  0 1px 1.5px 0 rgba(0, 0, 0, .03),
  0 1px 2px 0 rgba(0, 0, 0, .04),
  0 0 0 0 transparent;
  --shadow-s: 0px 1px 2px rgba(0, 0, 0, 0.028),
  0px 3.4px 6.7px rgba(0, 0, 0, .042),
  0px 15px 30px rgba(0, 0, 0, .07);
  --shadow-l: 0px 1.8px 7.3px rgba(0, 0, 0, 0.071),
  0px 6.3px 24.7px rgba(0, 0, 0, 0.112),
  0px 30px 90px rgba(0, 0, 0, 0.2);

  --accent-1: #FFFFFF;
  --accent-2: #00FFFF;
  --accent-3: #00FF00;
  --accent-4: #FFFF00;
  --accent-5: #FF0000;
  --accent-6: #00007b;

  --accent-1-muted: #ff79c6;
  --accent-2-muted: #8be9fd;
  --accent-3-muted: #50fa7b;
  --accent-4-muted: #ffb86c;
  --accent-5-muted: #ff5555;
  --accent-6-muted: #bd93f9;

  --header-color: #34548a;
  --bold-color: #000000;
  --italic-color: #343b58;
  --text-highlight-bg: #485e3066;
  --text-faint: #4f5057;

  --background-editor-primary: #ffffff;

  --nav-files-background: var(--background-editor-primary);

  --indentation-guide-color: rgba(var(--mono-rgb-100), 0.4);

  /* Backgrounds */
  --background-modifier-border: var(--color-base-60);
  --background-modifier-border-hover: var(--background-primary);
  --background-modifier-border-focus: var(--background-primary);
  --ribbon-background: var(--background-primary);
  --code-background: var(--accent-1);

  /* editor */

  /* Normalize title bar colors */
  --tab-container-background: var(--background-primary);
  --titlebar-background: var(--background-primary);
  --titlebar-background-focused: var(--background-primary);

  /* Graph adjustments */
  --graph-line: var(--background-primary, var(--background-modifier-border-focus));

  /* UI font colors */
  --h1-color: var(--header-color);
  --h2-color: var(--header-color);
  --h3-color: var(--header-color);
  --h4-color: var(--header-color);
  --h5-color: var(--header-color);
  --h6-color: var(--header-color);
}

body {
  /* Font sizes */
  --header-size: 1.4rem;
  --h1-size: var(--header-size);
  --h2-size: 1.3rem;
  --h3-size: 1.2rem;
  --h4-size: 1.1rem;
  --h5-size: 1rem;
  --h6-size: 0.9rem;

  /* UI font sizes */
  --font-ui-smaller: 11px;
  --font-ui-small: 12px;
  --font-ui-medium: 14px;
  --font-ui-large: 20px;

  /* tabs */
  --tab-radius-active: 1px;
  --tab-curve: 1px;

  /* buttons */
  --clickable-icon-radius: 0;
}

button,
button.mod-cta,
button:not(.clickable-icon) {
  background-color: var(--background-primary);
  border: 2px outset var(--color-base-30);
  border-radius: 0;
  color: var(--color-base-100);
}

button:active,
button.mod-cta:active {
  background-color: var(--background-primary);
  border: 2px inset var(--color-base-30);
  border-radius: 0;
  color: var(--color-base-100);
}


select.dropdown {
  border-radius: 0;
  border: 2px inset var(--color-base-30);
}

.clickable-icon {
  border-top: 1px solid var(--border-highlight);
  border-left: 1px solid var(--border-highlight);
  border-right: 1px solid var(--border-shadow);
  border-bottom: 1px solid var(--border-shadow);
}

.clickable-icon:active {
  border-top: 1px solid var(--border-shadow);
  border-left: 1px solid var(--border-shadow);
  border-right: 1px solid var(--border-highlight);
  border-bottom: 1px solid var(--border-highlight);
}

.clickable-icon::before {
  content: ' ';
}

.side-dock-settings,
.side-dock-actions {
  gap: 0;
}

.workspace-tab-container .view-header {}

.workspace-tab-container .view-header-title-container {
  height: var(--header-height);
}

.mod-right-split .workspace-tab-header-container-inner,
.mod-left-split .workspace-tab-header-container-inner {
  gap: 0;
  margin-left:1rem;
}
.mod-right-split .workspace-tab-header,
.mod-left-split .workspace-tab-header {
  border-radius: 0;
}

.mod-right-split .workspace-tab-header,
.mod-left-split .workspace-tab-header {
  border-top: 1px solid var(--border-highlight);
  border-left: 1px solid var(--border-highlight);
  border-right: 1px solid var(--border-shadow);
  border-bottom: 1px solid var(--border-shadow);
  color: var(--tab-text-color-active);
  background-color: var(--tab-background-active);

  box-shadow: none;
}

.mod-right-split .workspace-tab-header.is-active,
.mod-left-split .workspace-tab-header.is-active {
  border-top: 1px solid var(--tab-outline-color);
  border-left: 1px solid var(--tab-outline-color);
  border-bottom: 1px solid #FFFFFF;
  border-right: 1px solid var(--color-base-20);

  box-shadow: none;
}
.mod-right-split .workspace-tab-header.is-active .workspace-tab-header-inner,
.mod-left-split .workspace-tab-header.is-active .workspace-tab-header-inner {
  border: 0;
}

.mod-root .workspace-tab-header:not(.is-active) {
  top: 3px;
  border-top: 1px solid var(--border-highlight);
  border-left: 1px solid var(--border-highlight);
  border-right: 1px solid var(--border-shadow);
  border-right: 1px solid var(--border-shadow);
  color: var(--tab-text-color-active);
}

.mod-root .workspace-tab-header :not(.is-active) * {
  border: none;
}

.mod-root .workspace-tab-header-inner::after {
  background: none !important;
}

.workspace-tab-header {
  align-items: center;
  border-radius: var(--tab-radius) var(--tab-radius) 0 0;
}

.workspace-tab-header-inner {
  margin: 1px 0;
  border-radius: var(--tab-radius) var(--tab-radius) 0 0;
}

.workspace-tab-header.is-active .workspace-tab-header-inner {
  border: 1px dotted var(--color-base-70);
}

.workspace-tab-header-container {
  display: flex;
  background-color: var(--tab-container-background);
  height: var(--header-height);
  border-bottom: var(--tab-outline-width) solid var(--border-highlight);
  flex: 0 0 auto;
  padding-left: 0;
  padding-right: var(--size-4-2);
  position: relative;
}

.workspace-ribbon {
  border-right: var(--divider-width) solid var(--border-shadow);
}

.workspace-ribbon.mod-left:before {
  border-bottom: 1px solid var(--accent-1);
  opacity: 0;
}

.workspace-tab-header.is-active {
  border-top: 1px solid var(--border-highlight);
  border-left: 1px solid var(--border-highlight);
  box-shadow: 1px 1px 0 var(--tab-outline-width) var(--tab-outline-color);
  color: var(--tab-text-color-active);
  background-color: var(--tab-background-active);
  z-index: 2;
}

.workspace-leaf-resize-handle {
  opacity: 0 !important;
}

.workspace-tabs .workspace-leaf .view-content {
  background-color: var(--background-editor-primary);
  border: 4px ridge var(--border-highlight);
}

.nav-action-button:active {}

.nav-header {
  height: var(--header-height);
  /* todo: make this more dynamic */
  background-color: var(--background-primary);
}

.mod-left-split .nav-header {
  border-left: var(--divider-width) solid var(--border-highlight);
}

.nav-files-container {
  background-color: var(--nav-files-background);
  border: 4px ridge var(--border-highlight);
  border-right: 0;
}

.nav-buttons-container {
  padding: 0;
  gap: 0;
}

.inline-title {
  font-size: 2rem;
  font-family: system-ui, Helvetica, Arial, sans-serif;
  background-color: #000;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tree-item-self.is-being-renamed:focus-within {
  color: var(--tab-text-color-active);
}

/* vault switcher */
.workspace-sidedock-vault-profile {
  border-left: 1px solid var(--border-highlight);
  border-bottom: 1px solid var(--border-shadow);
}

/* scroll bar */
::-webkit-scrollbar {
  width: 16px;
}

::-webkit-scrollbar-track {
  background-color: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
  border: 2px outset var(--scrollbar-thumb);
}

/* status bar */
.status-bar {
  position: inherit;
  border-radius: 0;
  border-style: none;
  border-width: 0;
  background-color: inherit;
}

.nav-folder.mod-root .nav-folder>.nav-folder-children {
  border-left: var(--nav-indentation-guide-width) dotted var(--nav-indentation-guide-color);
}

.modal-close-button {
  margin-right: 0.25rem;
}

/* search results */
.search-result:not(.is-collapsed) .search-result-file-title {
  color: var(--nav-item-color);
}

/* mobile */

.is-mobile .workspace-drawer.mod-left {
  border-right: 1px outset var(--color-base-60);
}

.is-mobile .workspace-drawer.mod-right {
  border-left: 1px outset var(--color-base-60);
}

.is-mobile .nav-files-container {
  border: 4px ridge var(--color-base-25);
}

.is-mobile .empty-state-action {
  background-color: transparent;
}

.is-mobile .workspace-drawer-inner {
  padding-bottom: var(--safe-area-inset-bottom);
}