src/main/resources/css/styles.css - master - aleksandrazimut/TimerCountdownDesktop

src/main/resources/css/styles.css
453 строки9 KB
Aleksandr Azimut
init commit
17 дек 2025, 21:59
17 дек 2025, 21:593c602f1
/* ====================================
   Шрифты и Общие стили
   ==================================== */
@font-face {
    font-family: 'Roboto Slab';
    src: url('../fonts/RobotoSlab-Regular.ttf');
}

.root-pane {
    -fx-font-family: 'Roboto Slab', 'Verdana', sans-serif;
    -fx-border-color: black;
    -fx-border-width: 1;
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.5), 10, 0, 0, 2);
}

/* ====================================
   Верхняя панель: Пресеты (+1m, +5m...)
   ==================================== */
/* Контейнер пресетов */
.presets-container {
    -fx-padding: 0;
    /* Убрал отступ снизу */
}

/* Кнопки времени (пресеты) */
.time-btn {
    -fx-font-family: 'Verdana';
    -fx-font-size: 11px;
    -fx-padding: 2 3 2 3;
    -fx-background-radius: 5;
    -fx-opacity: 0.7;
    -fx-cursor: hand;
    -fx-background-color: -fx-theme-btn-bg;
    -fx-text-fill: -fx-theme-btn-text;
}

.time-btn:hover {
    -fx-opacity: 1.0;
    -fx-text-fill: -fx-theme-btn-hover-text;
}

/* ====================================
   Центральная панель: Таймер
   ==================================== */
/* Таймер  */
.timer-digits {
    -fx-font-family: 'Roboto Slab';
    -fx-font-size: 40px;
    -fx-text-fill: -fx-theme-timer-text;
    -fx-pref-width: 200;
    -fx-max-width: 200;
    -fx-alignment: CENTER_RIGHT;
}

/* Кнопка Cancel */
.cancel-link {
    -fx-font-family: 'sans-serif';
    -fx-font-size: 12.8px;
    -fx-cursor: hand;
    -fx-opacity: 0.8;
    -fx-text-fill: -fx-theme-timer-text;
    -fx-padding: 0 0 0 10;
    -fx-underline: false;
}

.cancel-link:hover {
    -fx-underline: true;
}

/* ====================================
   Прогресс-бар
   ==================================== */
.progress-container {
    -fx-alignment: CENTER_LEFT;
    -fx-padding: 0 0 5 0;
    /* Убрал верхний отступ 5px */
}

/* Фон трека (внешний контейнер #track) - УМЕНЬШЕННАЯ ТОЛЩИНА */
.progress-bg {
    -fx-background-color: -fx-theme-progress-bg;
    /* Фон зависит от темы (black для Fallout, white для остальных) */
    -fx-border-color: -fx-theme-accent;
    /* Цветной border */
    -fx-border-width: 1;
    -fx-border-radius: 5;
    -fx-background-radius: 5;
    -fx-min-height: 14;
    -fx-max-height: 14;
    -fx-pref-height: 14;
}

/* Заполнение (внутренний элемент #line) - УМЕНЬШЕННАЯ ТОЛЩИНА */
.progress-bar-fill {
    -fx-background-color: -fx-theme-accent;
    /* Цветная полоска */
    -fx-opacity: 0.9;
    -fx-background-radius: 2;
    -fx-min-height: 11;
    -fx-max-height: 11;
    -fx-pref-height: 11;
}


/* ====================================
   Нижняя панель: Темы
   ==================================== */
/* Контейнер тем */
.themes-box {
    -fx-padding: 0 0 0 0;
}

/* Ссылки выбора тем */
.theme-link {
    -fx-font-family: 'Verdana';
    -fx-font-size: 11.2px;
    /* .7rem */
    -fx-opacity: 0.7;
    -fx-cursor: hand;
    -fx-text-fill: -fx-theme-link-text;
    -fx-padding: 0 5 0 5;
    /* margin: 0 5px */
}

.theme-link:hover {
    -fx-opacity: 1.0;
}

/* Активная тема - жирный шрифт */
.theme-link-active {
    -fx-font-weight: bold;
    -fx-opacity: 1.0;
}

/* ====================================
   Футер (Rate Us / Other extensions)
   ==================================== */
/* Контейнер футера */
.footer-container {
    -fx-alignment: CENTER_LEFT;
    -fx-padding: 0 2 0 2;
    -fx-spacing: 0;
}

/* Rate Us - контейнер (Зависит от темы) */
.rate-container {
    -fx-text-fill: -fx-theme-footer-text;
    -fx-font-family: 'Verdana';
    -fx-font-size: 11.5px;
    -fx-cursor: default;
    -fx-background-color: -fx-theme-footer-bg;
    -fx-background-radius: 7;
    -fx-padding: 5 10 5 10;
    -fx-min-width: 145;
    -fx-max-width: 145;
    -fx-alignment: CENTER_LEFT;
    -fx-opacity: 0.6;
}

.rate-container:hover {
    -fx-opacity: 1.0;
}

/* Звездочки в рейтинге */
.star-icon {
    -fx-cursor: hand;
}

/* Other extensions (Зависит от темы) */
.footer-button {
    -fx-text-fill: -fx-theme-footer-text;
    -fx-font-family: 'Verdana';
    -fx-font-size: 11.9px;
    -fx-cursor: hand;
    -fx-background-color: -fx-theme-footer-bg;
    -fx-background-radius: 7;
    -fx-padding: 5 10 5 10;
    -fx-min-width: 120;
    -fx-max-width: 130;
    -fx-alignment: CENTER_RIGHT;
    -fx-opacity: 0.6;
}

.footer-button:hover {
    -fx-opacity: 1.0;
}

.rate-text {
    -fx-text-fill: inherit;
    -fx-font-family: 'Verdana';
    -fx-font-size: 11.5px;
    -fx-padding: 0 2 0 0;
}

/* ====================================
   Остальные стили (Настройки, Alarm)
   ==================================== */

.settings-pane,
.settings-pane>.viewport {
    -fx-background-color: #f5f5f5;
}

.choose-button,
.save-button,
.cancel-button,
.settings-button {
    -fx-background-color: #0f3460;
    -fx-text-fill: white;
    -fx-cursor: hand;
    -fx-background-radius: 5;
}

.save-button {
    -fx-background-color: #95a5a6;
}

.cancel-button {
    -fx-background-color: #95a5a6;
}

.text-field {
    -fx-background-color: white;
    -fx-border-color: #cccccc;
    -fx-border-radius: 3;
}

.alarm-message {
    -fx-text-fill: white;
    -fx-font-size: 18px;
    -fx-font-weight: bold;
    -fx-effect: dropshadow(gaussian, black, 2, 1.0, 0, 0);
}

.alarm-button {
    -fx-font-size: 14px;
    -fx-padding: 8 16;
    -fx-background-radius: 5;
    -fx-cursor: hand;
}

.close-alarm-button {
    -fx-background-color: #013d99;
    /* Синий для темы Simple */
    -fx-text-fill: white;
}

/* ====================================
   THEME STYLES (MATCHING CHROME EXTENSION EXACTLY)
   ==================================== */

/* --- SIMPLE --- */
.theme-simple .timer-digits {
    -fx-text-fill: #0066FF;
}

.theme-simple .progress-bg {
    -fx-border-color: #0066FF;
    -fx-background-color: #ffffff;
}

.theme-simple .progress-bar-fill {
    -fx-background-color: #0066FF;
}

.theme-simple .theme-link {
    -fx-text-fill: #122242;
    -fx-opacity: 0.8;
}

.theme-simple .theme-link:hover,
.theme-simple .theme-link-active {
    -fx-text-fill: #0066FF;
    -fx-opacity: 1;
}

.theme-simple .time-btn {
    -fx-background-color: #fff;
    -fx-text-fill: #414141;
}

.theme-simple .time-btn:hover {
    -fx-text-fill: #1e1e1e;
}

/* --- FALLOUT --- */
.theme-fallout .timer-digits {
    -fx-text-fill: #14FD14;
}

.theme-fallout .progress-bg {
    -fx-border-color: #14FD14;
    -fx-background-color: black;
}

.theme-fallout .progress-bar-fill {
    -fx-background-color: #14FD14;
}

.theme-fallout .theme-link {
    -fx-text-fill: #14FD14;
    -fx-opacity: 0.8;
}

.theme-fallout .theme-link:hover {
    -fx-text-fill: #a6ffa6;
    -fx-opacity: 1;
}

.theme-fallout .theme-link-active {
    -fx-text-fill: #14FD14;
    -fx-font-weight: bold;
    -fx-opacity: 1;
}

.theme-fallout .time-btn {
    -fx-background-color: #13280C;
    -fx-text-fill: #14FD14;
    -fx-opacity: 0.8;
}

.theme-fallout .time-btn:hover {
    -fx-text-fill: #a6ffa6;
    -fx-opacity: 1;
}

/* --- LONDON --- */
.theme-london .timer-digits {
    -fx-text-fill: #905200;
}

.theme-london .progress-bg {
    -fx-border-color: #905200;
    -fx-background-color: #ffffff;
}

.theme-london .progress-bar-fill {
    -fx-background-color: #905200;
}

.theme-london .theme-link {
    -fx-text-fill: #613700;
    -fx-opacity: 0.8;
}

.theme-london .theme-link:hover {
    -fx-text-fill: #b20707;
    -fx-opacity: 1;
}

.theme-london .theme-link-active {
    -fx-text-fill: #613700;
    -fx-opacity: 1;
}

.theme-london .time-btn {
    -fx-background-color: #FCDBAF;
    -fx-text-fill: #905200;
    -fx-opacity: 0.8;
}

.theme-london .time-btn:hover {
    -fx-text-fill: #b20707;
    -fx-opacity: 1;
}

/* --- POKEMON --- */
.theme-pokemon .timer-digits {
    -fx-text-fill: #131315;
}

.theme-pokemon .progress-bg {
    -fx-border-color: #905200;
    -fx-background-color: #ffffff;
}

.theme-pokemon .progress-bar-fill {
    -fx-background-color: #905200;
}

.theme-pokemon .theme-link {
    -fx-text-fill: #131315;
    -fx-opacity: 0.8;
}

.theme-pokemon .theme-link:hover {
    -fx-text-fill: #131315;
    -fx-opacity: 1;
}

.theme-pokemon .theme-link-active {
    -fx-text-fill: #613700;
    -fx-opacity: 1;
}

.theme-pokemon .time-btn {
    -fx-background-color: #C1F0FF;
    -fx-text-fill: #131315;
    -fx-opacity: 0.8;
}

.theme-pokemon .time-btn:hover {
    -fx-text-fill: #131315;
    -fx-opacity: 1;
}

/* --- VADER --- */
.theme-vader .timer-digits {
    -fx-text-fill: #e0e0e0;
}

.theme-vader .progress-bg {
    -fx-border-color: #00DFFF;
    -fx-background-color: #ffffff;
}

.theme-vader .progress-bar-fill {
    -fx-background-color: #00DFFF;
}

.theme-vader .theme-link {
    -fx-text-fill: #ffffff;
    -fx-opacity: 0.8;
}

.theme-vader .theme-link:hover,
.theme-vader .theme-link-active {
    -fx-text-fill: #ffffff;
    -fx-opacity: 1;
}

.theme-vader .time-btn {
    -fx-background-color: #182A39;
    -fx-text-fill: #bdbdbd;
}

.theme-vader .time-btn:hover {
    -fx-text-fill: #e1e1e1;
}

/* --- R2D2 --- */
.theme-r2d2 .timer-digits {
    -fx-text-fill: #ffffff;
}

.theme-r2d2 .progress-bg {
    -fx-border-color: #3300FF;
    -fx-background-color: #ffffff;
}

.theme-r2d2 .progress-bar-fill {
    -fx-background-color: #3300FF;
}