|
|
(32 intermediate revisions by the same user not shown) |
Line 1: |
Line 1: |
| /* CSS placed here will affect users of the MonoBook skin */ | | /* CSS placed here will be applied to users of the Monobook skin */ |
|
| |
|
| | /* SITE-WIDE CSS */ |
| | |
| | /* Position site logo */ |
| | #p-logo { |
| | margin: 0 0 0 .2em; |
| | } |
| | |
| | #siteSub { display:block; } |
| | |
| | html, body, #mw-head {background: none; background-color: #f1f1f1;} |
| | #mw-body { border: 1px solid #c0c0c0;} |
| | .mw-body-content {line-height: 1.45;} |
| | |
| | .mw-body { |
| | border-radius: 1em 0 0 1em; |
| | border-top: 1px solid #d7d7d9; |
| | border-left: 1px solid #d7d7d9; |
| | border-bottom: 1px solid #d7d7d9; |
| | } |
| | |
| | /* Style search buttons */ |
| | #searchGoButton, input.searchButton {background: #07080d; border: none; color: #ffffff; border: 2px solid #07080d; margin-top: 5px;} |
| | #searchGoButton:hover, input.searchButton:hover {background: #9d68d9; border: 2px solid #9d68d9 !important; color: #fff; transition: all .25s ease;} |
| | |
| | /* Set body text size to 13px */ |
| | #bodyContent {font-size: 1em; color: #000000;} |
| | |
| | .toc { |
| | border-radius: 1em; |
| | border: 1px solid #d7d7d9; |
| | background: #f0f0f2; |
| | display: table; |
| | zoom: 1; |
| | padding: 7px; |
| | font-size: 95%; |
| | } |
| | |
| | /* DPL */ |
| .columnizeme ul { | | .columnizeme ul { |
| display: block; | | display: block; |
Line 11: |
Line 49: |
| } | | } |
|
| |
|
| /* Header Buttons */ | | /* Tabs */ |
| .vectorTabs {
| | #p-cactions ul li, #p-cactions ul li a { |
| background-image: none; | | border-radius: 1em 1em 0 0; |
| height: 1em;
| | border-top: 1px solid #d7d7d9; |
| z-index: 3; | | border-left: 1px solid #d7d7d9; |
| text-transform: lowercase; | | border-right: 1px solid #d7d7d9; |
| padding: 1.9em .8em .3em; | | background: #f0f0f2; |
| position: relative;
| | color: #6a7480 !important; |
| margin: 0;
| |
| text-decoration: none;
| |
| font-size: 95%; | |
| color: #002bb8; | |
| } | | } |
|
| |
|
| .vectorTabs li.selected {
| | #p-cactions li.selected { |
| background-image: none; | | background-image: none; |
| background: #ffffff;
| | color: #002bb8 !important; |
| border-radius: 1em 1em 0 0;
| | border-color: #d7d7d9 !important; |
| border-color: #c0c0c0;
| |
| color: #002bb8; | |
| border-right: 1px solid #c0c0c0; | |
| border-top: 1px solid #c0c0c0;
| |
| border-left: 1px solid #c0c0c0;
| |
| border-radius: 1em 1em 0 0;
| |
| } | | } |
|
| |
|
| .vectorTabs li.selected a,
| | #p-cactions ul { |
| .vectorTabs li.selected a:visited {
| | font-size: 102%; |
| color: #002bb8; | | text-decoration: none; |
| padding: .4em .8em .3em; | |
| } | | } |
|
| |
|
| .vectorTabs li a {
| | #p-cactions li { |
| padding: .4em .8em .3em;
| |
| }
| |
| | |
| .vectorTabs ul li {
| |
| background-image: none;
| |
| background: #f0f0f2;
| |
| border-radius: 1em 1em 0 0;
| |
| border-color: #393939;
| |
| height: 140%; | | height: 140%; |
| line-height: .8em; | | line-height: .8em; |
| border-right: 1px solid #c0c0c0; | | border-bottom: none; |
| border-top: 1px solid #c0c0c0;
| |
| border-left: 1px solid #c0c0c0;
| |
| border-radius: 1em 1em 0 0;
| |
| } | | } |
|
| |
|
| .vectorTabs #ca-unwatch.icon a, .vectorTabs #ca-watch.icon a { | | .portlet ul { line-height: 1em; font-size: 95%; margin: 0.6em 0 0 1.6em !important;} |
| padding-top: 1.6em;
| | |
| | .portlet h3 {color: #6a7480;} |
| | |
| | /* MAIN PAGE DESIGN CSS */ |
| | body.page-Main_Page #t-cite, |
| | body.page-Main_Page #footer-info-lastmod, |
| | body.page-Main_Page #siteSub, |
| | body.page-Main_Page #contentSub, |
| | body.page-Main_Page h1.firstHeading { |
| | display: none !important; |
| } | | } |
|
| |
|
| div.vectorTabs span {
| | /* Style the edit buttons */ |
| background-image: none; | | #wpSave { |
| | -moz-border-radius: 15px; |
| | background-color: #fff !important; |
| | background-image: none !important; |
| | border: 2px solid #fff !important; |
| | text-shadow: none !important; |
| | color: #000; |
| } | | } |
|
| |
|
| /* Adjust position of header tabs */
| | #wpSave:hover {background: #9d68d9 !important; border: 2px solid #9d68d9 !important; color: #fff; transition: all .25s ease;} |
|
| |
|
| /* #ca-talk { */
| | #wpPreview { |
| /* margin: 0 0 0 .4em; */
| | -moz-border-radius: 15px; |
| /*} */
| | background-color: #07080d !important; |
| | background-image: none !important; |
| | border: 1px outset !important; |
| | text-shadow: none !important; |
| | border: 2px solid #000 !important; |
| | color: #ffffff; |
| | } |
|
| |
|
| /* #ca-edit { */
| | #wpPreview:hover {background: #9d68d9 !important; border: 2px solid #9d68d9 !important; color: #fff; transition: all .25s ease;} |
| /* margin: 0 0 0 -45.85em; */
| |
| /* font-weight: bold; */
| |
| /*} */
| |
|
| |
|
| /* #ca-history { */
| | #wpDiff { |
| /* margin: 0 0 0 -42.7em; */
| | -moz-border-radius: 15px; |
| /*} */
| | background-color: #07080d !important; |
| | | border: 1px outset !important; |
| /* #ca-watch, #ca-unwatch { */
| | background-image: none !important; |
| /* margin: 0 0 0 -36.58em; */
| | text-shadow: none !important; |
| /*} */
| | border: 2px solid #000 !important; |
| | | color: #ffffff; |
| #ca-view { | |
| display: none; | |
| } | | } |
|
| |
|
| #mw-head-base { | | #wpDiff:hover {background: #9d68d9 !important; border: 2px solid #9d68d9 !important; color: #fff; transition: all .25s ease;} |
| margin-top: -4.3em;
| |
| } | |
|
| |
|
| /* Sidebar Navigation Menu */ | | /* SIDEBAR */ |
| /* Force Navigation header to display */
| |
| #mw-panel #p-logo + .portal h3 {
| |
| display: block;
| |
| margin: 0 0 0 1.3em;
| |
| }
| |
| | |
| #mw-panel .portal h3 {
| |
| margin: 0 0 0 1.3em;
| |
| }
| |
|
| |
|
| #mw-panel .portal .body { | | #mw-panel .portal .body { |
Line 119: |
Line 140: |
| } | | } |
|
| |
|
| #mw-panel .portal {
| | .pBody { |
| margin: 0 1em 0 -1em;
| | border-radius: 0 1em 1em 0; |
| }
| | border-bottom: 1px solid #c0c0c0; |
| | | border-right: 1px solid #c0c0c0; |
| #mw-panel .portal .body ul {
| | border-top: 1px solid #c0c0c0; |
| list-style-image: url(data:image/gif;base64,R0lGODlhBQANAIAAAGOMnP///yH5BAEAAAEALAAAAAAFAA0AAAIJjI+pu+APo4SpADs=);
| |
| margin: 0;
| |
| padding: 0.3em 0 0 1em;
| |
| line-height: 1.3em;
| |
| }
| |
| | |
| .toc {
| |
| border-radius: 1em; | |
| border: 1px solid #d7d7d9;
| |
| background: #f0f0f2;
| |
| display: table;
| |
| zoom: 1;
| |
| padding: 7px;
| |
| font-size: 95%;
| |
| }
| |
| | |
| .Round {
| |
| -webkit-border-radius: 10px;
| |
| background: #ffe;
| |
| border: 2px solid #4E8234;
| |
| margin: 0.10px;
| |
| padding: 4px;
| |
| vertical-align: top;
| |
| }
| |
| | |
| /* Set body text size to 13px */
| |
| #bodyContent {
| |
| font-size: 0.813em;
| |
| color: #000000;
| |
| }
| |
| | |
| .mw-body-content {
| |
| line-height: 1.45;
| |
| }
| |
| | |
| .mw-body {
| |
| border-radius: 1em 0 0 1em;
| |
| border-top: 1px solid #d7d7d9;
| |
| border-left: 1px solid #d7d7d9;
| |
| border-bottom: 1px solid #d7d7d9; | |
| }
| |
| | |
| table.wikitable {
| |
| border-radius: 1em; | |
| border: 1px solid #d7d7d9;
| |
| padding: 7px;
| |
| font-size: 95%;
| |
| background: #ffffff;
| |
| }
| |
| | |
| #firstHeading {
| |
| display: block;
| |
| margin-block-start: 0.67em;
| |
| margin-block-end: 0.67em;
| |
| margin-inline-start: 0px;
| |
| margin-inline-end: 0px;
| |
| margin-bottom: 0.1em;
| |
| line-height: 1.2em;
| |
| padding-bottom: 0;
| |
| font-size: 1.500em;
| |
| font-weight: normal;
| |
| border-bottom: 1px solid #a2a9b1;
| |
| font-family: sans-serif;
| |
| }
| |
| | |
| .mw-body-content h1 {
| |
| display: block;
| |
| margin-block-start: 0.67em;
| |
| margin-block-end: 0.67em;
| |
| margin-inline-start: 0px;
| |
| margin-inline-end: 0px;
| |
| margin-bottom: 0.1em;
| |
| line-height: 1.2em;
| |
| padding-bottom: 0;
| |
| font-size: 1.500em;
| |
| font-weight: normal;
| |
| border-bottom: 1px solid #a2a9b1; | |
| font-family: sans-serif;
| |
| }
| |
| | |
| h2 {
| |
| font-weight: normal;
| |
| margin: 0;
| |
| overflow: hidden;
| |
| padding-top: 0.5em;
| |
| padding-bottom: 0.17em;
| |
| font-family: sans-serif;
| |
| font-size: 1.5em;
| |
| }
| |
| | |
| .mw-body-content h2 {
| |
| font-weight: normal;
| |
| margin: 0;
| |
| overflow: hidden;
| |
| padding-top: 0.5em;
| |
| padding-bottom: 0.17em;
| |
| font-family: sans-serif;
| |
| font-size: 1.5em;
| |
| }
| |
| | |
| .mw-body-content h3 {
| |
| line-height: 1.188em;
| |
| }
| |
| | |
| /* Miscellaneous formatting features */
| |
| | |
| .sc { font-variant: small-caps }
| |
| | |
| .l { text-align: left; }
| |
| .c { text-align: center; }
| |
| .r { text-align: right; }
| |
| | |
| div.listcol
| |
| {
| |
| padding: 0.5em 1.0em 0.5em 0;
| |
| margin: 0.25em;
| |
| min-width: 21.5%;
| |
| border: 1px solid #aaf;
| |
| float: left;
| |
| clear: right;
| |
| line-height: 130%;
| |
| }
| |
| | |
| div.listcolend
| |
| {
| |
| clear: both;
| |
| } | | } |
|
| |
|
Line 334: |
Line 229: |
| } | | } |
|
| |
|
| .sitedir-ltr textarea, .sitedir-ltr input {
| | #footer { |
| direction: ltr;
| | background-color: #07080d; |
| }
| | border-top: none !important; |
| | | border-bottom: none !important; |
| ul {
| | margin: 0.6em 0 1em 0; |
| list-style-type: square;
| | overflow: hidden; |
| list-style-image: url(data:image/gif;base64,R0lGODlhBQANAIAAAGOMnP///yH5BAEAAAEALAAAAAAFAA0AAAIJjI+pu+APo4SpADs=);
| | padding: 0.4em 0 0.3em 0; |
| display: block;
| |
| margin-block-start: 1em;
| |
| margin-block-end: 1em;
| |
| margin-inline-start: 0px;
| |
| margin-inline-end: 0px;
| |
| padding-inline-start: 40px;
| |
| }
| |
| | |
| #simpleSearch { | |
| border-radius: .3em .3em .3em .3em; | |
| border-color: #d7d7d9;
| |
| height: 31px !important;
| |
| border-radius: 8px !important; | |
| right: 5px !important;
| |
| width: 181px !important;
| |
| top: -10px !important;
| |
| padding: 0 .8em .3em .5em; | |
| }
| |
| | |
| #simpleSearch #searchInput {
| |
| padding: 1em 0 0.2em 0.2em;
| |
| font-size: 0.713em;
| |
| title: "Search"
| |
| }
| |
| | |
| #content {
| |
| margin-left: 160px;
| |
| -moz-border-radius: 1em 0 0 1em;
| |
| -webkit-border-top-left-radius: 1em;
| |
| -webkit-border-bottom-left-radius: 1em;
| |
| border-radius: 1em 0 0 1em;
| |
| border-top: 1px solid #c0c0c0;
| |
| border-left: 1px solid #c0c0c0;
| |
| border-bottom: 1px solid #c0c0c0;
| |
| }
| |
| | |
| /* MAIN PAGE DESIGN CSS */
| |
| body.page-Main_Page #t-cite,
| |
| body.page-Main_Page #footer-info-lastmod,
| |
| body.page-Main_Page #siteSub,
| |
| body.page-Main_Page #contentSub,
| |
| body.page-Main_Page h1.firstHeading {
| |
| display: none !important;
| |
| }
| |
| | |
| body.page-Main_Page #black-plainlinks { color: black !important;
| |
| }
| |
| | |
| /* Link color override */
| |
| .blacklinks a, .blacklinks a:link, .blacklinks a:visited, .blacklinks a:hover, .blacklinks a:active, .blacklinks a span {
| |
| color: black !important;
| |
| }
| |
| | |
| .whitelinks a, .whitelinks a:link, .whitelinks a:visited, .whitelinks a:hover, .whitelinks a:active, .whitelinks a span {
| |
| color: white !important;
| |
| }
| |
| | |
| #siteSub { display:block; }
| |
| | |
| html, body, #mw-head {
| |
| background-color: #f1f1f1;
| |
| }
| |
| | |
| * style the edit buttons */
| |
| #wpSave {
| |
| -moz-border-radius: 15px;
| |
| background-color: #000000 !important;
| |
| border: 1px outset !important;
| |
| }
| |
| #wpPreview {
| |
| -moz-border-radius: 15px;
| |
| background-color: #9d68d9 !important;
| |
| border: 1px outset !important;
| |
| }
| |
| #wpDiff {
| |
| -moz-border-radius: 15px;
| |
| background-color: #9d68d9 !important;
| |
| border: 1px outset !important;
| |
| }
| |
| .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
| |
| -moz-border-radius: 15px;
| |
| background-color: #000000 !important;
| |
| border: 1px outset !important; | |
| }
| |
| | |
| .noticebar {
| |
| background: #efe url('https://dmlive.wiki/images/thumb/5/58/Noticebar_background_rev.png/800px-Noticebar_background_rev.png') no-repeat left center;
| |
| background-color: #f1f1f1;
| |
| border: 1px solid #9d68d9;
| |
| margin-top: 0.2em;
| |
| padding: 0.2em;
| |
| text-align: center;
| |
| }
| |
| | |
| div.blackplainlinks span {
| |
| font-size: 95%; | |
| color: #002bb8; | |
| }
| |
| | |
| /* Infobox */
| |
| .infobox { | |
| background: #eee;
| |
| border: 1px solid #aaa;
| |
| float: right;
| |
| margin: 0 0 1em 1em;
| |
| padding: 1em;
| |
| width: 400px;
| |
| }
| |
| .infobox-title { | |
| font-size: 2em;
| |
| text-align: center; | | text-align: center; |
| }
| | font-size: 90%; |
| .infobox-image {
| |
| text-align: center;
| |
| }
| |
| .infobox th {
| |
| text-align: right;
| |
| vertical-align: top;
| |
| width: 120px;
| |
| }
| |
| .infobox td {
| |
| vertical-align: top; | |
| }
| |
| | |
| .round {
| |
| border-radius: 10px;
| |
| -moz-border-radius: 10px;
| |
| -webkit-border-radius: 10px;
| |
| -khtml-border-radius: 10px;
| |
| -icab-border-radius: 10px;
| |
| -o-border-radius: 10px;
| |
| }
| |
| | |
| #p-logo {
| |
| margin: 0 0 0 -.5em;
| |
| }
| |
| | |
| body.page-Walking_In_My_Shoes table#InfoboxShell.round {
| |
| background: rgb(106,41,145) !important;
| |
| background: linear-gradient(155deg, rgba(106,41,145,1) 3%, rgba(111,127,187,1) 24%, rgba(137,175,220,1) 32%, rgba(103,91,165,1) 55%, rgba(101,41,139,1) 65%, rgba(100,43,140,1) 76%, rgba(90,57,78,1) 95%, rgba(65,34,39,1) 100%) !important;
| |
| }
| |
| | |
| body.page-In_Your_Room table#InfoboxShell.round {
| |
| background: rgb(234,155,112) !important;
| |
| background: linear-gradient(180deg, rgba(234,155,112,1) 0%, rgba(235,124,107,1) 10%, rgba(201,79,90,1) 26%, rgba(184,77,87,1) 32%, rgba(137,74,85,1) 47%, rgba(99,76,86,1) 60%, rgba(215,98,89,1) 63%, rgba(242,191,110,1) 65%, rgba(215,98,89,1) 67%, rgba(99,76,86,1) 69%, rgba(99,76,86,1) 74%, rgba(197,209,101,1) 77%, rgba(99,76,86,1) 80%, rgba(99,76,86,1) 87%, rgba(79,141,118,1) 90%, rgba(62,62,70,1) 94%) !important;
| |
| }
| |
| | |
| body.page-Condemnation table#InfoboxShell.round {
| |
| background: rgb(243,243,235) !important;
| |
| background: linear-gradient(231deg, rgba(243,243,235,1) 4%, rgba(232,215,208,1) 8%, rgba(210,183,172,1) 11%, rgba(198,168,157,1) 13%, rgba(138,124,113,1) 34%, rgba(62,62,70,1) 66%, rgba(60,62,61,1) 100%) !important;
| |
| }
| |
| | |
| body.page-Never_Let_Me_Down_Again table#InfoboxShell.round {
| |
| background: rgb(143,186,202) !important;
| |
| background: linear-gradient(148deg, rgba(143,186,202,1) 0%, rgba(163,202,217,1) 14%, rgba(120,149,165,1) 38%, rgba(100,113,132,1) 53%, rgba(96,93,110,1) 66%, rgba(87,82,88,1) 74%, rgba(88,77,81,1) 80%, rgba(59,59,59,1) 100%) !important;
| |
| }
| |
| | |
| body.page-Shake_The_Disease table#InfoboxShell.round {
| |
| background: rgb(139,188,218) !important;
| |
| background: linear-gradient(148deg, rgba(139,188,218,1) 0%, rgba(195,213,215,1) 16%, rgba(246,240,224,1) 30%, rgba(214,205,210,1) 44%, rgba(238,195,202,1) 51%, rgba(215,169,145,1) 59%, rgba(210,122,120,1) 69%, rgba(203,112,81,1) 80%, rgba(110,75,79,1) 90%) !important;
| |
| }
| |
| | |
| body.page-Home table#InfoboxShell.round {
| |
| background: rgb(44,204,239) !important;
| |
| background: linear-gradient(181deg, rgba(44,204,239,1) 0%, rgba(39,106,139,1) 44%, rgba(130,85,65,1) 48%, rgba(105,214,226,1) 51%, rgba(254,251,246,1) 54%, rgba(254,251,246,1) 66%, rgba(233,77,33,1) 72%, rgba(227,99,45,1) 77%, rgba(204,89,58,1) 83%, rgba(221,114,78,1) 100%) !important;
| |
| }
| |
| | |
| body.page-I_Feel_Loved table#InfoboxShell.round {
| |
| background: rgb(177,174,167) !important;
| |
| background: linear-gradient(181deg, rgba(177,174,167,1) 0%, rgba(186,171,133,1) 21%, rgba(174,135,56,1) 30%, rgba(182,173,154,1) 68%, rgba(164,170,204,1) 89%, rgba(140,152,190,1) 99%) !important;
| |
| }
| |
| | |
| body.page-Dirt table#InfoboxShell.round {
| |
| background: rgb(177,174,167) !important;
| |
| background: linear-gradient(181deg, rgba(177,174,167,1) 0%, rgba(186,171,133,1) 21%, rgba(174,135,56,1) 30%, rgba(182,173,154,1) 68%, rgba(164,170,204,1) 89%, rgba(140,152,190,1) 99%) !important;
| |
| }
| |
| | |
| body.page-Only_When_I_Lose_Myself table#InfoboxShell.round {
| |
| background: rgb(172,110,33) !important;
| |
| background: linear-gradient(91deg, rgba(172,110,33,1) 0%, rgba(198,121,43,1) 12%, rgba(182,78,27,1) 48%, rgba(238,159,40,1) 74%, rgba(240,193,89,1) 83%, rgba(243,218,164,1) 99%) !important;
| |
| }
| |
| | |
| body.page-Surrender table#InfoboxShell.round {
| |
| background: rgb(172,110,33) !important;
| |
| background: linear-gradient(91deg, rgba(172,110,33,1) 0%, rgba(198,121,43,1) 12%, rgba(182,78,27,1) 48%, rgba(238,159,40,1) 74%, rgba(240,193,89,1) 83%, rgba(243,218,164,1) 99%) !important;
| |
| }
| |
| | |
| body.page-Headstar table#InfoboxShell.round {
| |
| background: rgb(172,110,33) !important;
| |
| background: linear-gradient(91deg, rgba(172,110,33,1) 0%, rgba(198,121,43,1) 12%, rgba(182,78,27,1) 48%, rgba(238,159,40,1) 74%, rgba(240,193,89,1) 83%, rgba(243,218,164,1) 99%) !important;
| |
| }
| |
| | |
| .featured {
| |
| background: rgb(255,249,212) !important;
| |
| background: linear-gradient(148deg, rgba(255,249,212,1) 0%, rgba(255,252,245,1) 58%, rgba(255,244,230,1) 83%, rgba(237,239,240,1) 100%) !important;
| |
| }
| |
| | |
| .avoid-clicks {
| |
| display: block;
| |
| pointer-events: none;
| |
| }
| |
| | |
| code {
| |
| background: rgb(252,228,237) !important;
| |
| background: linear-gradient(148deg, rgba(252,228,237,1) 0%, rgba(255,232,204,1) 100%) !important;
| |
| } | | } |
|
| |
|
| body.page-Shake_The_Disease table#InfoboxShell.round:hover {
| | #footer a:visited, #footer a {color: #fff !important;} |
| animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
| | #footer img {padding-top: 4px;} |
| transform: translate3d(0, 0, 0);
| | #footer li {color: #fff !important;} |
| backface-visibility: hidden;
| |
| perspective: 1000px;
| |
| } | |
|
| |
|
| @keyframes shake {
| | a, a:visited, #p-personal li a {color: #0067e0;} |
| 10%, 90% {
| |
| transform: translate3d(-1px, 0, 0);
| |
| }
| |
|
| |
| 20%, 80% {
| |
| transform: translate3d(2px, 0, 0);
| |
| }
| |
|
| |
|
| 30%, 50%, 70% {
| | ::selection { |
| transform: translate3d(-4px, 0, 0);
| | background-color: #07080d; |
| }
| |
| | |
| 40%, 60% {
| |
| transform: translate3d(4px, 0, 0);
| |
| }
| |
| }
| |
| | |
| /* Tooltip container */
| |
| | |
| .tooltip {
| |
| position: relative;
| |
| display: inline-block;
| |
| border-bottom: 1px dotted black;
| |
| }
| |
| | |
| .tooltip .tooltiptext {
| |
| visibility: hidden;
| |
| width: 120px;
| |
| background-color: black; | |
| color: #fff; | | color: #fff; |
| text-align: center;
| |
| border-radius: 6px;
| |
| padding: 5px 0;
| |
|
| |
| /* Position the tooltip */
| |
| position: absolute;
| |
| z-index: 1;
| |
| bottom: 100%;
| |
| left: 50%;
| |
| margin-left: -60px;
| |
| }
| |
|
| |
| .tooltip:hover .tooltiptext {
| |
| visibility: visible;
| |
| }
| |
|
| |
| .wrapper {
| |
| height: 100vh;
| |
| overflow-x: hidden;
| |
| overflow-y: auto;
| |
| perspective: 1px;
| |
| }
| |
|
| |
| .section {
| |
| position: relative;
| |
| height: 100vh;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| font-size: 48px;
| |
| color: white;
| |
| }
| |
|
| |
| .parallax::after {
| |
| content: " ";
| |
| position: absolute;
| |
| top: 0;
| |
| right: 0;
| |
| bottom: 0;
| |
| left: 0;
| |
| transform: translateZ(-1px) scale(2);
| |
| background-size: 100%;
| |
| z-index: -1;
| |
| background-image: url('https://dmlive.wiki/images/2/2e/Single-ETS.jpg');
| |
| }
| |
|
| |
| .content {
| |
| height: 200vh;
| |
| justify-content: center;
| |
| background: white;
| |
| }
| |
|
| |
| .parallax {
| |
| perspective-origin-x: 100%;
| |
| }
| |
| .parallax__layer {
| |
| transform-origin-x: 100%;
| |
| }
| |
|
| |
| *{
| |
| margin:0;
| |
| padding:0;
| |
| text-decoration:none
| |
| }
| |
| html{
| |
| height: 100%;
| |
| width: 100%;
| |
| }
| |
| nav {
| |
| background: #07080d;
| |
| position: relative;
| |
| margin: 0 auto;
| |
| }
| |
|
| |
| #flexmenu{
| |
| display: flex;
| |
| flex-flow: row wrap;
| |
| }
| |
|
| |
| .logo {
| |
| z-index: 123;
| |
| padding: 10px;
| |
| font: 18px 'helvetica';
| |
| color: #FFF;
| |
| flex-grow: 1;
| |
| flex-shrink: 1;
| |
| margin-top: 6px;
| |
| }
| |
| .logo a {
| |
| color: #9d68d9;
| |
| text-decoration:none
| |
| }
| |
|
| |
| #main-menu{
| |
| align-self: flex-end;
| |
| }
| |
| /* keep the drop-downs from being hidden by content wrappers etc */
| |
| .sub-menu {
| |
| z-index: 1234;
| |
| }
| |
|
| |
| /* General Menu Styling */
| |
| #flexmenu li,
| |
| #flexmenu li a{
| |
| border: 0;
| |
| list-style: none;
| |
| line-height: 1;
| |
| display: inline-block;
| |
| position: relative;
| |
| text-transform: uppercase;
| |
| transition: all ease-in-out .3s;
| |
| }
| |
|
| |
| #flexmenu ul li a {
| |
| padding: 17px;
| |
| font-size: 12px;
| |
| letter-spacing: 1px;
| |
| text-decoration: none;
| |
| color: #fff;
| |
| font-weight: 700;
| |
| }
| |
|
| |
| #flexmenu ul li.has-sub > a {
| |
| padding-right: 30px;
| |
| }
| |
| /* Drop icon */
| |
| #flexmenu ul li.has-sub > a:after {
| |
| position: absolute;
| |
| top: 22px;
| |
| right: 11px;
| |
| width: 8px;
| |
| height: 2px;
| |
| display: block;
| |
| background: #fff;
| |
| content: '';
| |
| }
| |
| #flexmenu ul ul li.has-sub > a:after {
| |
| position: absolute;
| |
| top: 16px;
| |
| right: 11px;
| |
| width: 8px;
| |
| height: 2px;
| |
| display: block;
| |
| background: #FFF;
| |
| content: '';
| |
| }
| |
| #flexmenu > ul > li.has-sub > a:before {
| |
| position: absolute;
| |
| top: 19px;
| |
| right: 14px;
| |
| display: block;
| |
| width: 2px;
| |
| height: 8px;
| |
| background: #fff;
| |
| transition: all .25s ease;
| |
| }
| |
| #flexmenu > ul > li.has-sub:hover > a:before {
| |
| top: 23px;
| |
| height: 0;
| |
| }
| |
| #flexmenu ul ul li.has-sub > a:before {
| |
| position: absolute;
| |
| top: 13px;
| |
| right: 14px;
| |
| display: block;
| |
| width: 2px;
| |
| height: 8px;
| |
| background: #FFF;
| |
| content: '';
| |
| transition: all .3s ease;
| |
| }
| |
| #flexmenu ul ul > li.has-sub:hover > a:before {
| |
| top: 17px;
| |
| height: 0;
| |
| }
| |
| #flexmenu ul ul li.has-sub:hover,
| |
| #flexmenu ul li.has-sub ul li.has-sub ul li:hover {
| |
| background: #fff;
| |
| }
| |
| /* Submenu default states, removed by hover gives the animation */
| |
| #flexmenu ul ul {
| |
| position: absolute;
| |
| left: -9999px;
| |
| }
| |
| #flexmenu li:hover > ul {
| |
| left: auto;
| |
| }
| |
| #flexmenu ul ul li {
| |
| height: 0;
| |
| background: #262629;
| |
| transition: all .25s ease
| |
| }
| |
| #flexmenu li:hover > ul > li {
| |
| height: 35px;
| |
| }
| |
| /* tertiary menu */
| |
| #flexmenu ul ul ul {
| |
| margin-left: 100%;
| |
| top: 0;
| |
| }
| |
| #flexmenu ul ul li a {
| |
| padding: 11px 15px;
| |
| width: 170px;
| |
| font-size: 12px;
| |
| text-decoration: none;
| |
| color: #FFF;
| |
| font-weight: 400;
| |
| }
| |
|
| |
| /* Content */
| |
| #main{
| |
| color: #FFF;
| |
| height: 100vh;
| |
| width: 100vw;
| |
| position: relative;
| |
| display: flex;
| |
| justify-content: flex-end;
| |
| align-items: center;
| |
| }
| |
|
| |
| .note {
| |
| width: 80vw;
| |
| max-width: 320px;
| |
| max-height: 200px;
| |
| text-align: center;
| |
| background: #F14F80;
| |
| font-size: 1vw;
| |
| padding: 10px;
| |
| background-clip: padding-box;
| |
| }
| |
| .note h2 {
| |
| font-weight: 300;
| |
| font-size: 1.5em;
| |
| margin: 10px 0 0;
| |
| }
| |
| .note p{
| |
| margin: 5px;
| |
| }
| |
|
| |
| @media screen and (max-width: 768px) {
| |
| /* Center the logo and remove the bar */
| |
| .logo {
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| width: 100%;
| |
| height: 46px;
| |
| text-align: center;
| |
| padding: 10px 0 0 0;
| |
| color: #fff;
| |
| }
| |
|
| |
| /* Hamburger */
| |
| .button {
| |
| background: #9d68d9;
| |
| width: 60px;
| |
| height: 48px;
| |
| position: absolute;
| |
| right: 0;
| |
| top: 0;
| |
| cursor: pointer;
| |
| z-index: 10000;
| |
| }
| |
| .button:after {
| |
| position: absolute;
| |
| top: 22px;
| |
| right: 20px;
| |
| display: block;
| |
| height: 4px;
| |
| width: 20px;
| |
| border-top: 2px solid #dddddd;
| |
| border-bottom: 2px solid #dddddd;
| |
| content: '';
| |
| }
| |
| .button:before {
| |
| transition: all .3s ease;
| |
| position: absolute;
| |
| top: 16px;
| |
| right: 20px;
| |
| display: block;
| |
| height: 2px;
| |
| width: 20px;
| |
| background: #ddd;
| |
| content: '';
| |
| }
| |
| /* Turn it into an X when open */
| |
| .button.menu-opened{
| |
| background: #2e1f62;
| |
| }
| |
| .button.menu-opened:after {
| |
| transition: all .3s ease;
| |
| top: 23px;
| |
| border: 0;
| |
| height: 2px;
| |
| width: 19px;
| |
| background: #fff;
| |
| transform: rotate(45deg);
| |
| }
| |
| .button.menu-opened:before {
| |
| top: 23px;
| |
| background: #fff;
| |
| width: 19px;
| |
| transform: rotate(-45deg);
| |
| }
| |
| /* reset horizontal styles */
| |
| #flexmenu ul {
| |
| display: none;
| |
| }
| |
| #flexmenu ul li,
| |
| #flexmenu ul li a,
| |
| #flexmenu ul ul li a{
| |
| width: 100%;
| |
| }
| |
|
| |
| #flexmenu ul ul li,
| |
| #flexmenu li:hover > ul > li {
| |
| height: auto;
| |
| }
| |
| #flexmenu ul ul li a {
| |
| padding-left: 25px;
| |
| }
| |
| #flexmenu ul ul ul li a {
| |
| padding-left: 35px;
| |
| }
| |
|
| |
| #flexmenu ul ul,
| |
| #flexmenu ul ul ul {
| |
| position: relative;
| |
| left: 0;
| |
| width: 100%;
| |
| margin: 0;
| |
| text-align: left;
| |
| }
| |
| #flexmenu ul ul ul li.active a {
| |
| border-left: none;
| |
| }
| |
| #flexmenu > ul > li.has-sub > ul > li.focus > a,
| |
| #flexmenu > ul ul > li.has-sub > ul > li.focus > a {
| |
| background: #262626;
| |
| transition: all .3s ease;
| |
| }
| |
| /* remove cross when menu item is toggled */
| |
| #flexmenu > ul > li.has-sub > a:after,
| |
| #flexmenu > ul > li.has-sub > a:before,
| |
| #flexmenu ul ul > li.has-sub > a:after,
| |
| #flexmenu ul ul > li.has-sub > a:before {
| |
| display: none;
| |
| }
| |
|
| |
| /* submenu toggles */
| |
| #flexmenu .submenu-button {
| |
| position: absolute;
| |
| z-index: 99;
| |
| right: 0;
| |
| top: 0;
| |
| display: block;
| |
| height: 46px;
| |
| width: 46px;
| |
| cursor: pointer;
| |
| }
| |
| #flexmenu ul ul .submenu-button {
| |
| height: 34px;
| |
| width: 34px;
| |
| }
| |
| #flexmenu .submenu-button:after {
| |
| position: absolute;
| |
| top: 22px;
| |
| right: 19px;
| |
| width: 8px;
| |
| height: 2px;
| |
| display: block;
| |
| background: #1b130f;
| |
| content: '';
| |
| }
| |
| #flexmenu ul ul .submenu-button:after {
| |
| top: 15px;
| |
| right: 13px;
| |
| }
| |
| #flexmenu .submenu-button.submenu-opened:after {
| |
| background: #fff;
| |
| }
| |
| #flexmenu .submenu-button:before {
| |
| position: absolute;
| |
| top: 19px;
| |
| right: 22px;
| |
| display: block;
| |
| width: 2px;
| |
| height: 8px;
| |
| background: #ddd;
| |
| content: ''
| |
| }
| |
| #flexmenu ul ul .submenu-button:before {
| |
| top: 12px;
| |
| right: 16px;
| |
| }
| |
| #flexmenu .submenu-button.submenu-opened:before {
| |
| display: none;
| |
| }
| |
|
| |
| .note{
| |
| font-size: 3vw;
| |
| }
| |
| } | | } |