MediaWiki:Darkvector.css
From Twisted Hollywood
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/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; } @font-face { font-family: 'Scope One'; src: url('fonts/ScopeOne-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: block; } @font-face { font-family: 'Cutive'; src: url('fonts/Cutive-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: block; } @font-face { font-family: 'Mouse Memoirs'; src: url('fonts/MouseMemoirs-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% } } img { max-width:100%; height:auto; } ::selection { color: #fff; background: #C53CFC; text-shadow: none; } /* ############ */ /* 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); } } /* ############## */ /* CONTAINERS */ /* ############## */ .box-span { width: 100%; min-height: 5vw; margin: auto; position: relative; } .box-mainpage1 { position: relative; width: 100%; min-height: 27vw; margin: auto; font-size: 1rem; background-image: radial-gradient(circle at center bottom, rgba(255,0,0,0) 70%, rgba(51,51,51,1) 85%), url(images/skyline.png); background-position: center bottom, center bottom; background-repeat: no-repeat, repeat-x; #background-origin: content-box; background-size: auto, contain; } .box-mainpage2 { position: relative; background-image: linear-gradient(rgba(33,33,33,1) 15%, rgba(51,51,51,1) 60%); width: 100%; margin: auto; top: -3px; } .box-mainpage3 { width: 20vw; position: absolute; bottom: 5vw; right: 2.5vw; #margin: 10vw 1vw 1vw; #float: right; font-size: 1rem; } .box-wide { max-width: 75%; margin: 1rem auto 1rem; font-size: 1.5rem; } .box-left { width: 30%; margin: 1vw; float: left; font-size: 1rem; } .box-right { width: 30%; margin: 1vw; float: right; font-size: 1rem; } /* ############### */ /* QUOTATION */ /* ############### */ .quotation { font-family: 'Scope One', serif; font-weight: 400; line-height: 1.2; text-align: justify; position: relative; width: 100%; margin: auto; padding: .5rem; color: #aaa; text-shadow: 0 0 2px #aaa; } .quotation::before, .quotation::after { font-family: 'Voltaire'; position: absolute; color: transparent; text-shadow: 0 0 6px #2a2a2a; font-size: 24rem; width: 5rem; height: 5rem; z-index: -1; } .quotation::before { content: '“'; left: -2.5rem; top: -5.5rem; transform: rotate(7deg); } .quotation::after { content: '”'; right: 2.5rem; bottom: 6.5rem; transform: rotate(7deg); } .miniquote { font-family: 'Scope One', serif; font-weight: 400; line-height: 1.2; text-align: justify; position: relative; width: 100%; margin: auto; padding: .5rem; color: #aaa; text-shadow: 0 0 2px #aaa; } .miniquote::before, .miniquote::after { font-family: 'Voltaire'; position: absolute; color: transparent; text-shadow: 0 0 6px #2a2a2a; font-size: 12rem; width: 5rem; height: 5rem; z-index: -1; } .miniquote::before { content: '“'; left: -1.5rem; top: -2.8rem; transform: rotate(4deg); } .miniquote::after { content: '”'; right: -1rem; bottom: 0.8rem; transform: rotate(4deg); } .quotation-citation { font-family: 'Scope One', serif; font-weight: 400; text-align: right; min-width: 50%; line-height: 1.4; position: relative; margin: auto; padding: 0rem; color: #aaa; text-shadow: 0 0 2px #aaa; } /* ########### */ /* FICTION */ /* ########### */ .fiction { background: #f0d5f6; background-image: linear-gradient(135deg, rgba(240,213,246,1), rgba(212,177,220,1)); box-shadow: 0 0 10px rgba(0,0,0,0.6); margin-top: -1em; padding: 1rem; position: relative; font-family: 'Cutive', serif; font-size: 75%; font-weight: 400; line-height: 1.75; text-align: justify; color: #250b2d; width: 95%; } .fiction:before, .fiction:after { content: ""; height: 98%; position: absolute; width: 97%; z-index: -1; } .fiction:before { background: #7c5885; background-image: linear-gradient(135deg, rgba(124,88,133,1), rgba(83,61,88,1)); box-shadow: 0 0 8px rgba(0,0,0,0.4); left: -4px; top: -3px; transform: rotate(-1.2deg); } .fiction:after { background: #cfa1da; background-image: linear-gradient(135deg, rgba(207,161,218,1), rgba(177,136,186,1)); box-shadow: 0 0 3px rgba(0,0,0,0.4); right: -3px; top: -5px; transform: rotate(1.4deg); } /* ############# */ /* PROMOTION */ /* ############# */ .blurb { margin-right: 11vw; margin-bottom: -0.5vw; min-height: 5em; padding: 2.5em 1.5em 0; font-family: 'Cutive', serif; font-size: 1vw; line-height: 1.5; } .blurb-header { background: #f0d5f6; font-family: 'Voltaire'; font-weight: bold; color: #250b2d; box-shadow: 2px 2px 2px #250b2d; font-size: 1.8vw; line-height: 1.2; min-width: 2em; min-height: 1em; position: absolute; top: -0.25vw; left: 3.3vw; padding: 0.2em; transform: rotate(-2.5deg); } .blurb-header:before { content: "Read it now:"; text-transform: uppercase; background: #f0d5f6; font-family: 'Voltaire'; font-weight: bold; color: #7d1ca4; box-shadow: 2px 2px 2px #250b2d; font-size: 60%; line-height: 0.9em; position: absolute; top: -1rem; left: 0.75rem; padding: 0.25rem; transform: rotate(5deg); } .blurb-cover { position: absolute; width: 9vw; height: auto; top: -2.75vw; right: 1.5vw; transform: rotate(8deg); } .blurb-cover:after{ content: ""; position: absolute; left: 1vw; top: 0.8vw; background: black; opacity: 25%; width: 93%; height: 93%; box-shadow: 0px 0px 6px rgba(0,0,0,1); z-index: -1; } /* ############# */ /* AESTHETIC */ /* ############# */ .filmstrip { --background: rgba(0, 0, 0, .35); --size: 1vw; background-image: linear-gradient(to right, var(--background) var(--size), transparent var(--size)), linear-gradient(to bottom, var(--background) var(--size), transparent var(--size)), linear-gradient(to right, var(--background) var(--size), transparent var(--size)), linear-gradient(to bottom, var(--background) var(--size), transparent var(--size)), linear-gradient(to bottom, transparent var(--size), var(--background) var(--size)); background-size: calc(var(--size) * 2) var(--size), calc(var(--size) * 2) var(--size), calc(var(--size) * 2) var(--size), calc(var(--size) * 2) var(--size), 100% calc(100% - var(--size) * 3); background-repeat: repeat-x; background-position: 0 var(--size), top left, 0 calc(100% - var(--size)), bottom left, 0 var(--size); padding: calc(var(--size) * 3) calc(var(--size) * 2.5); box-sizing: border-box; } .pane-container { width: 100%; height: 5.5vw; columns: 10vw 7; column-gap: 2vw; display: flex; justify-content: center; align-items: center; } .pane { height: 5.5vw; width: 100%; background: #2a2a2a; background-image: radial-gradient(rgba(64,64,64,1) 25%, rgba(40,40,40,1)); border-radius: 8px; box-sizing: border-box; display: inline-block; font-family: 'Voltaire'; font-weight: bold; font-size: 1.45vw; text-align: center; text-transform: uppercase; line-height: 1.1; color: #fff; display: flex; justify-content: center; align-items: center; } .pane-blank { height: 5.5vw; width: 100%; border-radius: 8px; box-sizing: border-box; display: inline-block; } .pane-blank:first-of-type { background-image: linear-gradient(90deg, rgba(42,42,42,0), rgba(42,42,42,1)); } .pane-blank:last-of-type { background-image: linear-gradient(90deg, rgba(42,42,42,1), rgba(42,42,42,0)); } .pane:hover { background: #f0d5f6; background-image: radial-gradient(rgba(240,213,246,1) 25%, rgba(210,160,220,1));; color: #2a2a2a; } /* ############# */ /* FUN FACTS */ /* ############# */ .dyk { position: absolute; top: -2vw; left: -2vw; transform: rotate(-1.3deg); font-family: 'Voltaire'; font-weight: bold; font-size: 3.5vw; line-height: 0.75; text-align: center; padding: 0 0.5vw; color: #AD75C9; text-shadow: 2px 2px 2px #7c5885; z-index: 1; } .factoid { width: 95%; color: #f0d5f6; background: #2a2a2a; border: 4px solid #5B00A8; font-family: 'Cutive', serif; font-size: 1.1vw; line-height: 1.25; text-align: center; padding: 0.75vw 0.5vw 1vw; transform: rotate(0.8deg); z-index: -1; } .wow { position: relative; bottom: 0; right: -0.5vw; transform: rotate(-2deg); font-family: 'Voltaire'; font-weight: bold; font-size: 1.5vw; line-height: 0.75; color: #AD75C9; text-shadow: 1px 1px 2px #7c5885; text-align: right; z-index: 1; } /* ######## */ /* BUBBLE */ /* ######## */ .bubble { position: relative; left: 2%; top: 5%; width: 50%; margin: 2vw 4vw 2vw 4vw; background-color: #f0d5f6; border-radius: 3vw; padding: 0.5vw; font-family: 'Mouse Memoirs'; font-size: 1.75vw; line-height: 1.25; text-align: center; color: #7c5885; z-index: 2; } .speaker { position: absolute; left: 55%; bottom: -5%; width: 9vw; height: auto; z-index: 3; } hr.heart { width: 70%; border-top: 2px solid; border-image: linear-gradient(90deg, rgba(124,88,133,0) 10%, rgba(124,88,133,1), rgba(124,88,133,0) 90%) 100 stretch; position: relative; margin: 1.85vw auto -0.85vw; min-height: 2vw; background: transparent; } /* ########### */ /* DIVIDER */ /* ########### */ hr.heart:after { content: '❤'; display: inline-block; position: absolute; top: -1.4vw; left: 47.75%; padding: 0 0.5vw; background: #f0d5f6; color: #7c5885; font-size: 2vw; } .stars { margin: 1.5vw auto; width: 100%; height: 3vw; background-image: url(images/stars.png); background-position: center; background-repeat: no-repeat; #background-origin: content-box; background-size: auto 100%; } /* ########### */ /* POSTERS */ /* ########### */ .posters { width: 90%; margin-left: 10%; display: grid; grid-template-columns: 30% 30% 30%; grid-gap: 1.25vw; font-size: 1vw; text-align: justify; color: #250b2d; position: relative; } .poster-top { font-family: 'Voltaire'; font-size: 2.75vw; text-decoration: underline 10%; font-variant: small-caps; line-height: 1.5; color: #250b2d; text-align: center; opacity: 90%; transform: rotate(-0.6deg); font-weight: 700; } .poster-top:before, .poster-top:after { content: " "; } .poster1 { min-height: 5vw; background: #f0d5f6; background-image: linear-gradient(135deg, rgba(240,213,246,1), rgba(212,177,220,1)); box-shadow: 3px 3px 6px rgba(0,0,0,0.4); transform: rotate(-1.3deg); padding: 0.75em; margin-top: 1vw; margin-bottom: 2vw; font-weight: 500; position: relative; z-index: 2; } .poster1 p { transform: rotate(0.6deg); margin: 0; opacity: 80%; } .poster2 { min-height: 5vw; background: #e0a5eb; background-image: linear-gradient(135deg, rgba(220,182,229,1), rgba(207,161,218,1)); box-shadow: 3px 3px 6px rgba(0,0,0,0.4); transform: rotate(1deg); padding: 0.75em; margin-top: 3vw; font-weight: 550; position: relative; z-index: 2; } .poster2 p { transform: rotate(-0.5deg); margin: 0; opacity: 75%; } .poster3 { min-height: 5vw; background: #f0d5f6; background-image: linear-gradient(135deg, rgba(240,213,246,1), rgba(212,177,220,1)); box-shadow: 3px 3px 6px rgba(0,0,0,0.4); transform: rotate(-0.7deg); padding: 0.75em; margin-top: 2vw; margin-bottom: 1vw; font-weight: 500; position: relative; z-index: 2; } .poster3 p { transform: rotate(1.1deg); margin: 0; opacity: 80%; } .poster4 { width: 28vw; height: 95%; position: absolute; left: 7%; top: 3%; transform: rotate(2.3deg); background: #433845; #background-image: linear-gradient(135deg, rgba(124,88,133,1), rgba(83,61,88,1)); box-shadow: 3px 3px 6px rgba(0,0,0,0.1); z-index: -1; } .poster4:before { content: ""; width: 26vw; height: 92%; position: absolute; left: -30%; top: 8%; transform: rotate(-3.9deg); background: #533d58; #background-image: linear-gradient(135deg, rgba(124,88,133,1), rgba(83,61,88,1)); box-shadow: 3px 3px 6px rgba(0,0,0,0.2); z-index: -1; } .poster5 { width: 28vw; height: 90%; position: absolute; left: 45%; top: 11%; transform: rotate(-0.3deg); background: #433845; #background-image: linear-gradient(135deg, rgba(124,88,133,1), rgba(83,61,88,1)); box-shadow: 3px 3px 6px rgba(0,0,0,0.1); z-index: -1; } .poster5:after { content: ""; width: 26vw; height: 92%; position: absolute; left: 50%; top: -2%; transform: rotate(1.8deg); background: #533d58; #background-image: linear-gradient(135deg, rgba(124,88,133,1), rgba(83,61,88,1)); box-shadow: 3px 3px 6px rgba(0,0,0,0.2); z-index: -1; } .poster-para1 { font-family: 'Cutive'; text-align: center; font-weight: 400; } .poster-inter { text-align: center; font-weight: 400; line-height: 0em; margin: 0.1em auto 0.1em; } .poster-para2 { font-family: 'Cutive'; text-align: center; font-weight: 600; } /* ################ */ /* NEWS SECTION */ /* ################ */ .updates { width: 80%; margin: auto; position: relative; } .headliner { position: absolute; top: 2%; left: 5%; color: #250b2d; font-family: 'Cutive', serif; background: #ebc5f2; padding: 0.25em; font-size: 4vw; line-height: 0.5; } .headliner:before { content: ""; width: 10%; height: 100%; background: #ebc5f2; position: absolute; left: -3.5%; top: 2%; transform: rotate(10deg); z-index: -1; } .headliner:after { content: ""; width: 10%; height: 100%; background: #ebc5f2; position: absolute; right: -3.5%; top: 2%; transform: rotate(-10deg); z-index: -1; } .banner { min-height: 4vw; background: #ebc5f2; box-shadow: 3px 3px 6px rgba(0,0,0,0.4); transform: rotate(-0.3deg); padding: 2.75em 0.75em 0.75em; margin: 0.25vw auto 0.5vw; font-size: 0.9vw; font-weight: 500; position: relative; color: #250b2d; font-family: 'Cutive', serif; } .banner-mini { min-height: 2vw; box-shadow: 3px 3px 6px rgba(0,0,0,0.4); padding: 2.75em 0.75em 0.75em; margin: 1vw auto 0.5vw; font-weight: 500; position: relative; background: #ebc5f2; color: #3f1050; font-family: 'Cutive', serif; } .banner-mini:nth-last-child(4) { transform: rotate(0.2deg); margin: 0.75vw 0vw 0.25vw 2.25vw; width: 86%; font-size: 0.8vw; } .banner-mini:nth-last-child(3) { transform: rotate(-0.3deg); margin: 0.5vw 0.2vw 0.25vw 3.5vw; width: 92%; font-size: 0.7vw; } .banner-mini:nth-last-child(2) { transform: rotate(0.35deg); margin: 1vw 0.5vw 0.5vw 1.25vw; width: 80%; font-size: 0.65vw; } .more-news { position: absolute; bottom: 0%; right: 5%; background: #ebc5f2; box-shadow: 3px 3px 6px rgba(0,0,0,0.4); transform: rotate(-1.3deg); padding: 0.75em; font-size: 1vw; font-weight: 500; font-family: 'Cutive', serif; } .banner-date { position: absolute; top: 2%; right: 1%; text-align: right; border-bottom: 1px solid #250b2d; } .banner-title { position: absolute; top: 2%; left: 1%; text-align: left; font-size: 120%; font-weight: 800; border-bottom: 2px solid #250b2d; }