Difference between revisions of "MediaWiki:Darkvector.css"

Revision as of 17:28, 23 August 2021

/* ############### */
/* VARIABLES/FONTS */
/* ############### */
:root
{
  --primary: #C53CFC;
  --secondary: #AD75C9;
}
@font-face
{
  font-family: 'Voltaire';
  src: url('fonts/Voltaire-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
html { font-size: 110% }
        @media screen and (min-width: 982px) {
html { font-size: 110% }
        }


/* ############ */
/* PAGE HEADERS */
/* ############ */
.mw-body #firstHeading, .mw-body h1, .mw-body h2 { font-family: 'Voltaire', sans-serif; font-weight: 400; }
        @media screen and (min-width: 982px) {
.mw-body #firstHeading, .mw-body h1, .mw-body h2 { font-family: 'Voltaire', sans-serif; font-weight: 400; }
        }


/* ############ */
/*    T.O.C.    */
/* ############ */
.tocnumber, .toctogglelabel { color: var(--secondary); }
        @media screen and (min-width: 982px) {
.tocnumber, .toctogglelabel { color: var(--secondary); }
        }


/* ########## */
/* 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;
}
        }

div #simpleSearch #searchButton { background-color: #250b2d; }
        @media screen and (min-width: 982px) {
div #simpleSearch #searchButton { background-color: #250b2d; }
        }

/* ############# */
/* 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);
}
        }