/* =============================================================================
chat-appearance.css — Ekran "Oformlenie / Tema chata"
Stil' v duhe contact-info.css / chat-content.css, palitra --aya-*.
PODKLYUCHENIE :
V POSLE base.css i POSLE chat-theme.css (chtoby wallpaper-klassy
pereopredelyali pattern iz chat-theme.css):
<-- syuda
Dve gruppy pravil:
A) OVERLAY nastroek (.aya-ap-*)
B) WALLPAPER-pereopredeleniya fona perepiski (body.aya-wallpaper-*)
============================================================================= */
/* ───────────────────────── A. OVERLAY ───────────────────────── */
.aya-ap-overlay {
position: fixed;
inset: 0;
z-index: 100000;
display: flex;
flex-direction: column;
background: var(--aya-grey-bg, #eef0f2);
opacity: 0;
transition: opacity .22s ease;
overscroll-behavior: contain;
}
.aya-ap-overlay.aya-ap-show { opacity: 1; }
body.dark-theme .aya-ap-overlay {
background: var(--bg, #0d1117);
}
/* --- Shapka --- */
.aya-ap-header {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 4px;
padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 10px 8px;
background: var(--panel, #fff);
border-bottom: 1px solid var(--border, #e3e7ea);
}
body.dark-theme .aya-ap-header {
background: var(--panel, #1c2128);
border-bottom-color: var(--border, #2a313a);
}
.aya-ap-back {
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
border-radius: 50%;
color: var(--text, #16191c);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.aya-ap-back:active { background: var(--aya-grey-bg, #eef0f2); }
body.dark-theme .aya-ap-back { color: var(--text, #e6edf3); }
body.dark-theme .aya-ap-back:active { background: rgba(255, 255, 255, .08); }
.aya-ap-title {
flex: 1 1 auto;
font-size: 17px;
font-weight: 600;
color: var(--text, #16191c);
text-align: center;
}
body.dark-theme .aya-ap-title { color: var(--text, #e6edf3); }
/* balansir dlya tochnogo centrirovaniya zagolovka pri otsutstvii pravoj knopki */
.aya-ap-header-spacer { width: 40px; height: 40px; flex: 0 0 auto; }
/* --- Skroll-oblast' --- */
.aya-ap-scroll {
flex: 1 1 auto;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 40px) 16px;
}
.aya-ap-sub {
font-size: 13px;
color: var(--aya-grey, #8a9499);
text-align: center;
margin: 2px 0 14px;
}
.aya-ap-section-title {
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--aya-grey, #8a9499);
margin: 22px 4px 8px;
}
/* --- Kartochka (gruppa strok) --- */
.aya-ap-card {
background: var(--panel, #fff);
border-radius: 14px;
overflow: hidden;
}
body.dark-theme .aya-ap-card { background: var(--panel, #1c2128); }
.aya-ap-card--pad { padding: 16px; }
/* --- Stroka vybora (tema) --- */
.aya-ap-row {
width: 100%;
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
border: none;
background: transparent;
cursor: pointer;
text-align: left;
-webkit-tap-highlight-color: transparent;
}
.aya-ap-row:not(:last-child)::after {
content: "";
position: absolute;
}
.aya-ap-card .aya-ap-row { position: relative; }
.aya-ap-card .aya-ap-row:not(:last-child) {
box-shadow: inset 0 -1px 0 var(--border, #ececec);
}
body.dark-theme .aya-ap-card .aya-ap-row:not(:last-child) {
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .06);
}
.aya-ap-row:active { background: var(--aya-grey-bg, #eef0f2); }
body.dark-theme .aya-ap-row:active { background: rgba(255, 255, 255, .05); }
.aya-ap-row-label {
flex: 1 1 auto;
font-size: 16px;
color: var(--text, #16191c);
}
body.dark-theme .aya-ap-row-label { color: var(--text, #e6edf3); }
.aya-ap-check {
flex: 0 0 auto;
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--aya-teal, #1a6b82);
}
.aya-ap-check .ic { width: 20px; height: 20px; }
/* ───────────────── Razmer teksta: polzunok + presety ───────────────── */
.aya-ap-size-demo {
display: flex;
align-items: center;
gap: 14px;
}
.aya-ap-size-aa {
flex: 0 0 auto;
color: var(--aya-grey2, #52606a);
font-weight: 600;
line-height: 1;
}
body.dark-theme .aya-ap-size-aa { color: var(--text-secondary, #aab3bd); }
.aya-ap-size-aa--sm { font-size: 14px; }
.aya-ap-size-aa--lg { font-size: 24px; }
.aya-ap-range {
flex: 1 1 auto;
-webkit-appearance: none;
appearance: none;
height: 4px;
border-radius: 2px;
background: var(--border, #d7dce0);
outline: none;
}
body.dark-theme .aya-ap-range { background: rgba(255, 255, 255, .14); }
.aya-ap-range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--aya-teal, #1a6b82);
box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
cursor: pointer;
}
.aya-ap-range::-moz-range-thumb {
width: 26px;
height: 26px;
border: none;
border-radius: 50%;
background: var(--aya-teal, #1a6b82);
box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
cursor: pointer;
}
.aya-ap-size-pills {
display: flex;
gap: 8px;
margin-top: 16px;
flex-wrap: wrap;
}
.aya-ap-size-pill {
flex: 1 1 auto;
min-width: 44px;
padding: 8px 0;
border: 1px solid var(--border, #d7dce0);
border-radius: 10px;
background: transparent;
color: var(--text, #16191c);
font-size: 14px;
font-weight: 600;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
body.dark-theme .aya-ap-size-pill {
color: var(--text, #e6edf3);
border-color: rgba(255, 255, 255, .14);
}
.aya-ap-size-pill.aya-ap-on {
background: var(--aya-teal, #1a6b82);
border-color: var(--aya-teal, #1a6b82);
color: #fff;
}
/* ───────────────── Oboi: setka kartochek-swatchej ───────────────── */
.aya-ap-wp-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.aya-ap-wp {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
border: none;
background: transparent;
cursor: pointer;
padding: 0;
-webkit-tap-highlight-color: transparent;
}
.aya-ap-wp-swatch {
position: relative;
width: 100%;
aspect-ratio: 1 / 1.25;
border-radius: 14px;
border: 2px solid transparent;
overflow: hidden;
background: var(--chat-bg, #e9eef0);
}
.aya-ap-wp.aya-ap-on .aya-ap-wp-swatch {
border-color: var(--aya-teal, #1a6b82);
}
.aya-ap-wp-tick {
position: absolute;
top: 6px;
right: 6px;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--aya-teal, #1a6b82);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.aya-ap-wp-tick .ic { width: 14px; height: 14px; }
.aya-ap-wp-label {
font-size: 12px;
line-height: 1.25;
text-align: center;
color: var(--text-secondary, #52606a);
}
body.dark-theme .aya-ap-wp-label { color: var(--text-secondary, #aab3bd); }
/* --- Prevyu swatchej (povtoryaet logiku wallpaper-klassov nizhe) --- */
.aya-ap-wp-swatch--dots {
background-image:
url("data:image/svg+xml;utf8,"),
var(--chat-bg);
background-repeat: repeat, no-repeat;
background-size: 22px 22px, cover;
}
.aya-ap-wp-swatch--none,
.aya-ap-wp-swatch--plain {
background: var(--chat-bg);
}
.aya-ap-wp-swatch--grid {
background-image:
linear-gradient(var(--chat-pattern, #cfd4d6) 1px, transparent 1px),
linear-gradient(90deg, var(--chat-pattern, #cfd4d6) 1px, transparent 1px),
var(--chat-bg);
background-size: 14px 14px, 14px 14px, cover;
}
.aya-ap-wp-swatch--waves {
background-image:
url("data:image/svg+xml;utf8,"),
var(--chat-bg);
background-repeat: repeat, no-repeat;
background-size: 40px 20px, cover;
}
body.dark-theme .aya-ap-wp-swatch--none,
body.dark-theme .aya-ap-wp-swatch--plain { background: var(--chat-bg); }
/* ───────────────── Prevyu puzyrej (zhivoe) ───────────────── */
.aya-ap-preview {
border-radius: 16px;
overflow: hidden;
margin-bottom: 6px;
border: 1px solid var(--border, #e3e7ea);
}
body.dark-theme .aya-ap-preview { border-color: var(--border, #2a313a); }
/* Holst prevyu reproduciruet fon perepiski: tot zhe --chat-bg + tochki. */
.aya-ap-preview-canvas {
position: relative;
padding: 16px 14px;
display: flex;
flex-direction: column;
gap: 8px;
background-image:
url("data:image/svg+xml;utf8,"),
var(--chat-bg);
background-repeat: repeat, no-repeat;
background-size: 32px 32px, cover;
}
body.dark-theme .aya-ap-preview-canvas {
background-image:
url("data:image/svg+xml;utf8,"),
var(--chat-bg);
}
/* Prevyu uvazhaet vybor "bez oboev"/"sploshnoj ton" — ubiraem tochki. */
body.aya-wallpaper-none .aya-ap-preview-canvas,
body.aya-wallpaper-plain .aya-ap-preview-canvas {
background-image: var(--chat-bg);
}
body.aya-wallpaper-grid .aya-ap-preview-canvas {
background-image:
linear-gradient(var(--chat-pattern, #cfd4d6) 1px, transparent 1px),
linear-gradient(90deg, var(--chat-pattern, #cfd4d6) 1px, transparent 1px),
var(--chat-bg);
background-size: 16px 16px, 16px 16px, cover;
}
/* Puzyri vnutri prevyu — minimal'naya raskladka (klassy stiliziruet chat-theme.css). */
.aya-ap-preview-canvas .message-mobile { max-width: 82%; }
.aya-ap-preview-canvas .message-mobile.own { align-self: flex-end; }
.aya-ap-preview-canvas .message-mobile.other { align-self: flex-start; }
.aya-ap-preview-canvas .message-content-mobile { padding: 9px 13px; display: inline-block; }
/* =============================================================================
B. WALLPAPER-PEREOPREDELENIYA (body.aya-wallpaper-*)
Bьyut po .chat-panel::before iz chat-theme.css. Klass na , poetomu
specifichnost' vyshe -> nash background pobezhdaet. Defolt 'dots' NE imeet
klassa (rabotaet bazovyj chat-theme.css).
============================================================================= */
/* Bez oboev — chistyj gradient fona, bez patterna. */
body.aya-wallpaper-none .chat-panel::before {
background: var(--chat-bg);
background-repeat: no-repeat;
background-size: cover;
}
/* Sploshnoj ton — kak "bez oboev", no semanticheski otdelno (na sluchaj budushchih pravok). */
body.aya-wallpaper-plain .chat-panel::before {
background: var(--chat-bg);
background-repeat: no-repeat;
background-size: cover;
}
/* Setka ton-v-ton. */
body.aya-wallpaper-grid .chat-panel::before {
background-image:
linear-gradient(var(--chat-pattern, #cfd4d6) 1px, transparent 1px),
linear-gradient(90deg, var(--chat-pattern, #cfd4d6) 1px, transparent 1px),
var(--chat-bg);
background-repeat: repeat, repeat, no-repeat;
background-size: 22px 22px, 22px 22px, cover;
}
/* Volny ton-v-ton. */
body.aya-wallpaper-waves .chat-panel::before {
background-image:
url("data:image/svg+xml;utf8,"),
var(--chat-bg);
background-repeat: repeat, no-repeat;
background-size: 40px 20px, cover;
}
body.dark-theme.aya-wallpaper-waves .chat-panel::before {
background-image:
url("data:image/svg+xml;utf8,"),
var(--chat-bg);
background-repeat: repeat, no-repeat;
background-size: 40px 20px, cover;
}