MediaWiki:Common.css

/* ==========================
   Common.css - Grundeinstellungen für alle Skins und Bereiche
   Festelgung von Variablen, die später in allen Skinks, Gadgets, etc. übergreifend genutzt werden.
   Alle anderen Anpassgen werden über die die folgenden UI-Gadgets geladen:
     -  [[MediaWiki:Gadget-WikoniaUi.css]]
   ========================== */

/* ===================================
   FONTS - All Fonts are under Free License
   =================================== */
  @import url("https://assets.wikonia.net/fonts/fontawesome-free/css/all.css");


/* ======================================
   FARBWERTE 
   Standardfarbwerte für alle weiteren CSS-Dateien
   Alle Farben werden als Variablen gepseichert und sollten vorrangig genutz werden.
   ======================================= */
:root {
  --color-text: #424242;
  --color-primary: #08465a;
  --color-primary-light: #095067;
  --color-primary-dark: #063b4c;
  --color-primary-dark: #041f2d;
  --color-primary-dark-light: #042333;
  --color-primary-dark-dark: #031a26;
  --color-secondary: #d78b2d;
  --color-secondary-light: #f79f33;
  --color-secondary-dark: #b67626;
  --color-secondary-dark: #d19134;
  --color-secondary-dark-light: #f0a63b;
  --color-secondary-dark-dark: #b17b2c;
  --color-info: #6d8899;
  --color-info-light: #7d9caf;
  --color-info-dark: #5c7382;
  --color-success: #5ca96a;
  --color-success-light: #69c279;
  --color-success-dark: #4e8f5a;
  --color-warning: #e5af3c;
  --color-warning-light: #ffc945;
  --color-warning-dark: #c29433;
  --color-error: #d04545;
  --color-error-light: #ef4f4f;
  --color-error-dark: #b03a3a;
  --color-notice: #4c96af;
  --color-notice-light: #57acc9;
  --color-notice-dark: #407f94;
  --color-doku: #c97457; 
  --color-doku-light: #ff9771;
  --color-doku-dark: #8d513d;
  --color-hilfe: #d6d94c;
  --color-hilfe-light: #f7f7a3;
  --color-hilfe-dark: #515218;
  --color-wartung: #b8793a;
  --color-wartung-light: #d38b42;
  --color-wartung-dark: #9c6631;
  --color-informal: #7c7c7c;
  --color-informal-light: #8e8e8e;
  --color-informal-dark: #696969;
  --color-projekt: #2e5e6e;
  --color-projekt-light: #346c7e;
  --color-projekt-dark: #274f5d;
  --color-code-bg: #f8f8f8; /* oder z. B. #f4f4f4 für mehr Helligkeit */
}

/* Helle Hintergrundfarben für semantische Boxen */
:root {
  --bg-primary:         #e8f1f4;
  --bg-secondary:       #fff3e0;
  --bg-info:            #eef4f8;
  --bg-success:         #e9f5ec;
  --bg-warning:         #fff8e1;
  --bg-error:           #fdecea;
  --bg-notice:          #e7f1f5;
  --bg-doku:            #f4d6b3;
  --bg-hilfe:           #f2f4b3;
  --bg-wartung:         #f9f0e4;
  --bg-informal:        #f0f0f0;
  --bg-projekt:         #e4eef1;

  /* Neutrale Hintergrundfarben */
  --bg-neutral:         #f4f4f4;
  --bg-neutral-light:   #f9f9f9;
  --bg-neutral-dark:    #e0e0e0;
  
  /* Sanfte Hintergrundfarben für Tabellenhintergründe, etx. */
  --bg-red:				#e6c6c8;
  --bg-green:			#add2b3;
  --bg-aqua:			#c6e6e4;
  --bg-brown:			#e6d4c6;
  --bg-pink:			#e6c6e5;
  --bg-violet:			#d6c6e6;
  --bg-blue:			#c6cae6;
  --bg-beige:			#e6dac6;
  --bg-yellow:			#fffee0;
  --bg-orange:			#ffddc2;

  /* Harmonisierte Grundfarben für Text, Icons, Akzente */
  --color-blue:         #2d6ca3;
  --color-red:          #c0392b;
  --color-green:        #27ae60;
  --color-yellow:       #f1c40f;
  --color-orange:       #e67e22;
  --color-purple:       #8e44ad;
  --color-gray:         #7f8c8d;
  
}

/* ======================
   DARKMODE
   ====================== */


@media screen {
  html.skin-theme-clientpref-night {
    --color-bg: #1a1a1a;
    --color-text: #eaeaea;
    --color-primary: #052d3a;
    --color-primary-light: #053342;
    --color-primary-dark: #042631;
    --color-primary-dark: #02141d;
    --color-primary-dark-light: #021721;
    --color-primary-dark-dark: #011118;
    --color-secondary: #8b5a1d;
    --color-secondary-light: #9f6721;
    --color-secondary-dark: #764c18;
    --color-secondary-dark: #875e21;
    --color-secondary-dark-light: #9b6c25;
    --color-secondary-dark-dark: #724f1c;
    --color-info: #465863;
    --color-info-light: #506571;
    --color-info-dark: #3b4a54;
    --color-success: #3b6d44;
    --color-success-light: #437d4e;
    --color-success-dark: #325c39;
    --color-warning: #947127;
    --color-warning-light: #aa812c;
    --color-warning-dark: #7d6021;
    --color-error: #872c2c;
    --color-error-light: #9b3232;
    --color-error-dark: #722525;
    --color-notice: #316171;
    --color-notice-light: #386f81;
    --color-notice-dark: #295260;
    --color-doku: #2c556b;
    --color-doku-light: #32617b;
    --color-doku-dark: #25485a;
    --color-hilfe: #316171;
    --color-hilfe-light: #386f81;
    --color-hilfe-dark: #295260;
    --color-wartung: #774e25;
    --color-wartung-light: #88592a;
    --color-wartung-dark: #65421f;
    --color-informal: #505050;
    --color-informal-light: #5c5c5c;
    --color-informal-dark: #444444;
    --color-projekt: #1d3d47;
    --color-projekt-light: #214651;
    --color-projekt-dark: #18333c;
    --color-code-bg: #222; /* etwas heller als der Standard-Darkmode-Hintergrund */
  }
}

  /* ==========================================================================
   Darkmode-Anpassung für erweiterte Farbvariablen
   ========================================================================== */
@media screen {
  html.skin-theme-clientpref-night {
    /* Helle Boxen → dezente Dunkelvarianten */
    --bg-primary:         #132126;
    --bg-secondary:       #2c2115;
    --bg-info:            #1e2b32;
    --bg-success:         #1d2f23;
    --bg-warning:         #322916;
    --bg-error:           #311d1d;
    --bg-notice:          #1b2f37;
    --bg-doku:            #1b2b35;
    --bg-hilfe:           #1b2f37;
    --bg-wartung:         #2e2418;
    --bg-informal:        #2a2a2a;
    --bg-projekt:         #1a262b;

    /* Neutrale Flächen (z. B. Box-Hintergründe, Sektionen) */
    --bg-neutral:         #2c2c2c;
    --bg-neutral-light:   #353535;
    --bg-neutral-dark:    #242424;

    /* Harmonisierte Grundfarben (dunklere Entsprechungen) */
    --color-blue:         #3b88c3;
    --color-red:          #e74c3c;
    --color-green:        #2ecc71;
    --color-yellow:       #f39c12;
    --color-orange:       #d35400;
    --color-purple:       #9b59b6;
    --color-gray:         #95a5a6;
  }
  /* ======================
    UI-STANDARDS
    - Festelgungen für Abstände, BReiten
    - Festlegungen für Größen
    - Linienstärken
    - etc.
	====================== */
 :root {
    --radius-normal:		.4rem;
    --radius-round:			1rem;
    
    --border-line-normal:	2px;
    --border-line-thin:		1px;
    --border-line-thick:	3px;
    --border-line-heavy:    4px;
    
    --font-size-small:		80%;
    --font-size-large:		120%;
    --font-size-larger:		140%;
    
    }
}