Difference between revisions of "MediaWiki:Common.css"

(updating user names in user name highlighting)
(One intermediate revision by the same user not shown)
Line 513: Line 513:
 
   .oo-ui-clippableElement-clippable.oo-ui-popupWidget-body {
 
   .oo-ui-clippableElement-clippable.oo-ui-popupWidget-body {
 
       width:auto !important;
 
       width:auto !important;
  }
 
  .suggestions.header-suggestions {
 
      display:block !important;
 
 
   }
 
   }
 
   .mobile-min-width {
 
   .mobile-min-width {
Line 550: Line 547:
 
padding:0;
 
padding:0;
 
margin:0;
 
margin:0;
}
 
        #searchInput { /* header search box */
 
width: 100%;
 
height: 100%;
 
font-size: 1.25em;
 
  background-color:var(--primary);
 
  color:#fff;
 
                border-bottom:none;
 
}
 
#searchInput::-webkit-input-placeholder {
 
color:#fff;
 
opacity:0.8;
 
}
 
#searchInput::-moz-placeholder {
 
color:#fff;
 
opacity:0.8;
 
 
}
 
}
 
}
 
}

Revision as of 17:56, 15 January 2020

/***** CSS placed here will be applied to all skins on the entire site. *****/
/* common colours: Blue: #006CB0, Green: #5FB919 */
:root {
   --primary: #60AE26; /* green */
   --primary-highlight: #69be2a; /* bright green */
   --secondary: #006CB0; /* blue */
   --tiltawiki: #870d4e; /* tiltawiki primary */
}
/* Hide title and tagline on Main Page */
body.page-Coasterpedia_The_Roller_Coaster_Wiki h1.firstHeading,
body.page-Coasterpedia_The_Roller_Coaster_Wiki #siteSub {
   display: none;
}
/* no support for Safari / Chrome as they can't render it correctly */
@media screen and (min-width:1024px) {
.mp-columns {
   width:100%;
   -webkit-column-count:2;
   -moz-column-count:2;
   column-count:2;
   -webkit-column-gap:1em;
   -moz-column-gap:1em;
   column-gap:1em;
}
.mp-columns .main-page-box {
   break-inside:avoid; /* ie */
   page-break-inside:avoid; /* firefox */
}
.mp-columns .force-break {
   -webkit-column-break-before:always;
}
}
/* Mark redirects in Special:Allpages and Special:Watchlist */
.allpagesredirect, .watchlistredirect {
   font-style: italic;
}
.allpagesredirect:after {
   color: #808080; content: " (redirect)";
}
.restricted {
   width:300px;
}
/*** Infobox styling ***/
.infobox {
    border-style: solid;
    float:right;
    margin:0 0 0 0;
    vertical-align: middle;
    clear: right;
    margin: .5em;
    width: 250px;
    background: #FFFFFF;
    font-size: smaller;
    line-height: 1.5;
    border-left: 1px solid #006CB0;
    border-right: 1px solid #006CB0;
    border-bottom: 1px solid #006CB0;
    border-top: none;
    word-break: break-word;
    border-radius:2px;
}
.infobox-image img {
    width:100%;
    height:auto;
}
.infobox-video, .infobox-video-mobile {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    background: var(--primary);
    border-radius: 5px;
    color: #FFF;
    font-weight: bold;
    text-align: center;
}
.infobox-title {
    text-align: center;
    color: #FFF;
    background:var(--primary);
    font-size: larger;
}
.infobox-caption {
    color: #FFF;
    font-weight: normal;
    background: #006CB0;
    text-align: left;
}
.infobox-row-title {
    min-width: 85px;
    font-weight: bold;
}
.infobox-image-caption {
   font-weight: normal;
   text-align:center;
}
.infobox-new {
   float:right;
   width:300px;
   background-color:#fff;
   font-size:0.9em;
   font-family:'Roboto', sans-serif;
   border-radius:2px;
   color:rgba(0,0,0, 0.54);
}
.infobox-multitrack .infobox-new-title {
   width:30%;
}
@media screen and (min-width:1360px) { /* make infobox wider on wide screens */
   .infobox-new,
   .restricted {
      width:350px;
   }
}
@media screen and (max-width:1359px) {
   .table-flag img {
      width:20px;
      height:13px;
   }
}
.infobox-new-image img {
   width:100% !important;
   height:auto !important;
}
.infobox-new-image {
   padding:0;
}
.infobox-new-title {
   color:#252525;
}
.infobox-new-multicolumn {
   width:49%;
}
.infobox-new-multicolumn:nth-child(odd) {
   float:left;
}
.infobox-new-multicolumn:nth-child(even) {
   float:right;
}
.infobox-flag {
   margin:-1px 3px -1px -1px !important;
}
.infobox-new td {
   padding:0 5px;
}
.status-operating a {
   color:green;
}
.status-construction a,
.status-instorage a,
.status-sbno a {
   color:orange;
}
.status-defunct a,
.status-unknown a {
   color:red;
}
/* Decrepit Styling for Wikia-style infoboxes.
   These are deprecated and being phased out, but still in use on many pages! */
.infobox-old {
   border: 1px solid #aaaaaa;
   background-color: #f9f9f9;
   margin-bottom: 0.5em;
   margin-left: 1em;
   padding: 0.2em;
   float: right;
   clear: right;
   width: 250px;
}
.infobox-old td,
.infobox-old th {
   vertical-align: top;
}
/*** Easy box ***/
.box {
    border-style:       solid;
}
.box-blue {
    background-color:   #C4C4FF;
    border-color:       #0000FF;
}
.box-purple {
    background-color:   #e0c1ef;
    border-color:       #9932cc;
}
.box-red {
    background-color:   #ffb2b2;
    border-color:       #ff0000;
}
.box-yellow {
    background-color:   #ffffb2;
    border-color:       #ffff00;
}
.box-green {
    background-color:   #CCFFCC;
    border-color:       #00ff00;
}
.box-grey {
    background-color:   #FBFBFB;
    border-color:       #AAAAAA;
}

/*** Notice ***/
/*** Mobile CSS at MediaWiki:Refreshed.css ***/
.notice {
    margin-bottom: 2px;
    background-color: #FBFBFB;
    border: 1px solid #AAA;
}
.notice-tabbed {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    border:0px;
}
.notice-tabbed-main {
    border: 1px solid #aaa;
    border-left:0px;
}
/* Coloured tab */
.notice-tab {
    width: 8px;
    border: 0px;
}
.notice-tab.blue {
    background-color: #1e90ff; /* Info */
}
.notice-tab.purple {
    background-color: #9932cc; /* Talk, Archives */
}
.notice-tab.yellow {
    background-color: #f4c430; /* Cleanup */
}
.notice-tab.orange {
    background-color: #f28500; /* Help */
}
.notice-tab.red {
    background-color: #b22222; /* Urgent */
}
/** Custom notice styles **/
/* COASTER-net talk */
.notice-COASTERnet {
    background-color: #000;
    background-image: url('http://coasterpedia.net/w/images/e/ec/COASTER-net_and_swoosh.png');
    background-repeat: no-repeat;
    background-position: bottom right;
    color: #FFF;
}
.notice-COASTERnet a:link, .notice-COASTERnet a:visited {
    color: #FFC211;
}

/* === USERBOXES  === */
 
table.userbox { float:left; margin:0.2em; padding:0; border-width:1px; border-style:solid; }
table.userbox td.left, table.userbox td.right { text-align:center; vertical-align:middle; font-size:1.6em; padding:0; }
table.userbox td.main { padding:0 4px; vertical-align:middle; line-height:125%; font-size:0.9em; }

table.userbox { border-color:#aaa; background:#f8f8f8; }
table.userbox td.left, table.userbox td.right { background:#d8d8d8; }

/* User name highlighting */
/* admin - green */
a[href="/wiki/User:MontagnaMagica"],
a[href="/wiki/User:Lachlan"],
a[href="/wiki/User:WeepinnWillow"],
a[href="/wiki/User:Matt_N"],
a[href="/wiki/User:Ibuddy66"],
a[href="/wiki/User:Jason_foulkes"]{ color:var(--primary) !important; }
/* bots - red */
a[href="/wiki/User:LoopingStar"],
a[href="/wiki/User:Delete_page_script"],
a[href="/wiki/User:Babel_AutoCreate"] { color:red !important; }
/* Sorts monobook text spacing problems */
#mw-content-text sup {
    line-height: 0;
}
/* ID for content only to be displayed in mobile. */
#mobile-only {display:none;} /* don't use. */
.mobile-only {display: none;} /* use this, not ID */
/*** Table cell format ***/
.table-header {
    background-image: url('http://coasterpedia.net/w/images/7/78/Background_strip.png');
    color:#FFF;
}
td.table-na {
    background: #ececec;
    color: grey;
    vertical-align: middle; 
    text-align: center
}
td.table-new {
    background: #9FF;
    color: black;
    vertical-align: middle;
    text-align: center;
}
td.table-yes {
    background: #90ff90;
    color: black;
    vertical-align: middle;
    text-align: center;
}
td.table-no {
    background: #ff9090;
    color: black;
    vertical-align: middle;
    text-align: center;
}
.interface-box {
    width: 100%;
    border-width:2px;
    border-color: #F0F0F0;
    border-radius: 3px;
}

/* Navbox */
.navbox {
    width:100%; 
    font-size:90%;
    text-align: center;
    background-color: #fff;
    border-spacing: 0;
    overflow: hidden;
    margin-top: 5px;
    border:1px solid rgba(0,0,0,.1);
    border-top:none;
}
.navbox-header {
    background-color:#60AE26;
    font-weight: bold;
    color:#FFFFFF;
    padding: 3px 0; /* Top/Bottom Left/Right */
}
.navbox-header a {
    color: #FFFFFF;
}
.navbox-subheader {
    background:#3366CC;
    width:100px;
    padding: 2px;
    color:#fff;
}
.navbox-test-subheader {
    background:#3366CC;
    padding-bottom: 1px;
    width:100px;
    float:left;
}

.navbox-new {
   width:100%;
   overflow:hidden;
}
.navbox-new-header {
   background-color:#60AE26;
   width:100%;
   text-align:center;
   color:#fff;
   font-weight:bold;
}
.navbox-new-image {
   width:200px;
   float:right;
}
.navbox-new-row {
   border-collapse:collapse;
}
.navbox-new-subheading {
   background-color:#3366CC;
   width:100px;
   color:#fff;
   font-weight:bold;
   text-align:right;
}
/* Record holder boxes (Template:Record holder) */
.record-holder {
    width: 60%;
    min-width: 500px;
    margin-top: 5px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    display:table;
}
.record-holder-record-mobile {
    display: none;
}
.record-holder-preceded, .record-holder-succeeded {
    width: 30%;
}
.record-holder-record {
    width: 40%;
}
.record_holder {
    width: 60%;
    min-width: 500px;
    margin-top: 5px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.record_holder-preceded, .record_holder-succeeded {
    width: 30%;
}
.record_holder-preceded {
    float: left;
}
.record_holder-succeeded {
    float: right;
}
.record-holder-record {
    width: 40%;
}
/* Hide link icons */
.hide-link-icons a.external {
    background:none !important;
    padding: 0px !important;
}
.long-list {
    -webkit-column-width: 200px;
    -moz-column-width: 200px;
    column-width: 200px;
}
.long-list li {
    page-break-inside: avoid; <!-- Firefox -->
    -webkit-column-break-inside:avoid;
    -moz-column-break-inside:avoid;
    column-break-inside:avoid;
    break-inside: avoid;
}
@media screen and (min-width: 1300px) {
    .long-list {
        -webkit-column-width: 250px;
        -moz-column-width: 250px;
        column-width: 250px;
    }
}

ul {
    list-style-type: disc;
}

.jump-to ul {  
   list-style-type:disc;
   margin:0 !important;
}
.jump-to li {
   display:inline;
}
.list-horizontal li {
	display:inline-block;
}
.list-horizontal li:before {
	content: '\00a0\2022\00a0\00a0';
	color:rgba(0,0,0,0.5);
}
.list-horizontal li:first-child:before {
	content: '';
}

.related-media-icon {
   background:url('http://coasterpedia.net/w/images/2/26/Photo_library.png');
   background-size:24px 24px;
   background-color:#60AE26;
}
#elementbox_title {
   color:#fff;
   text-align:left;
   font-size:18px;
}

/* YEARLY REFERENCE TEMPLATE */
.yr-section {
   background-color:#f9f9f9;
   float:left;
   border:1px solid #aaa;
}
.yr-section-header {
   background-color:#f2f2f2;
   text-align:center;
   font-weight:bold;
   border-bottom:1px solid #aaa;
}
.yr-section-header,
.yr-section-content {
   padding:0.2em 0.4em;
}
.yr-section:not(:last-child) {
   border-right:none;
}
#wpTextbox1 {
   -webkit-overflow-scrolling:touch; /* for iPad editing, thanks Apple */
}
.table-flag {
   margin-bottom:-0.2em;
   margin-top:-0.2em;
   height:27px;
}
@media (max-width: 600px) {
   .mw-echo-ui-notificationBadgeButtonPopupWidget-popup {
      top:56px !important;
      left:0 !important;
      overflow:hidden;
   }
   .oo-ui-popupWidget-popup {
      width:98% !important;
   }

#pt-notifications-alert .mw-echo-notifications-badge, #pt-notifications-notice .mw-echo-notifications-badge
   .avatar {
      margin-top:0;
   }
   .oo-ui-clippableElement-clippable.oo-ui-popupWidget-body {
      width:auto !important;
   }
   .mobile-min-width {
      width:1200px;
   }
   .mobile-fullwidth {
      width:100% !important;
   }
   .action-edit #footer,
   .action-submit #footer,
   .action-edit .editpage-head-copywarn,
   .action-submit .editpage-head-copywarn,
   .action-edit .templatesUsed,
   .action-submit .templatesUsed,
   .infobox-new-header,
   .mw-editsection-visualeditor,
   .mw-editsection-divider {
      display:none;
   }
   #firstHeadingContainer {
      overflow-x:auto;
   }
   /*** MOBILE SIDEBAR ***/
        .main img {
           width:158px;
           height:56px;
        }
	#sidebar .main {		
		padding-top:12px;		
		padding-bottom:12px;		
		padding-left:22px;
	}		
	#sidebar li {		
		padding:0;		
		margin:0;
	}
}
/* VERY SMALL PHONES - iPhone <6, SE, small Androids */
@media screen and (max-width:320px) {		
	#sidebar a {		
		padding-top:7px;		
		padding-bottom:7px;		
	}		
	#sidebar .main {		
		padding-top:7px;		
		padding-bottom:7px;		
	}
        .elementbox-wide {
           width:100% !important;
           margin:0;
           float:initial;
        }
}
#firstHeading {
   margin:0;
   padding:0;
}
.main-header-button {
   height:64px;
   padding:0;
   line-height: 64px;
}
#header .search {
   height:40px !important;
   padding:12px !important;
}
.avatar-no-socialprofile,
.arrow {
   height:64px;
   line-height:64px ;
}
.username {
   line-height:64px !important;
}
.editButtons input {
   border:none;
   background:none;
   color:#000;
   border-radius:2px !important;
   text-transform:uppercase;
   font-weight:bold;
   font-family:'Roboto', sans-serif;
   min-width:88px;
   height:36px;
   font-size:14px;
   margin:0 4px;
   padding:0 8px;
}
.editButtons input:hover,
.editButtons input:focus {
   background-color:rgba(153,153,153,0.2);
   outline:none;
}
.editButtons input:active {
   background-color:rgba(153,153,153,0.4);
   outline:none;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-constructive > .oo-ui-buttonElement-button {
   background-color: var(--primary) !important;
   color:#fff;
   box-shadow:0 3px 6px rgba(0,0,0,0.23);
   border:none;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
   background-color: var(--primary);
   border-color: var(--primary);
}
#wpSave:active {
   box-shadow:0 10px 10px rgba(0,0,0,0.22);
}
#maintitlemessages {
    margin-top: -3px;
}
div.thumbinner {
   padding-top:0px !important;
   border:none !important;
   background:#fff !important;
   border-radius:2px;
}
.action-edit textarea,
.action-submit textarea,
.mw-summary {
    font-size:13px;
    resize:none;
}
@media only screen and (device-width: 768px) {
  /* iPads */
  .action-edit textarea,
  .action-submit textarea {
		font-size:17px;
		resize:none;
  }
}
.loginsignup {
    display: none !important;
}
#userinfo > a:hover {
	background-color: #5FB919;
	color: #CCC;
}
#userinfo .headermenu {
	background-color: rgb(96, 174, 38);
	background-color: rgba(96, 174, 38, 0.8);
}
.headermenu a:hover {
	opacity: 1;
	background-color: #5FB919;
	text-decoration: none;
}
.suggestions .header-suggestions {
   display:block !important;
}
.header-suggestions {
   font-family:'Roboto', sans-serif;
   border-radius:2px;
}
.header-suggestions .suggestions-result:hover,
.header-suggestions .suggestions-result:focus {
   background-color:#eee;
   color:black;
   outline:none;
}
.suggestions-result {
   border-bottom:none;
   font-size:16px;
}
textarea {
   border-radius: 2px !important;
}
@media screen and (width:768px) and (height:1024px), /* tablets */
       screen and (max-width:600px) {
       .action-edit textarea,
       .action-submit textarea {
        width: 100%;
        font-family:monospace;
    }
}
/* Display text below main article header, located at MediaWiki:tagline */
#siteSub {
    display: inline;
    font-size: 0.8em;
}
.infobox {
    margin-right: 0;
}
/* Styling for phones only */
/* use mobile styles on templates and skin on devices with screen resolution <600px
   use mobile styles on skin but tablet styles on devices with screen resolution 600px eg Tesco Hudl
   anything larger use tablet skin */
@media screen and (max-width: 599px) {
   .header-suggestions {
      font-size:12px !important;
      top:61px !important;
   }
   .infobox-video {
      width: 100%;
   }
   .infobox-old {
       width: 100%;
       margin: 5px 0; /* Top/Bottom, Left/Right */
   }
    .infobox, 
    .infobox-new {
    width: 100% !important;
    margin: 8px 0; /* Top/Bottom, Left/Right */
    }
    .restricted {
       width:100% !important;
       margin-bottom:8px
    }
    .mw-gallery-traditional .gallery {
        width: 100%;
    }
    .mw-gallery-traditional .gallerybox {
        width:45% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .mw-gallery-traditional .gallerybox > div {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .mw-gallery-traditional .thumb {
        width: 100% !important;
        background: none !important;
        border: none !important;
        margin: 0 !important;
    }
    .mw-gallery-traditional .thumb > div,
    .rcoptions {
        margin: 0 !important;
    }
    .mw-gallery-traditional img {
        width: 100% !important;
        height: auto !important;
    }
}
@media screen and (max-width: 600px) {
   #header .search {
      padding:0 !important;
      height:56px !important;
   }
.park-present,
.park-former {
   display:inline;
   margin-left:-1em !important;
   margin-right:-1em !important;
   background:none !important;
   border:none !important;
   width:100%;
}
.park-present td, 
.park-former td {
   display:inline;
   border:none !important;
}
.park-present td:nth-child(1)::after,
.park-former td:nth-child(1)::after,
.park-present td:nth-child(2)::after,
.park-former td:nth-child(2)::after {
   content:",";
}
.park-present td:nth-child(3)::before,
.park-former td:nth-child(3)::before {
   content:"Type: ";
}
.park-present thead,
.park-former thead {
   display:none;
}
.nomarginsonphones { /* for elements tight on space, claim more space on phones */
   margin-left:-1em !important;
   margin-right:-1em !important;
}
.main-page-column {
   width:100% !important;
}
    .navbox-content select {
       width:100%;
       background:none;
       border:none;
       font-size:1.5em;
    }
    .wide-table td:nth-child(2)::before   {
       content: " at  ";
    }
    .wide-table {
       border:none !important;
       background:none !important;
    }
    .wide-table thead {
       display:none;
    }
    .wide-table td {
       display:inline;
       background:none !important;
       border:none !important;
    }
    .wide-table tr {
       background:none;
       border:none;
       display:list-item;
       padding:1em 0;
       border-bottom:1px solid #f0f0f0;
    }
    .wide-table .table-na {
       display:none;
    }
    .record-holder {
        width:100%;
        margin-left:0;
        margin-right:0;
        min-width:0;
    }
    .record-holder-preceded, .record-holder-succeeded {
    width: 50%;
    }
    .record-holder-record-mobile {
        display: table-row;
    }
    .record-holder-record {
        display: none;
    }
    .mobile-only {
        display: inline;
    }
    .navbox td, .navbox th {
        display:block;
        width:100%;
    }
    .thumb {
        margin-bottom: 0;
    }
    .navbox {
        max-width: 100%;
    }
    /* Notice templates */
    .notice {
        width: 100%;
        text-align: center;
        background: none;
        color: #000;
        border: none;
    }
    /* Edit page styles */
    .action-edit #contentwrapper {
        top: 0;
    }
    #siteSub,
    #toolbar,
    .nomobile,
    .mw-editTools,
    #emoticon-board,
    .action-edit #header,
    .action-edit #leftbar,
    .action-edit #rightbar,
    .action-submit #header,
    .action-submit #leftbar,
    .action-submit #rightbar
    .action-edit #siteSub,
    .action-edit #localNotice,
    .action-submit #localNotice,
    .action-submit #siteSub
    .record-table .table-na,
    #mw-delete-table legend,
    .location-hide {
      display:none;
    }
    #editform textarea,
    .mw-summary,
    #wpDeleteReasonRow input {
        font-size:17px; /* Prevents zooming in while typing */
        border-radius: 0;
        margin:0 !important;
    }
    #wpDeleteReasonRow input {
        width:90%;
    }
    #mw-delete-table {
        padding:0;
        border:none;
    }
    #mw-deleteconfirm-table td {
        display:inline;
    }
    .editOptions,
    .editCheckboxes {
        background: none;
        border: none;
        margin-bottom: 0;
        padding: 0;
    }
    .action-edit #footer,
    .action-submit #footer {
        top:0;
    }
    #wpSave {
        margin-left:0; /* overriding default style */
    }
    .mw-history-compareselectedversions-button,
    .mw-history-revisiondelete-button {
        width: 100%;
    }
    .wide-image {
        max-width: 100%;
        overflow: auto;
    }
    /* Remove columns on category pages */
    #mw-subcategories td, #mw-pages td {
        position: relative;
        float:left;
        clear:both;
        text-align:left;
        width: 100% !important;
    }
    /* Main page formatting */
    #main_page-column_left, #main_page-column_right {
        width: 100%;
    }
    .long-list {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
    .mw-special-Recentchanges legend {
        padding: 0;
    }
   #maintitlemessages {
      padding-left: 0;
   }
   .record-table th,
   .record-table td {
      display:inline;
      border:none !important;
      background:none !important;
      line-height:1.25;
   }
   .record-table {
      background:none !important;
      border:none !important;
   }
   .record-table tr {
      display:block;
      padding:1em 0;
      border-bottom:1px solid #f0f0f0;
   }
   .record-table .amusement-park-name::before {
      content: "at ";
   }
   .record-table-duration::before {
      content: "Record held from ";
   }
   .record-table .location-name::before {
      content: "in ";
   }
   .yr-section {
      width:calc(25% - 2px);
   }
.page-Main_Page #small-toolbox-wrapper {
   display:none;
}
}
.boxshadow,
.infobox,
.navbox,
#catlinks,
.main-page-box,
.thumb,
.record-holder,
.header-menu,
.wikitable.material-design tbody {
   box-shadow:0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
}

.ui-autocomplete {
	font-size:1em;
}

.ve-ignore .ve-ui-mwNoticesPopupTool-item {
	display:none;
}