Jump to content

Module:Infobox/styles.css: Difference between revisions

From SchoolIdolWiki
← Older editNewer edit →
HarukiLL (talk | contribs)
656 edits
No edit summary
test
Tag: Reverted
Line 1: Line 1:
/* {{pp|small=y}} */
/* == Infobox Core Styles == */
/*
* This TemplateStyles sheet deliberately does NOT include the full set of
* infobox styles. We are still working to migrate all of the manual
* infoboxes. See [[MediaWiki talk:Common.css/to do#Infobox]]
* DO NOT ADD THEM HERE
*/
/*
* not strictly certain these styles are necessary since the modules now
* exclusively output infobox-subbox or infobox, not both
* just replicating the module faithfully
*/
 
.infobox-title {
padding: 0.2em;
width: auto;
min-width: 100%;
}


.infobox-subbox {
.infobox-subbox {
padding: 0;
    padding: 0;
border: none;
    border: none;
margin: -3px;
    margin: -3px;
width: auto;
    width: auto;
min-width: 100%;
    min-width: 100%;
font-size: 100%;
    font-size: 100%;
clear: none;
    clear: none;
float: none;
    float: none;
background-color: transparent;
    background-color: transparent;
}
}


.infobox-3cols-child {
.infobox-3cols-child {
margin: auto;
    margin: auto;
}
}


.infobox .navbar {
.infobox .navbar {
font-size: 100%;
    font-size: 100%;
}
}


/* Dark theme: [[William_Wragg]], [[Coral_Castle]] */
/* == Infobox Header Styling (Larger + Themed) == */
 
.infobox .infobox-header {
    font-size: 115%; /* 15% bigger */
    padding: 0.6em;
    background-color: #ff4fa1;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
}


/* == Dark Mode Support: Manual preference (MediaWiki user settings) == */
@media screen {
@media screen {
    html.skin-theme-clientpref-night .infobox .infobox-header {
        background-color: #a63a78 !important;
        color: #f8f9fa !important;
    }
     html.skin-theme-clientpref-night .infobox-full-data:not(.notheme) > div:not(.notheme)[style] {
     html.skin-theme-clientpref-night .infobox-full-data:not(.notheme) > div:not(.notheme)[style] {
    background: #1f1f23 !important;
        background: #1f1f23 !important;
      /* switch with var( --color-base ) when supported. */
        color: #f8f9fa !important;
      color: #f8f9fa;
    }
}
}
}


/* == Dark Mode Support: OS preference (prefers-color-scheme) == */
@media screen and (prefers-color-scheme: dark) {
    html.skin-theme-clientpref-os .infobox .infobox-header {
        background-color: #a63a78 !important;
        color: #f8f9fa !important;
    }


@media screen and ( prefers-color-scheme: dark) {
     html.skin-theme-clientpref-os .infobox-full-data:not(.notheme) div:not(.notheme) {
     html.skin-theme-clientpref-os .infobox-full-data:not(.notheme) div:not(.notheme) {
      background: #1f1f23 !important;
        background: #1f1f23 !important;
      /* switch with var( --color-base ) when supported. */
        color: #f8f9fa !important;
      color: #f8f9fa;
     }
     }
}
}


/* == Responsive Infobox Table Fixes (Vector 2022 skin) == */


/* Since infobox is a table, many infobox templates take advantage of this to add columns and rows to the infobox itself rather than as part of a new table inside them. This class should be discouraged and removed on the long term, but allows us to at least identify these tables going forward
Currently in use on: [[Module:Infobox3cols]]
Fixes issue described in https://phabricator.wikimedia.org/F55300125 on Vector 2022.
*/
@media (min-width: 640px) {
@media (min-width: 640px) {
  body.skin--responsive .infobox-table {
    body.skin--responsive .infobox-table {
    display: table !important;
        display: table !important;
  }
    }
  body.skin--responsive .infobox-table > caption {
    body.skin--responsive .infobox-table > caption {
    display: table-caption !important;
        display: table-caption !important;
  }
    }
  body.skin--responsive .infobox-table > tbody {
    body.skin--responsive .infobox-table > tbody {
    display: table-row-group;
        display: table-row-group;
  }
    }
  body.skin--responsive .infobox-table tr {
    body.skin--responsive .infobox-table tr {
    display: table-row !important;
        display: table-row !important;
  }
    }
  body.skin--responsive .infobox-table th,
    body.skin--responsive .infobox-table th,
  body.skin--responsive .infobox-table td {
    body.skin--responsive .infobox-table td {
    padding-left: inherit;
        padding-left: inherit;
    padding-right: inherit;
        padding-right: inherit;
  }
    }
}
}

Revision as of 11:22, 12 April 2025

/* == Infobox Core Styles == */

.infobox-subbox {
    padding: 0;
    border: none;
    margin: -3px;
    width: auto;
    min-width: 100%;
    font-size: 100%;
    clear: none;
    float: none;
    background-color: transparent;
}

.infobox-3cols-child {
    margin: auto;
}

.infobox .navbar {
    font-size: 100%;
}

/* == Infobox Header Styling (Larger + Themed) == */

.infobox .infobox-header {
    font-size: 115%; /* 15% bigger */
    padding: 0.6em;
    background-color: #ff4fa1;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
}

/* == Dark Mode Support: Manual preference (MediaWiki user settings) == */
@media screen {
    html.skin-theme-clientpref-night .infobox .infobox-header {
        background-color: #a63a78 !important;
        color: #f8f9fa !important;
    }

    html.skin-theme-clientpref-night .infobox-full-data:not(.notheme) > div:not(.notheme)[style] {
        background: #1f1f23 !important;
        color: #f8f9fa !important;
    }
}

/* == Dark Mode Support: OS preference (prefers-color-scheme) == */
@media screen and (prefers-color-scheme: dark) {
    html.skin-theme-clientpref-os .infobox .infobox-header {
        background-color: #a63a78 !important;
        color: #f8f9fa !important;
    }

    html.skin-theme-clientpref-os .infobox-full-data:not(.notheme) div:not(.notheme) {
        background: #1f1f23 !important;
        color: #f8f9fa !important;
    }
}

/* == Responsive Infobox Table Fixes (Vector 2022 skin) == */

@media (min-width: 640px) {
    body.skin--responsive .infobox-table {
        display: table !important;
    }
    body.skin--responsive .infobox-table > caption {
        display: table-caption !important;
    }
    body.skin--responsive .infobox-table > tbody {
        display: table-row-group;
    }
    body.skin--responsive .infobox-table tr {
        display: table-row !important;
    }
    body.skin--responsive .infobox-table th,
    body.skin--responsive .infobox-table td {
        padding-left: inherit;
        padding-right: inherit;
    }
}
Retrieved from "http://wiki.schoolidol.net/w/index.php?title=Module:Infobox/styles.css&oldid=1014"