Difference between revisions of "MediaWiki:Darkvector.css"
From Twisted Hollywood
Line 5: | Line 5: | ||
{ | { | ||
--primary: #C53CFC; | --primary: #C53CFC; | ||
− | --visited: # | + | --visited: #A300E4; |
--secondary: #AD75C9; | --secondary: #AD75C9; | ||
--empty1: #C00048; | --empty1: #C00048; |
Revision as of 17:58, 23 August 2021
/* ############### */ /* VARIABLES/FONTS */ /* ############### */ :root { --primary: #C53CFC; --visited: #A300E4; --secondary: #AD75C9; --empty1: #C00048; --empty2: #830031; } @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 */ /* ########## */ /* Valid Links */ a:not([role='button']), #mw-head div.darkvectorMenu h3 span, .mw-body a.external, .mw-body a.extiw { color: var(--primary) !important; } @media screen and (min-width: 982px) { a:not([role='button']), #mw-head div.darkvectorMenu h3 span, .mw-body a.external, .mw-body a.extiw { color: var(--primary) !important; } } a:visited:not([role='button']), .mw-body a.external:visited, .mw-body a.extiw:visited { color: var(--visited) !important; } @media screen and (min-width: 982px) { a:visited:not([role='button']), .mw-body a.external:visited, .mw-body a.extiw:visited { color: var(--visited) !important; } } /* Red Links */ a.plainlinks, a.new { color: var(--empty1) !important; } @media screen and (min-width: 982px) { a.plainlinks, a.new { color: var(--empty1) !important; } } a.plainlinks:visited, a.new:visited { color: var(--empty2) !important; } @media screen and (min-width: 982px) { a.plainlinks:visited, a.new:visited { color: var(--empty2) !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 !important; } @media screen and (min-width: 982px) { div #simpleSearch #searchButton { background-color: #250b2d !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); } }