Idea Supreme

MediaWiki:Common.css: Difference between revisions

An idea by Jeff Lawlor
Created on 2024-10-08
← Older edit
No edit summary
Header is left-aligned in desktop
 
(45 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
/* CSS placed here will be applied to all skins */
body
body {
{
     font-family: Trebuchet MS, Tahoma, sans-serif;
     font-family: Trebuchet MS, Tahoma, sans-serif;
}
/* Hide options in preferences, particularly the ability to change skin in Vector and Minerva */
#mw-htmlform-skin,
#mw-input-wpskin,
#mw-prefsection-rendering-skin legend,
#mw-htmlform-skin {
display: none;
}
/* Logo tweaks */
body.skin-vector-2022 .mw-logo-icon {
margin-right: 6px;
}
}


Line 38: Line 50:


.mf-icon-expand {
.mf-icon-expand {
display: none;
}
/* Remove hamburger menu with nothing in it in Vector */
.vector-main-menu-landmark {
display: none;
display: none;
}
}
Line 69: Line 86:
}
}


.page-Main_Page .page-quick-details,
.page-Main_Page .hide-when-not-idea,
body[class*=' page-MediaWiki_'] .page-quick-details,
body[class*=' page-MediaWiki_'] .hide-when-not-idea,
/*body[class*=' page-User_'] .page-quick-details,*/
body[class*=' page-User_'] .hide-when-not-idea,
body[class*=' page-Idea_Supreme_'] .page-quick-details,
body[class*=' page-Idea_Supreme_'] .hide-when-not-idea,
body[class*=' ns-special '] .page-quick-details {
body[class*=' page-Special_'] .hide-when-not-idea,
body[class*=' ns-special '] .hide-when-not-idea {
display: none;
display: none;
}
}


/* Hide heading on user profiles */
/* Hide heading on user profiles
body[class*=' page-User_'].skin-minerva .page-heading,
body[class*=' page-User_'].skin-minerva .page-heading,
body[class*=' page-User_'].skin-vector header.vector-page-titlebar {
body[class*=' page-User_'].skin-vector header.vector-page-titlebar {
     display: none;
     display: none;
}
}
 
*/
body[class*=' page-User_'] .oo-ui-windowManager .oo-ui-fieldsetLayout-group>.oo-ui-layout {
body[class*=' page-User_'] .oo-ui-windowManager .oo-ui-fieldsetLayout-group>.oo-ui-layout {
display: none;
display: none;
Line 140: Line 158:
margin-right: 1em;  
margin-right: 1em;  
font-size: 75%;
font-size: 75%;
}
.page-heading-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  width: 100%;
}
.page-heading-left-column {
justify-self: start;
}
.page-heading-right-column {
justify-self: end;
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
}
}


Line 147: Line 183:
}
}


.page-Main_Page.skin-minerva .page-heading div,  
.page-Main_Page.skin-minerva .hide-when-not-idea,  
body[class*=' page-MediaWiki_'].skin-minerva .page-heading div,
body[class*=' page-MediaWiki_'].skin-minerva .hide-when-not-idea,
/*body[class*=' page-User_'].skin-minerva .page-heading div,*/
/*body[class*=' page-User_'].skin-minerva .page-heading div,*/
body[class*=' page-Idea_Supreme_'].skin-minerva .page-heading div,
body[class*=' page-Idea_Supreme_'].skin-minerva .hide-when-not-idea,
body[class*=' ns-special '].skin-minerva .page-heading div {
body[class*=' ns-special '].skin-minerva .hide-when-not-idea {
display: none;
display: none;
}
}
Line 195: Line 231:


/* No gray background behind pictures! */
/* No gray background behind pictures! */
.mw-parser-output figure[typeof='mw:File'] img
.mw-parser-output figure[typeof='mw:File'] img {
{
background-color: transparent;
background-color: transparent;
}
/* Turn the brightness to 10 for pictures in dark mode */
html.skin-theme-clientpref-night .mw-parser-output > figure[typeof='mw:File/Thumb'] img {
filter: brightness(1);
}
/* Remove filter on bottom logo in mobile dark mode */
html.skin-theme-clientpref-night .minerva-footer-logo > img {
filter: unset;
}
}


Line 257: Line 302:
display: block;
display: block;
width: 322px;
width: 322px;
}
.skin-minerva .content figure[typeof~='mw:File/Thumb'],
.skin-minerva .content figure[typeof~='mw:File/Frame'] {
margin: 0.6em auto 1.75em auto;
}
}


Line 288: Line 338:


#toc {
#toc {
display: none;
}
/* Hide Discussion button at bottom of mobile page */
#page-secondary-actions {
display: none;
display: none;
}
}
Line 302: Line 357:
   border: 1px solid var(--is-border-color);
   border: 1px solid var(--is-border-color);
   border-radius: 8px;
   border-radius: 8px;
   padding: 7px;
   padding: 10px;
   box-sizing: border-box;
   box-sizing: border-box;
   margin: 0.5em 0 1.3em 1.4em;
   margin: 0.5em 0 1.3em 1.4em;
Line 323: Line 378:
.infobox-image {
.infobox-image {
text-align: center;
text-align: center;
/*border: 1em solid var(--tab-active-bg, #f0f0f0);*/
}
 
.infobox-wishes {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.75em;
  margin-bottom: .5em;
}
 
.infobox-wishes img {
border-radius: 10%;
}
 
.infobox-wishes .infobox-heading {
margin: 0;
padding: 0;
font-size: 1.25em;
}
 
.infobox-wishes-p {
padding-bottom: 0 !important;
margin-bottom: .5em !important;
font-size: .875rem;
}
}


Line 359: Line 437:
.infobox-tab {
.infobox-tab {
   padding: 0.4em 0.8em;
   padding: 0.4em 0.8em;
   border-radius: 4px 4px 0 0;
   border-radius: 8px 8px 0 0;
   background-color: var(--tab-bg, #e0e0e0);
   background-color: var(--tab-bg);
   cursor: pointer;
   cursor: pointer;
   font-weight: bold;
   font-weight: bold;
Line 366: Line 444:


.infobox-tab.active {
.infobox-tab.active {
   background-color: var(--tab-active-bg, #d0d0d0);
   background-color: var(--tab-active-bg);
}
}


.infobox-panel {
.infobox-panel {
   background-color: var(--tab-active-bg, #d0d0d0);
   background-color: var(--tab-active-bg);
   padding: 0.4em 0.8em;
   padding: 0.8em;
   overflow-y: auto;
   overflow-y: auto;
   height: 6em;
   height: 7em;
  border-radius: 0 8px 8px 8px;
}
 
.infobox-wishes-panel {
  background-color: var(--tab-active-bg);
  padding: 0.8em;
  border-radius: 8px;
}
}


.infobox-user, .infobox-panel.about-idea .panel-content {
.infobox-user, .infobox-panel.about-idea .panel-content {
   white-space: normal;
   white-space: normal;
}
.infobox-wishes {
    background-image: url(/images/thumb/5/5f/What_Do_I_Want.png/300px-What_Do_I_Want.png);
    background-position: bottom;
    padding: 0.5em;
font-size: 0.95em;
color: var(--color-inverted);
}
.infobox-wishes>div {
    padding: .5em;
    background-color: rgba(var(--tab-active-bg-rgb),.93);
}
.infobox-wishes h1 {
margin: 0;
padding-top: .25em;
font-size: 1.5em;
color: var(--color-inverted);
}
.content .infobox-wishes p {
font-size: .86em;
}
}


.infobox-list {
.infobox-list {
   padding-left: 1.2em;
   padding-left: 0;
  margin-top: 0.5em;
   font-size: .875rem;
   font-size: 0.95em;
   list-style-type: disc;
   list-style-type: disc;
}
}


:root {
:root {
Line 425: Line 483:
}
}


/* Variables */
/* Printer touch-ups */
:root {
@media print {
--tab-bg-rgb: 200, 204, 209;
    .firstHeading::before {
--tab-active-bg-rgb: 234, 236, 240;
    display: none;
    }
   
    .vector-page-titlebar, .skin-minerva .page-heading {
    border: 0;
    background: none;
    }
   
    header .share-container, .header-button {
    display: none;
    }
   
    .page-quick-details {
    float: right;
    }
   
    .infobox-tab.active, .infobox-panel, .infobox-wishes-panel {
    background-color: #CCCCCC;
    }
   
    .infobox-tab {
    background-color: #EEEEEE;
    }
   
    .mw-content-ltr figure[typeof~='mw:File/Thumb'], .mw-content-ltr figure[typeof~='mw:File/Frame'] {
    margin: 1em 0 1em 2em;
    float: right;
    clear: right;
    }
   
    .infobox-actions [data-tab='about-idea'] {
    display: none;
    }
   
    .infobox-idea {
page-break-inside: avoid;
    }
}
 
/* Lastest Big Ideas Tweaks */
@media (max-width: 639px) {
/* Center and bold Latest Big Ideas text */
    .gallery .gallerybox {
        text-align: center;
        font-weight: bold;
    }
}
}


@media (prefers-color-scheme: dark) {
@media (min-width: 640px) {
:root {
/* Header is left-aligned in desktop */
--tab-bg-rgb: 114, 119, 125;
li.gallerycaption {
--tab-active-bg-rgb: 84, 89, 93;
text-align: unset;
}
}
}
}
Retrieved from "https://www.ideasupreme.com/ideas/MediaWiki:Common.css"