Idea Supreme

MediaWiki:Common.css: Difference between revisions

An idea by Jeff Lawlor
Created on 2024-10-08
← Older edit
No edit summary
Tags: Mobile edit Mobile web edit
Header is left-aligned in desktop
 
(132 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;
}
/* Display all footer items in Minerva Neue skin */
.skin-minerva ul.footer-info li, .skin-minerva ul.footer-places li {
display: inline-block;
}
.skin-minerva #content ul {
margin: 0 0 1em 1.5em;
}
body.skin-vector-2022 ul {
margin-bottom: 1em;
}
.skin-minerva #content ul.mw-gallery-traditional {
margin: 0 0 1em 0;
}
}


Line 14: Line 43:
     padding-bottom: 0;
     padding-bottom: 0;
     margin: 0.25em 0 0 0;
     margin: 0.25em 0 0 0;
}
#firstHeading {
margin: 0;
}
}


Line 20: Line 53:
}
}


.vector-page-titlebar::after
/* Remove hamburger menu with nothing in it in Vector */
{
.vector-main-menu-landmark {
display: none;
}
 
.vector-page-titlebar, .skin-minerva .page-heading {
    border-top: var(--is-border-color) solid 1px;
    border-right: var(--is-border-color) solid 1px;
    border-radius: 0 8px 8px 0;
    border-bottom: var(--is-border-color) solid 1px;
    padding: .6em .6em .6em 0;
    background-color: var(--background-color-interactive);
    background-image: linear-gradient(90deg,var(--background-color-base) 33%, var(--background-color-interactive) 100%);
}
 
.page-Main_Page .vector-page-titlebar,
.page-Main_Page.skin-minerva .page-heading,
body[class*=' page-MediaWiki_'] .vector-page-titlebar,
body[class*=' page-MediaWiki_'].skin-minerva .page-heading,
body[class*=' page-Idea_Supreme_'] .vector-page-titlebar,
body[class*=' page-Idea_Supreme_'].skin-minerva .page-heading,
body[class*=' ns-special '] .vector-page-titlebar,
body[class*=' ns-special '].skin-minerva .page-heading {
    border: none;
    padding: unset;
    background-color: unset;
    background-image: unset;
}
 
.page-quick-details {
font-size: 75%;
}
 
.page-Main_Page .hide-when-not-idea,
body[class*=' page-MediaWiki_'] .hide-when-not-idea,
body[class*=' page-User_'] .hide-when-not-idea,
body[class*=' page-Idea_Supreme_'] .hide-when-not-idea,
body[class*=' page-Special_'] .hide-when-not-idea,
body[class*=' ns-special '] .hide-when-not-idea {
display: none;
}
 
/* Hide heading on user profiles
body[class*=' page-User_'].skin-minerva .page-heading,
body[class*=' page-User_'].skin-vector header.vector-page-titlebar {
    display: none;
}
*/
body[class*=' page-User_'] .oo-ui-windowManager .oo-ui-fieldsetLayout-group>.oo-ui-layout {
display: none;
}
 
body[class*=' page-User_'] .oo-ui-windowManager .oo-ui-fieldsetLayout-group > div:nth-child(1),
body[class*=' page-User_'] .oo-ui-windowManager .oo-ui-fieldsetLayout-group > div:nth-child(5),
body[class*=' page-User_'] .oo-ui-windowManager .oo-ui-fieldsetLayout-group > div:nth-child(6)  {
display: block;
}
 
.vector-page-titlebar {
    margin-bottom: .25em;
}
 
.page-Main_Page .vector-page-titlebar,
body[class*=' page-MediaWiki_'] .vector-page-titlebar,
body[class*=' page-Idea_Supreme_'] .vector-page-titlebar,
/*body[class*=' page-User_'] .vector-page-titlebar,*/
body[class*=' ns-special '] .vector-page-titlebar {
margin-bottom: unset;
}
 
.header-button {
border: none;
    width: 2rem;
    height: 2rem;
    background-color: #6b8edf;
    color: #ffffff;
    border-radius: 50%;
    margin-left: 1em;
    text-align: center;
    line-height: 2rem;
}
 
.header-button:hover {
cursor: pointer;
}
 
.header-button a, .header-button a:hover, .header-button a:visited {
color: #ffffff;
}
 
.skin-minerva .page-heading {
    margin-bottom: 1.5em;
}
 
.page-Main_Page.skin-minerva .page-heading,
body[class*=' page-MediaWiki_'].skin-minerva .page-heading,
/*body[class*=' page-User_'].skin-minerva .page-heading,*/
body[class*=' page-Idea_Supreme_'].skin-minerva .page-heading,
body[class*=' ns-special '].skin-minerva .page-heading {
    margin-bottom: unset;
}
 
.is-vector-quick-page-info {
margin-right: 1em;
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;
}
 
.page-heading-left-column div {
font-size: 75%;
    color: var(--color-placeholder);
}
 
.page-Main_Page.skin-minerva .hide-when-not-idea,
body[class*=' page-MediaWiki_'].skin-minerva .hide-when-not-idea,
/*body[class*=' page-User_'].skin-minerva .page-heading div,*/
body[class*=' page-Idea_Supreme_'].skin-minerva .hide-when-not-idea,
body[class*=' ns-special '].skin-minerva .hide-when-not-idea {
display: none;
}
 
.vector-page-titlebar::after {
background-color: transparent;
background-color: transparent;
}
}
/* User profile modifications */
.profile-masthead {
margin-top: 1.25rem;
}
.profile-masthead .profile-header-attributes h2 {
margin-right: 1rem;
}
.profile-masthead .profile-user-group {
background-color: var(--background-color-inverted);
color: var(--color-inverted);
}
/*
#profile-top {
border-bottom: none;
}
#profile-toggle-button {
display: none;
}
#profile-image {
margin: 0 1.25rem 0 0;
}
#profile-right {
float: none;
}*/


/* Show subtitle */
/* Show subtitle */
#siteSub
#siteSub {
{
     display: block; font-weight: normal; font-size: normal;
     display: block; font-weight: normal; font-size: normal;
}
}


/* 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 71: Line 279:
.mw-body p {
.mw-body p {
     margin: 0.1em 0 1em 0;
     margin: 0.1em 0 1em 0;
}
/* Intersect extension */
.mw-body .gallerytext p {
display: none;
}
.mw-body .mw-gallery-traditional .gallerycaption {
margin-top: 3em;
    font-size: 1.5em;
}
/* Hide Categories until we know what to do with them */
#catlinks {
display: none;
}
}


/* Updates to MediaWiki's Image Box */
/* Updates to MediaWiki's Image Box */
.mw-content-ltr figure[typeof~='mw:File/Thumb'] {
.mw-content-ltr figure[typeof~='mw:File/Thumb'] {
border: 0;
border-radius: 8px;
border: 1px solid var(--is-border-color);
display: block;
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;
}
}


figure[typeof~='mw:File/Thumb'] > :not(figcaption) .mw-file-element {
figure[typeof~='mw:File/Thumb'] > :not(figcaption) .mw-file-element {
border-radius: 8px 8px 0 0;
padding: 7px;
padding: 7px;
border: 1px solid var(--is-border-color);
border-bottom: none;
}
}


.mw-parser-output figure[typeof='mw:File/Thumb'] img {
.mw-parser-output figure[typeof='mw:File/Thumb'] img {
background-color: transparent !important;
background-color: transparent !important;
}
figure[typeof~='mw:File/Thumb'] > :not(figcaption) .mw-file-element {
margin: 4px;
border: none;
}
}


.content figure[typeof~='mw:File/Thumb'] > figcaption {
.content figure[typeof~='mw:File/Thumb'] > figcaption {
display: block;
background-color: transparent;
background-color: transparent;
margin: 0;
margin: -4px 4px 4px 4px;
color: var(--color-base);
border: none;
}
 
#bodyContent figure[typeof~='mw:File/Thumb'] > figcaption {
padding: 0px 10px 10px 10px !important;
padding: 0px 10px 10px 10px !important;
color: var(--color-base);
display: block;
border: none;
margin: -4px 4px 4px 4px;
}
 
#toc {
display: none;
}
}


figure[typeof~='mw:File/Thumb'] > figcaption {
/* Hide Discussion button at bottom of mobile page */
border-radius: 0 0 8px 8px;
#page-secondary-actions {
border: 1px solid var(--is-border-color);
display: none;
border-top: none;
margin: -3px 3px 0 3px;
padding: 0px 10px 10px 10px;
}
}


/* What Do I Want Infobox */
/* Infoboxes */
.infobox-idea {
.infobox-idea {
   clear: right;
   clear: right;
   float: right;
   float: right;
   max-width: 322px;
   max-width: 324px;
   width: 322px;
   width: 324px;
   /*margin: 1em 0 1em 1em;*/
   /*margin: 1em 0 1em 1em;*/
   color: var(--color-base);
   color: var(--color-base);
Line 115: 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 126: Line 368:
     width: 100%;
     width: 100%;
     margin: 2em auto;
     margin: 2em auto;
}
.mw-content-ltr figure[typeof~='mw:File/Thumb'] {
  clear: right;
  float: none;
   }
   }
}
}
Line 131: Line 378:
.infobox-image {
.infobox-image {
text-align: center;
text-align: center;
/*border: 1em solid var(--tab-active-bg, #f0f0f0);*/
}
}


.infobox-meta {
.infobox-wishes {
   display: flex;
   display: grid;
   justify-content: space-between;
   grid-template-columns: auto 1fr;
   align-items: center;
   align-items: center;
   flex-wrap: wrap;
   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;
}
}


.infobox-user {
.infobox-user {
   display: flex;
   display: grid;
  grid-template-columns: auto 1fr auto;
   align-items: center;
   align-items: center;
   gap: 0.5em;
   gap: 0.75em;
   margin-bottom: 1em;
   margin-bottom: 1em;
}
}
Line 154: Line 418:
.user-name {
.user-name {
   font-weight: bold;
   font-weight: bold;
  font-size: 1.25em;
  margin-left: .25em;
}
.user-email {
  font-size: 2em;
}
.user-email a, .user-email a:hover {
text-decoration: none;
}
}


Line 163: 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 170: 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-color: var(--tab-active-bg, #f0f0f0);*/
padding: 0 0.5em .5em .5em;
font-size: 0.95em;
}
.infobox-wishes h1 {
margin: 0;
padding-top: .25em;
font-size: 1.5em;
}
.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 220: Line 483:
}
}


/* Printer touch-ups */
@media print {
    .firstHeading::before {
    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 (min-width: 640px) {
/* Header is left-aligned in desktop */
li.gallerycaption {
text-align: unset;
}
}


/* Light/dark mode  
/* Light/dark mode  
Retrieved from "https://www.ideasupreme.com/ideas/MediaWiki:Common.css"