add toggle categories

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;
+}
+