Difference between revisions of "MediaWiki:Darkvector.css"

From Twisted Hollywood
Jump to: navigation, search
Line 12: Line 12:
 
/* ######### */
 
/* ######### */
 
@import url('https://fonts.googleapis.com/css2?family=Voltaire&display=swap');
 
@import url('https://fonts.googleapis.com/css2?family=Voltaire&display=swap');
.mw-body h1, .mw-body h2, .mw-body #firstHeading { font-family: 'Voltaire', sans-serif; }
+
.mw-body h1, .mw-body h2, .mw-body #firstHeading { font-family: Voltaire, sans-serif; }
  
 
/* ########## */
 
/* ########## */

Revision as of 16:38, 23 August 2021

/* ######### */
/* VARIABLES */
/* ######### */
:root
{
  --primary: #C53CFC;
}


/* ######### */
/*   FONTS   */
/* ######### */
@import url('https://fonts.googleapis.com/css2?family=Voltaire&display=swap');
.mw-body h1, .mw-body h2, .mw-body #firstHeading { font-family: Voltaire, sans-serif; }

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