User:Fen/Portals/Software/styles.css: Difference between revisions

Retrieved from "https://consumerrights.wiki/User:Fen/Portals/Software/styles.css"

@@ Line 1: / Line 1: @@
 .software-portal-wrapper {
-   font-family: "Fira Code", "Courier New", monospace;
+   font-family: "JetBrains Mono", monospace;
-   background: #1a1a1a;
+   background: #f8f9fa;
-   color: #ddd;
+   color: #1b1b1b;
    padding: 2em;
    max-width: 1200px;
@@ Line 8: / Line 8: @@
 }
-/* Header: dark banner */
+/* Header */
 .software-header {
-   background: #000;
+   background: linear-gradient(to right, #d0f2f2, #e2f7ff);
-   color: #fff;
+   color: #003333;
-   border-left: 10px solid #ff3333;
+  padding: 1.8em;
-  padding: 1.5em;
+   border-left: 8px solid #00aaaa;
-   border-radius: 4px;
+   border-radius: 8px;
    margin-bottom: 2em;
-   box-shadow: 0 0 10px rgba(255, 51, 51, 0.2);
+   box-shadow: 0 0 12px rgba(0, 150, 150, 0.1);
 }
 .software-title {
@@ Line 25: / Line 25: @@
 .software-subtitle {
    font-size: 1em;
-  color: #ccc;
    font-style: italic;
+  color: #005555;
    margin-top: 0.4em;
 }
@@ Line 39: / Line 39: @@
 /* Card */
 .software-card {
-   background: #222;
+   background: #ffffff;
-   border: 1px solid #444;
+   border: 1px solid #ddd;
-   border-left: 5px solid #ff3333;
+   border-left: 5px solid #7c4dff;
-   border-radius: 3px;
+   border-radius: 6px;
-   padding: 1.3em;
+   padding: 1.2em;
-   box-shadow: inset 0 0 0 1px #000;
+   box-shadow: 0 0 8px rgba(124, 77, 255, 0.05);
-   transition: box-shadow 0.2s ease, transform 0.2s ease;
+   transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
 .software-card:hover {
-   transform: translateY(-2px);
+   transform: translateY(-3px);
-   box-shadow: 0 0 10px rgba(255, 51, 51, 0.1);
+   box-shadow: 0 0 12px rgba(124, 77, 255, 0.15);
 }
 .software-card.wide {
@@ Line 57: / Line 57: @@
 /* Title */
 .software-card-title {
-   font-size: 1.2em;
+   font-size: 1.3em;
    font-weight: bold;
-   color: #ff9999;
+   color: #5f2dab;
    margin-bottom: 0.5em;
-   border-bottom: 1px dashed #444;
+   border-bottom: 1px solid #bbb;
    padding-bottom: 0.2em;
 }
@@ Line 67: / Line 67: @@
 /* Body */
 .software-card-body {
-   font-size: 0.95em;
+   font-size: 0.97em;
+  color: #2b2b2b;
    line-height: 1.6;
-  color: #ccc;
 }
 .software-card-body ul {
@@ Line 83: / Line 83: @@
 }
-/* Category links */
+/* Category tag buttons */
 .software-card-body a[href*="Category:"] {
    display: inline-block;
-   background: #2a2a2a;
+   background: #e8f4f4;
-   border: 1px solid #444;
+   border: 1px solid #c0eaea;
-   padding: 0.3em 0.6em;
+   padding: 0.4em 0.8em;
    font-size: 0.9em;
    font-weight: 600;
-   color: #ffcccc;
+   color: #008b8b;
    border-radius: 4px;
-   margin: 0.25em;
+   margin: 0.3em;
    text-decoration: none;
+  transition: background 0.2s ease, border-color 0.2s ease;
 }
 .software-card-body a[href*="Category:"]:hover {
-   background: #3a3a3a;
+   background: #d2f0f0;
-  color: #fff;
+   border-color: #00cccc;
-   border-color: #666;
 }
-/* Link styles */
+/* Link styling */
 a:link,
 a:visited {
-   color: #ff6666;
+   color: #006699;
    text-decoration: none;
 }
 a:hover {
+  color: #0099cc;
    text-decoration: underline;
-   color: #ffa0a0;
+}
+@media screen {
+   html.skin-theme-clientpref-night .software-portal-wrapper,
+  html.skin-theme-clientpref-os .software-portal-wrapper {
+    background: #0d0d0d;
+    color: #e0e0e0;
+  }
+  html.skin-theme-clientpref-night .software-header,
+  html.skin-theme-clientpref-os .software-header {
+    background: linear-gradient(to right, #121212, #1e1e1e);
+    color: #ffffff;
+    border-left-color: #00ffff;
+    box-shadow: 0 0 12px rgba(0, 255, 255, 0.2);
+  }
+  html.skin-theme-clientpref-night .software-title,
+  html.skin-theme-clientpref-os .software-title {
+    color: #ccffff;
+  }
+  html.skin-theme-clientpref-night .software-subtitle,
+  html.skin-theme-clientpref-os .software-subtitle {
+    color: #a0ffff;
+  }
+  html.skin-theme-clientpref-night .software-card,
+  html.skin-theme-clientpref-os .software-card {
+    background: #1a1a1a;
+    border: 1px solid #2a2a2a;
+    border-left: 5px solid #b380ff;
+    box-shadow: 0 0 8px rgba(179, 128, 255, 0.05);
+  }
+  html.skin-theme-clientpref-night .software-card:hover,
+  html.skin-theme-clientpref-os .software-card:hover {
+    box-shadow: 0 0 12px rgba(179, 128, 255, 0.15);
+  }
+  html.skin-theme-clientpref-night .software-card-title,
+  html.skin-theme-clientpref-os .software-card-title {
+    color: #b380ff;
+    border-bottom: 1px solid #333;
+  }
+  html.skin-theme-clientpref-night .software-card-body,
+  html.skin-theme-clientpref-os .software-card-body {
+    color: #d0d0d0;
+  }
+  html.skin-theme-clientpref-night .software-card-body a[href*="Category:"],
+  html.skin-theme-clientpref-os .software-card-body a[href*="Category:"] {
+    background: #262626;
+    border: 1px solid #3a3a3a;
+    color: #00ffff;
+  }
+  html.skin-theme-clientpref-night .software-card-body a[href*="Category:"]:hover,
+  html.skin-theme-clientpref-os .software-card-body a[href*="Category:"]:hover {
+    background: #1e1e1e;
+    border-color: #00cccc;
+  }
+  html.skin-theme-clientpref-night a:link,
+  html.skin-theme-clientpref-night a:visited,
+  html.skin-theme-clientpref-os a:link,
+  html.skin-theme-clientpref-os a:visited {
+    color: #33ccff;
+  }
+  html.skin-theme-clientpref-night a:hover,
+  html.skin-theme-clientpref-os a:hover {
+    color: #00ffff;
+  }
 }