MediaWiki:Darkvector.css

From Twisted Hollywood
Revision as of 16:53, 23 August 2021 by Nicolette (talk | contribs)
Jump to: navigation, search

Note: After saving, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.
/* ######### */
/* VARIABLES */
/* ######### */
:root
{
  --primary: #C53CFC;
}


/* ######### */
/*   FONTS   */
/* ######### */
@import url('/fonts/Voltaire-Regular.ttf');

.mw-body #firstHeading, .mw-body h1, .mw-body h2 { font-family: 'Voltaire', sans-serif !important; }
        @media screen and (min-width: 982px) {
.mw-body #firstHeading, .mw-body h1, .mw-body h2 { font-family: 'Voltaire', sans-serif !important; }
        }


/* ########## */
/* HYPERLINKS */
/* ########## */
a:not([role='button']), a:visited:not([role='button']), #mw-head div.darkvectorMenu h3 span
{
  color: var(--primary) !important;
}
        @media screen and (min-width: 982px) {
a:not([role='button']), a:visited:not([role='button']), #mw-head div.darkvectorMenu h3 span
{
  color: var(--primary) !important;
}
        }


/* ####### */
/* BUTTONS*/
/* ####### */
.oo-ui-buttonElement-button, .mw-ui-button
{
  color: #ffffff !important;
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}
.oo-ui-buttonElement-button:hover, .mw-ui-button:hover
{
  color: #ffffff !important;
  background-color: #5B00A8 !important;
  border-color: #5B00A8 !important;
}
        @media screen and (min-width: 982px) {
.oo-ui-buttonElement-button, .mw-ui-button
{
  color: #ffffff !important;
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}
.oo-ui-buttonElement-button:hover, .mw-ui-button:hover
{
  color: #ffffff !important;
  background-color: #5B00A8 !important;
  border-color: #5B00A8 !important;
}
        }


/* ############# */
/* BULLET POINTS */
/* ############# */
ul { list-style-image: url(/images/e/ee/bullet-icon.svg); }
        @media screen and (min-width: 982px) {
ul { list-style-image: url(/images/e/ee/bullet-icon.svg); }
        }


/* ################### */
/* ACTIVE TAB OVERLINE */
/* ################### */
#left-navigation div.darkvectorTabs li.selected, #right-navigation div.darkvectorTabs li.selected
{
  background-image: -moz-linear-gradient(top,var(--primary) 0,#333333 10%);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,var(--primary)),color-stop(10%,#333333));
  background-image: -webkit-linear-gradient(top,var(--primary) 0,#333333 10%);
  background-image: linear-gradient(var(--primary) 0,#333333 10%);
}
        @media screen and (min-width: 982px) {
#left-navigation div.darkvectorTabs li.selected, #right-navigation div.darkvectorTabs li.selected
{
  background-image: -moz-linear-gradient(top,var(--primary) 0,#333333 10%);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,var(--primary)),color-stop(10%,#333333));
  background-image: -webkit-linear-gradient(top,var(--primary) 0,#333333 10%);
  background-image: linear-gradient(var(--primary) 0,#333333 10%);
}
        }


/* ########## */
/* WATCH ICON */
/* ########## */
#ca-watch.icon a:hover, #ca-watch.icon a:focus
{
  background-image: url(/images/c/c1/watch-icon-hl.svg);
  background-image: -webkit-linear-gradient(transparent,transparent),url(/images/c/c1/watch-icon-hl.svg);
  background-image: linear-gradient(transparent,transparent),url(/images/c/c1/watch-icon-hl.svg);
}
#ca-watch.icon a
{
    background-image: url(/images/9/92/watch-icon.svg);
    background-image: -webkit-linear-gradient(transparent,transparent),url(/images/9/92/watch-icon.svg);
    background-image: linear-gradient(transparent,transparent),url(/images/9/92/watch-icon.svg);
}
        @media screen and (min-width: 982px) {
#ca-watch.icon a
{
  background-image: url(/images/9/92/watch-icon.svg);
  background-image: -webkit-linear-gradient(transparent,transparent),url(/images/9/92/watch-icon.svg);
  background-image: linear-gradient(transparent,transparent),url(/images/9/92/watch-icon.svg);
}
#ca-watch.icon a:hover, #ca-watch.icon a:focus
{
  background-image: url(/images/c/c1/watch-icon-hl.svg);
  background-image: -webkit-linear-gradient(transparent,transparent),url(/images/c/c1/watch-icon-hl.svg);
  background-image: linear-gradient(transparent,transparent),url(/images/c/c1/watch-icon-hl.svg);
}
        }