mirror of
https://github.com/chrisgrieser/shimmering-focus.git
synced 2026-07-22 03:10:24 +00:00
334 lines
9.8 KiB
CSS
334 lines
9.8 KiB
CSS
/* ───────────────────────────────────────────────── */
|
|
/** Settings Menu
|
|
──────────────────────────────────────────────────── */
|
|
|
|
body:not(.show-close-buttons, .is-mobile) .modal-close-button {
|
|
display: none;
|
|
}
|
|
|
|
.modal.mod-settings .vertical-tab-content-container {
|
|
padding: 0;
|
|
margin-top: 0;
|
|
border-left: var(--basic-border);
|
|
}
|
|
|
|
/* setting tab selection */
|
|
.vertical-tab-header-group,
|
|
.vertical-tab-header {
|
|
padding: 0;
|
|
}
|
|
|
|
.vertical-tab-header-group-title {
|
|
display: none;
|
|
}
|
|
|
|
.vertical-tab-header-group:not(:first-child, :empty) {
|
|
border-top: var(--basic-border);
|
|
}
|
|
|
|
.modal.mod-settings.mod-settings {
|
|
.vertical-tab-header-group-container {
|
|
padding: 0;
|
|
}
|
|
|
|
.setting-search-container {
|
|
padding: 0.5rem 4px;
|
|
}
|
|
}
|
|
|
|
.modal.mod-settings {
|
|
button:not(.mod-cta) {
|
|
border: var(--thin-muted-border);
|
|
background-color: var(--bg3);
|
|
&:hover {
|
|
background-color: var(--bg5);
|
|
border-color: var(--hover-accent);
|
|
}
|
|
}
|
|
.dropdown:not(:hover) {
|
|
border: var(--thin-muted-border);
|
|
background-color: var(--bg5);
|
|
}
|
|
}
|
|
|
|
/* ───────────────────────────────────────────────── */
|
|
/** Individual Setting Pages
|
|
──────────────────────────────────────────────────── */
|
|
.installed-plugins-container .setting-item-description div:nth-child(2)::first-letter {
|
|
text-transform: lowercase;
|
|
}
|
|
|
|
.installed-plugins-container .setting-item-description div:nth-child(2) {
|
|
font-style: italic;
|
|
}
|
|
|
|
.installed-plugins-container .setting-item-description > div:first-child {
|
|
margin-top: -0.1em;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.installed-plugins-container .setting-item-description > div:nth-child(2) {
|
|
margin-top: -17.5px;
|
|
margin-left: 100px;
|
|
}
|
|
|
|
.plugin-list-plugins > .setting-item:first-child {
|
|
padding-bottom: 32px;
|
|
}
|
|
|
|
.setting-filter-container .hotkey-filter {
|
|
background-color: var(--bg1);
|
|
border: var(--thin-muted-border);
|
|
}
|
|
|
|
/* ───────────────────────────────────────────────── */
|
|
/** Settings Menu Colors
|
|
──────────────────────────────────────────────────── */
|
|
|
|
body .vertical-tab-content {
|
|
background-color: var(--bg3);
|
|
}
|
|
|
|
.theme-light :is(.vertical-tab-header, .vertical-tab-nav-item) {
|
|
background-color: var(--bg2);
|
|
}
|
|
|
|
.theme-dark :is(.vertical-tab-header, .vertical-tab-nav-item) {
|
|
background-color: var(--bg1);
|
|
}
|
|
|
|
.theme-dark .modal-bg {
|
|
background-color: hsl(var(--bg-hue-dark) 10% 5%);
|
|
}
|
|
|
|
.theme-light .modal-bg {
|
|
background-color: hsl(var(--bg-hue-light) 5% 25%);
|
|
}
|
|
|
|
.vertical-tab-nav-item.is-active {
|
|
font-weight: 600;
|
|
color: var(--text-accent);
|
|
background-color: var(--nav-item-background-active);
|
|
}
|
|
|
|
.vertical-tab-nav-item.is-active:hover,
|
|
.vertical-tab-nav-item:hover {
|
|
color: var(--text-accent-hover);
|
|
background-color: var(--nav-item-background-hover);
|
|
}
|
|
|
|
/* ───────────────────────────────────────────────── */
|
|
/** Plugin Update Progress Bar
|
|
──────────────────────────────────────────────────── */
|
|
|
|
.modal .is-loading::before {
|
|
height: 8px;
|
|
background: linear-gradient(
|
|
45deg,
|
|
var(--color-accent) 0% 20%,
|
|
var(--hover-accent) 40% 60%,
|
|
var(--secondary-accent) 80% 100%
|
|
);
|
|
}
|
|
|
|
/* ───────────────────────────────────────────────── */
|
|
/** Settings Headings
|
|
──────────────────────────────────────────────────── */
|
|
|
|
.setting-item-heading:not(.style-settings-heading) .setting-item-name {
|
|
padding: 2px 6px 0;
|
|
font-family: var(--font-heading-theme);
|
|
font-size: 1.3em;
|
|
font-weight: 600;
|
|
letter-spacing: var(--heading-letter-spacing);
|
|
background-color: var(--bg6);
|
|
border-radius: var(--radius-s) var(--radius-s) 0 0;
|
|
}
|
|
|
|
.setting-item-heading:not(:first-child, .style-settings-heading) .setting-item-name {
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.setting-item.setting-item-heading {
|
|
margin-bottom: 0;
|
|
border-bottom: var(--basic-border);
|
|
}
|
|
|
|
.modal.mod-settings :is(h1, h2) {
|
|
font-family: var(--font-heading-theme);
|
|
font-size: var(--h1-size);
|
|
font-style: normal;
|
|
letter-spacing: var(--heading-letter-spacing);
|
|
}
|
|
|
|
.modal.mod-settings :is(h1, h2):first-child {
|
|
margin-top: 4px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.modal.mod-settings :is(h3, h4, h5, h6, h1:not(:first-child), h2:not(:first-child)) {
|
|
margin-top: 12px;
|
|
margin-bottom: 4px;
|
|
letter-spacing: calc(var(--heading-letter-spacing) * 0.5);
|
|
}
|
|
|
|
.setting-item-description.setting-item-description.setting-item-description {
|
|
line-height: 1.3;
|
|
color: var(--text-gray);
|
|
}
|
|
|
|
/* ───────────────────────────────────────────────── */
|
|
/** Remove Color Picker from Settings
|
|
──────────────────────────────────────────────────── */
|
|
|
|
.mod-settings .vertical-tab-content
|
|
> .setting-item:nth-child(2)
|
|
> .setting-item-control
|
|
> .extra-setting-button
|
|
+ input[type="color"] {
|
|
width: 350px;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.mod-settings
|
|
.vertical-tab-content
|
|
> .setting-item:nth-child(2)
|
|
> .setting-item-control
|
|
> .extra-setting-button
|
|
> .lucide-rotate-ccw {
|
|
display: none;
|
|
}
|
|
|
|
/* hide accent color setting & indicate that the theme overrides it */
|
|
.mod-settings .vertical-tab-content
|
|
> .setting-group:first-child
|
|
> .setting-items
|
|
> .setting-item:nth-child(2).mod-toggle
|
|
> .setting-item-control:has(> .extra-setting-button + input[type="color"]) {
|
|
visibility: hidden;
|
|
&::before {
|
|
content: "The accent color is overridden by the theme.\AUse the Style Settings Plugin to customize theme colors.";
|
|
white-space: pre;
|
|
font-family: var(--font-interface);
|
|
font-size: var(--font-ui-smaller);
|
|
color: var(--text-gray);
|
|
visibility: visible;
|
|
}
|
|
> .extra-setting-button,
|
|
> .extra-setting-button + input[type="color"] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* ───────────────────────────────────────────────── */
|
|
/** Theme Browser
|
|
──────────────────────────────────────────────────── */
|
|
/* is this typo still not fixed? */
|
|
.mod-community-theme .community-item-author::first-letter {
|
|
text-transform: lowercase;
|
|
}
|
|
|
|
.mod-community-theme .community-item-author {
|
|
font-style: italic;
|
|
}
|
|
|
|
.mod-community-theme .community-item-name .flair {
|
|
margin-left: 12px;
|
|
background-color: var(--bg3);
|
|
border: var(--thin-border);
|
|
}
|
|
|
|
.mod-community-theme .community-item-name .flair.mod-pop {
|
|
color: var(--text-accent);
|
|
}
|
|
|
|
.mod-community-theme .community-item.mod-active {
|
|
border-color: var(--color-accent);
|
|
}
|
|
|
|
.mod-community-theme .community-item:is(:hover, .mod-active:hover) {
|
|
border-color: var(--hover-accent);
|
|
}
|
|
|
|
/* ───────────────────────────────────────────────── */
|
|
/** Plugin / Theme Browser
|
|
──────────────────────────────────────────────────── */
|
|
|
|
/* redundant, since plugin name is already displayed above */
|
|
.community-modal-readme h1:first-child {
|
|
display: none;
|
|
}
|
|
|
|
.community-modal-info a.internal-link {
|
|
text-decoration: dotted underline;
|
|
}
|
|
|
|
.community-item .flair.mod-pop {
|
|
position: relative;
|
|
top: -2px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.community-item.is-selected .flair {
|
|
padding: 1px 3px;
|
|
border: var(--thin-border);
|
|
}
|
|
|
|
/* remove empty header unnecessarily taking up space */
|
|
:is(.mod-community-theme, .mod-community-plugin) .modal-setting-nav-bar {
|
|
height: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
:is(.mod-community-theme, .mod-community-plugin) .modal-setting-nav-bar .clickable-icon {
|
|
position: sticky;
|
|
height: 30px;
|
|
}
|
|
|
|
:is(.mod-community-theme, .mod-community-plugin) .community-modal-info {
|
|
padding: 16px 24px 24px 40px;
|
|
}
|
|
|
|
/* ───────────────────────────────────────────────── */
|
|
/** Toggles
|
|
──────────────────────────────────────────────────── */
|
|
/* prettier wall-o-toggles */
|
|
|
|
.checkbox-container::after {
|
|
display: none;
|
|
}
|
|
|
|
.checkbox-container.checkbox-container.checkbox-container.checkbox-container.checkbox-container {
|
|
width: 22px;
|
|
height: 22px;
|
|
margin-left: 4px;
|
|
cursor: var(--cursor-link);
|
|
background-color: var(--bg2);
|
|
border: var(--basic-border);
|
|
transition-duration: var(--anim-duration-moderate);
|
|
|
|
&.mod-small {
|
|
width: var(--icon-l);
|
|
height: var(--icon-l);
|
|
}
|
|
|
|
&.is-enabled {
|
|
background-color: var(--color-accent);
|
|
border-color: transparent;
|
|
}
|
|
|
|
&:hover {
|
|
border: 7px solid var(--hover-accent);
|
|
}
|
|
}
|
|
|
|
/* ───────────────────────────────────────────────── */
|
|
/** Hotkeys
|
|
──────────────────────────────────────────────────── */
|
|
|
|
kbd.suggestion-hotkey,
|
|
.setting-hotkey {
|
|
color: var(--hotkey-color);
|
|
background-color: var(--bg4);
|
|
border: var(--thin-border);
|
|
}
|