mirror of
https://github.com/fluxerapp/fluxer
synced 2026-10-18 05:25:40 +09:00
293 lines
6.2 KiB
CSS
293 lines
6.2 KiB
CSS
/* SPDX-License-Identifier: AGPL-3.0-or-later */
|
|
|
|
.header {
|
|
display: flex;
|
|
height: 3.5rem;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
background-color: var(--settings-surface-background, var(--background-primary));
|
|
border-bottom: 0.0625rem solid var(--settings-border-color, var(--background-modifier-accent));
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
}
|
|
|
|
.headerContent {
|
|
display: flex;
|
|
width: 100%;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.backButton {
|
|
display: flex;
|
|
height: 2rem;
|
|
width: 2rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 0.0625rem solid transparent;
|
|
border-radius: 0.5rem;
|
|
color: var(--text-tertiary);
|
|
transition:
|
|
transform 0.12s ease,
|
|
background-color 0.12s ease,
|
|
border-color 0.12s ease,
|
|
color 0.12s ease;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.backButton:active {
|
|
transform: translateY(0.0625rem);
|
|
background-color: var(--settings-hover-background, var(--surface-interactive-hover-bg));
|
|
border-color: var(
|
|
--settings-hover-border-color,
|
|
color-mix(in srgb, var(--background-modifier-accent) 72%, var(--text-tertiary))
|
|
);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.backButtonIcon {
|
|
height: 1.25rem;
|
|
width: 1.25rem;
|
|
}
|
|
|
|
.headerTitle {
|
|
flex: 1;
|
|
min-width: 0;
|
|
margin: 0;
|
|
font-weight: 600;
|
|
font-size: 1rem;
|
|
line-height: 1.5rem;
|
|
color: var(--text-primary);
|
|
text-align: center;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.headerSpacer {
|
|
width: 2rem;
|
|
}
|
|
|
|
.settingsList {
|
|
min-height: 0;
|
|
flex: 1 1 0%;
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
padding-top: 1rem;
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
.categoryContainer {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.categoryContainer:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.categoryHeader {
|
|
margin-bottom: 0.375rem;
|
|
padding-left: 0.625rem;
|
|
padding-right: 0.625rem;
|
|
font-weight: 600;
|
|
color: var(--text-tertiary);
|
|
font-size: 0.6875rem;
|
|
line-height: 1rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.categoryTabs {
|
|
overflow: hidden;
|
|
border: 0.0625rem solid var(--settings-border-color, var(--background-modifier-accent));
|
|
border-radius: 0.5rem;
|
|
background-color: var(--settings-surface-background, var(--form-surface-background));
|
|
}
|
|
|
|
.dangerButton {
|
|
display: flex;
|
|
min-height: 2.75rem;
|
|
width: 100%;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
background-color: transparent;
|
|
padding: 0.625rem 0.75rem;
|
|
transition: none;
|
|
cursor: pointer;
|
|
-webkit-tap-highlight-color: transparent;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
@media (hover: hover) and (pointer: fine) {
|
|
.dangerButton:hover {
|
|
background-color: var(
|
|
--settings-danger-background,
|
|
color-mix(in srgb, var(--status-danger) 6%, var(--surface-interactive-hover-bg))
|
|
);
|
|
}
|
|
|
|
.dangerButton:active {
|
|
background-color: var(
|
|
--settings-danger-background,
|
|
color-mix(in srgb, var(--status-danger) 6%, var(--surface-interactive-hover-bg))
|
|
);
|
|
}
|
|
}
|
|
|
|
.dangerButtonPressed {
|
|
background-color: var(
|
|
--settings-danger-background,
|
|
color-mix(in srgb, var(--status-danger) 6%, var(--surface-interactive-hover-bg))
|
|
);
|
|
}
|
|
|
|
.dangerIcon {
|
|
height: 1rem;
|
|
width: 1rem;
|
|
color: var(--settings-danger-text, color-mix(in srgb, var(--status-danger) 78%, var(--text-primary) 22%));
|
|
}
|
|
|
|
.dangerContent {
|
|
flex: 1;
|
|
text-align: left;
|
|
}
|
|
|
|
.dangerLabel {
|
|
font-weight: 500;
|
|
font-size: 0.8125rem;
|
|
line-height: 1.125rem;
|
|
color: var(--settings-danger-text, color-mix(in srgb, var(--status-danger) 78%, var(--text-primary) 22%));
|
|
}
|
|
|
|
.tabButton {
|
|
display: flex;
|
|
min-height: 2.75rem;
|
|
width: 100%;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
background-color: transparent;
|
|
padding: 0.625rem 0.75rem;
|
|
transition: none;
|
|
cursor: pointer;
|
|
-webkit-tap-highlight-color: transparent;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
@media (hover: hover) and (pointer: fine) {
|
|
.tabButton:hover {
|
|
background-color: var(--settings-hover-background, var(--surface-interactive-hover-bg));
|
|
}
|
|
|
|
.tabButton:active {
|
|
background-color: var(--settings-hover-background, var(--surface-interactive-hover-bg));
|
|
}
|
|
}
|
|
|
|
.tabButtonPressed {
|
|
background-color: var(--settings-hover-background, var(--surface-interactive-hover-bg));
|
|
}
|
|
|
|
:global(.theme-light) .tabButton {
|
|
background-color: transparent;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
:global(.theme-light) .tabButton:hover,
|
|
:global(.theme-light) .tabButton:active,
|
|
:global(.theme-light) .tabButtonPressed {
|
|
background-color: var(--settings-hover-background, var(--surface-interactive-hover-bg));
|
|
}
|
|
|
|
.tabIcon {
|
|
height: 1rem;
|
|
width: 1rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.tabContent {
|
|
flex: 1 1 0%;
|
|
text-align: left;
|
|
}
|
|
|
|
.tabLabel {
|
|
font-weight: 500;
|
|
color: var(--text-secondary);
|
|
font-size: 0.8125rem;
|
|
line-height: 1.125rem;
|
|
}
|
|
|
|
.tabArrow {
|
|
height: 1rem;
|
|
width: 1rem;
|
|
transform: rotate(180deg);
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.tabDivider {
|
|
margin-left: 0.75rem;
|
|
margin-right: 0.75rem;
|
|
height: 0.0625rem;
|
|
background-color: var(--settings-border-color, var(--background-modifier-accent));
|
|
}
|
|
|
|
.additionalContent {
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.footer {
|
|
margin-top: 1rem;
|
|
padding-bottom: 1.25rem;
|
|
}
|
|
|
|
.sectionNavContainer {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 5;
|
|
background: var(--background-secondary);
|
|
border-bottom: 0.0625rem solid var(--settings-border-color, var(--background-modifier-accent));
|
|
}
|
|
|
|
.sectionNavScroller {
|
|
padding: 0.5rem 1rem;
|
|
}
|
|
|
|
.sectionNavContent {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.sectionNavItem {
|
|
flex-shrink: 0;
|
|
padding: 0.375rem 0.75rem;
|
|
border-radius: 0.5rem;
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
color: var(--text-secondary);
|
|
background: var(--settings-surface-background, var(--form-surface-background));
|
|
border: 0.0625rem solid var(--settings-border-color, var(--background-modifier-accent));
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
transition: none;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
.sectionNavItemActive {
|
|
color: var(--settings-selected-color, var(--text-primary));
|
|
background: var(--settings-selected-background, var(--surface-interactive-selected-bg));
|
|
border-color: var(
|
|
--settings-selected-border-color,
|
|
color-mix(in srgb, var(--background-modifier-accent) 72%, var(--text-tertiary))
|
|
);
|
|
}
|
|
|
|
@media (hover: hover) and (pointer: fine) {
|
|
.sectionNavItem:hover:not(.sectionNavItemActive) {
|
|
background: var(--settings-hover-background, var(--surface-interactive-hover-bg));
|
|
border-color: var(
|
|
--settings-hover-border-color,
|
|
color-mix(in srgb, var(--background-modifier-accent) 72%, var(--text-tertiary))
|
|
);
|
|
color: var(--text-primary);
|
|
}
|
|
}
|