MediaWiki:Common.css
From DM Live - the Depeche Mode live encyclopedia for the masses
Jump to navigationJump to search
Note: After publishing, 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 / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* CSS placed here will be applied to all skins */
/* Be sure to update Mobile.css as well! Song page infobox styles must also appear in Mobile.css in order to render on the mobile site. */
.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;
margin-bottom: 1.2em;
padding: 0.2em;
text-align: center;
}
/* 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;
}
.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;
}
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
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;
}
/* Song page infobox styles */
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 {
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
@keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}
20%, 80% {
transform: translate3d(2px, 0, 0);
}
30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}
40%, 60% {
transform: translate3d(4px, 0, 0);
}
}
/* Custom header */
*{
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;
}
}
