mirror of
https://github.com/haperone/local-image-compress.git
synced 2026-07-22 06:44:26 +00:00
604 lines
15 KiB
CSS
604 lines
15 KiB
CSS
/* TinyPNG (Local) - Адаптивные стили плагина */
|
||
|
||
/* ========================================================================
|
||
CSS-ПЕРЕМЕННЫЕ ДЛЯ ДИНАМИЧЕСКОЙ АДАПТАЦИИ
|
||
======================================================================== */
|
||
|
||
:root {
|
||
--local-image-compress-accent: var(--interactive-accent);
|
||
--local-image-compress-accent-hover: var(--interactive-accent-hover);
|
||
--local-image-compress-text-error: var(--text-error);
|
||
--local-image-compress-text-success: var(--text-success);
|
||
--local-image-compress-text-warning: var(--text-warning);
|
||
}
|
||
|
||
/* ========================================================================
|
||
БАЗОВЫЕ СТИЛИ ДЛЯ НАСТРОЕК
|
||
======================================================================== */
|
||
|
||
.tiny-local-settings .setting-item-description ul {
|
||
margin: 0.5em 0;
|
||
padding-left: 1.5em;
|
||
}
|
||
.tiny-local-settings .tiny-local-roots-list .badge {
|
||
display: inline-block;
|
||
padding: 2px 8px;
|
||
border-radius: 999px;
|
||
background: var(--background-modifier-hover);
|
||
border: 1px solid var(--background-modifier-border);
|
||
color: var(--text-normal);
|
||
margin: 4px 6px 0 0;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.tiny-local-settings .tiny-local-warning-block {
|
||
color: var(--local-image-compress-text-error);
|
||
font-weight: 600;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.tiny-local-settings .tiny-local-roots-list .badge:hover {
|
||
background: transparent;
|
||
border-color: var(--text-error);
|
||
color: var(--text-error);
|
||
}
|
||
|
||
.tiny-local-settings .tiny-local-roots-pill {
|
||
border: 1px solid var(--background-modifier-border);
|
||
background: var(--background-secondary);
|
||
color: var(--text-normal);
|
||
cursor: pointer;
|
||
font: inherit;
|
||
}
|
||
|
||
.tiny-local-settings .tiny-local-roots-clear {
|
||
color: var(--text-muted);
|
||
background: transparent;
|
||
}
|
||
|
||
.tiny-local-settings .tiny-local-roots-clear:hover {
|
||
color: var(--text-error);
|
||
background: transparent;
|
||
}
|
||
|
||
/* Поднастройки без разделительной линии */
|
||
.tiny-local-settings .tiny-local-subsetting.setting-item {
|
||
border-top: none;
|
||
padding-top: 4px;
|
||
}
|
||
|
||
|
||
.tiny-local-settings .setting-item-description li {
|
||
margin: 0.25em 0;
|
||
}
|
||
|
||
/* Стили для уведомлений */
|
||
.tiny-local-notice {
|
||
font-weight: 500;
|
||
color: var(--text-normal);
|
||
}
|
||
|
||
/* ========================================================================
|
||
ПРОГРЕСС-БАР И МОДАЛЬНЫЕ ОКНА ДЛЯ ПЕРЕМЕЩЕНИЯ ФАЙЛОВ
|
||
======================================================================== */
|
||
|
||
/* Прогресс-бар */
|
||
.tiny-local-move-progress-modal .tiny-local-progress-bar {
|
||
width: 100%;
|
||
height: 8px;
|
||
background: var(--background-modifier-border);
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
margin: 10px 0;
|
||
}
|
||
|
||
.tiny-local-move-progress-modal .tiny-local-progress-fill {
|
||
height: 100%;
|
||
width: var(--local-image-compress-progress-width, 0%);
|
||
background: var(--interactive-accent);
|
||
border-radius: 4px;
|
||
transition: width 0.3s ease;
|
||
}
|
||
|
||
/* Модальное окно прогресса */
|
||
.modal-content.tiny-local-move-progress-modal {
|
||
max-width: 500px;
|
||
padding: 20px;
|
||
}
|
||
|
||
.tiny-local-move-progress-modal h2 {
|
||
margin-bottom: 15px;
|
||
color: var(--text-normal);
|
||
}
|
||
|
||
.tiny-local-move-progress-modal p {
|
||
margin: 8px 0;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
/* Модальное окно результата */
|
||
.modal-content.tiny-local-move-result-modal {
|
||
max-width: 400px;
|
||
padding: 20px;
|
||
}
|
||
|
||
.tiny-local-move-result-modal h2 {
|
||
margin-bottom: 15px;
|
||
color: var(--text-normal);
|
||
}
|
||
|
||
.tiny-local-move-result-modal p {
|
||
margin: 10px 0;
|
||
padding: 8px 12px;
|
||
border-radius: 4px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.tiny-local-success {
|
||
background: var(--background-modifier-success);
|
||
color: var(--text-success);
|
||
border-left: 3px solid var(--text-success);
|
||
}
|
||
|
||
.tiny-local-error {
|
||
background: var(--background-modifier-error);
|
||
color: var(--text-error);
|
||
border-left: 3px solid var(--text-error);
|
||
}
|
||
|
||
.tiny-local-info {
|
||
background: var(--background-modifier-hover);
|
||
color: var(--text-accent);
|
||
border-left: 3px solid var(--interactive-accent);
|
||
}
|
||
|
||
/* ========================================================================
|
||
ИНДИКАТОР ЭКОНОМИИ МЕСТА - АДАПТИВНЫЙ
|
||
======================================================================== */
|
||
|
||
.tiny-local-savings-indicator {
|
||
background: var(--background-secondary);
|
||
border: 1px solid var(--background-modifier-border);
|
||
border-radius: 6px;
|
||
margin: 15px 0;
|
||
padding: 12px;
|
||
transition: background-color 0.2s ease, border-color 0.2s ease;
|
||
}
|
||
|
||
.tiny-local-savings-indicator:hover {
|
||
background: var(--background-secondary-alt);
|
||
border-color: var(--background-modifier-border-focus);
|
||
}
|
||
|
||
.tiny-local-savings-tooltip-target {
|
||
cursor: help;
|
||
}
|
||
|
||
.tiny-local-savings-bar {
|
||
height: 20px;
|
||
display: flex;
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
margin-top: 8px;
|
||
border: 1px solid var(--background-modifier-border);
|
||
}
|
||
|
||
/* Сэкономленное место - адаптивный цвет */
|
||
.tiny-local-savings-saved {
|
||
width: var(--local-image-compress-savings-width, 0%);
|
||
background: var(--interactive-accent);
|
||
opacity: 0.8;
|
||
background-image: repeating-linear-gradient(
|
||
45deg,
|
||
transparent,
|
||
transparent 2px,
|
||
var(--background-modifier-hover) 2px,
|
||
var(--background-modifier-hover) 4px
|
||
);
|
||
transition: width 0.3s ease;
|
||
min-width: 1px;
|
||
}
|
||
|
||
/* Текущий размер - адаптивный цвет */
|
||
.tiny-local-savings-current {
|
||
width: var(--local-image-compress-savings-width, 0%);
|
||
background: var(--background-modifier-border);
|
||
transition: width 0.3s ease;
|
||
min-width: 1px;
|
||
}
|
||
|
||
/* Резервный сегмент, когда нет данных об экономии */
|
||
.tiny-local-savings-bar .tiny-local-savings-fallback {
|
||
width: 100%;
|
||
}
|
||
|
||
.tiny-local-savings-text {
|
||
color: var(--text-normal);
|
||
font-size: 13px;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.tiny-local-savings-text strong {
|
||
color: var(--text-accent);
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* ========================================================================
|
||
TOOLTIP - АДАПТИВНЫЙ
|
||
======================================================================== */
|
||
|
||
.tiny-local-savings-tooltip-wrapper {
|
||
position: absolute;
|
||
top: var(--local-image-compress-savings-tooltip-top, auto);
|
||
left: var(--local-image-compress-savings-tooltip-left, auto);
|
||
z-index: 1000;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.tiny-local-savings-tooltip {
|
||
background: var(--background-primary);
|
||
border: 1px solid var(--background-modifier-border);
|
||
color: var(--text-normal);
|
||
padding: 12px 16px;
|
||
border-radius: 6px;
|
||
font-size: 12px;
|
||
line-height: 1.5;
|
||
white-space: pre-line;
|
||
box-shadow: var(--shadow-s);
|
||
min-width: 320px;
|
||
max-width: 400px;
|
||
position: relative;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.tiny-local-savings-tooltip::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -6px;
|
||
left: 20px;
|
||
width: 0;
|
||
height: 0;
|
||
border-left: 6px solid transparent;
|
||
border-right: 6px solid transparent;
|
||
border-bottom: 6px solid var(--background-primary);
|
||
}
|
||
|
||
.tiny-local-savings-tooltip::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: -7px;
|
||
left: 20px;
|
||
width: 0;
|
||
height: 0;
|
||
border-left: 6px solid transparent;
|
||
border-right: 6px solid transparent;
|
||
border-bottom: 6px solid var(--background-modifier-border);
|
||
}
|
||
|
||
.tiny-local-savings-tooltip strong {
|
||
color: var(--text-accent);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.tiny-local-savings-tooltip .tooltip-header {
|
||
color: var(--text-accent);
|
||
font-weight: 600;
|
||
font-size: 13px;
|
||
margin-bottom: 8px;
|
||
border-bottom: 1px solid var(--background-modifier-border);
|
||
padding-bottom: 6px;
|
||
}
|
||
|
||
.tiny-local-savings-tooltip .tooltip-item {
|
||
margin: 4px 0;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
gap: 8px;
|
||
}
|
||
|
||
.tiny-local-savings-tooltip .tooltip-label {
|
||
color: var(--text-normal);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.tiny-local-savings-tooltip .tooltip-value {
|
||
color: var(--text-muted);
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* ========================================================================
|
||
СТАТУС-БАР - АДАПТИВНЫЙ
|
||
======================================================================== */
|
||
|
||
.tiny-local-compressing {
|
||
color: var(--interactive-accent);
|
||
animation: tiny-local-pulse 2s infinite;
|
||
}
|
||
|
||
.tiny-local-status-attention {
|
||
color: var(--text-warning);
|
||
font-weight: 600;
|
||
}
|
||
|
||
@keyframes tiny-local-pulse {
|
||
0% { opacity: 1; }
|
||
50% { opacity: 0.6; }
|
||
100% { opacity: 1; }
|
||
}
|
||
|
||
/* ========================================================================
|
||
ПРОГРЕСС-БАР - АДАПТИВНЫЙ
|
||
======================================================================== */
|
||
|
||
.tiny-local-progress-container {
|
||
width: 100%;
|
||
height: 20px;
|
||
background-color: var(--background-modifier-border);
|
||
border-radius: 10px;
|
||
margin: 10px 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.tiny-local-progress-container .tiny-local-progress-bar {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
}
|
||
|
||
.tiny-local-progress-container .tiny-local-progress-fill {
|
||
height: 100%;
|
||
width: var(--local-image-compress-progress-width, 0%);
|
||
background-color: var(--interactive-accent);
|
||
transition: width 0.3s ease;
|
||
}
|
||
|
||
.tiny-local-progress-title {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
margin-bottom: 10px;
|
||
color: var(--text-normal);
|
||
}
|
||
|
||
.tiny-local-progress-status {
|
||
font-size: 14px;
|
||
color: var(--text-muted);
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.tiny-local-progress-actions {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: var(--size-2-2);
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.tiny-local-progress-cancel {
|
||
min-width: 96px;
|
||
}
|
||
|
||
/* ========================================================================
|
||
МЕНЮ СТАТУС-БАРА - АДАПТИВНОЕ
|
||
======================================================================== */
|
||
|
||
.tiny-local-status-menu {
|
||
position: fixed;
|
||
left: var(--local-image-compress-status-menu-left, 0);
|
||
top: var(--local-image-compress-status-menu-top, 0);
|
||
transform: var(--local-image-compress-status-menu-transform, none);
|
||
z-index: 1000;
|
||
background: var(--background-primary);
|
||
border: 1px solid var(--background-modifier-border);
|
||
border-radius: 6px;
|
||
box-shadow: var(--shadow-s);
|
||
padding: 4px 0;
|
||
min-width: 220px;
|
||
max-width: min(360px, calc(100vw - 20px));
|
||
max-height: calc(100vh - 20px);
|
||
overflow-x: hidden;
|
||
overflow-y: auto;
|
||
font-size: 14px;
|
||
color: var(--text-normal);
|
||
}
|
||
|
||
.tiny-local-status-menu-header {
|
||
padding: 6px 12px;
|
||
font-size: 12px;
|
||
color: var(--text-muted);
|
||
border-bottom: 1px solid var(--background-modifier-border);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.tiny-local-status-menu .tiny-local-status-menu-item {
|
||
display: block;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
border: 0;
|
||
border-radius: 0;
|
||
box-shadow: none;
|
||
background-color: transparent;
|
||
color: var(--text-normal);
|
||
font: inherit;
|
||
text-align: left;
|
||
padding: 6px 12px;
|
||
margin: 0;
|
||
min-height: 32px;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
transition: background-color 0.2s ease;
|
||
}
|
||
|
||
.tiny-local-status-menu .tiny-local-status-menu-item:hover,
|
||
.tiny-local-status-menu .tiny-local-status-menu-item:focus {
|
||
background-color: var(--background-modifier-hover);
|
||
}
|
||
|
||
.tiny-local-status-trigger:focus-visible,
|
||
.tiny-local-status-menu .tiny-local-status-menu-item:focus,
|
||
.tiny-local-status-menu .tiny-local-status-menu-item:focus-visible,
|
||
.tiny-local-savings-tooltip-target:focus-visible,
|
||
.tiny-local-folder-select-control:focus-visible,
|
||
.tiny-local-progress-cancel:focus-visible,
|
||
.tiny-local-move-result-modal button:focus-visible,
|
||
.tiny-local-backup-list button:focus-visible {
|
||
outline: 2px solid var(--interactive-accent);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
/* ========================================================================
|
||
ПОДДЕРЖКА ПОПУЛЯРНЫХ КАСТОМНЫХ ТЕМ
|
||
======================================================================== */
|
||
|
||
/* Minimal Theme */
|
||
.theme-minimal .tiny-local-savings-indicator {
|
||
border-radius: 8px;
|
||
box-shadow: var(--shadow-s);
|
||
}
|
||
|
||
.theme-minimal .tiny-local-savings-bar {
|
||
border-radius: 6px;
|
||
}
|
||
|
||
/* AnuPpuccin Theme */
|
||
.theme-anuppuccin .tiny-local-savings-saved {
|
||
background: var(--ctp-mocha-blue, var(--interactive-accent));
|
||
}
|
||
|
||
/* Dracula Theme */
|
||
.theme-dracula .tiny-local-savings-saved {
|
||
background: var(--dracula-purple, var(--interactive-accent));
|
||
}
|
||
|
||
/* Catppuccin Theme */
|
||
.theme-catppuccin .tiny-local-savings-saved {
|
||
background: var(--ctp-blue, var(--interactive-accent));
|
||
}
|
||
|
||
/* Tokyo Night Theme */
|
||
.theme-tokyo-night .tiny-local-savings-saved {
|
||
background: var(--tokyo-night-blue, var(--interactive-accent));
|
||
}
|
||
|
||
/* One Dark Theme */
|
||
.theme-one-dark .tiny-local-savings-saved {
|
||
background: var(--one-dark-blue, var(--interactive-accent));
|
||
}
|
||
|
||
/* ========================================================================
|
||
АДАПТАЦИЯ ДЛЯ УЗКИХ ОКОН
|
||
======================================================================== */
|
||
|
||
@media (max-width: 768px) {
|
||
.tiny-local-savings-indicator {
|
||
margin: 10px 0;
|
||
padding: 10px;
|
||
}
|
||
|
||
.tiny-local-savings-tooltip {
|
||
min-width: 280px;
|
||
max-width: 90vw;
|
||
font-size: 11px;
|
||
padding: 10px 12px;
|
||
}
|
||
}
|
||
|
||
/* ========================================================================
|
||
АНИМАЦИИ И ПЕРЕХОДЫ
|
||
======================================================================== */
|
||
|
||
.tiny-local-savings-indicator,
|
||
.tiny-local-savings-bar {
|
||
transition: background-color 0.2s ease, border-color 0.2s ease;
|
||
}
|
||
|
||
/* Плавное появление tooltip */
|
||
.tiny-local-savings-tooltip {
|
||
animation: tiny-local-fade-in 0.2s ease;
|
||
}
|
||
|
||
@keyframes tiny-local-fade-in {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(-5px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
/* ========================================================================
|
||
ДОПОЛНИТЕЛЬНЫЕ КЛАССЫ ДЛЯ JAVASCRIPT
|
||
======================================================================== */
|
||
|
||
/* Состояния прогресс-бара */
|
||
.tiny-local-progress-completed {
|
||
background-color: var(--local-image-compress-text-success);
|
||
}
|
||
|
||
.tiny-local-progress-error {
|
||
background-color: var(--local-image-compress-text-error);
|
||
}
|
||
|
||
.tiny-local-progress-cancelled {
|
||
background-color: var(--text-warning);
|
||
}
|
||
|
||
/* Список бэкапов */
|
||
.tiny-local-backup-list {
|
||
max-height: 300px;
|
||
overflow-y: auto;
|
||
border: 1px solid var(--background-modifier-border);
|
||
padding: 10px;
|
||
border-radius: 4px;
|
||
font-family: monospace;
|
||
font-size: 12px;
|
||
background: var(--background-secondary);
|
||
}
|
||
|
||
.tiny-local-folder-select-control {
|
||
width: 100%;
|
||
padding: 8px;
|
||
margin: 10px 0;
|
||
}
|
||
|
||
/* ========================================================================
|
||
ДОСТУПНОСТЬ (ACCESSIBILITY)
|
||
======================================================================== */
|
||
|
||
/* Улучшенный фокус для клавиатурной навигации */
|
||
.tiny-local-settings .setting-item-control button:focus-visible,
|
||
.tiny-local-settings .tiny-local-roots-pill:focus-visible {
|
||
outline: 2px solid var(--interactive-accent);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
/* Высокий контраст для слабовидящих */
|
||
@media (prefers-contrast: high) {
|
||
.tiny-local-savings-indicator {
|
||
border-width: 2px;
|
||
}
|
||
|
||
.tiny-local-savings-text strong {
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
|
||
/* Уменьшенное движение для пользователей с вестибулярными нарушениями */
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.tiny-local-savings-indicator,
|
||
.tiny-local-savings-bar,
|
||
.tiny-local-savings-saved,
|
||
.tiny-local-savings-current,
|
||
.tiny-local-status-menu,
|
||
.tiny-local-savings-tooltip {
|
||
transition: none;
|
||
animation: none;
|
||
}
|
||
|
||
.tiny-local-compressing {
|
||
animation: none;
|
||
}
|
||
}
|