MediaWiki:Refreshed.less

/* This is a LESS file that is compiled into CSS for use at
MediaWiki:Refreshed.css.

How to use this template:
Save the LESS file somewhere on your wiki, maybe at MediaWiki:Refreshed.less.
Protect it so random users can't edit it!

Optionally, change the page information button (find the button, or view history
and change the &action=history part to &action=info) and change the page's
content model to CSS. It may make editing easier. If you do this, the site may
warn you that the page contains invalid CSS when you edit it. This is not a
cause for concern--the file isn't valid CSS because it's LESS!

Make a note of the latest commit to Refreshed when you downloaded it.
Browse the file tree for that commit online, either at GitHub or on
phabricator.mediawiki.org. Find the URL to the raw copy of mixins-public.less,
and replace the URL in the first line of this file with the URL to that raw
copy. Repeat whenever you download a new version of the skin!

Most parts of the template are optional; if you want to use the default value of
a property, delete it from this template. One exception is that some mixins take
multiple properties as inputs and require all those properties to be explicitly
written out. For example, if you choose to use .mixin-set-dropdown-tray-colors,
you need to pass all three parameters into it.

Once you're satisfied with your LESS, copy/paste it into a compiler.
For example, there is one at beautifytools.com/less-compiler.php. Take the CSS
and copy/paste it into MediaWiki:Refreshed.css. That's it!

Hopefully in the future, MediaWiki will be able to compile this LESS for you!
(See https://phabricator.wikimedia.org/T56864.)
*/

@body-background-color: #a8dae3;
@body-overlay-color: #46a2a6;
@body-background-image: url(//biosector01.com/w/skins/MonoBook/bgbio2015.jpg);
@button-hover-opacity: 0.5;

@sidebar-button-hover-background-color: @body-background-color;
@sidebar-button-active-background-color: @sidebar-button-hover-background-color;

@content-background-color: rgba( 255, 255, 255, 0.75 );
@content-font-color: #252525;
@content-heading-font-color: @content-font-color;
@content-font-stack: inherit;
@content-heading-font-stack: @content-font-stack;

/* Typography */
// @content-font-stack: Franklin Gothic FS, sans-serif;
@content-heading-font-stack: Lato, sans-serif;
@content-main-heading-font-stack: TradeMarker Light, Lato, sans-serif;

@toolbox-dropdown-button-background-color: #a8dae3;
@toolbox-dropdown-button-hover-background-color: darken( @toolbox-dropdown-button-background-color, 15% );
@toolbox-dropdown-button-active-background-color: @toolbox-dropdown-button-hover-background-color;

/* logo full-size dimensions */
@logo-full-width: 1192px;
@logo-full-height: 360px;
@logo-width-to-height-ratio: @logo-full-width / @logo-full-height;

@big-header-height: 3em;
@medium-header-height: 2.5em;
@small-header-height: 3em;
@big-sidebar-width: 11em;
@medium-sidebar-width: 14em;
@medium-sidebar-background-color: @small-sidebar-background-color;
@small-sidebar-background-color: #068196;
@small-sidebar-font-color: #fff;
@medium-sidebar-font-color: @small-sidebar-font-color;
@sidebar-button-hover-font-color: @content-font-color;
@sidebar-button-active-font-color: @sidebar-button-hover-font-color;

@big-logo-height: 4.5em;
@big-logo-padding: 0.25em;
@medium-logo-height: 3.5em;

@big-site-navigation-width: 20em;
@medium-site-navigation-width: 15em;

@border-color: #bbb;
/*******************************************************************************
********************************************************************************
************************** START BASIC CONFIG TEMPLATE *************************
********************************************************************************
*******************************************************************************/

@import url('https://raw.githubusercontent.com/wikimedia/mediawiki-skins-Refreshed/9b8f512dec81f0b18d1270a56d963f14f333c17a/refreshed/styles/screen/mixins-public.less');

/*******************************************************************************
***************************** STYLES FOR ALL LAYOUTS ***************************
*******************************************************************************/

@import url('https://fonts.googleapis.com/css?family=Lato:400,400i');

body {
  background: linear-gradient( 135deg, fade( @body-overlay-color, 65% ) 15%, fade( @body-overlay-color, 0% ) 75% ) no-repeat center center fixed, @body-background-color @body-background-image 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 */
.mixin-set-header-button-styles-hover( {
  /* background for a header button when it's hovered over */
  background: none;

  span,
  svg,
  img {
    /* opacity for text or icons in a header button when it's hovered over */
    opacity: @button-hover-opacity;
  }
} );
/* :active styles */
.mixin-set-header-button-styles-active( {
  /* background for a header button when it's active */
  background: none;

  span,
  svg,
  img {
    /* opacity for text or icons in a header button when it's active */
    opacity: @button-hover-opacity;
  }
} );

/* sidebar buttons (the buttons for the header categories that are in the
sidebar in the small layout) */
/* :hover styles */
.mixin-set-sidebar-button-styles-hover( {
  /* background for a sidebar button when it's hovered over */
  background: @sidebar-button-hover-background-color;
  /* font color for a sidebar button when it's hovered over */
  color: @sidebar-button-hover-font-color;
} );
/* :active styles */
.mixin-set-sidebar-button-styles-active( {
  /* background for a sidebar button when it's active */
  background: @sidebar-button-active-background-color;
  /* font color for a sidebar button when it's active */
  color: @sidebar-button-active-font-color;
} );

/* the button that opens the tools dropdown in the toolbox */
.mixin-set-toolbox-dropdown-button-styles({
  /* background for the toolbox dropdown button */
  background: @toolbox-dropdown-button-background-color;
});
/* :hover styles */
.mixin-set-toolbox-dropdown-button-styles-hover({
  /* background for the toolbox dropdown button when it's hovered over */
  background: @toolbox-dropdown-button-hover-background-color;
});
/* :active styles */
.mixin-set-toolbox-dropdown-button-styles-active({
  /* background for the toolbox dropdown button when it's active */
  background: @toolbox-dropdown-button-active-background-color;
});

.refreshed-collapsible-tray {
  /* set the colors of collapsible trays (for example, in the small layout, the
  trays in the sidebar) */
  background-color: @sidebar-button-active-background-color;
  color: @sidebar-button-active-font-color;
}

#content-wrapper {
  /* background-color for the page content */
  background-color: @content-background-color;
  /* font family for the page content */
  font-family: @content-font-stack;
  /* font color for the page content */
  color: @content-font-color;
}

.firstHeading,
.mw-headline,
.sidebar-heading,
.toc h2 {
  /* font family for headings */
  font-family: @content-heading-font-stack;
  font-variant: all-small-caps;
  letter-spacing: .05em;
  font-weight: normal;
}

/* Typography */
.firstHeading {
  font-family: @content-main-heading-font-stack;
}


/*******************************************************************************
***************************** STYLES FOR BIG LAYOUT ****************************
*******************************************************************************/

.mixin-big-layout-styles( {
  /* height for the header */
  .mixin-set-header-height( @height: @big-header-height );

  /* width for the sidebar */
  .mixin-set-sidebar-width-big-layout( @width: @big-sidebar-width );

  /* do NOT use make the toolbox stick to the top when you scroll down */
  .mixin-disable-refreshed-toolbox-sticky();
} );

/*******************************************************************************
**************************** STYLES FOR MEDIUM LAYOUT **************************
*******************************************************************************/

.mixin-medium-layout-styles( {
  /* height for the header */
  .mixin-set-header-height( @height: @medium-header-height );

  /* width for the sidebar */
  .mixin-set-sidebar-width-medium-layout( @width: @medium-sidebar-width );

  #sidebar-wrapper {
    /* background for the sidebar */
    background: @medium-sidebar-background-color;
    /* font color for the sidebar */
    color: @medium-sidebar-font-color;
  }

  /* do NOT use make the toolbox stick to the top when you scroll down */
  .mixin-disable-refreshed-toolbox-sticky();
} );

/*******************************************************************************
**************************** STYLES FOR SMALL LAYOUT ***************************
*******************************************************************************/

.mixin-small-layout-styles( {
  /* height for the header */
  .mixin-set-header-height( @height: @small-header-height );

  #sidebar-wrapper {
    /* background for the sidebar */
    background: @small-sidebar-background-color;
    /* font color for the sidebar */
    color: @small-sidebar-font-color;
  }
} );

/*******************************************************************************
********************************************************************************
*************************** END BASIC CONFIG TEMPLATE **************************
********************************************************************************
*******************************************************************************/

/*** add extra padding to bottom of content ***/
#bodyContent {
  padding-bottom: @content-wrapper-padding;
}

/*** 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, fade( @body-overlay-color, 65% ) 25%, fade( @body-overlay-color, 0% ) 75% ) no-repeat center center;
}

/*** don't fix header/sidebar to the viewport ***/
#header-wrapper {
  position: absolute;
}
.mixin-big-layout-styles( {
  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 ***/
.mixin-big-layout-styles( {
  #sidebar-wrapper {
    position: absolute;
  }
} );

/*** remove padding from the logo icon ***/
.site-navigation-logo-img {
  padding: 0;
}

/*** wider search bar on big ***/
.mixin-big-layout-styles( {
  #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: @border-color;
}

/*** header search selection style on the big layout ***/
.mixin-big-layout-styles( {
  #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;
}

.mixin-set-bevel( @sidebar-mode, @sidebar-width: 0, @logo-height, @logo-padding: 0, @header-height ) {
  @logo-width-with-padding: @logo-width + @logo-padding;
  @logo-height-with-padding: @logo-height + ( 2 * @logo-padding );
  @bevel-height: @logo-height-with-padding - @header-height;
  @logo-width: @logo-height * @logo-width-to-height-ratio;

  /* 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: @logo-height-with-padding;
  }

  /* fill in bevel */
  #content-wrapper::before {
    border-left: @bevel-height solid transparent;
    border-bottom: @bevel-height solid @content-background-color;
  }

  /* set the dimensions of the site navigation and sidebar toggler */
  div#sidebar-toggler,
  #sidebar-toggler-button { /* div for specificity */
    width: @logo-height;
    height: @logo-height;
  }
  div#site-navigation-header {
    height: @logo-height;
  }
  .refreshed-icon-refreshed-menu {
    width: @logo-height / 2;
  }

  /* position bevel */
  & when ( @sidebar-mode = inline ) {
    div#site-navigation-header {
      padding-top: @big-logo-padding;
      padding-left: @big-logo-padding;
      padding-right: @big-logo-padding;
    }
    .mixin-helper-set-site-navigation-max-width-inline( @logo-width );
    /* the bevel has to be far enough over to leave room for the site navigation */
    #content-wrapper::before {
      left: @logo-width-with-padding - @sidebar-width;
    }
    /* push sidebar down */
    #sidebar-wrapper {
      margin-top: @logo-height + @big-logo-padding;
    }
    /* move header categories above bevel */
    #header-categories-user-info-search-wrapper {
      margin-left: @bevel-height + @big-logo-padding;
    }
  }

  & when ( @sidebar-mode = menu ) {
    .mixin-helper-set-site-navigation-max-width-menu( @logo-width );
    /* 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: @logo-height + @logo-width-with-padding + 0.25em;
    }
    /* push sidebar down */
    #sidebar-wrapper {
      margin-top: @logo-height + @big-logo-padding;
    }
    /* move header categories above bevel */
    #header-categories-user-info-search-wrapper {
      margin-left: @bevel-height + @big-logo-padding;
    }
  }
}

.mixin-big-layout-styles( {
  .mixin-set-bevel(
    @sidebar-mode: inline,
    @sidebar-width: @big-sidebar-width,
    @logo-height: @big-logo-height,
    @logo-padding: @big-logo-padding,
    @header-height: @big-header-height
  );
} );
.mixin-medium-layout-styles( {
  .mixin-set-bevel(
    @sidebar-mode: menu,
    @logo-height: @medium-logo-height,
    @header-height: @medium-header-height
  );
} );


/*** 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) */
  .mixin-big-layout-styles( {
    margin-left: 1px;
    margin-right: 1px;
  } );
  .mixin-medium-layout-styles( {
    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 ***/
.mixin-small-layout-styles( {
  .infobox {
    width: 100% !important;
  }

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