Difference between revisions of "MediaWiki:Refreshed.css"

From BIONICLEsector01
m
m (inherent http/s protocol for biosector01.com domain)
Line 4: Line 4:
 
@import url('https://fonts.googleapis.com/css?family=Lato:400,400i');
 
@import url('https://fonts.googleapis.com/css?family=Lato:400,400i');
 
body {
 
body {
   background: linear-gradient(135deg, rgba(70, 162, 166, 0.65) 15%, rgba(70, 162, 166, 0) 75%) no-repeat center center fixed, #a8dae3 url(https://biosector01.com/w/skins/MonoBook/bgbio2015.jpg) no-repeat center center fixed;
+
   background: linear-gradient(135deg, rgba(70, 162, 166, 0.65) 15%, rgba(70, 162, 166, 0) 75%) no-repeat center center fixed, #a8dae3 url(//biosector01.com/w/skins/MonoBook/bgbio2015.jpg) no-repeat center center fixed;
 
   background-size: cover, cover;
 
   background-size: cover, cover;
 
}
 
}

Revision as of 03:49, 27 January 2019

/*******************************************************************************
***************************** STYLES FOR ALL LAYOUTS ***************************
*******************************************************************************/
@import url('https://fonts.googleapis.com/css?family=Lato:400,400i');
body {
  background: linear-gradient(135deg, rgba(70, 162, 166, 0.65) 15%, rgba(70, 162, 166, 0) 75%) no-repeat center center fixed, #a8dae3 url(//biosector01.com/w/skins/MonoBook/bgbio2015.jpg) no-repeat center center fixed;
  background-size: cover, cover;
}
#header-wrapper {
  /* background for the header */
  background: none;
}
/* "header buttons" (the buttons in the header, the wiki logo button in the
sidebar in the small layout, and arrow button next to that logo) */
/* :hover styles */
.header-button:hover {
  /* background for a header button when it's hovered over */
background: none;
}

.header-button:hover span,
.header-button:hover svg,
.header-button:hover img {
  /* opacity for text or icons in a header button when it's hovered over */
  opacity: 0.5;
}
/* :active styles */
.header-button:active,
.refreshed-dropdown-checkbox:checked ~ .header-button.refreshed-dropdown-button,
.refreshed-collapsible-checkbox:checked ~ .header-button.refreshed-collapsible-button,
#sidebar-toggler-checkbox:checked ~ #header-wrapper #sidebar-toggler-button {
  /* background for a header button when it's active */
background: none;
}

.header-button:active span,
.refreshed-dropdown-checkbox:checked ~ .header-button.refreshed-dropdown-button span,
.refreshed-collapsible-checkbox:checked ~ .header-button.refreshed-collapsible-button span,
#sidebar-toggler-checkbox:checked ~ #header-wrapper #sidebar-toggler-button span,
.header-button:active svg,
.refreshed-dropdown-checkbox:checked ~ .header-button.refreshed-dropdown-button svg,
.refreshed-collapsible-checkbox:checked ~ .header-button.refreshed-collapsible-button svg,
#sidebar-toggler-checkbox:checked ~ #header-wrapper #sidebar-toggler-button svg,
.header-button:active img,
.refreshed-dropdown-checkbox:checked ~ .header-button.refreshed-dropdown-button img,
.refreshed-collapsible-checkbox:checked ~ .header-button.refreshed-collapsible-button img,
#sidebar-toggler-checkbox:checked ~ #header-wrapper #sidebar-toggler-button img {
  /* opacity for text or icons in a header button when it's active */
  opacity: 0.5;
}
/* sidebar buttons (the buttons for the header categories that are in the
sidebar in the small layout) */
/* :hover styles */
.sidebar-button:hover {
  /* background for a sidebar button when it's hovered over */
background: #a8dae3;
  /* font color for a sidebar button when it's hovered over */
  color: #252525;
}
/* :active styles */
.sidebar-button:active,
.refreshed-collapsible-checkbox:checked ~ .sidebar-button.refreshed-collapsible-button {
  /* background for a sidebar button when it's active */
background: #a8dae3;
  /* font color for a sidebar button when it's active */
  color: #252525;
}
/* the button that opens the tools dropdown in the toolbox */
#toolbox-dropdown-button {
  /* background for the toolbox dropdown button */
  background: #a8dae3;
}
/* :hover styles */
#toolbox-dropdown-button:hover {
  /* background for the toolbox dropdown button when it's hovered over */
background: #6ec1d0;
}
/* :active styles */
#toolbox-dropdown-checkbox:checked ~ #refreshed-toolbox #toolbox-dropdown-button {
  /* background for the toolbox dropdown button when it's active */
  background: #6ec1d0;
}
.refreshed-collapsible-tray {
  /* set the colors of collapsible trays (for example, in the small layout, the
  trays in the sidebar) */
  background-color: #a8dae3;
  color: #252525;
}
#content-wrapper {
  /* background-color for the page content */
  background-color: rgba(255, 255, 255, 0.75);
  /* font family for the page content */
  font-family: inherit;
  /* font color for the page content */
  color: #252525;
}
.firstHeading,
.mw-headline,
.sidebar-heading,
.toc h2 {
  /* font family for headings */
  font-family: Lato, sans-serif;
  font-variant: all-small-caps;
  letter-spacing: .05em;
  font-weight: normal;
}
/* Typography */
.firstHeading {
  font-family: TradeMarker Light, Lato, sans-serif;
}
/*******************************************************************************
***************************** STYLES FOR BIG LAYOUT ****************************
*******************************************************************************/
@media screen and (min-width: 1001px) {
  /* height for the header */
  #header-wrapper,
  .refreshed-logo-sidebar-current,
  #site-navigation-sidebar-collapsible-button {
    height: 3em;
  }
  #explore-header-categories-dropdowns {
    margin-top: -3em;
  }
  #content-footer-wrapper {
    margin-top: 3em;
  }
  #refreshed-toolbox {
    top: 3em;
  }
  /* If we use an inline sidebar, we'll eventually only want #sidebar-wrapper
  to have the margin-top so the sidebar is below the header.
  If we use a menu sidebar, we'll eventually only want #sidebar to have the
  margin-top so the takes up the viewport's whole height when it opens. */
#sidebar-wrapper,
  #sidebar {
    margin-top: 3em;
}

.header-button-textless {
width: 3em;
}
  /* When you click a section link (for example, when you click a link in th
  table of contents), ensure the headline that you jump to isn't blocked by
  the header.
  Note these properties are adjusted with JS to account for the toolbox if it's
  set to sticky. */
.mw-headline {
padding-top: 3em;
margin-top: -3em;
}

.refreshed-icon-refreshed-menu,
  .refreshed-icon-search,
  .refreshed-icon-refreshed-explore {
width: 1.5em;
height: auto;
}
  /* width for the sidebar */
#sidebar-wrapper {
width: 11em;
}

#content-footer-wrapper {
margin-left: 11em;
}

.single-wiki .refreshed-logo-current,
  .refreshed-logo-other .site-navigation-logo-img,
  .refreshed-logo-other .site-navigation-logo-text {
width: 11em;
max-width: 11em;
}

.multiple-wikis .refreshed-logo-current {
width: 9em;
max-width: 9em;
}

#site-navigation-header-dropdown-tray {
min-width: 11em;
}

#content-footer-wrapper {
margin-left: 11em;
}

.refreshed-toolbox-stuck {
left: 11em;
}
  /* do NOT use make the toolbox stick to the top when you scroll down */
.refreshed-toolbox-sticky {
position: static;
}

.refreshed-toolbox-stuck {
background-color: inherit;
padding-left: inherit;
padding-right: inherit;
margin: inherit;
box-shadow: none;
}
}
/*******************************************************************************
**************************** STYLES FOR MEDIUM LAYOUT **************************
*******************************************************************************/
@media screen and (min-width: 720px) and (max-width: 1000px) {
  /* height for the header */
#header-wrapper,
  .refreshed-logo-sidebar-current,
  #site-navigation-sidebar-collapsible-button {
	height: 2.5em;
}

#explore-header-categories-dropdowns {
	margin-top: -2.5em;
}

#content-footer-wrapper {
	margin-top: 2.5em;
}

#refreshed-toolbox {
	top: 2.5em;
}
  /* If we use an inline sidebar, we'll eventually only want #sidebar-wrapper
  to have the margin-top so the sidebar is below the header.
  If we use a menu sidebar, we'll eventually only want #sidebar to have the
  margin-top so the takes up the viewport's whole height when it opens. */
  #sidebar-wrapper,
  #sidebar {
    margin-top: 2.5em;
  }
  .header-button-textless {
    width: 2.5em;
  }
  /* When you click a section link (for example, when you click a link in th
  table of contents), ensure the headline that you jump to isn't blocked by
  the header.
  Note these properties are adjusted with JS to account for the toolbox if it's
  set to sticky. */
  .mw-headline {
    padding-top: 2.5em;
    margin-top: -2.5em;
  }
  .refreshed-icon-refreshed-menu,
  .refreshed-icon-search,
  .refreshed-icon-refreshed-explore {
    width: 1.25em;
    height: auto;
  }
  /* width for the sidebar */
  #sidebar-wrapper {
    width: 14em;
    left: -14em;
  }
  .single-wiki .refreshed-logo-current,
  .refreshed-logo-other .site-navigation-logo-img,
  .refreshed-logo-other .site-navigation-logo-text {
    max-width: 12em;
  }
  .multiple-wikis .refreshed-logo-current {
    max-width: 10em;
  }
  #site-navigation-header-dropdown-tray {
    min-width: 12em;
  }
  #sidebar-wrapper {
    /* background for the sidebar */
    background: #068196;
    /* font color for the sidebar */
    color: #fff;
  }
  /* do NOT use make the toolbox stick to the top when you scroll down */
  .refreshed-toolbox-sticky {
    position: static;
  }
  .refreshed-toolbox-stuck {
    background-color: inherit;
    padding-left: inherit;
    padding-right: inherit;
    margin: inherit;
    box-shadow: none;
  }
}
/*******************************************************************************
**************************** STYLES FOR SMALL LAYOUT ***************************
*******************************************************************************/
@media screen and (max-width: 719px) {
  /* height for the header */
  #header-wrapper,
  .refreshed-logo-sidebar-current,
  #site-navigation-sidebar-collapsible-button {
    height: 3em;
  }
  #explore-header-categories-dropdowns {
    margin-top: -3em;
  }
  #content-footer-wrapper {
    margin-top: 3em;
  }
  #refreshed-toolbox {
    top: 3em;
  }
  /* If we use an inline sidebar, we'll eventually only want #sidebar-wrapper
  to have the margin-top so the sidebar is below the header.
  If we use a menu sidebar, we'll eventually only want #sidebar to have the
  margin-top so the takes up the viewport's whole height when it opens. */
#sidebar-wrapper,
  #sidebar {
	margin-top: 3em;
}

.header-button-textless {
	width: 3em;
}
  /* When you click a section link (for example, when you click a link in th
  table of contents), ensure the headline that you jump to isn't blocked by
  the header.
  Note these properties are adjusted with JS to account for the toolbox if it's
  set to sticky. */
.mw-headline {
	padding-top: 3em;
	margin-top: -3em;
}

.refreshed-icon-refreshed-menu,
  .refreshed-icon-search,
  .refreshed-icon-refreshed-explore {
	width: 1.5em;
	height: auto;
}

#sidebar-wrapper {
    /* background for the sidebar */
	background: #068196;
    /* font color for the sidebar */
	color: #fff;
}
}
/*******************************************************************************
********************************************************************************
*************************** END BASIC CONFIG TEMPLATE **************************
********************************************************************************
*******************************************************************************/
/*** add extra padding to bottom of content ***/
#bodyContent {
	padding-bottom: 1em;
}
/*** remove box shadows from header and content ***/
#header-wrapper,
#content-wrapper {
	box-shadow: none;
}
/*** background for the footer for legibility ***/
#footer-wrapper {
	background: radial-gradient(at top center, rgba(70, 162, 166, 0.65) 25%, rgba(70, 162, 166, 0) 75%) no-repeat center center;
}
/*** don't fix header/sidebar to the viewport ***/
#header-wrapper {
  position: absolute;
}
@media screen and (min-width: 1001px) {
  div#sidebar-wrapper {
    /* div for specificity */
    overflow-y: visible;
    position: absolute;
  }
}
/*** make text inside the sidebar smaller ***/
.sidebar-item {
  font-size: 0.9em;
}
/*** don't fix sidebar to the viewport in the big layout ***/
@media screen and (min-width: 1001px) {
	#sidebar-wrapper {
		position: absolute;
	}
}
/*** remove padding from the logo icon ***/
.site-navigation-logo-img {
	padding: 0;
}
/*** wider search bar on big ***/
@media screen and (min-width: 1001px) {
	#header-search-dropdown-tray {
		width: 20em;
	}
}
/*** hide username and user dropdown arrow ***/
#user-info-dropdown-button .refreshed-username,
#user-info-dropdown-button .refreshed-icon-refreshed-dropdown-expand {
	display: none;
}
/*** move sidebar social buttons ***/
.sidebar-social-button {
	padding-left: 1em;
	margin-left: 5px !important;
}
/*** change various items' border color ***/
#main-title-messages,
h1,
h2,
h3,
h4,
h5,
h6,
.catlinks li {
  border-color: #bbb;
}
/*** header search selection style on the big layout ***/
@media screen and (min-width: 1001px) {
  #searchInput:focus {
    outline: 0;
    border-color: #056b7d;
    box-shadow: inset 0 0 0 0.2em #056b7d;
  }
}
/*** style table of contents, categories ***/
.catlinks,
.toc {
  background-color: rgba(255, 255, 255, 0.75);
  border: 1px solid #fff;
}
/*** content bevel ***/
/* position the bevel relative to the content */
#content-wrapper {
  position: relative;
}
/* bevel */
#content-wrapper::before {
  content: '';
  height: 0;
  position: absolute;
  bottom: 100%;
  right: 0;
}
@media screen and (min-width: 1001px) {
  /* prevent flexbox from centering logo */
  .refreshed-logo-current.header-button {
    display: inline-block;
  }
  /* move content down to make room for bevel */
  #content-wrapper {
    margin-top: 5em;
  }
  /* fill in bevel */
  #content-wrapper::before {
    border-left: 2em solid transparent;
    border-bottom: 2em solid rgba(255, 255, 255, 0.75);
  }
  /* set the dimensions of the site navigation and sidebar toggler */
  div#sidebar-toggler,
  #sidebar-toggler-button {
    /* div for specificity */
    width: 4.5em;
    height: 4.5em;
  }
  div#site-navigation-header {
    height: 4.5em;
  }
  .refreshed-icon-refreshed-menu {
    width: 2.25em;
  }
  /* position bevel */
  div#site-navigation-header {
    padding-top: 0.25em;
    padding-left: 0.25em;
    padding-right: 0.25em;
  }
  .single-wiki .refreshed-logo-current,
  .refreshed-logo-other .site-navigation-logo-img,
  .refreshed-logo-other .site-navigation-logo-text {
    width: 14.9em;
    max-width: 14.9em;
  }
  .multiple-wikis .refreshed-logo-current {
    width: 12.9em;
    max-width: 12.9em;
  }
  #site-navigation-header-dropdown-tray {
    min-width: 14.9em;
  }
  /* the bevel has to be far enough over to leave room for the site navigation */
  #content-wrapper::before {
    left: 4.15em;
  }
  /* push sidebar down */
  #sidebar-wrapper {
    margin-top: 4.75em;
  }
  /* move header categories above bevel */
  #header-categories-user-info-search-wrapper {
    margin-left: 2.25em;
  }
}
@media screen and (min-width: 720px) and (max-width: 1000px) {
  /* prevent flexbox from centering logo */
  .refreshed-logo-current.header-button {
    display: inline-block;
  }
  /* move content down to make room for bevel */
  #content-wrapper {
    margin-top: 3.5em;
  }
  /* fill in bevel */
  #content-wrapper::before {
    border-left: 1em solid transparent;
    border-bottom: 1em solid rgba(255, 255, 255, 0.75);
  }
  /* set the dimensions of the site navigation and sidebar toggler */
  div#sidebar-toggler,
  #sidebar-toggler-button {
    /* div for specificity */
    width: 3.5em;
    height: 3.5em;
  }
  div#site-navigation-header {
    height: 3.5em;
  }
  .refreshed-icon-refreshed-menu {
    width: 1.75em;
  }
  /* position bevel */
  .single-wiki .refreshed-logo-current,
  .refreshed-logo-other .site-navigation-logo-img,
  .refreshed-logo-other .site-navigation-logo-text {
    max-width: 11.58888889em;
  }
  .multiple-wikis .refreshed-logo-current {
    max-width: 9.58888889em;
  }
  #site-navigation-header-dropdown-tray {
    min-width: 11.58888889em;
  }
  /* the bevel has to be far enough over to leave room for the site navigation
    (which has width @logo-height) and the sidebar toggle button. Then we nudge
    it over a touch more to look good. */
  #content-wrapper::before {
    left: 15.33888889em;
  }
  /* push sidebar down */
  #sidebar-wrapper {
    margin-top: 3.75em;
  }
  /* move header categories above bevel */
  #header-categories-user-info-search-wrapper {
    margin-left: 1.25em;
  }
}
/*** BIONICLE: Encyclopedia-style image thumbnails ***/
div.thumbinner {
  background: none;
  border: none;
  /* get rid of min-width of 100px (looks bad with this style of thumbnail) */
  min-width: 0;
}
html .thumbimage {
  border: none;
}
html .thumbcaption {
  color: #fff;
  background-color: #000;
  position: relative;
  /* MediaWiki sets .thumbcaption's container to be 2px wider than the image; to compensate shrink the caption by 2px (but not on small) */
}

@media screen and (min-width: 1001px) {
	html .thumbcaption {
		margin-left: 1px;
		margin-right: 1px;
	}
}

@media screen and (min-width: 720px) and (max-width: 1000px) {
	html .thumbcaption {
		margin-left: 1px;
		margin-right: 1px;
	}
}

.thumbcaption a {
	color: inherit;
	font-weight: bold;
}

.thumbcaption:before {
	content: "";
	width: 30%;
	min-width: 10px;
	height: 0;
	position: absolute;
	top: -10px;
	left: 0;
	border-right: 10px solid transparent;
	border-bottom: 10px solid #000;
}

.tleft {
	-webkit-clip-path: polygon(calc(100% - 2em) 0, 100% 2em, 100% 100%, 0 100%, 0 0);
	clip-path: polygon(calc(100% - 2em) 0, 100% 2em, 100% 100%, 0 100%, 0 0);
}

.tright {
	-webkit-clip-path: polygon(2em 0, 100% 0, 100% 100%, 0 100%, 0 2em);
	clip-path: polygon(2em 0, 100% 0, 100% 100%, 0 100%, 0 2em);
}
/*** reposition page indicators ***/
.mw-indicators {
	margin-top: 1em;
}
/*** Extension:Echo fixes ***/
/* button position */
#extra-personal-tools {
	padding: 0;
}

#extra-personal-tools li {
	margin: 0 !important;
	margin-left: 0.5em !important;
	padding: 0 !important;
	padding-top: 0.75em !important;
}
/* button opacity */
#pt-notifications-alert .mw-echo-notifications-badge:before,
#pt-notifications-notice .mw-echo-notifications-badge:before,
#pt-notifications-alert .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read,
#pt-notifications-notice .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read {
	opacity: 1;
}
/* button color */
#pt-notifications-alert .mw-echo-notifications-badge:before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E %3Ctitle%3E bell %3C/title%3E %3Cpath fill=%22white%22 d=%22M16 7a5.38 5.38 0 0 0-4.46-4.85C11.6 1.46 11.53 0 10 0S8.4 1.46 8.46 2.15A5.38 5.38 0 0 0 4 7v6l-2 2v1h16v-1l-2-2zm-6 13a3 3 0 0 0 3-3H7a3 3 0 0 0 3 3z%22/%3E %3C/svg%3E");
}

#pt-notifications-notice .mw-echo-notifications-badge:before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E %3Ctitle%3E tray %3C/title%3E %3Cpath fill=%22white%22 d=%22M17 1H3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zm0 12h-4l-1 2H8l-1-2H3V3h14z%22/%3E %3C/svg%3E");
}
/*** widen infobox on small ***/
@media screen and (max-width: 719px) {
	.infobox {
		width: 100% !important;
	}

	.infobox-container {
		width: 100%;
		margin: 1em 0 !important;
	}
}