MediaWiki:Common.css

From Practices and Politics of Representation
Revision as of 18:03, 1 December 2025 by Admin (talk | contribs)
Jump to navigation Jump to search

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/************************************************************
 * CLEAN MINIMAL THEME — FULL RGB, RESPONSIVE, NO GRADIENTS
 ************************************************************/


/*----------------------------------------------------------
  0. GLOBAL RESET / CLEANUP
----------------------------------------------------------*/

.mw-wiki-logo,
.mw-logo,
.mw-logo-icon,
.mw-logo-wordmark,
.vector-logo,
#p-logo,
#p-logo a,
.mw-logo-container {
    display: none !important;
    visibility: hidden !important;
}

html {
    font-size: 18px !important; /* bigger text globally */
}

body, h1, h2, h3, h4, h5, h6, p, div, span, a, li, td, th,
input, textarea, select, button {
    font-family: Arial, sans-serif !important;
    color: rgb(30, 30, 30) !important;
    line-height: 1.62 !important;
    background: transparent !important;
}

body {
    background: #ffffff !important;
}

/* Remove shadows everywhere */
.portlet, .pBody, #content, #column-content, #column-one,
.portlet h3, .portlet h5, .gallerybox,
.thumb, .thumbinner, .infobox, table, #footer,
#p-cactions, .vector-menu-tabs {
    box-shadow: none !important;
    text-shadow: none !important;
}


/*----------------------------------------------------------
  REMOVE ALL HEADER / TOP SHADOWS
----------------------------------------------------------*/

#mw-head,
#mw-head-base,
#mw-page-base,
.vector-header,
.vector-sticky-header,
.vector-container,
.mw-header {
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    filter: none !important;

    display: flex !important;
    align-items: center !important;
    min-height: 56px !important;
}


/************************************************************
 * SAFARI + HEADER ALIGNMENT FIX
 ************************************************************/

#left-navigation,
.vector-page-toolbar {
    display: flex !important;
    align-items: center !important;
}

#right-navigation {
    display: flex !important;
    align-items: center !important;
    margin-left: auto !important;
}

#p-namespaces li a,
#p-views li a,
#p-cactions li a,
#p-personal ul li a {
    display: flex !important;
    align-items: center !important;
    height: 36px !important;
}

#p-search,
#simpleSearch {
    display: flex !important;
    align-items: center !important;
}

#searchInput {
    height: 28px !important;
    width: 140px !important;
    padding: 4px 6px !important;
    font-size: 0.95rem !important;
}

#simpleSearch {
    transform: scale(0.85);
    transform-origin: right center;
}



/************************************************************
 * REMOVE TAB UNDERLINES + CLEAN TOP BAR
 ************************************************************/

/* Remove all borders below tabs */
#p-namespaces,
#p-views,
#p-cactions,
#left-navigation,
#right-navigation,
.vector-tabs,
.vector-menu-tabs {
    border: none !important;
    background: none !important;
    box-shadow: none !important;
}

/* Remove blue underline for selected tab */
#p-namespaces li.selected a::after,
#p-views li.selected a::after,
.vector-menu-tabs li.selected a::after {
    content: none !important;
}

/* Remove leftover gray bar in Vector */
#mw-head-base,
#mw-page-base {
    border-bottom: none !important;
    box-shadow: none !important;
}


/************************************************************
 * 1. SIDEBAR LAYOUT
 ************************************************************/

#column-one {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    background: none !important;
}

#mw-panel, .vector-legacy-sidebar {
    background: none !important;
}

#p-navigation {
    order: 999 !important;
    margin-top: auto !important;
    padding-top: 60px !important;
    border-top: 1px solid #eee !important;
}

.portlet h3, .portlet h5 {
    color: rgb(20,20,20) !important;
    font-weight: bold !important;
    background: none !important;
}

.portlet .pBody ul li a {
    color: rgb(0,102,255) !important;
    text-decoration: none !important;
}
.portlet .pBody ul li a:hover {
    color: rgb(0,51,204) !important;
    text-decoration: underline !important;
}



/************************************************************
 * 2. TOP TABS / PERSONAL MENU
 ************************************************************/

#p-cactions, #p-namespaces, #p-views, #p-personal {
    background: none !important;
    border: none !important;
}

#p-cactions li, #p-namespaces li, #p-views li {
    margin-right: 10px !important;
}

#p-cactions li a, #p-namespaces li a, #p-views li a {
    background: none !important;
    padding: 8px 15px !important;
    color: rgb(0,102,255) !important;
}

#p-cactions li.selected a,
#p-namespaces li.selected a,
#p-views li.selected a {
    color: rgb(20,20,20) !important;
    font-weight: bold !important;
}

#p-cactions li a:hover,
#p-namespaces li a:hover,
#p-views li a:hover {
    background: rgb(240,240,240) !important;
    color: rgb(0,51,204) !important;
}



/************************************************************
 * 3. CONTENT AREA
 ************************************************************/

#content, .mw-body, .mw-body-content {
    background: none !important;
    border: none !important;
}

#content {
    background: #ffffff !important;
    border: 1px solid #ddd !important;
    border-top: none !important;
    margin-top: 24px !important; /* extra spacing from header */
}

/* Headings scaled clean */
h1 { font-size: 2rem !important; }
h2 { font-size: 1.6rem !important; }
h3 { font-size: 1.35rem !important; }
h4 { font-size: 1.15rem !important; }
h5 { font-size: 1rem !important; }
h6 { font-size: 0.9rem !important; }

h1, h2, h3, h4, h5, h6, .firstHeading {
    border-bottom: none !important;
    color: rgb(20,20,20) !important;
}


/* Edit links */
.mw-editsection a {
    color: rgb(0,102,255) !important;
}
.mw-editsection a:hover {
    color: rgb(0,51,204) !important;
    text-decoration: underline !important;
}



/************************************************************
 * 4. RESPONSIVE CONTENT WIDTH
 ************************************************************/

.mw-body-content,
#content,
#mw-content-text {
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Tablet */
@media (max-width: 1100px) {
    .mw-body-content,
    #content,
    #mw-content-text {
        max-width: 90% !important;
    }
}

/* Mobile */
@media (max-width: 700px) {
    .mw-body-content,
    #content,
    #mw-content-text {
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}



/************************************************************
 * 5. IMAGES / GALLERIES
 ************************************************************/

.gallerybox,
.gallerybox .thumb,
.thumb,
.thumbinner {
    background: none !important;
    border: none !important;
}

.gallerybox {
    width: 200px !important;
    margin: 15px !important;
}

.gallerybox .thumb img {
    width: 200px !important;
    height: auto !important;
}

.gallerytext, .thumbcaption {
    color: rgb(110,110,110) !important;
}



/************************************************************
 * 6. TABLES
 ************************************************************/

table {
    border-collapse: collapse !important;
    background: none !important;
}
table th, table td {
    border: 1px solid #ddd !important;
    padding: 6px !important;
}
table th {
    font-weight: bold !important;
    color: rgb(20,20,20) !important;
}



/************************************************************
 * 7. INFOBOX
 ************************************************************/

.infobox {
    background: none !important;
    border-left: 3px solid rgb(0,180,255) !important;
    padding: 15px !important;
    margin: 0 0 20px 20px !important;
}

.infobox th, .infobox td {
    border-bottom: 1px solid #eee !important;
    padding: 8px 0 !important;
}

.infobox tr:last-child th,
.infobox tr:last-child td {
    border-bottom: none !important;
}



/************************************************************
 * 8. FORMS
 ************************************************************/

input, textarea, select {
    border: 1px solid #ccc !important;
    background: #ffffff !important;
    border-radius: 0 !important;
}



/************************************************************
 * 9. FOOTER / META
 ************************************************************/

#footer, #catlinks {
    background: none !important;
    border-top: 1px solid #eee !important;
    color: rgb(110,110,110) !important;
}
/************************************************************
 * TOP BAR + EDIT TOOLBAR FIXES (Vector / Vector-2022 safe)
 ************************************************************/

/* 1. Header yapısını doğal flow'a döndür (flex sorununu kaldır) */
#mw-head,
#mw-head-base,
#mw-page-base,
.vector-header,
.vector-sticky-header,
.mw-header {
    display: block !important;   /* flex'i kaldır */
    background: #ffffff !important;
    box-shadow: none !important;
    border: none !important;
    min-height: auto !important;
    padding: 0 !important;
}

/* 2. Üst sekme menüsünü hizala, boşlukları düzelt */
#left-navigation,
#right-navigation {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Sekme listeleri satır yüksekliği */
#p-namespaces ul,
#p-views ul,
#p-cactions ul {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
}

/* 3. TABLAR ile CONTENT arasına doğru boşluk */
#content {
    margin-top: 12px !important; /* 24 çoktu, 12 ideal */
}

/* 4. EDIT MODE (ve edit toolbar) hizalama fix */
#mw-content-text .mw-editform {
    margin-top: 0 !important;
}

/* Editortoolbar (Paragraph / Cite / Insert…) yukarı yapışsın */
#wikiEditor-ui-toolbar {
    margin-top: 4px !important;
    border-top: 1px solid #e6e6e6 !important;
}

/* Edit modu açılınca üstteki gereksiz boşlukları sil */
.mw-editsection,
.mw-indicators {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 5. Editor textarea genişlik ve hizalama düzeltmesi */
#wpTextbox1 {
    max-width: 100% !important;
    width: 100% !important;
    margin-top: 0 !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    font-family: monospace;
    font-size: 15px;
    line-height: 1.5;
}

/* 6. Edit mode üst barı normal hizaya getir */
#content.mw-body {
    padding-top: 0 !important;
}

/* 7. Vector toolbar’ın çizgisini gizle (temiz görünüm) */
#mw-head-base {
    border-bottom: none !important;
}

/* 8. Save changes / Preview / Buttons düzgün hizalansın */
#editform .mw-editform-buttons {
    display: flex !important;
    gap: 12px !important;
    margin-top: 10px !important;
}

/* 9. Preview paneli çok içte görünmesin */
#wikiPreview, #wikiDiff {
    padding: 1rem;
    margin-top: 1rem !important;
    border: 1px solid #ddd;
}

/* 10. VisualEditor (VE) açıkken toolbar taşmasın */
.ve-init-mw-desktopArticleTarget-toolbar {
    border-bottom: 1px solid #eee !important;
    padding-bottom: 6px !important;
}
Retrieved from "https://www.uni-weimar.de/projekte/representation/index.php?title=MediaWiki:Common.css&oldid=498"