mirror of
https://github.com/4gray/iptvnator.git
synced 2026-10-12 12:06:16 -08:00
style: add settings theme styles and refactor settings component styles
Entire-Checkpoint: c6e522b4276c
This commit is contained in:
4gray committed
1 parent
ecb070d08e
commit
40d2611ef3
3 files changed
+325
-317
No files matched your search
@@ -0,0 +1,324 @@
|
||||
.settings-container {
|
||||
--settings-safe-bottom: env(safe-area-inset-bottom, 0px);
|
||||
--settings-action-bar-offset: 24px;
|
||||
--settings-action-bar-space: 112px;
|
||||
--settings-page-header-bg: color-mix(
|
||||
in srgb,
|
||||
var(--mat-sys-surface-container-low) 94%,
|
||||
rgba(255, 255, 255, 0.98)
|
||||
);
|
||||
--settings-page-header-border: color-mix(
|
||||
in srgb,
|
||||
var(--mat-sys-outline-variant) 72%,
|
||||
transparent
|
||||
);
|
||||
--settings-page-header-shadow:
|
||||
0 10px 20px -28px rgba(15, 23, 42, 0.16),
|
||||
0 1px 0 rgba(255, 255, 255, 0.68) inset;
|
||||
--settings-group-bg: color-mix(
|
||||
in srgb,
|
||||
var(--mat-sys-surface) 96%,
|
||||
rgba(255, 255, 255, 0.96)
|
||||
);
|
||||
--settings-group-border: color-mix(
|
||||
in srgb,
|
||||
var(--mat-sys-outline-variant) 78%,
|
||||
transparent
|
||||
);
|
||||
--settings-group-shadow: 0 14px 28px -32px rgba(15, 23, 42, 0.14);
|
||||
--settings-group-active-bg: color-mix(
|
||||
in srgb,
|
||||
var(--app-selection-color) 2%,
|
||||
rgba(255, 255, 255, 0.98)
|
||||
);
|
||||
--settings-group-active-ring: color-mix(
|
||||
in srgb,
|
||||
var(--app-selection-border) 68%,
|
||||
var(--settings-group-border)
|
||||
);
|
||||
--settings-group-active-glow: color-mix(
|
||||
in srgb,
|
||||
var(--app-selection-glow) 28%,
|
||||
transparent
|
||||
);
|
||||
--settings-group-active-shadow:
|
||||
inset 0 0 0 1px var(--settings-group-active-ring),
|
||||
0 12px 24px -28px var(--settings-group-active-glow);
|
||||
--settings-item-border: var(--app-separator);
|
||||
--settings-item-danger-bg: color-mix(
|
||||
in srgb,
|
||||
var(--mat-sys-error) 4%,
|
||||
rgba(255, 255, 255, 0.96)
|
||||
);
|
||||
--settings-item-danger-border: color-mix(
|
||||
in srgb,
|
||||
var(--mat-sys-error) 14%,
|
||||
transparent
|
||||
);
|
||||
--settings-action-bar-bg: color-mix(
|
||||
in srgb,
|
||||
var(--mat-sys-surface-container-low) 94%,
|
||||
rgba(255, 255, 255, 0.9)
|
||||
);
|
||||
--settings-action-bar-border: color-mix(
|
||||
in srgb,
|
||||
var(--mat-sys-outline-variant) 62%,
|
||||
transparent
|
||||
);
|
||||
--settings-action-bar-shadow: 0 10px 26px -26px rgba(15, 23, 42, 0.22);
|
||||
--settings-muted: color-mix(
|
||||
in srgb,
|
||||
var(--mat-sys-on-surface) 64%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
:where(.dark-theme, [data-theme='dark'], .mat-app-background.dark)
|
||||
.settings-container {
|
||||
--settings-page-header-bg: color-mix(
|
||||
in srgb,
|
||||
var(--mat-sys-surface-container) 92%,
|
||||
rgba(12, 16, 24, 0.94)
|
||||
);
|
||||
--settings-page-header-border: color-mix(
|
||||
in srgb,
|
||||
var(--mat-sys-outline-variant) 38%,
|
||||
transparent
|
||||
);
|
||||
--settings-page-header-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.05),
|
||||
0 16px 26px -34px rgba(0, 0, 0, 0.4);
|
||||
--settings-group-bg: color-mix(
|
||||
in srgb,
|
||||
var(--mat-sys-surface-container) 94%,
|
||||
rgba(10, 14, 22, 0.82)
|
||||
);
|
||||
--settings-group-border: rgba(255, 255, 255, 0.08);
|
||||
--settings-group-shadow: 0 16px 28px -32px rgba(0, 0, 0, 0.42);
|
||||
--settings-group-active-bg: color-mix(
|
||||
in srgb,
|
||||
var(--app-selection-surface) 24%,
|
||||
rgba(255, 255, 255, 0.015)
|
||||
);
|
||||
--settings-group-active-ring: color-mix(
|
||||
in srgb,
|
||||
var(--app-selection-border) 54%,
|
||||
rgba(255, 255, 255, 0.08)
|
||||
);
|
||||
--settings-group-active-glow: color-mix(
|
||||
in srgb,
|
||||
var(--app-selection-glow) 22%,
|
||||
transparent
|
||||
);
|
||||
--settings-group-active-shadow:
|
||||
inset 0 0 0 1px var(--settings-group-active-ring),
|
||||
0 10px 22px -28px var(--settings-group-active-glow);
|
||||
--settings-item-danger-bg: color-mix(
|
||||
in srgb,
|
||||
var(--mat-sys-error) 8%,
|
||||
rgba(24, 10, 12, 0.86)
|
||||
);
|
||||
--settings-item-danger-border: color-mix(
|
||||
in srgb,
|
||||
var(--mat-sys-error) 24%,
|
||||
transparent
|
||||
);
|
||||
--settings-action-bar-bg: color-mix(
|
||||
in srgb,
|
||||
var(--mat-sys-surface-container) 92%,
|
||||
transparent
|
||||
);
|
||||
--settings-action-bar-border: rgba(255, 255, 255, 0.08);
|
||||
--settings-action-bar-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
|
||||
--settings-muted: color-mix(
|
||||
in srgb,
|
||||
var(--mat-sys-on-surface) 68%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
.settings-container {
|
||||
.support-card {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
padding: 18px;
|
||||
border-radius: 18px;
|
||||
border: 1px solid color-mix(in srgb, #ff4d6d 26%, transparent);
|
||||
background:
|
||||
radial-gradient(
|
||||
120% 140% at 0% 0%,
|
||||
color-mix(in srgb, #ff4d6d 16%, transparent) 0%,
|
||||
transparent 55%
|
||||
),
|
||||
radial-gradient(
|
||||
120% 140% at 100% 100%,
|
||||
color-mix(in srgb, #ffb347 14%, transparent) 0%,
|
||||
transparent 60%
|
||||
),
|
||||
color-mix(
|
||||
in srgb,
|
||||
var(--mat-sys-surface-container-low) 92%,
|
||||
transparent
|
||||
);
|
||||
overflow: hidden;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background: radial-gradient(
|
||||
80% 100% at 50% -10%,
|
||||
color-mix(in srgb, #ff4d6d 12%, transparent) 0%,
|
||||
transparent 70%
|
||||
);
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.support-card__intro {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 14px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.support-card__emblem {
|
||||
flex: 0 0 auto;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(135deg, #ff4d6d, #ff8b5e);
|
||||
color: #fff;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.35),
|
||||
0 10px 18px -10px rgba(255, 77, 109, 0.55);
|
||||
|
||||
mat-icon {
|
||||
font-size: 22px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.support-card__copy {
|
||||
min-width: 0;
|
||||
flex: 1 1 auto;
|
||||
|
||||
h4 {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 4px 0 0;
|
||||
color: var(--settings-muted);
|
||||
font-size: 0.86rem;
|
||||
line-height: 1.5;
|
||||
max-width: 64ch;
|
||||
}
|
||||
}
|
||||
|
||||
.support-card__actions {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.support-btn {
|
||||
flex: 1 1 220px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 14px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid transparent;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
transition:
|
||||
transform 0.18s ease,
|
||||
box-shadow 0.18s ease,
|
||||
filter 0.18s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-1px);
|
||||
filter: brightness(1.04);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
box-shadow:
|
||||
0 0 0 2px var(--mat-sys-surface),
|
||||
0 0 0 4px
|
||||
color-mix(
|
||||
in srgb,
|
||||
var(--app-selection-color) 40%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.support-btn__glyph {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 10px;
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
color: #fff;
|
||||
flex: 0 0 auto;
|
||||
|
||||
svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
mat-icon {
|
||||
font-size: 18px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.support-btn__text {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
|
||||
strong {
|
||||
font-size: 0.92rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
small {
|
||||
color: rgba(255, 255, 255, 0.82);
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
}
|
||||
|
||||
.support-btn--sponsors {
|
||||
background: linear-gradient(135deg, #d4337a, #ff4d6d);
|
||||
box-shadow: 0 12px 22px -18px rgba(212, 51, 122, 0.7);
|
||||
}
|
||||
|
||||
.support-btn--kofi {
|
||||
background: linear-gradient(135deg, #13c3ff, #29abe0);
|
||||
box-shadow: 0 12px 22px -18px rgba(19, 195, 255, 0.7);
|
||||
}
|
||||
}
|
||||
@@ -1,142 +1,5 @@
|
||||
:host {
|
||||
display: block;
|
||||
--settings-safe-bottom: env(safe-area-inset-bottom, 0px);
|
||||
--settings-action-bar-offset: 24px;
|
||||
--settings-action-bar-space: 112px;
|
||||
--settings-page-header-bg: color-mix(
|
||||
in srgb,
|
||||
var(--mat-sys-surface-container-low) 94%,
|
||||
rgba(255, 255, 255, 0.98)
|
||||
);
|
||||
--settings-page-header-border: color-mix(
|
||||
in srgb,
|
||||
var(--mat-sys-outline-variant) 72%,
|
||||
transparent
|
||||
);
|
||||
--settings-page-header-shadow:
|
||||
0 10px 20px -28px rgba(15, 23, 42, 0.16),
|
||||
0 1px 0 rgba(255, 255, 255, 0.68) inset;
|
||||
--settings-group-bg: color-mix(
|
||||
in srgb,
|
||||
var(--mat-sys-surface) 96%,
|
||||
rgba(255, 255, 255, 0.96)
|
||||
);
|
||||
--settings-group-border: color-mix(
|
||||
in srgb,
|
||||
var(--mat-sys-outline-variant) 78%,
|
||||
transparent
|
||||
);
|
||||
--settings-group-shadow: 0 14px 28px -32px rgba(15, 23, 42, 0.14);
|
||||
--settings-group-active-bg: color-mix(
|
||||
in srgb,
|
||||
var(--app-selection-color) 2%,
|
||||
rgba(255, 255, 255, 0.98)
|
||||
);
|
||||
--settings-group-active-ring: color-mix(
|
||||
in srgb,
|
||||
var(--app-selection-border) 68%,
|
||||
var(--settings-group-border)
|
||||
);
|
||||
--settings-group-active-glow: color-mix(
|
||||
in srgb,
|
||||
var(--app-selection-glow) 28%,
|
||||
transparent
|
||||
);
|
||||
--settings-group-active-shadow:
|
||||
inset 0 0 0 1px var(--settings-group-active-ring),
|
||||
0 12px 24px -28px var(--settings-group-active-glow);
|
||||
--settings-item-border: var(--app-separator);
|
||||
--settings-item-danger-bg: color-mix(
|
||||
in srgb,
|
||||
var(--mat-sys-error) 4%,
|
||||
rgba(255, 255, 255, 0.96)
|
||||
);
|
||||
--settings-item-danger-border: color-mix(
|
||||
in srgb,
|
||||
var(--mat-sys-error) 14%,
|
||||
transparent
|
||||
);
|
||||
--settings-action-bar-bg: color-mix(
|
||||
in srgb,
|
||||
var(--mat-sys-surface-container-low) 94%,
|
||||
rgba(255, 255, 255, 0.9)
|
||||
);
|
||||
--settings-action-bar-border: color-mix(
|
||||
in srgb,
|
||||
var(--mat-sys-outline-variant) 62%,
|
||||
transparent
|
||||
);
|
||||
--settings-action-bar-shadow: 0 10px 26px -26px rgba(15, 23, 42, 0.22);
|
||||
--settings-muted: color-mix(
|
||||
in srgb,
|
||||
var(--mat-sys-on-surface) 64%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
:host-context(.dark-theme),
|
||||
:host-context([data-theme='dark']),
|
||||
:host-context(.mat-app-background.dark) {
|
||||
--settings-page-header-bg: color-mix(
|
||||
in srgb,
|
||||
var(--mat-sys-surface-container) 92%,
|
||||
rgba(12, 16, 24, 0.94)
|
||||
);
|
||||
--settings-page-header-border: color-mix(
|
||||
in srgb,
|
||||
var(--mat-sys-outline-variant) 38%,
|
||||
transparent
|
||||
);
|
||||
--settings-page-header-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.05),
|
||||
0 16px 26px -34px rgba(0, 0, 0, 0.4);
|
||||
--settings-group-bg: color-mix(
|
||||
in srgb,
|
||||
var(--mat-sys-surface-container) 94%,
|
||||
rgba(10, 14, 22, 0.82)
|
||||
);
|
||||
--settings-group-border: rgba(255, 255, 255, 0.08);
|
||||
--settings-group-shadow: 0 16px 28px -32px rgba(0, 0, 0, 0.42);
|
||||
--settings-group-active-bg: color-mix(
|
||||
in srgb,
|
||||
var(--app-selection-surface) 24%,
|
||||
rgba(255, 255, 255, 0.015)
|
||||
);
|
||||
--settings-group-active-ring: color-mix(
|
||||
in srgb,
|
||||
var(--app-selection-border) 54%,
|
||||
rgba(255, 255, 255, 0.08)
|
||||
);
|
||||
--settings-group-active-glow: color-mix(
|
||||
in srgb,
|
||||
var(--app-selection-glow) 22%,
|
||||
transparent
|
||||
);
|
||||
--settings-group-active-shadow:
|
||||
inset 0 0 0 1px var(--settings-group-active-ring),
|
||||
0 10px 22px -28px var(--settings-group-active-glow);
|
||||
--settings-item-danger-bg: color-mix(
|
||||
in srgb,
|
||||
var(--mat-sys-error) 8%,
|
||||
rgba(24, 10, 12, 0.86)
|
||||
);
|
||||
--settings-item-danger-border: color-mix(
|
||||
in srgb,
|
||||
var(--mat-sys-error) 24%,
|
||||
transparent
|
||||
);
|
||||
--settings-action-bar-bg: color-mix(
|
||||
in srgb,
|
||||
var(--mat-sys-surface-container) 92%,
|
||||
transparent
|
||||
);
|
||||
--settings-action-bar-border: rgba(255, 255, 255, 0.08);
|
||||
--settings-action-bar-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
|
||||
--settings-muted: color-mix(
|
||||
in srgb,
|
||||
var(--mat-sys-on-surface) 68%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
.settings-container {
|
||||
@@ -653,186 +516,6 @@
|
||||
transform 0.18s ease;
|
||||
}
|
||||
|
||||
.support-card {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
padding: 18px;
|
||||
border-radius: 18px;
|
||||
border: 1px solid color-mix(in srgb, #ff4d6d 26%, transparent);
|
||||
background:
|
||||
radial-gradient(
|
||||
120% 140% at 0% 0%,
|
||||
color-mix(in srgb, #ff4d6d 16%, transparent) 0%,
|
||||
transparent 55%
|
||||
),
|
||||
radial-gradient(
|
||||
120% 140% at 100% 100%,
|
||||
color-mix(in srgb, #ffb347 14%, transparent) 0%,
|
||||
transparent 60%
|
||||
),
|
||||
color-mix(
|
||||
in srgb,
|
||||
var(--mat-sys-surface-container-low) 92%,
|
||||
transparent
|
||||
);
|
||||
overflow: hidden;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background: radial-gradient(
|
||||
80% 100% at 50% -10%,
|
||||
color-mix(in srgb, #ff4d6d 12%, transparent) 0%,
|
||||
transparent 70%
|
||||
);
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.support-card__intro {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 14px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.support-card__emblem {
|
||||
flex: 0 0 auto;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(135deg, #ff4d6d, #ff8b5e);
|
||||
color: #fff;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.35),
|
||||
0 10px 18px -10px rgba(255, 77, 109, 0.55);
|
||||
|
||||
mat-icon {
|
||||
font-size: 22px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.support-card__copy {
|
||||
min-width: 0;
|
||||
flex: 1 1 auto;
|
||||
|
||||
h4 {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 4px 0 0;
|
||||
color: var(--settings-muted);
|
||||
font-size: 0.86rem;
|
||||
line-height: 1.5;
|
||||
max-width: 64ch;
|
||||
}
|
||||
}
|
||||
|
||||
.support-card__actions {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.support-btn {
|
||||
flex: 1 1 220px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 14px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid transparent;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
transition:
|
||||
transform 0.18s ease,
|
||||
box-shadow 0.18s ease,
|
||||
filter 0.18s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-1px);
|
||||
filter: brightness(1.04);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
box-shadow:
|
||||
0 0 0 2px var(--mat-sys-surface),
|
||||
0 0 0 4px
|
||||
color-mix(in srgb, var(--app-selection-color) 40%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
.support-btn__glyph {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 10px;
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
color: #fff;
|
||||
flex: 0 0 auto;
|
||||
|
||||
svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
mat-icon {
|
||||
font-size: 18px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.support-btn__text {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
|
||||
strong {
|
||||
font-size: 0.92rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
small {
|
||||
color: rgba(255, 255, 255, 0.82);
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
}
|
||||
|
||||
.support-btn--sponsors {
|
||||
background: linear-gradient(135deg, #d4337a, #ff4d6d);
|
||||
box-shadow: 0 12px 22px -18px rgba(212, 51, 122, 0.7);
|
||||
}
|
||||
|
||||
.support-btn--kofi {
|
||||
background: linear-gradient(135deg, #13c3ff, #29abe0);
|
||||
box-shadow: 0 12px 22px -18px rgba(19, 195, 255, 0.7);
|
||||
}
|
||||
|
||||
.settings-note {
|
||||
margin: 12px 18px 18px;
|
||||
padding: 10px 12px;
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
@use '../../../libs/ui/components/src/lib/resizable/resizable.scss';
|
||||
@use './settings-theme';
|
||||
|
||||
// ─── Tailwind CSS ─────────────────────────────────────────────────────────────
|
||||
// Preflight is disabled in tailwind.config.js to avoid conflicts with
|
||||
|
||||
Reference in new issue
Block a user