chrisgrieser_shimmering-focus/source/6-plugins/style_settings_plugin.css
2025-06-17 21:33:49 +02:00

252 lines
6.9 KiB
CSS

.style-settings-export {
margin-right: 0;
}
/* the "download settings" button is not needed for *every single* section */
.style-settings-container .setting-item-heading:not([data-level="0"])
.extra-setting-button:last-child {
display: none;
}
.style-settings-heading.style-settings-heading.style-settings-heading {
padding: 0;
margin-top: 10px;
border-bottom: var(--muted-border);
}
.style-settings-heading .setting-item-name {
margin-top: 8px;
margin-bottom: 3px;
font-family: var(--font-interface);
font-size: 1rem;
line-height: 1em;
letter-spacing: 0;
}
.style-settings-heading .setting-item-name:hover {
color: var(--text-accent-hover);
}
.style-settings-heading:not(.is-collapsed) .setting-item-name {
font-weight: 600;
}
.style-settings-heading.is-collapsed .setting-item-name {
font-weight: 500;
}
.style-settings-heading :is(.setting-item-title, .setting-item-description) {
margin-left: 1px;
}
body .style-settings-heading[data-level="0"] {
margin-bottom: 16px;
}
body
.style-settings-heading[data-level="0"]
.setting-item-name.setting-item-name.setting-item-name.setting-item-name {
font-family: var(--font-heading-theme);
font-size: var(--h2-size);
letter-spacing: var(--heading-letter-spacing);
}
/* settings tab / general */
.style-settings-heading[data-level="2"] + .style-settings-container,
.style-settings-heading[data-level="2"][data-level="2"] {
margin-left: 20px;
}
.style-settings-heading
+ .style-settings-container
.style-settings-heading[data-level="2"]
.setting-item-name {
font-size: 1rem;
letter-spacing: 0;
}
.style-settings-container .setting-editor-extra-setting-button {
margin-left: 10px;
}
.style-settings-heading[data-level="0"]
.setting-item-name.setting-item-name.setting-item-name.setting-item-name {
margin-bottom: 4px;
font-size: 1.1em;
}
.style-settings-container .setting-item-description {
margin-bottom: 4px;
font-family: var(--font-interface);
font-size: 0.8rem;
font-weight: 500;
line-height: 1.3em;
}
.style-settings-container
.setting-item:not(.setting-item-heading)
.setting-item-name
+ .setting-item-description {
margin-top: 4px;
margin-bottom: 0;
}
.style-settings-heading:not(.is-collapsed) .setting-item-description {
display: none;
}
.setting-item-description strong {
color: var(--text-muted);
}
/* fold indicators */
.style-settings-collapse-indicator > .svg-icon {
width: 0.6em;
height: 0.6em;
stroke-width: 4px;
&:hover {
stroke: var(--icon-color-hover);
}
}
/* ───────────────────────────────────────────────── */
/** Style Settings: As Tab
──────────────────────────────────────────────────── */
.workspace-leaf-content[data-type="style-settings"] .view-content .setting-item:first-child {
/* avoid collision with three dots button */
padding-top: 12px;
}
.workspace-leaf-content[data-type="style-settings"] .view-content {
padding: 30px;
}
/* FIX for https://github.com/mgmeyers/obsidian-style-settings/issues/104 */
body .view-content .style-settings-container .setting-item:not(.setting-item-heading) {
flex-direction: row;
}
/* ───────────────────────────────────────────────── */
/** Style Settings: Infoboxes
──────────────────────────────────────────────────── */
.setting-item[data-id="appendix-info"] {
display: none;
}
body .setting-item.setting-item.setting-item.setting-item[data-id="author-info"] {
margin-top: 40px;
}
.style-settings-info-text.setting-item.setting-item.setting-item.setting-item {
padding: 8px;
margin-top: 12px;
margin-bottom: 12px;
background-color: var(--bg1);
border: var(--basic-border);
border-radius: var(--radius-s);
}
.style-settings-info-text ul {
padding-left: 16px;
}
.style-settings-info-text li {
margin-bottom: 2px;
}
.style-settings-info-text
.setting-item-description.setting-item-description.setting-item-description.setting-item-description {
padding-top: 0;
margin-top: 0;
}
.setting-item-description code {
position: relative;
bottom: 0;
padding-bottom: 0;
font-size: 0.8rem;
color: var(--inline-code-color);
}
.style-settings-info-text .setting-item-name:not(:empty) {
margin-bottom: 8px;
}
.workspace-leaf-content[data-type="style-settings"]
.style-settings-info-text.setting-item.setting-item {
background-color: var(--bg4);
}
/* ───────────────────────────────────────────────── */
/** Style Settings: Hue Sliders & Color Demo Boxes
──────────────────────────────────────────────────── */
/* use hue slider */
.style-settings-container {
--demo-box-size: var(--icon-l);
--hue-slider-sat: 70%;
--hue-slider-br: 60%;
--hue-scale: linear-gradient(
to right,
hsl(0 var(--hue-slider-sat) var(--hue-slider-br)),
hsl(30 var(--hue-slider-sat) var(--hue-slider-br)),
hsl(60 var(--hue-slider-sat) var(--hue-slider-br)),
hsl(90 var(--hue-slider-sat) var(--hue-slider-br)),
hsl(120 var(--hue-slider-sat) var(--hue-slider-br)),
hsl(150 var(--hue-slider-sat) var(--hue-slider-br)),
hsl(180 var(--hue-slider-sat) var(--hue-slider-br)),
hsl(210 var(--hue-slider-sat) var(--hue-slider-br)),
hsl(240 var(--hue-slider-sat) var(--hue-slider-br)),
hsl(270 var(--hue-slider-sat) var(--hue-slider-br)),
hsl(300 var(--hue-slider-sat) var(--hue-slider-br)),
hsl(330 var(--hue-slider-sat) var(--hue-slider-br)),
hsl(360 var(--hue-slider-sat) var(--hue-slider-br))
);
}
.style-settings-container
.setting-item:is([data-id="highlight-hue-1"], [data-id^="bg-hue"])
input.slider {
height: 0.8em;
background: var(--hue-scale);
border-radius: var(--radius-xs);
}
.style-settings-container
.setting-item:is([data-id="highlight-hue-1"], [data-id^="bg-hue"])
input.slider::after,
.style-settings-container
.setting-item:is([data-id="highlight-hue-1"], [data-id^="bg-hue"])
input.slider::before {
display: none;
}
.style-settings-container
.setting-item:is([data-id="highlight-hue-1"], [data-id^="bg-hue"])
input.slider::-webkit-slider-thumb {
position: relative;
top: -0.7em;
width: 0.4em;
height: 1.9em;
background-color: var(--text-muted);
border-radius: var(--radius-xs);
}
/* DEMO COLOR BOX */
.style-settings-container .setting-item[data-id="highlight-hue-1"] .setting-item-control::before {
content: " ";
position: relative;
left: -3em;
width: 1.6em;
height: 1.6em;
font-size: 0.7em;
color: var(--text-normal);
text-align: center;
white-space: pre-wrap;
border: var(--thin-border);
border-radius: var(--radius-s);
background-color: hsl(var(--highlight-hue-1) var(--highlight-sla-values));
}