monapdx_Electrocution/theme.css

/*
 * Neo-Brutalist Obsidian Theme
 * Integrated from the base theme plus links, lists, properties, and tag styles.
 */

/* ==========================================================
   VARIABLES / GLOBAL
   ========================================================== */

body,
.theme-light,
.theme-dark {
  --background-primary: #ffffff !important;
  --background-secondary: #f3f3f3 !important;
  --background-secondary-alt: #e9e9e9 !important;
  --background-modifier-border: #000000 !important;
  --text-normal: #000000 !important;
  --text-muted: #222222 !important;
  --text-faint: #444444 !important;
  --text-accent: #7a00ff !important;
  --text-accent-hover: #ff2bd6 !important;
  --interactive-accent: #ff2bd6 !important;
  --interactive-accent-hover: #39ff14 !important;
  --code-background: #000000 !important;
  --code-normal: #39ff14 !important;
  --code-comment: #8be28b !important;
  --code-function: #00e5ff !important;
  --code-important: #ff2bd6 !important;
  --code-keyword: #ff2bd6 !important;
  --code-operator: #ffffff !important;
  --code-property: #00e5ff !important;
  --code-punctuation: #ffffff !important;
  --code-string: #39ff14 !important;
  --code-tag: #00e5ff !important;
  --code-value: #ffe600 !important;
  --nb-pink: #ff2bd6;
  --nb-lime: #39ff14;
  --nb-purple: #7a00ff;
  --nb-heliotrope: #df73ff;
  --nb-yellow: #ffe600;
  --nb-cyan: #00e5ff;
  --nb-black: #000000;
  --nb-white: #ffffff;
}

.markdown-rendered,
.markdown-preview-view,
.markdown-reading-view,
.markdown-preview-sizer,
.markdown-source-view,
.cm-editor,
.cm-scroller,
.cm-content {
  background: var(--nb-white) !important;
  color: var(--nb-black) !important;
  opacity: 1 !important;
}

.markdown-rendered p,
.markdown-rendered li,
.markdown-rendered td,
.markdown-rendered th,
.markdown-rendered blockquote,
.cm-line {
  color: var(--nb-black) !important;
  opacity: 1 !important;
}

/* ==========================================================
   HEADINGS
   ========================================================== */

.markdown-rendered h1,
.markdown-preview-view h1 {
  background: var(--nb-pink) !important;
  color: var(--nb-black) !important;
  border: 4px solid var(--nb-black) !important;
  padding: 10px 15px !important;
  box-shadow: 6px 6px 0 var(--nb-black) !important;
  text-transform: uppercase !important;
  font-weight: 900 !important;
}

.markdown-rendered h2,
.markdown-preview-view h2 {
  background: var(--nb-purple) !important;
  color: var(--nb-white) !important;
  padding: 8px 12px !important;
  box-shadow: 5px 5px 0 var(--nb-black) !important;
  font-weight: 900 !important;
}

.markdown-rendered h3,
.markdown-preview-view h3 {
  background: var(--nb-lime) !important;
  color: var(--nb-black) !important;
  border-left: 8px solid var(--nb-black) !important;
  padding: 8px 12px !important;
  font-weight: 900 !important;
}

.cm-header { color: var(--nb-black) !important; font-weight: 900 !important; }
.cm-header-3 { border-left: 8px solid var(--nb-lime) !important; padding-left: 10px !important; }

/* ==========================================================
   LINKS
   ========================================================== */

.markdown-rendered a,
.markdown-preview-view a,
.cm-hmd-internal-link,
.cm-link,
.cm-url {
  color: var(--nb-black) !important;
  background: var(--nb-lime) !important;
  padding: 0.05em 0.25em;
  font-weight: 900 !important;
  text-decoration: none !important;
  box-shadow: 3px 3px 0 var(--nb-pink);
}

.markdown-rendered a:hover,
.markdown-preview-view a:hover,
.internal-link:hover {
  background: var(--nb-pink) !important;
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--nb-cyan) !important;
}

.internal-link { display: inline-block; border: 2px solid var(--nb-black) !important; }

/* ==========================================================
   TAGS
   ========================================================== */

.tag,
.cm-hashtag,
.tag-pane-tag {
  display: inline-block;
  background: var(--nb-lime) !important;
  color: var(--nb-black) !important;
  border: 3px solid var(--nb-black) !important;
  border-radius: 0 !important;
  padding: 4px 10px !important;
  margin: 1px 2px !important;
  font-weight: 900 !important;
  font-size: 0.9em;
  text-transform: lowercase;
  letter-spacing: 0.03em;
  box-shadow: 5px 5px 0 var(--nb-pink);
  transition: transform 0.1s ease;
}

.tag:hover,
.cm-hashtag:hover,
.tag-pane-tag:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--nb-cyan);
}

/* ==========================================================
   LISTS / TASKS
   ========================================================== */

.markdown-preview-view ul { list-style-type: square; }
.markdown-preview-view ul li::marker,
.markdown-preview-view ol li::marker { color: var(--nb-pink); font-weight: 900; }
.markdown-preview-view li { margin: 0.35em 0; }

.task-list-item {
  border: 3px solid var(--nb-black) !important;
  background: var(--nb-white) !important;
  padding: 8px 12px !important;
  margin: 6px 0 !important;
  box-shadow: 4px 4px 0 var(--nb-black) !important;
}
.task-list-item-checkbox {
  transform: scale(1.4);
  margin-inline-start: 2px !important;
  margin-inline-end: 12px !important;
}
.is-checked { background: var(--nb-lime) !important; }

.task-list-item:hover {
  background: var(--nb-heliotrope) !important;
  color: var(--nb-black) !important;
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--nb-black) !important;
  transition: background 0.15s ease, transform 0.15s ease;
}


/* ==========================================================
   BLOCKQUOTES / TABLES
   ========================================================== */

.markdown-rendered blockquote,
.markdown-preview-view blockquote,
blockquote {
  background: var(--nb-pink) !important;
  color: var(--nb-black) !important;
  border: 4px solid var(--nb-black) !important;
  padding: 20px !important;
  font-size: 1.15em !important;
  font-style: italic !important;
  box-shadow: 8px 8px 0 var(--nb-black) !important;
}
.markdown-rendered blockquote *,
.markdown-preview-view blockquote * { color: var(--nb-black) !important; }

.markdown-rendered table,
.markdown-preview-view table,
table { border-collapse: collapse !important; border: 4px solid var(--nb-black) !important; }
.markdown-rendered th,
.markdown-preview-view th,
th { background: var(--nb-pink) !important; color: var(--nb-black) !important; border: 3px solid var(--nb-black) !important; font-weight: 900 !important; }
.markdown-rendered td,
.markdown-preview-view td,
td { background: var(--nb-white) !important; color: var(--nb-black) !important; border: 3px solid var(--nb-black) !important; }
.markdown-rendered tr:nth-child(even) td,
.markdown-preview-view tr:nth-child(even) td,
tr:nth-child(even) td { background: #f5f5f5 !important; }

/* ==========================================================
   CODE
   ========================================================== */

.markdown-rendered pre,
.markdown-preview-view pre,
.markdown-reading-view pre {
  background: var(--nb-black) !important;
  color: var(--nb-lime) !important;
  border: 4px solid var(--nb-pink) !important;
  box-shadow: 6px 6px 0 var(--nb-purple) !important;
  padding: 1rem !important;
  border-radius: 0 !important;
  opacity: 1 !important;
}
.markdown-rendered pre code,
.markdown-preview-view pre code,
.markdown-reading-view pre code { background: transparent !important; color: var(--nb-lime) !important; border: 0 !important; padding: 0 !important; opacity: 1 !important; }
.markdown-rendered pre code *,
.markdown-preview-view pre code *,
.markdown-reading-view pre code * { opacity: 1 !important; }
.markdown-rendered pre .token,
.markdown-preview-view pre .token { color: var(--nb-lime) !important; }
.markdown-rendered pre .token.tag,
.markdown-rendered pre .token.selector,
.markdown-preview-view pre .token.tag,
.markdown-preview-view pre .token.selector { color: var(--nb-cyan) !important; }
.markdown-rendered pre .token.attr-name,
.markdown-rendered pre .token.property,
.markdown-preview-view pre .token.attr-name,
.markdown-preview-view pre .token.property { color: var(--nb-yellow) !important; }
.markdown-rendered pre .token.attr-value,
.markdown-rendered pre .token.string,
.markdown-preview-view pre .token.attr-value,
.markdown-preview-view pre .token.string { color: var(--nb-lime) !important; }
.markdown-rendered pre .token.punctuation,
.markdown-rendered pre .token.operator,
.markdown-preview-view pre .token.punctuation,
.markdown-preview-view pre .token.operator { color: var(--nb-white) !important; }
.markdown-rendered pre .token.comment,
.markdown-preview-view pre .token.comment { color: #8be28b !important; font-style: italic !important; }
.markdown-source-view.mod-cm6 .cm-line.HyperMD-codeblock,
.markdown-source-view.mod-cm6 .cm-line.HyperMD-codeblock *,
.cm-line.HyperMD-codeblock,
.cm-line.HyperMD-codeblock * { background: var(--nb-black) !important; color: var(--nb-lime) !important; opacity: 1 !important; }
.markdown-source-view.mod-cm6 .cm-line.HyperMD-codeblock { border-left: 4px solid var(--nb-pink) !important; border-right: 4px solid var(--nb-purple) !important; }
.markdown-rendered :not(pre) > code,
.markdown-preview-view :not(pre) > code,
.cm-inline-code { background: var(--nb-black) !important; color: var(--nb-lime) !important; border: 2px solid var(--nb-pink) !important; padding: 2px 5px !important; border-radius: 0 !important; opacity: 1 !important; }

/* ==========================================================
   CALLOUTS / EMBEDS
   ========================================================== */

.callout { border: 4px solid var(--nb-black) !important; box-shadow: 6px 6px 0 var(--nb-black) !important; }
.callout[data-callout="note"] { background: var(--nb-purple) !important; }
.callout[data-callout="tip"] { background: var(--nb-lime) !important; }
.callout[data-callout="warning"] { background: var(--nb-yellow) !important; }
.callout[data-callout="danger"] { background: var(--nb-pink) !important; }
.markdown-embed { border: 4px solid var(--nb-black) !important; box-shadow: 6px 6px 0 var(--nb-black) !important; background: var(--nb-white) !important; padding: 10px !important; }

/* ==========================================================
   PROPERTIES / FRONTMATTER
   ========================================================== */

.metadata-container {
  background: var(--nb-pink) !important;
  border: 4px solid var(--nb-black) !important;
  box-shadow: 8px 8px 0 var(--nb-black) !important;
  padding: 12px !important;
  margin-bottom: 20px !important;
  color: var(--nb-black) !important;
}
.metadata-property { background: var(--nb-white) !important; border: 3px solid var(--nb-black) !important; margin: 6px 0 !important; padding: 8px !important; }
.metadata-property-key { color: var(--nb-black) !important; font-weight: 900 !important; text-transform: uppercase !important; letter-spacing: 1px !important; }
.metadata-property-value { color: var(--nb-black) !important; font-weight: 700 !important; }
.metadata-property-value .tag { background: var(--nb-black) !important; color: var(--nb-white) !important; border: 2px solid var(--nb-black) !important; box-shadow: 2px 2px 0 var(--nb-purple) !important; }
.metadata-container .collapse-icon svg { color: var(--nb-black) !important; stroke-width: 3px !important; }
.metadata-property:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--nb-black); }

/* ==========================================================
   MEDIA / DIVIDERS / WORKSPACE
   ========================================================== */

hr { height: 8px !important; background: var(--nb-pink) !important; border: 0 !important; margin: 20px 0 !important; }
img { border: 4px solid var(--nb-black) !important; box-shadow: 8px 8px 0 var(--nb-purple) !important; }
.markdown-preview-view .image-embed[alt*="float-left"] { float: left !important; margin: 0.75rem 4rem 2rem 0 !important; }
.markdown-preview-view .image-embed[alt*="float-right"] { float: right !important; margin: 0.75rem 0 2rem 4rem !important; }

.nav-files-container,
.nav-folder-children { background: #111111 !important; }
.nav-file-title,
.nav-folder-title,
.nav-file-title-content,
.nav-folder-title-content { color: var(--nb-white) !important; opacity: 1 !important; }
.nav-file-title.is-active { background: var(--nb-pink) !important; color: var(--nb-black) !important; font-weight: 900 !important; border: 3px solid var(--nb-black) !important; box-shadow: 4px 4px 0 var(--nb-lime) !important; }
.workspace-tab-header.is-active { background: var(--nb-white) !important; color: var(--nb-black) !important; border: 3px solid var(--nb-black) !important; }
::selection { background: var(--nb-pink) !important; color: var(--nb-black) !important; }

/* Prevent Meta Bind controls from being styled as inline code */
.markdown-rendered code.interactive-child.mb-input,
.markdown-preview-view code.interactive-child.mb-input,
.markdown-reading-view code.interactive-child.mb-input {
  background: transparent !important;
  color: inherit !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  font-family: inherit !important;
}

.markdown-rendered :not(pre) > code:not(.mb-input):not(.interactive-child):not([class*="mb-"]),
.markdown-preview-view :not(pre) > code:not(.mb-input):not(.interactive-child):not([class*="mb-"]),
.cm-inline-code {
  background: var(--nb-black) !important;
  color: var(--nb-lime) !important;
  border: 2px solid var(--nb-pink) !important;
  padding: 2px 5px !important;
  border-radius: 0 !important;
  opacity: 1 !important;
}

/* ==========================================================
   META BIND COMPATIBILITY
   Prevent plugin controls from inheriting inline-code styling
   ========================================================== */

.markdown-rendered code.interactive-child,
.markdown-preview-view code.interactive-child,
.markdown-reading-view code.interactive-child,
.markdown-rendered code[class*="mb-"],
.markdown-preview-view code[class*="mb-"],
.markdown-reading-view code[class*="mb-"],
.markdown-rendered code:has(.mb-input-wrapper),
.markdown-preview-view code:has(.mb-input-wrapper),
.markdown-reading-view code:has(.mb-input-wrapper) {
  background: transparent !important;
  color: inherit !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  white-space: normal !important;
}