MediaWiki:Common.css: Difference between revisions

From enIKSwiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 1: Line 1:
/* =========================================================
/* =========================================================
  PRAVAHA WIKI THEME
   CLASSIC MEDIAWIKI COLLAPSIBLE SECTIONS
  Amber, brown, cream and white
  ========================================================= */
 
:root {
--pravaha-header: #bd6800;
--pravaha-header-dark: #9f5600;
--pravaha-brown: #6f3b00;
--pravaha-brown-dark: #4f2a00;
--pravaha-amber: #c97808;
--pravaha-amber-light: #e2b76f;
--pravaha-cream: #fffaf2;
--pravaha-cream-light: #fffdf9;
--pravaha-cream-dark: #fff3df;
--pravaha-white: #ffffff;
--pravaha-border: #e2b76f;
--pravaha-muted: #72583d;
--pravaha-shadow: rgba(91, 48, 0, 0.12);
}
 
 
/* =========================================================
  PAGE AND CONTENT
  ========================================================= */
 
html,
body {
background: var(--pravaha-cream) !important;
color: #202122 !important;
}
 
#mw-page-base {
background: var(--pravaha-cream) !important;
}
 
.mw-body {
border: 1px solid var(--pravaha-border) !important;
border-radius: 0 !important;
background: var(--pravaha-cream-light) !important;
box-shadow: 0 2px 8px var(--pravaha-shadow) !important;
color: #202122 !important;
}
 
.mw-body-content {
color: #202122 !important;
}
 
#content {
background: var(--pravaha-cream-light) !important;
}
 
#footer {
background: var(--pravaha-cream) !important;
color: var(--pravaha-muted) !important;
}
 
 
/* =========================================================
  TOP HEADER
  ========================================================= */
 
#mw-head,
.vector-header,
.vector-sticky-header {
background: linear-gradient(
90deg,
var(--pravaha-header) 0%,
var(--pravaha-header-dark) 100%
) !important;
border-bottom: 1px solid #874900 !important;
box-shadow: 0 2px 8px var(--pravaha-shadow) !important;
}
 
#p-personal,
.vector-user-links {
color: #fff !important;
}
 
#p-personal a,
.vector-user-links a,
.vector-header a,
.vector-sticky-header a {
color: #fff !important;
}
 
#p-personal a:hover,
.vector-user-links a:hover,
.vector-header a:hover {
color: #fff8e8 !important;
text-decoration: underline !important;
}
 
 
/* =========================================================
  LOGO AND SIDEBAR
  ========================================================= */
 
#mw-panel,
.vector-main-menu-container {
background: #fff !important;
border-right: 1px solid #d8c3a5 !important;
}
 
#p-logo,
.mw-logo {
background-color: #fff8e8 !important;
border: 1px solid rgba(111, 59, 0, 0.18) !important;
border-radius: 7px !important;
box-shadow: 0 2px 6px rgba(75, 38, 0, 0.16) !important;
}
 
#mw-panel .portal,
.vector-menu-portal {
background: transparent !important;
}
 
#mw-panel .portal h3,
.vector-menu-portal .vector-menu-heading {
color: var(--pravaha-brown) !important;
font-weight: bold !important;
border-bottom: 1px solid #dfc9aa !important;
}
 
#mw-panel .portal a,
.vector-menu-portal a {
color: #7b4300 !important;
}
 
#mw-panel .portal a:hover,
.vector-menu-portal a:hover {
color: var(--pravaha-header-dark) !important;
text-decoration: underline !important;
}
 
 
/* =========================================================
  HEADINGS
  ========================================================= */
 
.mw-body h1,
.mw-body h2,
.mw-body h3,
.mw-body h4,
.mw-body h5,
.mw-body h6,
.firstHeading {
color: var(--pravaha-brown) !important;
font-family: Georgia, "Times New Roman", serif !important;
}
 
.mw-body h1,
.mw-body h2,
.firstHeading {
border-bottom: 1px solid #cdbb9f !important;
}
 
.mw-body h3,
.mw-body h4,
.mw-body h5,
.mw-body h6 {
border-bottom-color: #dfd1ba !important;
}
 
 
/* =========================================================
  LINKS
  ========================================================= */
 
.mw-body a,
#content a {
color: #9a4d00;
}
 
.mw-body a:visited,
#content a:visited {
color: #704000;
}
 
.mw-body a:hover,
#content a:hover {
color: var(--pravaha-header-dark);
text-decoration: underline;
}
 
.mw-body a.new,
#content a.new {
color: #a4262c !important;
}
 
 
/* =========================================================
  PAGE TABS
  ========================================================= */
 
.vector-menu-tabs,
.vector-menu-tabs-legacy,
.vector-menu-tabs .mw-list-item,
.vector-menu-tabs-legacy .mw-list-item {
background-image: none !important;
}
 
.vector-menu-tabs li,
.vector-menu-tabs-legacy li {
background: #fff7e8 !important;
border: 1px solid #d7b984 !important;
border-bottom: 0 !important;
}
 
.vector-menu-tabs li a,
.vector-menu-tabs-legacy li a {
color: var(--pravaha-brown) !important;
background: transparent !important;
}
 
.vector-menu-tabs .selected,
.vector-menu-tabs-legacy .selected {
background: var(--pravaha-cream-light) !important;
border-top: 3px solid var(--pravaha-header) !important;
}
 
.vector-menu-tabs .selected a,
.vector-menu-tabs-legacy .selected a {
color: var(--pravaha-brown-dark) !important;
font-weight: bold !important;
}
 
 
/* =========================================================
  SEARCH
  ========================================================= */
 
#searchInput,
.vector-search-box-input,
.cdx-text-input__input {
border: 1px solid #bca47e !important;
border-radius: 4px !important;
background: #fff !important;
color: #202122 !important;
}
 
#searchInput:focus,
.vector-search-box-input:focus,
.cdx-text-input__input:focus {
border-color: var(--pravaha-header) !important;
box-shadow: 0 0 0 2px rgba(189, 104, 0, 0.18) !important;
outline: 0 !important;
}
 
 
/* =========================================================
  BUTTONS
  ========================================================= */
 
.mw-ui-button,
.cdx-button,
input[type="submit"],
input[type="button"],
button {
border: 1px solid var(--pravaha-header-dark) !important;
border-radius: 4px !important;
background: var(--pravaha-header) !important;
color: #fff !important;
box-shadow: none !important;
}
 
.mw-ui-button:hover,
.cdx-button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
button:hover {
background: var(--pravaha-header-dark) !important;
color: #fff !important;
}
 
.mw-ui-button:focus,
.cdx-button:focus,
input[type="submit"]:focus,
button:focus {
outline: 2px solid var(--pravaha-amber-light) !important;
outline-offset: 1px !important;
}
 
 
/* =========================================================
  FORMS
  ========================================================= */
 
input,
textarea,
select {
border-color: #bca47e !important;
background: #fff !important;
color: #202122 !important;
}
 
input:focus,
textarea:focus,
select:focus {
border-color: var(--pravaha-header) !important;
box-shadow: 0 0 0 2px rgba(189, 104, 0, 0.16) !important;
outline: 0 !important;
}
 
fieldset {
border: 1px solid var(--pravaha-border) !important;
background: var(--pravaha-cream-light) !important;
}
 
legend {
color: var(--pravaha-brown) !important;
font-weight: bold !important;
}
 
 
/* =========================================================
  TABLES AND INFOBOXES
  ========================================================= */
 
.wikitable,
.infobox {
border: 1px solid #c8b18d !important;
border-collapse: collapse !important;
background: #fff !important;
color: #202122 !important;
}
 
.wikitable th,
.infobox th {
border: 1px solid #c8b18d !important;
background: var(--pravaha-cream-dark) !important;
color: var(--pravaha-brown) !important;
}
 
.wikitable td,
.infobox td {
border: 1px solid #d7c6aa !important;
background: #fff !important;
color: #202122 !important;
}
 
.wikitable tr:hover td {
background: #fffaf2 !important;
}
 
 
/* =========================================================
  TABLE OF CONTENTS
  ========================================================= */
 
.toc,
#toc,
.vector-toc {
border: 1px solid var(--pravaha-border) !important;
border-radius: 0 !important;
background: #fff8eb !important;
box-shadow: none !important;
}
 
.toc .toctitle,
#toc .toctitle,
.vector-toc .vector-toc-header {
color: var(--pravaha-brown) !important;
}
 
.toc a,
#toc a,
.vector-toc a {
color: #874900 !important;
}
 
.toc a:hover,
#toc a:hover,
.vector-toc a:hover {
color: var(--pravaha-header-dark) !important;
text-decoration: underline !important;
}
 
 
/* =========================================================
  NOTICES, MESSAGES AND CATEGORIES
  ========================================================= */
 
.catlinks {
border: 1px solid var(--pravaha-border) !important;
background: #fff8eb !important;
color: #202122 !important;
}
 
.mw-message-box {
border-color: var(--pravaha-border) !important;
background: #fff8eb !important;
color: #202122 !important;
}
 
.mw-message-box-warning {
border-left: 4px solid var(--pravaha-amber) !important;
background: #fff5df !important;
}
 
.mw-message-box-error {
border-left: 4px solid #b32424 !important;
background: #fff0f0 !important;
}
 
.mw-message-box-success {
border-left: 4px solid #14866d !important;
background: #effaf6 !important;
}
 
 
/* =========================================================
  BLOCKQUOTES AND CODE
  ========================================================= */
 
blockquote {
margin-left: 1em !important;
padding: 0.6em 1em !important;
border-left: 4px solid var(--pravaha-amber) !important;
background: #fff8eb !important;
color: #3d3022 !important;
}
 
code,
pre,
.mw-code {
border-color: #d7c6aa !important;
background: #fff8eb !important;
color: #3d3022 !important;
}
 
 
/* =========================================================
   CLASSIC WIKI COLLAPSIBLE SECTIONS
   ========================================================= */
   ========================================================= */


.pravaha-collapse {
.pravaha-collapse {
clear: both !important;
clear: both !important;
margin: 0.6em 0 !important;
margin: 0.5em 0 !important;
overflow: hidden !important;
overflow: hidden !important;
border: 1px solid var(--pravaha-border) !important;
border: 1px solid #a2a9b1 !important;
border-radius: 4px !important;
border-radius: 0 !important;
background: var(--pravaha-cream-light) !important;
background: #f8f9fa !important;
box-shadow: none !important;
box-shadow: none !important;
box-sizing: border-box !important;
box-sizing: border-box !important;
}
}


.pravaha-collapse-title {
.pravaha-collapse-title {
display: flex !important;
display: flex !important;
min-height: 0 !important;
min-height: 0 !important;
padding: 0.45em 0.7em !important;
padding: 0.4em 0.6em !important;
align-items: center !important;
align-items: center !important;
gap: 0 !important;
gap: 0 !important;
background: var(--pravaha-cream-dark) !important;
background: #eaecf0 !important;
color: var(--pravaha-brown) !important;
color: #202122 !important;
font-family: sans-serif !important;
font-family: sans-serif !important;
font-size: 14px !important;
font-size: 14px !important;
font-weight: bold !important;
font-weight: bold !important;
line-height: 1.6 !important;
line-height: 1.6 !important;
}
}


/* Place expand/collapse control on the right */
.pravaha-collapse-open,
.pravaha-collapse-open,
.pravaha-collapse-close {
.pravaha-collapse-close {
order: 2 !important;
order: 2 !important;
flex: none !important;
flex: none !important;
width: auto !important;
width: auto !important;
height: auto !important;
height: auto !important;
margin: 0 0 0 auto !important;
margin: 0 0 0 auto !important;
padding: 0 0 0 1em !important;
padding: 0 0 0 1em !important;
border: 0 !important;
border: 0 !important;
border-radius: 0 !important;
border-radius: 0 !important;
background: transparent !important;
background: transparent !important;
box-shadow: none !important;
box-shadow: none !important;
color: #9a4d00 !important;
color: #36c !important;
font-size: 0 !important;
font-size: 0 !important;
font-weight: normal !important;
font-weight: normal !important;
line-height: inherit !important;
line-height: inherit !important;
text-align: right !important;
}
}


.pravaha-collapse-open {
.pravaha-collapse-open {
display: inline-block !important;
display: inline-block !important;
}
}


.pravaha-collapse-close {
.pravaha-collapse-close {
display: none !important;
display: none !important;
}
}


.pravaha-collapse-open a,
.pravaha-collapse-open a,
.pravaha-collapse-close a {
.pravaha-collapse-close a {
display: inline !important;
display: inline !important;
width: auto !important;
width: auto !important;
height: auto !important;
height: auto !important;
margin: 0 !important;
margin: 0 !important;
padding: 0 !important;
padding: 0 !important;
border: 0 !important;
border: 0 !important;
background: transparent !important;
background: transparent !important;
color: #9a4d00 !important;
color: #36c !important;
font-size: 0 !important;
font-size: 0 !important;
font-weight: normal !important;
font-weight: normal !important;
text-decoration: none !important;
line-height: inherit !important;
text-decoration: none !important;
}
}


.pravaha-collapse-open a::after {
.pravaha-collapse-open a::after {
content: "[expand]";
content: "[expand]";
font-size: 12px !important;
font-size: 12px !important;
font-weight: normal !important;
}
}


.pravaha-collapse-close a::after {
.pravaha-collapse-close a::after {
content: "[collapse]";
content: "[collapse]";
font-size: 12px !important;
font-size: 12px !important;
font-weight: normal !important;
}
}


.pravaha-collapse-open a:hover::after,
.pravaha-collapse-open a:hover::after,
.pravaha-collapse-close a:hover::after {
.pravaha-collapse-close a:hover::after {
color: var(--pravaha-brown-dark) !important;
color: #2a4b8d !important;
text-decoration: underline !important;
text-decoration: underline !important;
}
}


/* Collapsible content */
.pravaha-collapse-content {
.pravaha-collapse-content {
display: none !important;
display: none !important;
padding: 0.75em !important;
padding: 0.75em !important;
border-top: 1px solid var(--pravaha-border) !important;
border-top: 1px solid #a2a9b1 !important;
background: #fff !important;
background: #fff !important;
color: #202122 !important;
color: #202122 !important;
}
}


/* Expanded state */
.pravaha-collapse:target .pravaha-collapse-content {
.pravaha-collapse:target .pravaha-collapse-content {
display: block !important;
display: block !important;
}
}


.pravaha-collapse:target .pravaha-collapse-open {
.pravaha-collapse:target .pravaha-collapse-open {
display: none !important;
display: none !important;
}
}


.pravaha-collapse:target .pravaha-collapse-close {
.pravaha-collapse:target .pravaha-collapse-close {
display: inline-block !important;
display: inline-block !important;
}
}




/* =========================================================
/* =========================================================
   WORD COUNT AND READING TIME
   WORD COUNT AND READING TIME — CLASSIC WIKI STYLE
  Overrides the inline orange and blue styles
   ========================================================= */
   ========================================================= */


.mw-parser-output > table[style*="float:right"][style*="width:300px"] {
.mw-parser-output > table[style*="float:right"][style*="width:300px"] {
float: right !important;
float: right !important;
clear: right !important;
clear: right !important;
width: 300px !important;
width: 300px !important;
max-width: 100% !important;
max-width: 100% !important;
margin: 0 0 1em 1em !important;
margin: 0 0 1em 1em !important;
border: 1px solid var(--pravaha-border) !important;
border: 1px solid #a2a9b1 !important;
border-collapse: collapse !important;
border-collapse: collapse !important;
border-spacing: 0 !important;
border-spacing: 0 !important;
border-radius: 4px !important;
border-radius: 0 !important;
background: var(--pravaha-cream-light) !important;
background: #f8f9fa !important;
box-shadow: none !important;
box-shadow: none !important;
font-family: sans-serif !important;
font-family: sans-serif !important;
}
}


.mw-parser-output > table[style*="float:right"][style*="width:300px"] td {
.mw-parser-output > table[style*="float:right"][style*="width:300px"] td {
width: 50% !important;
width: 50% !important;
padding: 0.55em 0.75em !important;
padding: 0.5em 0.75em !important;
border: 0 !important;
border: 0 !important;
border-radius: 0 !important;
border-radius: 0 !important;
background: var(--pravaha-cream-light) !important;
background: #f8f9fa !important;
color: #202122 !important;
color: #202122 !important;
font-size: 12px !important;
font-family: sans-serif !important;
text-align: center !important;
font-size: 12px !important;
font-weight: normal !important;
line-height: 1.5 !important;
text-align: center !important;
}
}


.mw-parser-output > table[style*="float:right"][style*="width:300px"] td + td {
.mw-parser-output > table[style*="float:right"][style*="width:300px"] td + td {
border-left: 1px solid var(--pravaha-border) !important;
border-left: 1px solid #a2a9b1 !important;
}
}


.mw-parser-output > table[style*="float:right"][style*="width:300px"] td b {
.mw-parser-output > table[style*="float:right"][style*="width:300px"] td b {
color: var(--pravaha-brown) !important;
color: #54595d !important;
font-size: 11px !important;
font-size: 11px !important;
font-weight: normal !important;
font-weight: normal !important;
text-transform: uppercase !important;
text-transform: uppercase !important;
}
}


.mw-parser-output > table[style*="float:right"][style*="width:300px"] td span {
.mw-parser-output > table[style*="float:right"][style*="width:300px"] td span {
color: var(--pravaha-brown-dark) !important;
color: #202122 !important;
font-size: 15px !important;
font-size: 15px !important;
font-weight: bold !important;
font-weight: bold !important;
}
}




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


@media screen and (max-width: 720px) {
@media screen and (max-width: 600px) {
.mw-body {
.pravaha-collapse-title {
border-left: 0 !important;
padding: 0.4em 0.5em !important;
border-right: 0 !important;
}
box-shadow: none !important;
}


.pravaha-collapse-title {
.mw-parser-output > table[style*="float:right"][style*="width:300px"] {
padding: 0.45em 0.55em !important;
float: none !important;
}
clear: both !important;
 
width: 100% !important;
.mw-parser-output > table[style*="float:right"][style*="width:300px"] {
margin: 0 0 1em !important;
float: none !important;
}
clear: both !important;
width: 100% !important;
margin: 0 0 1em !important;
}
}
}

Revision as of 16:08, 31 July 2026

/* =========================================================
   CLASSIC MEDIAWIKI COLLAPSIBLE SECTIONS
   ========================================================= */

.pravaha-collapse {
clear: both !important;
margin: 0.5em 0 !important;
overflow: hidden !important;
border: 1px solid #a2a9b1 !important;
border-radius: 0 !important;
background: #f8f9fa !important;
box-shadow: none !important;
box-sizing: border-box !important;
}

.pravaha-collapse-title {
display: flex !important;
min-height: 0 !important;
padding: 0.4em 0.6em !important;
align-items: center !important;
gap: 0 !important;
background: #eaecf0 !important;
color: #202122 !important;
font-family: sans-serif !important;
font-size: 14px !important;
font-weight: bold !important;
line-height: 1.6 !important;
}

/* Place expand/collapse control on the right */
.pravaha-collapse-open,
.pravaha-collapse-close {
order: 2 !important;
flex: none !important;
width: auto !important;
height: auto !important;
margin: 0 0 0 auto !important;
padding: 0 0 0 1em !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: #36c !important;
font-size: 0 !important;
font-weight: normal !important;
line-height: inherit !important;
text-align: right !important;
}

.pravaha-collapse-open {
display: inline-block !important;
}

.pravaha-collapse-close {
display: none !important;
}

.pravaha-collapse-open a,
.pravaha-collapse-close a {
display: inline !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
color: #36c !important;
font-size: 0 !important;
font-weight: normal !important;
line-height: inherit !important;
text-decoration: none !important;
}

.pravaha-collapse-open a::after {
content: "[expand]";
font-size: 12px !important;
font-weight: normal !important;
}

.pravaha-collapse-close a::after {
content: "[collapse]";
font-size: 12px !important;
font-weight: normal !important;
}

.pravaha-collapse-open a:hover::after,
.pravaha-collapse-close a:hover::after {
color: #2a4b8d !important;
text-decoration: underline !important;
}

/* Collapsible content */
.pravaha-collapse-content {
display: none !important;
padding: 0.75em !important;
border-top: 1px solid #a2a9b1 !important;
background: #fff !important;
color: #202122 !important;
}

/* Expanded state */
.pravaha-collapse:target .pravaha-collapse-content {
display: block !important;
}

.pravaha-collapse:target .pravaha-collapse-open {
display: none !important;
}

.pravaha-collapse:target .pravaha-collapse-close {
display: inline-block !important;
}


/* =========================================================
   WORD COUNT AND READING TIME — CLASSIC WIKI STYLE
   Overrides the inline orange and blue styles
   ========================================================= */

.mw-parser-output > table[style*="float:right"][style*="width:300px"] {
float: right !important;
clear: right !important;
width: 300px !important;
max-width: 100% !important;
margin: 0 0 1em 1em !important;
border: 1px solid #a2a9b1 !important;
border-collapse: collapse !important;
border-spacing: 0 !important;
border-radius: 0 !important;
background: #f8f9fa !important;
box-shadow: none !important;
font-family: sans-serif !important;
}

.mw-parser-output > table[style*="float:right"][style*="width:300px"] td {
width: 50% !important;
padding: 0.5em 0.75em !important;
border: 0 !important;
border-radius: 0 !important;
background: #f8f9fa !important;
color: #202122 !important;
font-family: sans-serif !important;
font-size: 12px !important;
font-weight: normal !important;
line-height: 1.5 !important;
text-align: center !important;
}

.mw-parser-output > table[style*="float:right"][style*="width:300px"] td + td {
border-left: 1px solid #a2a9b1 !important;
}

.mw-parser-output > table[style*="float:right"][style*="width:300px"] td b {
color: #54595d !important;
font-size: 11px !important;
font-weight: normal !important;
text-transform: uppercase !important;
}

.mw-parser-output > table[style*="float:right"][style*="width:300px"] td span {
color: #202122 !important;
font-size: 15px !important;
font-weight: bold !important;
}


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

@media screen and (max-width: 600px) {
.pravaha-collapse-title {
padding: 0.4em 0.5em !important;
}

.mw-parser-output > table[style*="float:right"][style*="width:300px"] {
float: none !important;
clear: both !important;
width: 100% !important;
margin: 0 0 1em !important;
}
}
Retrieved from "https://en.ikswiki.in/index.php?title=MediaWiki:Common.css&oldid=2292"