239 lines
7.8 KiB
CSS
239 lines
7.8 KiB
CSS
/* Trans flag inspired theme - Dark Mode Enhanced & Softened */
|
|
|
|
.theme-dark {
|
|
/* --- Base Color Definitions --- */
|
|
--background-primary: #1f1f24; /* Darker base */
|
|
--background-secondary: #2a2a30; /* Slightly lighter dark */
|
|
--background-primary-alt: #25252b;
|
|
--background-secondary-alt: #303038;
|
|
--background-modifier-border: rgba(91, 206, 250, 0.3); /* Softer light blue border */
|
|
--background-modifier-border-hover: #5BCEFA;
|
|
--background-modifier-border-focus: #5BCEFA;
|
|
--background-modifier-hover: rgba(91, 206, 250, 0.1); /* Subtle blue hover */
|
|
|
|
--text-normal: #e8e8e8; /* Slightly brighter default text */
|
|
--text-muted: #a8a8a8; /* Softer muted text */
|
|
--text-faint: #777777;
|
|
|
|
/* --- Trans Flag Accent Colors --- */
|
|
--text-accent: #F5A9B8; /* Pink for accents */
|
|
--text-accent-hover: #5BCEFA; /* Light blue for hover */
|
|
--interactive-accent: #F5A9B8; /* Pink for interactive elements */
|
|
--interactive-accent-hsl: 348, 83%, 85%; /* HSL for Pink */
|
|
--interactive-accent-hover: #5BCEFA; /* Light blue for hover */
|
|
--text-selection: rgba(245, 169, 184, 0.4); /* Pink selection */
|
|
--text-highlight-bg: rgba(91, 206, 250, 0.2); /* Blue highlight */
|
|
--caret-color: #F5A9B8; /* Pink caret */
|
|
|
|
/* Text on accent colors (adjust if needed based on accent brightness) */
|
|
--text-on-accent: #1f1f24; /* Dark text on pink/blue buttons */
|
|
--text-on-accent-inverted: #1f1f24;
|
|
|
|
/* --- Base Body --- */
|
|
/* body styling is often inherited or handled by base theme,
|
|
but we ensure our primary background is set */
|
|
.workspace {
|
|
background-color: var(--background-primary);
|
|
}
|
|
|
|
/* --- Headings --- */
|
|
h1 {
|
|
color: #5BCEFA; /* Light blue */
|
|
border-bottom: 2px solid rgba(91, 206, 250, 0.5); /* Softer blue border */
|
|
}
|
|
|
|
h2 {
|
|
color: #F5A9B8; /* Pink */
|
|
border-bottom: 1px solid rgba(245, 169, 184, 0.5); /* Softer pink border */
|
|
}
|
|
|
|
h3, h4, h5, h6 {
|
|
color: #FFFFFF; /* White for contrast */
|
|
border-bottom: none; /* Remove borders for minor headings */
|
|
}
|
|
|
|
/* --- Links --- */
|
|
a.internal-link,
|
|
a.external-link,
|
|
.cm-link, .cm-hmd-internal-link { /* Apply to editor links too */
|
|
color: var(--text-accent); /* Use variable */
|
|
text-decoration: none;
|
|
}
|
|
|
|
a.internal-link:hover,
|
|
a.external-link:hover,
|
|
.cm-link:hover, .cm-hmd-internal-link:hover {
|
|
color: var(--text-accent-hover); /* Use variable */
|
|
text-decoration: none; /* Keep no underline or add subtle one */
|
|
/* text-decoration: underline; */
|
|
}
|
|
|
|
/* --- Horizontal Rule --- */
|
|
hr {
|
|
height: 2px; /* Thinner */
|
|
background: linear-gradient(to right, rgba(91, 206, 250, 0.7) 0%, rgba(245, 169, 184, 0.7) 50%, rgba(255, 255, 255, 0.7) 100%);
|
|
border: none;
|
|
margin-top: 1.5em;
|
|
margin-bottom: 1.5em;
|
|
}
|
|
|
|
/* --- UI Elements --- */
|
|
|
|
/* Sidebars */
|
|
.mod-left-split, .mod-right-split {
|
|
background-color: var(--background-secondary); /* Use variable */
|
|
border-color: var(--background-modifier-border); /* Use variable */
|
|
border-width: 1px; /* Ensure consistent border width */
|
|
border-right-width: 1px;
|
|
border-left-width: 1px;
|
|
}
|
|
.mod-right-split {
|
|
border-left-width: 1px;
|
|
border-right-width: 0;
|
|
}
|
|
.mod-left-split {
|
|
border-right-width: 1px;
|
|
border-left-width: 0;
|
|
}
|
|
|
|
|
|
/* Header */
|
|
.view-header {
|
|
background-color: var(--background-primary-alt); /* Use variable */
|
|
border-bottom: 1px solid var(--background-modifier-border); /* Softer border */
|
|
box-shadow: none; /* Remove default shadow if any */
|
|
}
|
|
.view-header-title {
|
|
color: var(--text-normal); /* Use variable */
|
|
}
|
|
|
|
/* Buttons */
|
|
button, .mod-cta {
|
|
background-color: var(--interactive-accent); /* Use variable */
|
|
color: var(--text-on-accent); /* Use variable */
|
|
border: none;
|
|
font-weight: 500; /* Slightly bolder */
|
|
}
|
|
button:hover, .mod-cta:hover {
|
|
background-color: var(--interactive-accent-hover); /* Use variable */
|
|
color: var(--text-on-accent); /* Use variable */
|
|
}
|
|
|
|
/* Active file / selection */
|
|
.nav-file-title.is-active,
|
|
.nav-folder-title.is-active {
|
|
background-color: var(--background-modifier-hover); /* Use variable */
|
|
color: var(--text-accent-hover); /* Use blue for active text */
|
|
font-weight: bold;
|
|
}
|
|
.cm-selection, ::selection {
|
|
background-color: var(--text-selection) !important; /* Use variable */
|
|
}
|
|
|
|
/* Code blocks */
|
|
pre[class*="language-"], .markdown-rendered code {
|
|
background-color: var(--background-secondary-alt); /* Use variable */
|
|
border: 1px solid var(--background-modifier-border); /* Use variable */
|
|
border-radius: 4px;
|
|
}
|
|
/* Inline code */
|
|
code:not(pre > code) {
|
|
color: #F5A9B8; /* Pink code text */
|
|
background-color: rgba(245, 169, 184, 0.1); /* Subtle pink background */
|
|
padding: 0.2em 0.4em;
|
|
border-radius: 3px;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
/* --- Specific Classes from Original (using variables) --- */
|
|
|
|
/* Right-aligned pinup styling */
|
|
.pinup-container {
|
|
float: right;
|
|
margin-left: 20px;
|
|
margin-bottom: 20px;
|
|
max-width: 300px;
|
|
border: 2px solid var(--interactive-accent); /* Pink border */
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
background-color: var(--background-secondary); /* Add subtle background */
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); /* Softer shadow */
|
|
}
|
|
|
|
.pinup-container img {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Task list with trans colors */
|
|
.tasks-plugin-task-list {
|
|
border-left: 3px solid var(--text-accent-hover); /* Light blue */
|
|
padding-left: 10px;
|
|
background-color: rgba(91, 206, 250, 0.05); /* Very subtle blue background */
|
|
border-radius: 4px;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
.task-list-item input[type=checkbox]:checked {
|
|
border-color: var(--interactive-accent); /* Pink check */
|
|
background-color: var(--interactive-accent);
|
|
}
|
|
.task-list-item input[type=checkbox] {
|
|
border-color: var(--text-accent-hover); /* Blue border */
|
|
}
|
|
.task-list-item.is-checked .task-list-item-label {
|
|
text-decoration-color: var(--text-muted); /* Muted strikethrough */
|
|
}
|
|
|
|
|
|
/* Quick links section */
|
|
.quick-links {
|
|
background-color: rgba(245, 169, 184, 0.1); /* Subtle pink */
|
|
border-radius: 8px;
|
|
padding: 10px 15px;
|
|
border: 1px solid rgba(245, 169, 184, 0.3); /* Softer pink border */
|
|
border-left: 4px solid var(--interactive-accent); /* Pink accent */
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
/* Quick capture section */
|
|
.quick-capture {
|
|
background-color: rgba(91, 206, 250, 0.08); /* Subtle blue */
|
|
border-radius: 8px;
|
|
padding: 10px 15px;
|
|
border: 1px solid rgba(91, 206, 250, 0.3); /* Softer blue border */
|
|
border-left: 4px solid var(--interactive-accent-hover); /* Light blue accent */
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
/* MOC section */
|
|
.moc {
|
|
background-color: rgba(255, 255, 255, 0.05); /* Subtle white/grey */
|
|
border-radius: 8px;
|
|
padding: 10px 15px;
|
|
border: 1px solid rgba(255, 255, 255, 0.15); /* Softer white border */
|
|
border-left: 4px solid rgba(255, 255, 255, 0.7); /* White accent */
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
/* --- Settings Modal --- */
|
|
.modal.mod-settings {
|
|
--background-secondary: #26262e; /* Slightly different dark for modal */
|
|
--background-modifier-border: rgba(245, 169, 184, 0.5); /* Pink borders in settings */
|
|
}
|
|
.modal.mod-settings .vertical-tab-header-group-title {
|
|
color: var(--text-accent-hover); /* Blue titles */
|
|
font-weight: bold;
|
|
}
|
|
.modal.mod-settings .vertical-tab-nav-item.is-active {
|
|
color: var(--text-accent); /* Pink active setting */
|
|
border-left-color: var(--interactive-accent);
|
|
background-color: rgba(245, 169, 184, 0.1); /* Subtle pink background */
|
|
}
|
|
.modal.mod-settings .vertical-tab-nav-item:not(.is-active):hover {
|
|
background-color: var(--background-modifier-hover); /* Use standard hover */
|
|
color: var(--text-accent-hover);
|
|
}
|
|
|
|
|
|
} /* End of .theme-dark */
|