MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
No edit summary Tag: Reverted |
No edit summary Tag: Reverted |
||
| Line 1: | Line 1: | ||
/************************************************************ | /************************************************************ | ||
* CLEAN MINIMAL THEME — BLACK & WHITE ONLY | * CLEAN MINIMAL THEME — BLACK & WHITE ONLY | ||
************************************************************/ | ************************************************************/ | ||
| Line 23: | Line 22: | ||
html { | html { | ||
font-size: 18px !important; | font-size: 18px !important; | ||
-webkit-text-size-adjust: 100% !important; | |||
} | } | ||
body, h1, h2, h3, h4, h5, h6, p | body, h1, h2, h3, h4, h5, h6, p, td, th, | ||
input, textarea, select, button { | input, textarea, select, button { | ||
font-family: | font-family: 'Times New Roman', Times, serif !important; | ||
color: rgb(0, 0, 0) !important; | color: rgb(0, 0, 0) !important; | ||
line-height: 1. | line-height: 1.2 !important; | ||
} | } | ||
body { | body { | ||
background: rgb(255, 255, 255) !important; | background: rgb(255, 255, 255) !important; | ||
-webkit-text-size-adjust: 100% !important; | |||
} | |||
a, a:visited { | |||
color: rgb(0, 0, 255) !important; | |||
line-height: 1 !important; | |||
} | |||
a:hover { | |||
color: rgb(0, 0, 255) !important; | |||
text-decoration: underline !important; | |||
} | } | ||
| Line 47: | Line 58: | ||
} | } | ||
/* Images*/ | |||
.mw-body-content img, | |||
.mw-body-content figure, | |||
.mw-body-content .thumb { | |||
width: auto !important; | |||
height: auto !important; | |||
padding-left: 0px !important; | |||
} | |||
/*---------------------------------------------------------- | /*---------------------------------------------------------- | ||
| Line 63: | Line 82: | ||
/* Üst menüyü content ile hizala */ | /* Üst menüyü content ile hizala */ | ||
#left-navigation { | #left-navigation { | ||
/* margin-left: 10em !important;*/ | |||
} | } | ||
/* Login kısmını içeri al */ | /* Login kısmını içeri al */ | ||
#p-personal { | #p-personal { | ||
/* margin-right: 1em !important; */ | |||
} | } | ||
#right-navigation { | #right-navigation { | ||
/* margin-right: 1em !important; */ | |||
} | } | ||
| Line 83: | Line 102: | ||
#mw-panel, | #mw-panel, | ||
.vector-legacy-sidebar { | .vector-legacy-sidebar { | ||
background: | background: transparent !important; | ||
padding-top: 5em !important; | padding-top: 5em !important; | ||
margin-top: 0 !important; | margin-top: 0 !important; | ||
width: 250px !important; | |||
} | } | ||
| Line 98: | Line 118: | ||
} | } | ||
/* Tools gizle */ | /* Tools gizle */ | ||
| Line 112: | Line 124: | ||
} | } | ||
/* Sidebar links */ | |||
#mw-panel a, | |||
#mw-panel a:visited, | |||
.vector-legacy-sidebar a, | |||
.portlet a, | |||
.pBody a { | |||
color: rgb(0, 0, 255) !important; | |||
text-decoration: none !important; | |||
font-size: 20px !important; | |||
-webkit-text-size-adjust: 100% !important; | |||
} | |||
#mw-panel a:hover, | |||
.vector-legacy-sidebar a:hover, | |||
.portlet a:hover, | |||
.pBody a:hover { | |||
text-decoration: underline !important; | |||
} | |||
/*---------------------------------------------------------- | /*---------------------------------------------------------- | ||
| Line 122: | Line 152: | ||
.vector-tabs, | .vector-tabs, | ||
.vector-menu-tabs { | .vector-menu-tabs { | ||
background: | background: transparent !important; | ||
border: none !important; | |||
box-shadow: none !important; | |||
} | } | ||
| Line 131: | Line 163: | ||
} | } | ||
#p-namespaces li.selected a, | #p-namespaces li.selected a, | ||
| Line 154: | Line 181: | ||
.vector-menu-tabs li.selected a::after { | .vector-menu-tabs li.selected a::after { | ||
display: none !important; | display: none !important; | ||
background: transparent !important; | |||
border: none !important; | |||
box-shadow: none !important; | |||
} | } | ||
/*Menu tabs*/ | |||
.vector-menu-tabs-legacy li a { | |||
background: transparent !important; | |||
background-image: none !important; | |||
border: none !important; | |||
color: rgb(0, 0, 255) !important; | |||
} | |||
.vector-menu-tabs-legacy li { | |||
background: transparent !important; | |||
border: none !important; | |||
} | |||
/*---------------------------------------------------------- | /*---------------------------------------------------------- | ||
| Line 169: | Line 212: | ||
} | } | ||
| Line 183: | Line 219: | ||
----------------------------------------------------------*/ | ----------------------------------------------------------*/ | ||
# | #content { | ||
background: rgb(255, 255, 255) !important; | background: rgb(255, 255, 255) !important; | ||
font-size: 38px !important; | |||
margin-left: 250px !important; | |||
} | |||
.mw-body, .mw-body-content { | |||
background: rgb(255, 255, 255) !important; | |||
font-size: 38px !important; | |||
} | } | ||
| Line 192: | Line 235: | ||
} | } | ||
h1 { font-size: | h1 { font-size: 50px !important; } | ||
h2 { font-size: | h2 { font-size: 42px !important; } | ||
h3 { font-size: | h3 { font-size: 47px !important; } | ||
h4 { font-size: | h4 { font-size: 43px !important; } | ||
/* Links */ | /* Links */ | ||
a, a:visited | a, a:visited { | ||
color: rgb(0, 0, | color: rgb(0, 0, 255) !important; | ||
} | } | ||
a:hover { | a:hover { | ||
color: rgb(0, 0, 255) !important; | |||
text-decoration: underline !important; | text-decoration: underline !important; | ||
} | } | ||
| Line 263: | Line 307: | ||
} | } | ||
| Line 317: | Line 359: | ||
.vector-dropdown-content, | .vector-dropdown-content, | ||
#p-cactions .vector-menu-content { | #p-cactions .vector-menu-content { | ||
background: | background: transparent !important; | ||
border: none !important; | |||
box-shadow: none !important; | |||
} | } | ||
. | |||
/*---------------------------------------------------------- | |||
13. FORMS | |||
----------------------------------------------------------*/ | |||
input, textarea, select { | |||
background: rgb(255, 255, 255) !important; | background: rgb(255, 255, 255) !important; | ||
color: rgb(0, 0, 0) !important; | color: rgb(0, 0, 0) !important; | ||
} | } | ||
. | .hover-word { | ||
position: relative; | |||
text-decoration: underline dotted; | |||
cursor: help; | |||
} | |||
.hover-word .hover-pop { | |||
position: absolute; | |||
bottom: 100%; | |||
left: 0; | |||
display: none; | |||
z-index: 100; | |||
} | |||
.hover-word:hover .hover-pop { | |||
display: block; | |||
} | |||
/* ============================================================ | |||
/* ============================================================ | |||
14. ALIGN TOP TABS + FOOTER WITH THE HEADING | |||
The sidebar is 250px wide, so the heading/body sit to its | |||
right (the large content font adds extra left padding, so the | |||
heading text starts around 305px). By default the top tabs | |||
("Page" / "Discussion") and the footer don't follow, so they | |||
look misaligned. These rules push both to the heading's edge. | |||
NOTE: #left-navigation ignores the `left` property (it is | |||
floated), so we must use margin-left here, not left. | |||
>>> ONE KNOB: tune --rep-left until "Page" and the footer | |||
line up with the first letter of the heading. | |||
============================================================ */ | |||
:root { | |||
--rep-left: 305px; | |||
} | |||
/* Top-left tabs (Page / Discussion) */ | |||
#left-navigation { | |||
margin-left: var(--rep-left) !important; | |||
} | |||
/* Let "Page" sit flush at the column edge (remove tab indent) */ | |||
#p-namespaces li:first-child { | |||
margin-left: 0 !important; | |||
} | |||
#p-namespaces li:first-child a { | |||
padding-left: 0 !important; | |||
} | |||
/* Footer text block */ | |||
#footer { | |||
margin-left: var(--rep-left) !important; | |||
padding-left: 0 !important; | |||
} | |||
/* ============================================================ | |||
15. EDITOR INTERFACE FIX | |||
The large content font (38px) was leaking into the editor | |||
toolbar and menus. These rules reset the editor UI to a | |||
normal size. The reading view is not affected. | |||
============================================================ */ | |||
/* VisualEditor + OOUI: toolbar, menus, popups, dialogs */ | |||
.ve-ui-toolbar, | |||
.ve-ui-context, | |||
.ve-ui-contextSelectWidget, | |||
.oo-ui-toolbar, | |||
.oo-ui-popupWidget, | |||
.oo-ui-popupWidget-popup, | |||
.oo-ui-menuSelectWidget, | |||
.oo-ui-window, | |||
.oo-ui-dialog, | |||
.oo-ui-defaultOverlay { | |||
font-size: 14px !important; | |||
line-height: normal !important; | |||
} | |||
/* Classic (source) editor toolbar */ | |||
.wikiEditor-ui-toolbar { | |||
font-size: 14px !important; | |||
line-height: normal !important; | |||
} | } | ||
/* Source editing textarea stays readable */ | |||
#wpTextbox1 { | |||
font-size: 15px !important; | |||
line-height: 1.5 !important; | |||
} | |||
/*----- | /* Give popups/menus a visible border | ||
(the "white border" rule had made them invisible) */ | |||
.oo-ui-popupWidget-popup, | |||
.oo-ui-menuSelectWidget { | |||
border: 1px solid rgb(0, 0, 0) !important; | |||
} | |||
/* Editor labels in black instead of blue */ | |||
.oo-ui-tool .oo-ui-tool-title, | |||
.oo-ui-labelElement-label, | |||
.ve-ui-toolbar a, | |||
.oo-ui-popupWidget a { | |||
color: rgb(0, 0, 0) !important; | color: rgb(0, 0, 0) !important; | ||
} | } | ||
Revision as of 08:12, 20 July 2026
/************************************************************
* CLEAN MINIMAL THEME — BLACK & WHITE ONLY
************************************************************/
/*----------------------------------------------------------
0. GLOBAL RESET
----------------------------------------------------------*/
.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;
-webkit-text-size-adjust: 100% !important;
}
body, h1, h2, h3, h4, h5, h6, p, td, th,
input, textarea, select, button {
font-family: 'Times New Roman', Times, serif !important;
color: rgb(0, 0, 0) !important;
line-height: 1.2 !important;
}
body {
background: rgb(255, 255, 255) !important;
-webkit-text-size-adjust: 100% !important;
}
a, a:visited {
color: rgb(0, 0, 255) !important;
line-height: 1 !important;
}
a:hover {
color: rgb(0, 0, 255) !important;
text-decoration: underline !important;
}
/* Shadow kaldır */
* {
box-shadow: none !important;
text-shadow: none !important;
}
/* Tüm borderları beyaz yap (görünmez) */
*:not(img) {
border-color: rgb(255, 255, 255) !important;
}
/* Images*/
.mw-body-content img,
.mw-body-content figure,
.mw-body-content .thumb {
width: auto !important;
height: auto !important;
padding-left: 0px !important;
}
/*----------------------------------------------------------
1. HEADER
----------------------------------------------------------*/
#mw-head,
#mw-head-base,
#mw-page-base,
.vector-header,
.vector-sticky-header,
.mw-header {
background: rgb(255, 255, 255) !important;
}
/* Üst menüyü content ile hizala */
#left-navigation {
/* margin-left: 10em !important;*/
}
/* Login kısmını içeri al */
#p-personal {
/* margin-right: 1em !important; */
}
#right-navigation {
/* margin-right: 1em !important; */
}
/*----------------------------------------------------------
2. SIDEBAR
----------------------------------------------------------*/
#column-one,
#mw-panel,
.vector-legacy-sidebar {
background: transparent !important;
padding-top: 5em !important;
margin-top: 0 !important;
width: 250px !important;
}
.portlet, .pBody {
background: rgb(255, 255, 255) !important;
}
.portlet h3, .portlet h5 {
color: rgb(0, 0, 0) !important;
font-weight: bold !important;
background: rgb(255, 255, 255) !important;
}
/* Tools gizle */
#p-tb {
display: none !important;
}
/* Sidebar links */
#mw-panel a,
#mw-panel a:visited,
.vector-legacy-sidebar a,
.portlet a,
.pBody a {
color: rgb(0, 0, 255) !important;
text-decoration: none !important;
font-size: 20px !important;
-webkit-text-size-adjust: 100% !important;
}
#mw-panel a:hover,
.vector-legacy-sidebar a:hover,
.portlet a:hover,
.pBody a:hover {
text-decoration: underline !important;
}
/*----------------------------------------------------------
3. TABS
----------------------------------------------------------*/
#p-namespaces,
#p-views,
#p-cactions,
.vector-tabs,
.vector-menu-tabs {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
#p-namespaces ul,
#p-views ul,
#p-cactions ul {
background: rgb(255, 255, 255) !important;
}
#p-namespaces li.selected a,
#p-views li.selected a {
font-weight: bold !important;
}
#p-namespaces li a:hover,
#p-views li a:hover,
#p-cactions li a:hover {
background: rgb(240, 240, 240) !important;
}
/* Tab underline kaldır */
#p-namespaces li.selected a::after,
#p-views li.selected a::after,
.vector-menu-tabs li.selected a::after {
display: none !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/*Menu tabs*/
.vector-menu-tabs-legacy li a {
background: transparent !important;
background-image: none !important;
border: none !important;
color: rgb(0, 0, 255) !important;
}
.vector-menu-tabs-legacy li {
background: transparent !important;
border: none !important;
}
/*----------------------------------------------------------
4. PERSONAL MENU (Login vs)
----------------------------------------------------------*/
#p-personal {
background: rgb(255, 255, 255) !important;
}
#p-personal ul {
background: rgb(255, 255, 255) !important;
}
/*----------------------------------------------------------
5. CONTENT
----------------------------------------------------------*/
#content {
background: rgb(255, 255, 255) !important;
font-size: 38px !important;
margin-left: 250px !important;
}
.mw-body, .mw-body-content {
background: rgb(255, 255, 255) !important;
font-size: 38px !important;
}
/* Headings */
h1, h2, h3, h4, h5, h6, .firstHeading {
color: rgb(0, 0, 0) !important;
}
h1 { font-size: 50px !important; }
h2 { font-size: 42px !important; }
h3 { font-size: 47px !important; }
h4 { font-size: 43px !important; }
/* Links */
a, a:visited {
color: rgb(0, 0, 255) !important;
}
a:hover {
color: rgb(0, 0, 255) !important;
text-decoration: underline !important;
}
/*----------------------------------------------------------
6. SEARCH
----------------------------------------------------------*/
#p-search,
#simpleSearch,
#searchInput {
background: rgb(255, 255, 255) !important;
}
/*----------------------------------------------------------
7. TABLES
----------------------------------------------------------*/
table, th, td {
background: rgb(255, 255, 255) !important;
}
/*----------------------------------------------------------
8. IMAGES
----------------------------------------------------------*/
.thumb,
.thumbinner,
.thumbimage,
.gallerybox,
figure,
figcaption {
background: transparent !important;
}
.thumbcaption, .gallerytext {
color: rgb(0, 0, 0) !important;
}
/*----------------------------------------------------------
9. INFOBOX
----------------------------------------------------------*/
.infobox, .infobox th, .infobox td {
background: rgb(255, 255, 255) !important;
}
/*----------------------------------------------------------
10. FOOTER
----------------------------------------------------------*/
#footer, #catlinks {
background: rgb(255, 255, 255) !important;
color: rgb(0, 0, 0) !important;
}
/*----------------------------------------------------------
11. VISUAL EDITOR
----------------------------------------------------------*/
.ve-ui-toolbar,
.ve-ui-toolbar-bar,
.oo-ui-toolbar,
.oo-ui-toolbar-bar,
.oo-ui-toolGroup,
.oo-ui-tool,
.oo-ui-buttonElement-button {
background: rgb(255, 255, 255) !important;
}
.oo-ui-tool:hover,
.oo-ui-buttonElement-button:hover {
background: rgb(240, 240, 240) !important;
}
.oo-ui-menuSelectWidget,
.oo-ui-popupWidget-popup,
.oo-ui-optionWidget,
.oo-ui-menuOptionWidget {
background: rgb(255, 255, 255) !important;
color: rgb(0, 0, 0) !important;
}
.oo-ui-optionWidget:hover {
background: rgb(240, 240, 240) !important;
}
.ve-ui-surface,
.ve-ce-surface {
background: rgb(255, 255, 255) !important;
}
.wikiEditor-ui,
.wikiEditor-ui-toolbar {
background: rgb(255, 255, 255) !important;
}
/*----------------------------------------------------------
12. DROPDOWN MENÜLER
----------------------------------------------------------*/
.vector-menu-dropdown .vector-menu-content,
.vector-dropdown-content,
#p-cactions .vector-menu-content {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/*----------------------------------------------------------
13. FORMS
----------------------------------------------------------*/
input, textarea, select {
background: rgb(255, 255, 255) !important;
color: rgb(0, 0, 0) !important;
}
.hover-word {
position: relative;
text-decoration: underline dotted;
cursor: help;
}
.hover-word .hover-pop {
position: absolute;
bottom: 100%;
left: 0;
display: none;
z-index: 100;
}
.hover-word:hover .hover-pop {
display: block;
}
/* ============================================================
/* ============================================================
14. ALIGN TOP TABS + FOOTER WITH THE HEADING
The sidebar is 250px wide, so the heading/body sit to its
right (the large content font adds extra left padding, so the
heading text starts around 305px). By default the top tabs
("Page" / "Discussion") and the footer don't follow, so they
look misaligned. These rules push both to the heading's edge.
NOTE: #left-navigation ignores the `left` property (it is
floated), so we must use margin-left here, not left.
>>> ONE KNOB: tune --rep-left until "Page" and the footer
line up with the first letter of the heading.
============================================================ */
:root {
--rep-left: 305px;
}
/* Top-left tabs (Page / Discussion) */
#left-navigation {
margin-left: var(--rep-left) !important;
}
/* Let "Page" sit flush at the column edge (remove tab indent) */
#p-namespaces li:first-child {
margin-left: 0 !important;
}
#p-namespaces li:first-child a {
padding-left: 0 !important;
}
/* Footer text block */
#footer {
margin-left: var(--rep-left) !important;
padding-left: 0 !important;
}
/* ============================================================
15. EDITOR INTERFACE FIX
The large content font (38px) was leaking into the editor
toolbar and menus. These rules reset the editor UI to a
normal size. The reading view is not affected.
============================================================ */
/* VisualEditor + OOUI: toolbar, menus, popups, dialogs */
.ve-ui-toolbar,
.ve-ui-context,
.ve-ui-contextSelectWidget,
.oo-ui-toolbar,
.oo-ui-popupWidget,
.oo-ui-popupWidget-popup,
.oo-ui-menuSelectWidget,
.oo-ui-window,
.oo-ui-dialog,
.oo-ui-defaultOverlay {
font-size: 14px !important;
line-height: normal !important;
}
/* Classic (source) editor toolbar */
.wikiEditor-ui-toolbar {
font-size: 14px !important;
line-height: normal !important;
}
/* Source editing textarea stays readable */
#wpTextbox1 {
font-size: 15px !important;
line-height: 1.5 !important;
}
/* Give popups/menus a visible border
(the "white border" rule had made them invisible) */
.oo-ui-popupWidget-popup,
.oo-ui-menuSelectWidget {
border: 1px solid rgb(0, 0, 0) !important;
}
/* Editor labels in black instead of blue */
.oo-ui-tool .oo-ui-tool-title,
.oo-ui-labelElement-label,
.ve-ui-toolbar a,
.oo-ui-popupWidget a {
color: rgb(0, 0, 0) !important;
}