CSS unification

MaxITService · MaxITService · commit b2b7bf8bdabe · 2025-08-06T00:02:11.000+03:00
diff --git a/common-ui-elements/common-style.css b/common-ui-elements/common-style.css
@@ -1,4 +1,25 @@
-/* Generated css */
+/*
+common-style.css
+Version: 1.0
+
+This file contains shared base styles used across different pages of the extension.
+*/
+
+/* ------------------------------------------------------------------------- */
+/* Root Variables for Consistent Styling                                   */
+/* ------------------------------------------------------------------------- */
 :root {
-  --primary-color: #7a5cc8;
-}
+    --primary-color: #7a5cc8; 
+    --danger-color: #a94442; 
+    --border-color: #ccc;
+    --bg-color: #f9f9f9;
+    --text-color: #333;
+    --separator-color: #bbb;
+    --primary-color-faded: rgba(122, 92, 200, 0.05);
+    --hover-bg-color: #e6e6e6;
+    --transition-duration: 0.3s;
+    --transition-duration-release: 0.4s;
+    --box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+    --box-shadow-hover: 0 4px 8px rgba(0,0,0,0.1);
+    --checkbox-size: 18px;  
+}
diff --git a/popup-page-styles/popup-base.css b/popup-page-styles/popup-base.css
@@ -8,29 +8,6 @@ container centering, section styling, and heading (h2) styles.
 These rules set up the basic typography, spacing, and color scheme for the interface.
 */
 
-/* ------------------------------------------------------------------------- */
-/* Root Variables for Consistent Styling                                   */
-/* ------------------------------------------------------------------------- */
-:root {
-    --danger-color: #a94442; /* Soft red for danger buttons */
-    --border-color: #ccc; /* Light gray for borders */
-    --bg-color: #f9f9f9; /* Very light gray for background */
-    --text-color: #333; /* Dark gray for primary text */
-    --separator-color: #bbb; /* Medium gray for separators */
-    --primary-color-faded: rgba(122, 92, 200, 0.05);
-    --hover-bg-color: #e6e6e6; /* Light gray on hover */
-    --transition-duration: 0.3s; /* Standard transition duration */
-    --transition-duration-release: 0.4s; /* Slower transition duration for release */
-    --box-shadow: 0 2px 4px rgba(0,0,0,0.05);
-    --box-shadow-hover: 0 4px 8px rgba(0,0,0,0.1);
-    --checkbox-size: 18px;
-    --toast-bg-color: rgba(0, 0, 0, 0.8);
-    --toast-text-color: #fff;
-    --toast-padding: 12px 24px;
-    --toast-border-radius: 4px;
-    --toast-margin: 8px;
-    --toast-transition: opacity 0.5s ease, transform 0.5s ease;
-}
 
 /* ------------------------------------------------------------------------- */
 /* Global Body Styles                                                        */
diff --git a/popup-page-styles/popup-components.css b/popup-page-styles/popup-components.css
@@ -240,14 +240,14 @@ Key areas:
 }
 
 .toast {
-    background: var(--toast-bg-color);
-    color: var(--toast-text-color);
-    padding: var(--toast-padding);
-    border-radius: var(--toast-border-radius);
-    margin-top: var(--toast-margin);
+    background: #222;                 /* neutral base; type classes override */
+    color: #fff;                      /* readable on dark base */
+    padding: 12px 24px;               
+    border-radius: 4px;               
+    margin-top: 8px;                 
     opacity: 0;
     transform: translateY(20px);
-    transition: var(--toast-transition);
+    transition: opacity 0.5s ease, transform 0.5s ease; /* was var(--toast-transition) */
     min-width: 200px;
     max-width: 300px;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
diff --git a/popup.html b/popup.html
@@ -15,6 +15,7 @@
     <link rel="stylesheet" href="/common-ui-elements/popup-toggle.css" />
     <!-- Theme overrides: Dark mode styles -->
     <link rel="stylesheet" href="/common-ui-elements/dark-theme.css" />
+    <link rel="stylesheet" href="/common-ui-elements/common-style.css" />
   </head>
 
   <body>
diff --git a/welcome-page-files/styles.css b/welcome-page-files/styles.css
@@ -1,18 +1,5 @@
 /* CSS Variables Definition */
-:root {
-  --bg-color: #fff;
-  --text-color: #333;
-
-  /* Typography scale (rem-based) */
-  --font-base: 1rem;          /* body text, paragraphs, list items */
-  --font-sm: 0.875rem;        /* small UI text such as switch label */
-  --font-lg: 1.125rem;        /* subheadings or emphasized text */
-  --font-xl: 1.375rem;        /* section titles (h2) */
-  --font-2xl: 1.625rem;       /* main page title (h1) */
-
-  --lh-normal: 1.55;
-  --lh-tight: 1.3;
-}
+/* :root block removed as requested */
 
 /* Base styles for the page */
 body {
