diff --git a/lzipus/src/browser_action/popup.css b/lzipus/src/browser_action/popup.css index 9550ef4..3974a35 100644 --- a/lzipus/src/browser_action/popup.css +++ b/lzipus/src/browser_action/popup.css @@ -4,7 +4,7 @@ body { max-width: 3000px; width: 400px; background: #abcef5; /* Светлый фон */ - font-family: Helvetica; + font-family: Helvetica, Arial, sans-serif; /* Более минималистичный шрифт */ box-sizing: border-box; } @@ -27,6 +27,10 @@ h1 { h3 { padding: 6px; + font-family: Helvetica, Arial, sans-serif; /* Более минималистичный шрифт для категорий */ + font-size: 16px; /* Уменьшен размер шрифта */ + font-weight: normal; /* Уменьшен вес шрифта для минималистичного вида */ + color: #333; /* Цвет шрифта для категорий */ } i { @@ -36,11 +40,32 @@ i { button.template-add, button.template-edit, button.template-delete { - margin: 1px; - padding: 7px; - background-color: #abcef5; /* Светлый фон кнопок */ - border-color: #abcef5; /* Цвет рамки кнопок */ - cursor: pointer; /* Указатель при наведении */ + margin: 0 4px; /* Меньше отступов */ + padding: 5px 10px; /* Более компактные кнопки */ + background-color: transparent; /* Без фона */ + border: 1px solid #abcef5; /* Тонкая рамка */ + color: #333; /* Цвет текста */ + cursor: pointer; + font-size: 14px; /* Меньший размер текста */ + border-radius: 5px; /* Скругленные углы */ + transition: background-color 0.3s, color 0.3s, border-color 0.3s; /* Плавные переходы */ +} + +/* Эффект при наведении */ +button.template-add:hover, +button.template-edit:hover, +button.template-delete:hover { + background-color: #abcef5; /* Подсветка фоном */ + color: #fff; /* Белый цвет текста */ + border-color: #88aee5; /* Немного темнее рамка */ +} + +/* Эффект при фокусе */ +button.template-add:focus, +button.template-edit:focus, +button.template-delete:focus { + outline: none; /* Убираем стандартную обводку */ + box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); /* Легкая тень для фокуса */ } div.templates { @@ -55,15 +80,16 @@ span.template { justify-content: space-between; height: fit-content; padding: 8px 7px; - border: 2px solid #8844aa; /* Цвет рамки */ - border-radius: 10px 100px / 120px; + border: 1px solid #8888c6; /* Цвет рамки совпадает с рамкой категории */ + border-radius: 8px; /* Скругленные углы */ overflow: hidden; - transition: background-color 0.3s ease, color 0.3s ease; /* Плавный переход при наведении */ + transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; /* Плавный переход при наведении */ } /* Подсветка шаблонов при наведении */ span.template:hover { background: #d0e6ff; /* Подсветка для светлой темы */ + border-color: #a56fbf; /* Немного темнее рамка при наведении */ } .dark-theme span.template:hover { @@ -99,9 +125,9 @@ span.template:hover { .category { margin-bottom: 10px; - border: solid #8888c6 4px; + border: solid #8888c6 1px; /* Тонкая рамка для категории */ border-radius: 1px 10px / 12px; - box-shadow: 10px 5px 5px #8888c6; + box-shadow: 5px 3px 5px #8888c6; /* Легкая тень для категории */ } /* Стили для темной темы */ @@ -140,3 +166,29 @@ body.dark-theme { .dark-theme .theme-btn { color: #fff; } + +.category h3 { + display: flex; + justify-content: space-between; /* Располагаем элементы по краям */ + align-items: center; + cursor: pointer; /* Курсор при наведении на весь блок */ +} + +.toggle-icon { + cursor: pointer; + margin-left: 10px; +} + +.category-content { + display: none; + padding-left: 20px; +} + +.category-content.show { + display: block; +} + +.category h3 i { + transition: transform 0.3s ease; +} + \ No newline at end of file diff --git a/lzipus/src/browser_action/popup.html b/lzipus/src/browser_action/popup.html index 38bdb1a..b593ba2 100644 --- a/lzipus/src/browser_action/popup.html +++ b/lzipus/src/browser_action/popup.html @@ -19,14 +19,20 @@