SHA256
Дизайн Артёма
This commit is contained in:
AidarKC
@@ -15,18 +15,9 @@
|
||||
.ghost-btn {
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 9px 12px;
|
||||
min-height: 38px;
|
||||
min-height: 44px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.icon-btn,
|
||||
.text-btn,
|
||||
.primary-btn,
|
||||
.secondary-btn,
|
||||
.destructive-btn,
|
||||
.ghost-btn {
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
@@ -41,14 +32,14 @@
|
||||
.secondary-btn:disabled,
|
||||
.destructive-btn:disabled,
|
||||
.ghost-btn:disabled {
|
||||
opacity: 1;
|
||||
opacity: .5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
|
||||
.card {
|
||||
background: linear-gradient(180deg, rgba(31, 44, 67, 0.62), rgba(21, 30, 48, 0.9));
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 14px;
|
||||
}
|
||||
@@ -111,14 +102,14 @@
|
||||
|
||||
|
||||
.field-label {
|
||||
color: #b2c2e6;
|
||||
color: var(--text-secondary);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
|
||||
.select {
|
||||
width: 100%;
|
||||
border: 1px solid var(--line);
|
||||
border: 1px solid var(--border-control);
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
min-height: 44px;
|
||||
@@ -129,8 +120,8 @@
|
||||
|
||||
.select:focus {
|
||||
outline: none;
|
||||
border-color: rgba(83, 216, 251, 0.55);
|
||||
box-shadow: 0 0 0 3px rgba(83, 216, 251, 0.12);
|
||||
border-color: var(--focus-ring);
|
||||
box-shadow: 0 0 0 2px var(--focus-ring);
|
||||
}
|
||||
|
||||
|
||||
@@ -151,7 +142,7 @@
|
||||
|
||||
|
||||
.status-line.is-unavailable {
|
||||
color: #ff8d97;
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
|
||||
@@ -355,22 +346,22 @@
|
||||
padding: 0 12px;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
color: #f3f7ff;
|
||||
color: var(--text-primary);
|
||||
font-size: 16px;
|
||||
line-height: 1.4;
|
||||
caret-color: #f1d18a;
|
||||
-webkit-text-fill-color: #f3f7ff;
|
||||
caret-color: var(--accent);
|
||||
-webkit-text-fill-color: var(--text-primary);
|
||||
}
|
||||
|
||||
|
||||
.input:focus {
|
||||
border-color: rgba(83, 216, 251, 0.55);
|
||||
box-shadow: 0 0 0 3px rgba(83, 216, 251, 0.12);
|
||||
border-color: var(--focus-ring);
|
||||
box-shadow: 0 0 0 2px var(--focus-ring);
|
||||
}
|
||||
|
||||
|
||||
.input::placeholder {
|
||||
color: rgba(190, 206, 238, 0.82);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
|
||||
@@ -380,8 +371,8 @@ input.input:-webkit-autofill:focus,
|
||||
textarea.input:-webkit-autofill,
|
||||
textarea.input:-webkit-autofill:hover,
|
||||
textarea.input:-webkit-autofill:focus {
|
||||
-webkit-text-fill-color: #f3f7ff !important;
|
||||
caret-color: #f1d18a;
|
||||
-webkit-text-fill-color: var(--text-primary) !important;
|
||||
caret-color: var(--accent);
|
||||
border-color: var(--line);
|
||||
box-shadow: 0 0 0 1000px rgba(11, 24, 46, 0.96) inset !important;
|
||||
transition: background-color 9999s ease-out 0s;
|
||||
@@ -396,6 +387,7 @@ textarea.input {
|
||||
|
||||
|
||||
.inline-error {
|
||||
color: var(--danger);
|
||||
min-height: 18px;
|
||||
}
|
||||
|
||||
@@ -495,7 +487,7 @@ textarea.input {
|
||||
.section-title {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #dbe7ff;
|
||||
color: var(--text-primary);
|
||||
margin: 4px 2px;
|
||||
}
|
||||
|
||||
@@ -505,56 +497,6 @@ textarea.input {
|
||||
}
|
||||
|
||||
|
||||
#about-channel-modal .input,
|
||||
#edit-channel-modal .input,
|
||||
#reply-modal .input,
|
||||
#channel-message-modal .input,
|
||||
#channel-edit-description-modal .input,
|
||||
#channels-subscribe-modal .input,
|
||||
#thread-reply-modal .input {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
color: #ffffff;
|
||||
padding: 12px 16px;
|
||||
font-size: 14px;
|
||||
resize: vertical;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
#channel-edit-description-counter,
|
||||
#channel-edit-description-modal #channel-description-counter {
|
||||
color: rgba(255, 255, 255, 0.35);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
||||
#about-channel-modal .secondary-btn,
|
||||
#edit-channel-modal .secondary-btn,
|
||||
#reply-modal .secondary-btn,
|
||||
#channel-message-modal .secondary-btn,
|
||||
#channel-edit-description-modal .secondary-btn,
|
||||
#channels-subscribe-modal .secondary-btn,
|
||||
#thread-reply-modal .secondary-btn {
|
||||
border-radius: 12px;
|
||||
padding: 13px 24px;
|
||||
}
|
||||
|
||||
|
||||
#about-channel-modal .primary-btn,
|
||||
#edit-channel-modal .primary-btn,
|
||||
#reply-modal .primary-btn,
|
||||
#channel-message-modal .primary-btn,
|
||||
#channel-edit-description-modal .primary-btn,
|
||||
#channels-subscribe-modal .primary-btn,
|
||||
#thread-reply-modal .primary-btn {
|
||||
border-radius: 12px;
|
||||
padding: 13px 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
/* Горизонтальный overflow: орб-ореол .dm-screen::before выходит на 12px по бокам (inset -12px) и
|
||||
даёт лишний скролл. Фон НЕ меняем — клиппим overflow на уровне страницы (как просит ТЗ, п.4). */
|
||||
html,
|
||||
|
||||
Reference in New Issue
Block a user