MediaWiki:Common.css: Difference between revisions

MediaWiki:Common.css (view source)

Revision as of 18:14, 5 October 2024

750 bytes removed , 5 October

no edit summary

Arisepedia

Bureaucrats, Interface administrators, Administrators

270

edits

@@ Line 1: / Line 1: @@
 /* MediaWiki:Common.css */
-:root {
+/* Main Page*/
-    --bg-color: #f9f9f9;
-    --text-color: #333;
-    --hero-bg: #fc5351;
-    --hero-text: #ffffff;
-    --card-bg: #ffffff;
-    --card-border: #e0e0e0;
-    --heading-color: #6c0cec;
-    --cta-bg: #f4f4f4;
-    --footer-bg: #ffffff;
-    --footer-text: #777;
-    --link-color: #fc5351;
-    --link-hover: #b03a30;
-}
-@media (prefers-color-scheme: dark) {
-    :root {
-        --bg-color: #1a1a1a;
-        --text-color: #e0e0e0;
-        --hero-bg: #8c2c2b;
-        --hero-text: #ffffff;
-        --card-bg: #2a2a2a;
-        --card-border: #444;
-        --heading-color: #9f6cf7;
-        --cta-bg: #2a2a2a;
-        --footer-bg: #2a2a2a;
-        --footer-text: #999;
-        --link-color: #ff7b7a;
-        --link-hover: #ff9e9d;
-    }
-}
 body {
      font-family: 'Arial', sans-serif;
-     color: var(--text-color);
+     color: #333;
-     background-color: var(--bg-color);
+     background-color: #f9f9f9;
      margin: 0;
      padding: 0;
-    transition: background-color 0.3s, color 0.3s;
 }
+/* Hero Section */
 .hero {
-     background: var(--hero-bg);
+     background: #fc5351;
-     color: var(--hero-text);
+     color: #ffffff;
      padding: 60px 20px;
      border-radius: 20px;
@@ Line 63: / Line 32: @@
 }
-.hero .cta-button {
+.hero a {
      display: inline-block;
-     background: var(--hero-text);
+     background: #ffffff;
-     color: var(--hero-bg);
+     color: #fc5351;
      padding: 15px 30px;
      border-radius: 30px;
@@ Line 74: / Line 43: @@
      margin-top: 20px;
      transition: background 0.3s, color 0.3s;
-     border: 2px solid var(--hero-text);
+     border: 2px solid #fc5351;
 }
-.hero .cta-button:hover {
+.hero a:hover {
-     background: var(--hero-bg);
+     background: #fc5351;
-     color: var(--hero-text);
+     color: #ffffff;
 }
+/* Info Cards */
 .card {
-     background: var(--card-bg);
+     background: #ffffff;
      border-radius: 15px;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
      padding: 20px;
-     border: 1px solid var(--card-border);
+     border: 1px solid #e0e0e0;
      margin-bottom: 20px;
 }
@@ Line 93: / Line 63: @@
 .card h2 {
      font-size: 2em;
-     color: var(--heading-color);
+     color: #6c0cec;
-     border-bottom: 3px solid var(--card-border);
+     border-bottom: 3px solid #e0e0e0;
      padding-bottom: 10px;
      margin-bottom: 20px;
@@ Line 102: / Line 72: @@
 .card p {
      font-size: 1.2em;
+    color: #555;
      line-height: 1.6;
 }
+/* CTA Section */
 .cta {
-     background: var(--cta-bg);
+     background: #f4f4f4;
-     color: var(--text-color);
+     color: #333;
      padding: 40px;
      border-radius: 15px;
@@ Line 118: / Line 90: @@
      font-size: 2.2em;
      font-weight: 700;
-     color: var(--link-color);
+     color: #fc5351;
      margin: 0;
 }
@@ Line 128: / Line 100: @@
 .cta a {
-     color: var(--link-color);
+     color: #fc5351;
      font-weight: 600;
      text-decoration: underline;
@@ Line 135: / Line 107: @@
 .cta a:hover {
-     color: var(--link-hover);
+     color: #b03a30;
 }
+/* Footer */
 .footer {
      text-align: center;
      padding: 20px;
-     background: var(--footer-bg);
+     background: #ffffff;
-     border-top: 1px solid var(--card-border);
+     border-top: 1px solid #ddd;
      margin-top: 40px;
      box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
@@ Line 149: / Line 122: @@
 .footer p {
      margin: 0;
-     color: var(--footer-text);
+     color: #777;
      font-size: 1.1em;
 }
@@ Line 155: / Line 128: @@
 /* Media Queries */
 @media (max-width: 768px) {
-     .hero h1 { font-size: 1.8em; }
+     .hero h1 {
-     .hero p { font-size: 1em; }
+        font-size: 1.8em;
-     .hero .cta-button { font-size: 1em; padding: 10px 20px; }
+    }
-     .card h2 { font-size: 1.5em; }
+     .hero p {
-     .card p { font-size: 1em; }
+        font-size: 1em;
-     .cta h2 { font-size: 1.8em; }
+    }
-     .cta p { font-size: 1em; }
+     .hero a {
+        font-size: 1em;
+        padding: 10px 20px;
+    }
+     .card h2 {
+        font-size: 1.5em;
+    }
+     .card p {
+        font-size: 1em;
+    }
+     .cta h2 {
+        font-size: 1.8em;
+    }
+     .cta p {
+        font-size: 1em;
+    }
 }
 @media (max-width: 480px) {
-     .hero h1 { font-size: 1.5em; }
+     .hero h1 {
-     .hero p { font-size: 0.9em; }
+        font-size: 1.5em;
-     .hero .cta-button { font-size: 0.9em; padding: 8px 15px; }
+    }
-     .card h2 { font-size: 1.3em; }
+     .hero p {
-     .card p { font-size: 0.9em; }
+        font-size: 0.9em;
-     .cta h2 { font-size: 1.5em; }
+    }
-     .cta p { font-size: 0.9em; }
+     .hero a {
+        font-size: 0.9em;
+        padding: 8px 15px;
+    }
+     .card h2 {
+        font-size: 1.3em;
+    }
+     .card p {
+        font-size: 0.9em;
+    }
+     .cta h2 {
+        font-size: 1.5em;
+    }
+     .cta p {
+        font-size: 0.9em;
+    }
 }