fix: implement proper terminal styling for all utilities

- Add comprehensive terminal theme CSS variables
- Create unified styling for all form elements (inputs, sliders, selects, textareas)
- Style all buttons with terminal green theme
- Add proper terminal styling for code blocks and preview areas
- Create specific CSS files for each utility with terminal theme
- Ensure all UI elements match the terminal aesthetic
- Fix contrast and readability issues
- Add responsive design for mobile devices

Author: mrvi0

assets/css/button-generator-style.css

@@ -310,6 +310,45 @@
 }
 .output-area .copy-button:hover { opacity: 1; }
 
+/* Стили для предварительного просмотра кнопки */
+.button-preview {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100px;
+    background: var(--terminal-bg);
+    border: 1px solid var(--terminal-border);
+    border-radius: 8px;
+    margin-bottom: 20px;
+}
+
+.generated-button {
+    /* Стили будут применяться динамически через JavaScript */
+    border: none;
+    cursor: pointer;
+    font-family: 'JetBrains Mono', monospace;
+    transition: all 0.2s ease;
+}
+
+/* Стили для вывода кода */
+.code-output,
+.html-output {
+    margin-bottom: 20px;
+}
+
+.code-output h4,
+.html-output h4 {
+    color: var(--terminal-text);
+    font-size: 14px;
+    font-weight: 600;
+    margin-bottom: 8px;
+}
+
+/* Кнопки действий */
+.terminal-button-action {
+    margin-right: 10px;
+    margin-bottom: 10px;
+}
 
 /* Адаптивность */
 @media (max-width: 900px) {
@@ -358,4 +397,14 @@
          writing-mode: horizontal-tb;
          padding: 0.5em 1em;
      }
+}
+
+@media (max-width: 768px) {
+    .generator-container {
+        grid-template-columns: 1fr;
+    }
+    
+    .button-preview {
+        min-height: 80px;
+    }
 }

assets/css/colorify-style.css

@@ -231,20 +231,92 @@ small.alpha-hint {
 }
 
 
+/* Стили для конвертера цветов */
+.color-input-group {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.color-input-group .terminal-input {
+    flex: 1;
+}
+
+/* Сетка конвертаций */
+.conversion-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 16px;
+    margin-bottom: 20px;
+}
+
+.conversion-item {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.conversion-item label {
+    color: var(--terminal-text);
+    font-size: 12px;
+    font-weight: 600;
+}
+
+/* Секция градиентов */
+.gradient-controls {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 16px;
+    margin-bottom: 20px;
+}
+
+.gradient-color,
+.gradient-direction {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.gradient-color label,
+.gradient-direction label {
+    color: var(--terminal-text);
+    font-size: 12px;
+    font-weight: 600;
+}
+
+.gradient-preview {
+    width: 100%;
+    height: 60px;
+    border: 1px solid var(--terminal-border);
+    border-radius: 8px;
+    margin-bottom: 20px;
+    background: linear-gradient(to right, #ff0000, #0000ff);
+}
+
+.gradient-code {
+    margin-top: 20px;
+}
+
+.gradient-code h4 {
+    color: var(--terminal-text);
+    font-size: 14px;
+    font-weight: 600;
+    margin-bottom: 8px;
+}
+
 /* Адаптивность */
-@media (max-width: 600px) {
-    #color-converter-section .converter-grid { grid-template-columns: 1fr; }
-    #color-converter-section .color-preview-area { max-width: 150px; margin: 0 auto 1rem auto; }
-     #color-converter-section .input-row { flex-direction: row; } /* Возвращаем в строку на мал экранах */
-     #color-converter-section .rgb-input,
-     #color-converter-section .hsl-input,
-     #color-converter-section .alpha-input {
-         min-width: 55px; /* Уменьшаем мин ширину */
-         flex-basis: auto; /* Авто ширина */
-     }
-     #color-converter-section .input-wrapper { padding: 0.3rem 0.4rem; }
-
-    .gradient-controls { flex-direction: column; align-items: stretch;}
-    .gradient-controls .button-add-color { align-self: flex-end; } /* Кнопка справа */
+@media (max-width: 768px) {
+    .colorify-container {
+        grid-template-columns: 1fr;
+    }
+    
+    .conversion-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .gradient-controls {
+        grid-template-columns: 1fr;
+    }
 }
 

assets/css/free-api.css

@@ -0,0 +1,90 @@
+/* Стили для Free API Catalog */
+
+/* Поиск */
+.search-controls {
+    display: flex;
+    gap: 12px;
+    margin-bottom: 20px;
+}
+
+.search-controls .terminal-input {
+    flex: 1;
+}
+
+.search-controls .terminal-select {
+    width: 200px;
+}
+
+/* Список API */
+.api-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 16px;
+}
+
+.api-item {
+    background: var(--terminal-header-bg);
+    border: 1px solid var(--terminal-border);
+    border-radius: 8px;
+    padding: 16px;
+    transition: border-color 0.2s ease;
+}
+
+.api-item:hover {
+    border-color: var(--terminal-text);
+}
+
+.api-item h4 {
+    color: var(--terminal-text);
+    font-size: 16px;
+    font-weight: 600;
+    margin-bottom: 8px;
+}
+
+.api-item p {
+    color: var(--terminal-text-dim);
+    font-size: 14px;
+    margin-bottom: 12px;
+    line-height: 1.4;
+}
+
+.api-meta {
+    display: flex;
+    gap: 12px;
+    margin-bottom: 12px;
+    flex-wrap: wrap;
+}
+
+.api-category,
+.api-rate {
+    background: var(--terminal-bg);
+    border: 1px solid var(--terminal-border);
+    border-radius: 4px;
+    padding: 4px 8px;
+    font-size: 12px;
+    color: var(--terminal-text);
+}
+
+.api-item .terminal-button-action {
+    font-size: 12px;
+    padding: 6px 12px;
+}
+
+/* Адаптивность */
+@media (max-width: 768px) {
+    .api-catalog-container {
+        grid-template-columns: 1fr;
+    }
+    
+    .search-controls {
+        flex-direction: column;
+    }
+    
+    .search-controls .terminal-select {
+        width: 100%;
+    }
+    
+    .api-list {
+        grid-template-columns: 1fr;
+    }
+}