MediaWiki:Citizen.css: Difference between revisions

Latest revision as of 14:06, 22 February 2026

/* =========================================
   MECHA HOMEPAGE — CORE LAYOUT + BRANDING
   ========================================= */

.page-Main_Page .mecha-home{
  margin-top:0!important;
}

/* Remove top whitespace above homepage */
.page-Main_Page .mw-body-content{
  margin-top:0!important;
  padding-top:0!important;
}

.page-Main_Page .mw-parser-output{
  margin-top:0!important;
  padding-top:0!important;
}

/* Logo — base */
.mecha-logo{
  width:200px;
  height:auto;
  display:block;
  margin:0 auto;
  transition:filter .15s ease;
}

/* Logo — dark mode */
.skin-theme-clientpref-night .mecha-logo{
  filter:invert(1) brightness(2);
}

/* Remove MediaWiki image frame */
.mecha-logo.mw-file-element{
  border:none!important;
  padding:0!important;
  background:none!important;
}

/* Remove link tinting */
.mecha-logoLink img{
  border:none!important;
}

/* Page container */
.mecha-home{
  max-width:1200px;
  margin:0 auto;
  padding:12px 18px 34px;
}

/* Hero section */
.mecha-hero{
  text-align:center;
  margin:6px 0 14px;
  padding:0;
}

/* Logo link wrapper */
.mecha-logoLink{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  margin:0 0 6px;
}

/* Title */
.mecha-title{
  margin:8px 0 6px;
  padding:0;
  font-size:42px;
  font-weight:800;
  letter-spacing:-.02em;
}

/* Subtitle */
.mecha-subtitle{
  margin:0;
  color:var(--color-base-subtle);
  font-size:16px;
}

/* =========================================
   HERO ACTION BUTTONS
   ========================================= */

.mecha-actions{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  margin:16px 0 0;
  padding:0;
}

.mecha-action{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:11px 16px;
  border-radius:12px;
  background:var(--color-progressive);
  color:#fff!important;
  font-weight:700;
  text-decoration:none!important;
  transition:transform .14s ease,box-shadow .14s ease;
}

.mecha-action:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(0,0,0,.10);
}

/* Hero button icons — always white */
.mecha-action::before{
  content:"";
  width:18px;
  height:18px;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  filter:brightness(0) invert(1);
}

.mecha-action--discord::before{background-image:url("https://cdn.simpleicons.org/discord");}
.mecha-action--matrix::before{background-image:url("https://cdn.simpleicons.org/matrix");}
.mecha-action--website::before{background-image:url("https://cdn.simpleicons.org/firefoxbrowser");}
.mecha-action--forums::before{background-image:url("https://cdn.simpleicons.org/discourse");}

/* =========================================
   GRID + CARD SYSTEM
   ========================================= */

.mecha-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin-top:26px;
  align-items:stretch;
}

.mecha-card{
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
  border-radius:18px;
  padding:18px;
  height:100%;
}

.mecha-cardTitle{
  margin:0;
  font-size:20px;
  font-weight:800;
}

.mecha-cardDesc{
  margin:8px 0 0;
  color:var(--color-base-subtle);
  font-size:14px;
}

/* =========================================
   LIST ITEMS
   ========================================= */

.mecha-list{
  margin-top:14px;
  display:grid;
  gap:10px;
}

.mecha-listItem{
  background:var(--color-surface-1);
  border:1px solid var(--color-border);
  border-radius:12px;
  padding:12px;
  text-decoration:none!important;
  font-weight:650;
  display:flex;
  align-items:center;
  gap:10px;
}

.mecha-listItem:hover{
  background:var(--color-progressive-subtle);
  border-color:var(--color-progressive);
}

/* =========================================
   ECOSYSTEM TILES
   ========================================= */

.mecha-ecosystem{
  margin-top:14px;
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

.mecha-tile{
  background:var(--color-surface-1);
  border:1px solid var(--color-border);
  border-radius:12px;
  padding:12px;
  text-decoration:none!important;
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:650;
}

.mecha-tile:hover{
  background:var(--color-progressive-subtle);
  border-color:var(--color-progressive);
}

.mecha-tileTitle{font-weight:800;}
.mecha-tileDesc{
  color:var(--color-base-subtle);
  font-size:13px;
}

/* =========================================
   STATS
   ========================================= */

.mecha-stats{
  margin-top:14px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.mecha-stat{
  background:var(--color-surface-1);
  border:1px solid var(--color-border);
  border-radius:12px;
  padding:10px 12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.mecha-stat span{
  color:var(--color-base-subtle);
  font-size:13px;
}

.mecha-stat b{
  font-size:14px;
}

/* =========================================
   ICON SYSTEM — MONOCHROME + DARK MODE
   ========================================= */

.mecha-i::before{
  content:"";
  width:18px;
  height:18px;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  display:inline-block;
  flex:0 0 auto;
  filter:brightness(0);
}

/* Dark mode icon inversion */
.skin-theme-clientpref-night .mecha-i::before{
  filter:brightness(0) invert(1);
}

/* Icon sources */
.mecha-i--rocket::before{background-image:url("https://cdn.jsdelivr.net/npm/@tabler/icons@latest/icons/outline/rocket.svg");}
.mecha-i--code::before{background-image:url("https://cdn.jsdelivr.net/npm/@tabler/icons@latest/icons/outline/code.svg");}
.mecha-i--book::before{background-image:url("https://cdn.jsdelivr.net/npm/@tabler/icons@latest/icons/outline/book.svg");}
.mecha-i--chip::before{background-image:url("https://cdn.jsdelivr.net/npm/@tabler/icons@latest/icons/outline/cpu.svg");}
.mecha-i--puzzle::before{background-image:url("https://cdn.jsdelivr.net/npm/@tabler/icons@latest/icons/outline/puzzle.svg");}
.mecha-i--linux::before{background-image:url("https://cdn.simpleicons.org/linux");}
.mecha-i--flutter::before{background-image:url("https://cdn.simpleicons.org/flutter");}
.mecha-i--box::before{background-image:url("https://cdn.simpleicons.org/docker");}
.mecha-i--github::before{background-image:url("https://cdn.simpleicons.org/github");}
.mecha-i--arch::before{background-image:url("https://cdn.simpleicons.org/archlinux");}
.mecha-i--discord::before{background-image:url("https://cdn.simpleicons.org/discord");}
.mecha-i--matrix::before{background-image:url("https://cdn.simpleicons.org/matrix");}

/* =========================================
   MOBILE
   ========================================= */

@media(max-width:980px){
.mecha-grid{grid-template-columns:1fr;}
.mecha-ecosystem{grid-template-columns:1fr;}
}

@media(max-width:650px){
.mecha-title{font-size:24px;}
.mecha-action{width:100%;justify-content:center;}
.mecha-home{padding:10px 12px 26px;}
}

/* =========================================
   FEATURED APP ICONS
   ========================================= */

.mecha-appGrid {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.mecha-app {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 12px;
  text-decoration: none !important;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.mecha-app:hover {
  background: var(--color-progressive-subtle);
  border-color: var(--color-progressive);
  transform: translateY(-1px);
}

.mecha-appIcon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}

.mecha-appInfo {
  flex: 1;
  min-width: 0;
}

.mecha-appName {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
}

.mecha-appMeta {
  font-size: 13px;
  color: var(--color-base-subtle);
  line-height: 1.2;
}

.mecha-appButton {
  font-size: 13px;
  font-weight: 600;
  background: var(--color-progressive);
  color: #fff;
  padding: 6px 12px;
  border-radius: 8px;
  flex-shrink: 0;
}

/* =========================================
   KICKSTARTER BANNER - TEMP
   ========================================= */

.mecha-kickstarter{
  border:1px solid #05ce78;
  background:linear-gradient(135deg,rgba(5,206,120,.12),rgba(5,206,120,.04));
}

.mecha-kickstarter-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
}

.mecha-kickstarter-button{
  background:#05ce78;
  color:#000!important;
  padding:10px 16px;
  border-radius:10px;
  font-weight:bold;
  text-decoration:none;
}

@media(max-width:650px){

.mecha-kickstarter-inner{
  flex-direction:column;
  align-items:flex-start;
}

.mecha-kickstarter-button{
  width:100%;
  text-align:center;
}

}


/* =========================================
   EXTENSION OF THE WEEK
   ========================================= */

.mecha-extensionGrid {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mecha-extension {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  text-decoration: none !important;
  transition: transform 140ms ease, border-color 140ms ease;
}

.mecha-extension:hover {
  transform: translateY(-2px);
  border-color: var(--color-progressive);
}

.mecha-extension-image {
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: 10px;
  background: var(--color-surface-2);
  padding: 4px;
}

.mecha-extension-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mecha-extension-name {
  font-weight: 800;
  font-size: 16px;
  color: var(--color-progressive);
}

.mecha-extension-features {
  font-size: 13px;
  color: var(--color-base-subtle);
  line-height: 1.4;
}

/* =========================================
   PAGE HEADING CARD
   ========================================= */

.mecha-card-pageHeadingCard{
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:18px;
    padding:18px;
}

.mecha-card-pageHeadingCard .mecha-card-icon{
    flex-shrink:0;
    display:flex;
    align-items:center;
}

.mecha-card-pageHeadingCard .mecha-card-icon img{
    width:120px;
    height:auto;
    display:block;
    border-radius:12px;
}

.mecha-card-pageHeadingCard .mecha-card-content{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.mecha-card-pageHeadingCard .mecha-card-title,
.mecha-card-pageHeadingCard h1,
.mecha-card-pageHeadingCard h2{
    margin:0 0 6px 0!important;
    line-height:1.25;
}

.mecha-card-pageHeadingCard .mecha-card-description{
    margin:0;
}

@media(max-width:700px){
    .mecha-card-pageHeadingCard{
        flex-direction:column;
        align-items:flex-start;
    }
    .mecha-card-pageHeadingCard .mecha-card-icon img{
        width:100%;
        max-width:180px;
    }
}

/* =========================================
   GLOBAL BUTTONS - See Template:MechaButton and Template:MechaButtons
   ========================================= */

.mecha-button{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 14px;
    border-radius:10px;
    background:var(--color-progressive);
    color:#fff!important;
    font-weight:700;
    text-decoration:none!important;
    line-height:1;
    min-height:38px;
}
.mecha-button a{
    color:inherit!important;
    text-decoration:none!important;
    display:inline-flex;
    align-items:center;
    line-height:1;
}
.mecha-button-secondary{
    background:var(--color-surface-2);
    border:1px solid var(--color-border);
    color:var(--color-base)!important;
}
.mecha-buttons{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:center;
}
.mecha-buttons > p{
    margin:0!important;
    padding:0!important;
    display:contents;
}

/* =========================================
   HEADER BOX — COMPLETE FIX
   ========================================= */

.mecha-card-pageHeadingCard{
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:18px;
    padding:28px;
    background:var(--color-surface-2);
    border-radius:20px;
    width:100%;
    box-sizing:border-box;
}

/* ICON CONTAINER */
.mecha-card-pageHeadingCard .mecha-card-icon{
    flex:0 0 120px;
    width:120px;
    height:120px;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* MEDIAWIKI WRAPPER FIX */
.mecha-card-pageHeadingCard .mecha-card-icon .mw-element-file,
.mecha-card-pageHeadingCard .mecha-card-icon .mw-file-element{
    width:120px!important;
    max-width:none!important;
}

/* IMAGE */
.mecha-card-pageHeadingCard .mecha-card-icon img{
    width:120px!important;
    height:auto!important;
    max-width:none!important;
    display:block;
    border-radius:12px;
}

/* CONTENT */
.mecha-card-pageHeadingCard .mecha-card-content{
    flex:1 1 auto;
    min-width:0;
    width:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

/* TITLE */
.mecha-card-pageHeadingCard .mecha-card-title{
    margin:0 0 6px 0!important;
    font-size:32px;
    font-weight:700;
    line-height:1.25;
    width:100%;
}

/* DESCRIPTION */
.mecha-card-pageHeadingCard .mecha-card-description{
    margin:0;
    font-size:16px;
    line-height:1.5;
    width:100%;
    max-width:none!important;
}

/* MOBILE */
@media(max-width:700px){
    .mecha-card-pageHeadingCard{
        flex-direction:column;
        align-items:flex-start;
        background:var(--color-surface-2);
    }
    .mecha-card-pageHeadingCard .mecha-card-icon{
        width:100%;
        height:auto;
    }
    .mecha-card-pageHeadingCard .mecha-card-icon img{
        width:100%;
        max-width:180px!important;
    }
}
/* =========================================
   CODE BLOCK STYLING - Using <pre> tag
   ========================================= */

.mecha-code{
    background:#0d1117;
    border-radius:10px;
    padding:14px;
    font-family:monospace;
    font-size:13px;
    overflow:auto;
}

pre{
    background:var(--color-surface-1);
    border:1px solid var(--color-border);
    border-radius:12px;
    padding:14px;
    font-size:13px;
    overflow:auto;
}


/* =========================================
   TABBER — CITIZEN / MECHA STYLE
   ========================================= */

.tabber{margin-top:12px;}
.tabbernav{border-bottom:1px solid var(--border-color-base);padding:0;margin:0;}
.tabbernav ul{list-style:none;margin:0;padding:0;display:flex;gap:6px;}
.tabbernav li{margin:0;padding:0;}
.tabbernav-tab{display:inline-block;padding:8px 16px;cursor:pointer;background:var(--color-surface-2);color:var(--color-base);border-radius:var(--border-radius-medium);border:none;transition:background .15s ease,color .15s ease;}
.tabbernav-tab:hover{background:var(--color-surface-3);}
.tabbernav-tab-active{background:var(--color-primary)!important;color:var(--color-primary-text)!important;}
.tabbernav-tab a{color:inherit!important;text-decoration:none!important;}
.tabbertab{background:none!important;border:none!important;padding-top:16px!important;margin:0!important;}
.tabberlive .tabbertab{border:none!important;}
.tabberlive{padding:0!important;margin:0!important;}
.skin-citizen-dark .tabbernav-tab{background:var(--color-surface-2);}
.skin-citizen-dark .tabbernav-tab-active{background:var(--color-primary);color:var(--color-primary-text);}

/* =========================================
   DPL4 Extensions Lists
   ========================================= */

.mecha-ext-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin-top:20px;}
.mecha-ext-card{background:var(--color-surface-1);border-radius:var(--border-radius-large);padding:20px;transition:transform .15s ease;}
.mecha-ext-card:hover{transform:translateY(-3px);}
.mecha-ext-icon{width:64px;border-radius:12px;margin-bottom:10px;}