m Niko moved page Template:RoomCoE/styles.css to Template:CoE Styles |
No edit summary |
||
Line 1: | Line 1: | ||
{{#css: | {{#css: | ||
.item-block { | |||
background-color: #111; | |||
border-radius: 5px; | |||
box-shadow: 0 0 20px #444 inset; | |||
padding: 3px 5px 3px 5px; | |||
border: 2px solid #b96; | |||
} | |||
.item-title { | .item-title { | ||
Line 14: | Line 22: | ||
.item-text { | .item-text { | ||
color: #cb9; | color: #cb9; | ||
} | |||
.tooltip-short, .tooltip, .tooltip-long { | |||
position: relative; | |||
-webkit-transition: all 0.3s ease-in-out 0s; | |||
transition: all 0.3s ease-in-out 0s; | |||
display: inline-block; | |||
color: #07f; | |||
} | |||
.tooltip-short:hover, .tooltip:hover, .tooltip-long:hover { | |||
color: #fff!important; | |||
cursor: pointer; | |||
} | |||
.tooltip-short a { | |||
position: absolute; | |||
display: block; | |||
visibility: hidden; | |||
opacity: 0; | |||
transition: all .3s; | |||
border-radius: 5px; | |||
box-shadow: 0 0 20px #444 inset; | |||
padding: 3px 5px 3px 5px; | |||
top: -150px; | |||
left: -5px; | |||
z-index: 9999999; | |||
border: 1px solid #514d4d; | |||
} | |||
.tooltip a { | |||
position: absolute; | |||
display: block; | |||
visibility: hidden; | |||
opacity: 0; | |||
transition: all .3s; | |||
border-radius: 5px; | |||
box-shadow: 0 0 20px #444 inset; | |||
padding: 3px 5px 3px 5px; | |||
top: -250px; | |||
left: -5px; | |||
z-index: 9999999; | |||
border: 1px solid #514d4d; | |||
} | |||
.tooltip-long a{ | |||
position: absolute; | |||
display: block; | |||
visibility: hidden; | |||
opacity: 0; | |||
transition: all .3s; | |||
border-radius: 5px; | |||
box-shadow: 0 0 20px #444 inset; | |||
padding: 3px 5px 3px 5px; | |||
top: -500px; | |||
left: -5px; | |||
z-index: 9999999; | |||
border: 1px solid #514d4d; | |||
} | |||
.tooltip-short a img, .tooltip a img, .tooltip-long a img { | |||
display: block; | |||
border: 1px solid #444; | |||
max-width: 360px; | |||
height: auto; | |||
} | |||
.tooltip-short a:after, .tooltip a:after, .tooltip-long a:after { | |||
content: " "; | |||
border-style: solid; | |||
border-width: 7px 7px 0px 7px; | |||
border-color: rgba(55, 64, 70, 0.5) transparent transparent transparent; | |||
transition-duration: 0s; | |||
transform-origin: top; | |||
transform: translateX(-50%) scaleY(1); | |||
position: absolute; | |||
left: 5%; | |||
bottom: -7px; | |||
} | |||
.tooltip-short:hover a, .tooltip:hover a, .tooltip-long:hover a{ | |||
visibility: visible; | |||
opacity: 1; | |||
} | |||
.tooltip b:before, .tooltip b:before, .tooltip-long b:before { | |||
content: ""; | |||
position: absolute; | |||
width: 100%; | |||
height: 2px; | |||
bottom: 0; | |||
left: 0; | |||
background-color: #333; | |||
visibility: hidden; | |||
-webkit-transform: scaleX(0); | |||
transform: scaleX(0); | |||
-webkit-transition: all 0.3s ease-in-out 0s; | |||
transition: all 0.3s ease-in-out 0s; | |||
} | |||
.tooltip-short b:hover:before, .tooltip b:hover:before, .tooltip-long b:hover:before { | |||
visibility: visible; | |||
background-color: #0c96ff!important; | |||
-webkit-transform: scaleX(1); | |||
transform: scaleX(1); | |||
} | } | ||
}} | }} |