MediaWiki:Citizen.css: verschil tussen versies

Versie van 5 dec 2025 20:32

:root {
	--color-surface-2: #5D4141;
	--color-surface-1: #3F2D2D;
/*	--color-surface-0: #3E1C00;*/
	--color-surface-0: #5D4141;

	--background-color-progressive: rgba(63, 45, 45, 1);

	--color-base: rgba(255, 255, 255, .7);
	--color-emphasized: rgba(255, 255, 255, 1);
	--color-subtle: rgba(255, 255, 255, .5);
}

#footer-icons a {
	background: transparent;
}

#skin-client-prefs-citizen-feature-custom-width, #skin-client-prefs-citizen-feature-pure-black, #skin-client-prefs-citizen-feature-performance-mode {
	display: none;
}

.cdx-button:enabled:hover, .cdx-button.cdx-button--fake-button--enabled:hover {
	border-color: var(--color-base);
}

@@ Regel 1: / Regel 1: @@
-/* Alle hier geplaatste CSS-code wordt geladen voor gebruikers van de vormgeving Citizen */
-/* ===============================================
-   CITIZEN BROWN THEME — BASE COLOR #3e1c00
-   =============================================== */
-/* ---------- GLOBAL COLORS ---------- */
 :root {
-    --brown-dark: #1e0e00;
+	--color-surface-2: #5D4141;
-    --brown-base: #3e1c00;
+	--color-surface-1: #3F2D2D;
-    --brown-light: #60320a;
+/*	--color-surface-0: #3E1C00;*/
-    --brown-soft: #8a5a2e;
+	--color-surface-0: #5D4141;
-    --accent-gold: #d9a35a;
-    --accent-gold-light: #f1c98a;
-    --text-light: #f5ebdd;
-    --text-muted: #d2c3b2;
-}
-/* ---------- PAGE BACKGROUND ---------- */
-body,
-.skin-citizen {
-    background: var(--brown-dark) !important;
-    color: var(--text-light) !important;
-}
-/* ---------- CONTENT BOX ---------- */
-.citizen-body,
-#content,
-.mw-body {
-    background: var(--brown-base) !important;
-    color: var(--text-light) !important;
-    border: 1px solid var(--brown-light) !important;
-    border-radius: 8px;
-    box-shadow: 0 0 20px rgba(0,0,0,.55);
-}
-/* ---------- HEADER & NAVBAR ---------- */
-.citizen-header,
-.citizen-header-container {
-    background: var(--brown-light) !important;
-    border-bottom: 2px solid var(--brown-base) !important;
-    color: var(--text-light) !important;
-}
-/* ---------- SIDEBAR ---------- */
-.citizen-sidebar,
-.citizen-sidebar-portlet {
-    background: var(--brown-base) !important;
-    border: 1px solid var(--brown-light) !important;
-    border-radius: 6px;
-    color: var(--text-light) !important;
-}
-/* ---------- PAGE TITLES ---------- */
-.citizen-page-header {
-    background: var(--brown-light) !important;
-    border-bottom: 2px solid var(--brown-base) !important;
-}
-.citizen-page-header h1 {
+	--background-color-progressive: rgba(63, 45, 45, 1);
-    color: var(--accent-gold) !important;
-}
-/* ---------- LINKS ---------- */
+	--color-base: rgba(255, 255, 255, .7);
-a {
+	--color-emphasized: rgba(255, 255, 255, 1);
-    color: var(--accent-gold) !important;
+	--color-subtle: rgba(255, 255, 255, .5);
-}
-a:hover {
-    color: var(--accent-gold-light) !important;
 }
-/* ---------- TABLES ---------- */
+#footer-icons a {
-table {
+	background: transparent;
-    background-color: var(--brown-base) !important;
-    color: var(--text-light) !important;
-    border: 1px solid var(--brown-light) !important;
-}
-th {
-    background: var(--brown-light) !important;
-}
-tr:nth-child(even) {
-    background: var(--brown-dark) !important;
-}
-/* ---------- NAVMENUS / DROPDOWNS ---------- */
-.vector-menu-content,
-.citizen-menu,
-.citizen-menu-dropdown {
-    background: var(--brown-base) !important;
-    border: 1px solid var(--brown-soft) !important;
-}
-/* ---------- INPUTS / SEARCH ---------- */
-input,
-textarea,
-select {
-    background: var(--brown-dark) !important;
-    color: var(--text-light) !important;
-    border: 1px solid var(--brown-soft) !important;
-}
-input:focus,
-textarea:focus {
-    border-color: var(--accent-gold) !important;
-}
-/* ---------- BUTTONS ---------- */
-button,
-.citizen-button,
-.mw-htmlform-submit {
-    background: var(--accent-gold) !important;
-    color: #3e1c00 !important;
-    border: none !important;
-    border-radius: 6px !important;
-    padding: 6px 12px !important;
-}
-button:hover,
-.citizen-button:hover {
-    background: var(--accent-gold-light) !important;
 }
-/* ---------- FOOTER ---------- */
+#skin-client-prefs-citizen-feature-custom-width, #skin-client-prefs-citizen-feature-pure-black, #skin-client-prefs-citizen-feature-performance-mode {
-.citizen-footer,
+	display: none;
-.citizen-footer-container {
-    background: transparent !important;
-    border: none !important;
-    color: var(--text-muted) !important;
 }
-/* ---------- CUSTOM FOOTER LOGO ---------- */
+.cdx-button:enabled:hover, .cdx-button.cdx-button--fake-button--enabled:hover {
-.my-footer-logo img {
+	border-color: var(--color-base);
-    height: 40px;
-    background: transparent !important;
-    margin: 10px auto;
-    display: block;
 }