Niko moved page Template:RoomCoE/styles.css to Template:TooltipHover/styles.css Tag: New redirect |
No edit summary |
||
(163 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
# | {{#css: | ||
.fit-darn-it { | |||
max-width: 350px; | |||
height: auto; | |||
} | |||
.item-block { | |||
background-color: #111; | |||
border-radius: 5px; | |||
box-shadow: 0 0 20px #444 inset; | |||
padding: 3px 5px 3px 5px; | |||
border: 2px solid #b96; | |||
width: 360px; | |||
} | |||
.item-block-splitter { | |||
display: block; | |||
} | |||
.item-threshold { | |||
padding-left: 10px; | |||
display: block; | |||
float: left; | |||
} | |||
.item-cost { | |||
display: block; | |||
float: right; | |||
font-family: Verdana, sans-serif; | |||
font-size: 150% | |||
padding-right: 15px; | |||
vertical-align: middle; | |||
} | |||
.item-title { | |||
font-feature-settings: "smcp" on !important; | |||
font-family: Verdana, sans-serif !important; | |||
display: block !important; | |||
color: #cb9 !important; | |||
font-size: 160% !important; | |||
text-align: center; | |||
} | |||
.item-subtitle { | |||
font-family: Georgia, serif; | |||
display: block; | |||
clear: both; | |||
text-align: center; | |||
color: #666; | |||
font-size: 120%; | |||
} | |||
.item-text { | |||
font-family: Georgia, serif; | |||
text-align: left; | |||
color: #cb9; | |||
font-size: 110%; | |||
display: block; | |||
} | |||
.item-icon { | |||
float: left; | |||
} | |||
.float-clear { | |||
clear: both; | |||
} | |||
.spell-school-icon { | |||
float: left; | |||
} | |||
.spell-school-description { | |||
margin: 15px; | |||
} | |||
.spellpage-block { | |||
border-radius: 5px; | |||
box-shadow: 0 0 20px #444 inset; | |||
padding: 0px; | |||
margin: 10px; | |||
border: 4px solid #564; | |||
display: block; | |||
max-width: 600px; | |||
} | |||
.spell-main-block { | |||
background: repeating-conic-gradient(#7b440800 0.000045%, #ac855d40 0.0005%), #cb9; | |||
border-radius: 5px; | |||
box-shadow: 0 0 20px #444 inset; | |||
padding: 5px 10px 10px 10px; | |||
border: 4px solid #564; | |||
max-width: 600px; | |||
} | |||
.spell-grid { | |||
display: grid; | |||
gap: 1%; | |||
grid-template-columns: 25% 10% 50% 10% ; | |||
align-items:stretch; | |||
} | |||
.spell-icon-block { | |||
grid-column: 1; | |||
grid-row: 1 / span 2; | |||
display: block; | |||
margin: 0 auto; | |||
} | |||
.spell-title-left-block { | |||
grid-column: 2; | |||
grid-row: 1 / span 2; | |||
display: block; | |||
margin: 0 auto; | |||
} | |||
.spell-title-block { | |||
grid-column: 3; | |||
grid-row: 1; | |||
display: block; | |||
margin: 0 auto; | |||
align-content: end; | |||
} | |||
.spell-subtitle-block { | |||
grid-column: 3; | |||
grid-row: 2; | |||
display: block; | |||
margin: 0 auto; | |||
align-content: start; | |||
} | |||
.spell-title-right-block { | |||
grid-column: 4; | |||
grid-row: 1 / span 2; | |||
display: block; | |||
margin: 0 auto; | |||
} | |||
.spell-research-block { | |||
grid-column: 1; | |||
grid-row: 3; | |||
} | |||
.spell-mana-block { | |||
grid-column: 1; | |||
grid-row: 4; | |||
} | |||
.spell-upkeep-block { | |||
grid-column: 1; | |||
grid-row: 5; | |||
} | |||
.spell-info-block { | |||
grid-column: 2 / span 3; | |||
grid-row: 3 / span 3; | |||
display: block; | |||
margin: 0 auto; | |||
align-content: center; | |||
background: repeating-conic-gradient(#7b440800 0.000045%, #ac855d40 0.0005%), #aa9; | |||
padding: 10px; | |||
} | |||
.spell-room-icon-block { | |||
grid-column: 2 / span 3; | |||
grid-row: 3 / span 3; | |||
justify-content: center; | |||
display: block; | |||
margin: 0 auto; | |||
padding: 20px; | |||
} | |||
.spell-blank-block { | |||
grid-column: 1 / span 4; | |||
grid-row: 6; | |||
justify-content: center; | |||
align-items: center; | |||
display: block; | |||
margin: 0 auto; | |||
} | |||
.spell-page-block { | |||
grid-column: 1 / span 4; | |||
grid-row: 7; | |||
display: block; | |||
margin: 0 auto; | |||
align-content: center; | |||
} | |||
.spell-flavor-block { | |||
grid-column: 1 / span 4; | |||
grid-row: 8; | |||
display: block; | |||
margin: 0 auto; | |||
align-content: center; | |||
margin-bottom: 45px; | |||
} | |||
.spell-title { | |||
color: #411 !important; | |||
font-family: Georgia, serif !important; | |||
font-size: 180% !important; | |||
font-weight: bold !important; | |||
text-align: center; | |||
} | |||
.spell-subtitle { | |||
font-family: Georgia, serif; | |||
text-align: center; | |||
color: #733; | |||
font-weight: bold; | |||
font-size: 120%; | |||
} | |||
.spell-flavor-text { | |||
font-family: Georgia, serif; | |||
text-align: center; | |||
color: #411; | |||
font-size: 110%; | |||
} | |||
.spell-resource-text { | |||
font-family: Verdana, sans-serif !important; | |||
color: #411; | |||
font-size: 140%; | |||
font-weight: bold; | |||
} | |||
.spell-text { | |||
font-family: Georgia, serif; | |||
text-align: left; | |||
color: #411; | |||
font-size: 110%; | |||
} | |||
.spell-blank-text { | |||
font-family: Georgia, serif; | |||
display: block; | |||
clear: both; | |||
text-align: left; | |||
padding-left: 25px; | |||
color: #666; | |||
font-size: 120%; | |||
} | |||
.outer { | |||
width: 20px; | |||
} | |||
.left { | |||
border-left: 3px solid #733; | |||
border-top: 3px solid #733; | |||
border-bottom: 3px solid #733; | |||
} | |||
.middle{ | |||
padding: 20px 45px; | |||
} | |||
.right { | |||
border-right: 3px solid #733; | |||
border-top: 3px solid #733; | |||
border-bottom: 3px solid #733; | |||
} | |||
.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; | |||
font-family: Palatino, serif; | |||
} | |||
.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: -120px; | |||
left: 0px; | |||
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: -200px; | |||
left: 0px; | |||
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: -300px; | |||
left: 0px; | |||
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:hover a, .tooltip:hover a, .tooltip-long:hover a{ | |||
visibility: visible; | |||
opacity: 1; | |||
} | |||
.tooltip b:before, .tooltip-short 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); | |||
} | |||
.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: 50%; | |||
bottom: -7px; | |||
} | |||
.tooltip-wrapper { | |||
position: relative; | |||
-webkit-transition: all 0.3s ease-in-out 0s; | |||
transition: all 0.3s ease-in-out 0s; | |||
display: inline-block; | |||
} | |||
.tooltip-wrapper a { | |||
display: inline-block; | |||
color: #07f!important; | |||
font-family: Palatino, serif; | |||
} | |||
.tooltip-wrapper:hover .tooltip-short a, .tooltip-wrapper:hover .tooltip a, .tooltip-wrapper:hover .tooltip-long a { | |||
visibility: visible; | |||
opacity: 1; | |||
} | |||
@media only screen and (max-width: 600px) { | |||
.item-block, | |||
.item-block-splitter img { | |||
width: 95%!important; | |||
} | |||
h4 .item-title, h4 .spell-title { | |||
font-size: 120% !important; | |||
} | |||
.tooltip-short, .tooltip, .tooltip-long { | |||
display: none!important; | |||
} | |||
.fit-darn-it { | |||
max-width: 150px; | |||
height: auto; | |||
} | |||
} | |||
}} |