Template:HeroNav/styles.css: Difference between revisions
From Gigantic Wiki
Content added Content deleted
(Created page with "→For Template:HeroNav: →Container for icons: .iconbox { display: flex; flex-wrap: wrap; justify-content: space-around; white-space: pre-wrap; text-align: center; padding: 10px; color: #F5F7D1; font-size: 90%; } →Icon (class for image): .heroicon { border: 2px solid #017087; margin: 4px; } .newicon:hover { border: 5px solid #3FB9BE; margin: 1px; } →[[Category:Styling pages]]: ") |
No edit summary |
||
(9 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
/* For Template:HeroNav */ |
/* For Template:HeroNav */ |
||
/* Container for icons */ |
/* Container for all icons */ |
||
.iconbox { |
.iconbox { |
||
display: flex; |
display: flex; |
||
Line 10: | Line 10: | ||
padding: 10px; |
padding: 10px; |
||
color: #F5F7D1; |
color: #F5F7D1; |
||
font-size: 90%; |
font-size: 90%; |
||
max-width: 1150px; |
|||
margin: 0 auto; } |
|||
/* Container for single icon (a table) */ |
|||
.iconhandler { |
|||
border-collapse: collapse; |
|||
margin: 0 10px 5px; |
|||
line-height: 1.1; } |
|||
.iconhandler tr { |
|||
vertical-align: top; } |
|||
/* Behaviour on smaller screens on Timeless */ |
|||
@media only screen and (max-width:1412px) { |
|||
body.skin-timeless .iconhandler { |
|||
margin: 0 10px; } |
|||
} |
|||
@media only screen and (max-width:1332px) { |
|||
body.skin-timeless .iconhandler { |
|||
margin: 0 5px; } |
|||
} |
|||
@media only screen and (max-width:1284px) { |
|||
body.skin-timeless .iconhandler { |
|||
margin: 0 3px; } |
|||
} |
|||
@media only screen and (max-width:1220px) { |
|||
body.skin-timeless .iconhandler { |
|||
margin: 0; } |
|||
} |
|||
.iconsize { |
|||
width: 62px; |
|||
height: 62px; } |
|||
/* Icon ( |
/* Icon image (hover) */ |
||
.iconsize img { |
|||
.heroicon { |
|||
border: |
border: 3px solid #017087; |
||
margin: |
margin: 2px; |
||
background: linear-gradient(#E7E7E7, #C6C7C6); } |
|||
. |
.iconsize img:hover { |
||
border: 5px solid #3FB9BE; |
|||
border-color: #3FB9BE; } |
|||
/* [[Category:Styling pages]] */ |
/* [[Category:Styling pages]] */ |
Latest revision as of 09:38, 31 March 2024
/* For Template:HeroNav */
/* Container for all icons */
.iconbox {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
white-space: pre-wrap;
text-align: center;
padding: 10px;
color: #F5F7D1;
font-size: 90%;
max-width: 1150px;
margin: 0 auto; }
/* Container for single icon (a table) */
.iconhandler {
border-collapse: collapse;
margin: 0 10px 5px;
line-height: 1.1; }
.iconhandler tr {
vertical-align: top; }
/* Behaviour on smaller screens on Timeless */
@media only screen and (max-width:1412px) {
body.skin-timeless .iconhandler {
margin: 0 10px; }
}
@media only screen and (max-width:1332px) {
body.skin-timeless .iconhandler {
margin: 0 5px; }
}
@media only screen and (max-width:1284px) {
body.skin-timeless .iconhandler {
margin: 0 3px; }
}
@media only screen and (max-width:1220px) {
body.skin-timeless .iconhandler {
margin: 0; }
}
.iconsize {
width: 62px;
height: 62px; }
/* Icon image (hover) */
.iconsize img {
border: 3px solid #017087;
margin: 2px;
background: linear-gradient(#E7E7E7, #C6C7C6); }
.iconsize img:hover {
border-color: #3FB9BE; }
/* [[Category:Styling pages]] */