Template:Pie chart/styles.css: Difference between revisions
Jump to navigation
Jump to search
mNo edit summary |
mNo edit summary |
||
(2 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
. | .thumb { | ||
margin-bottom: 0.5em; | |||
width: auto; | |||
background-color: transparent; | |||
} | |||
.thumb.tright { | |||
float: right; | float: right; | ||
clear: right; | clear: right; | ||
margin: | margin-left: 1.4em; | ||
} | |||
.thumb.tleft { | |||
float: left; | |||
clear: left; | |||
margin-right: 1.4em; | |||
} | } | ||
. | .thumbinner { | ||
border: 1px solid #c8ccd1; | |||
padding: 3px; | |||
background-color: #f8f9fa; | |||
font-size: 94%; | |||
text-align: center; | |||
overflow: hidden; | |||
} | } | ||
.thumbcaption { | .thumbcaption { | ||
border: none; | |||
text-align: left; | text-align: left; | ||
line-height: 1.4em; | |||
padding: 3px; | |||
} | } | ||
/* Ensure text wraps around the chart */ | /* Ensure text wraps around the chart */ | ||
.mw-content-ltr . | .mw-content-ltr .thumb.tright { | ||
clear: right; | clear: right; | ||
} | |||
.mw-content-ltr .thumb.tleft { | |||
clear: left; | |||
} | } | ||
/* For better responsiveness */ | /* For better responsiveness */ | ||
@media (max-width: | @media (max-width: 600px) { | ||
. | .thumb { | ||
float: none; | float: none !important; | ||
margin: 1em auto; | margin: 1em auto !important; | ||
} | |||
.thumbinner { | |||
display: inline-block; | |||
} | } | ||
} | } |
Latest revision as of 16:14, 31 July 2024
.thumb {
margin-bottom: 0.5em;
width: auto;
background-color: transparent;
}
.thumb.tright {
float: right;
clear: right;
margin-left: 1.4em;
}
.thumb.tleft {
float: left;
clear: left;
margin-right: 1.4em;
}
.thumbinner {
border: 1px solid #c8ccd1;
padding: 3px;
background-color: #f8f9fa;
font-size: 94%;
text-align: center;
overflow: hidden;
}
.thumbcaption {
border: none;
text-align: left;
line-height: 1.4em;
padding: 3px;
}
/* Ensure text wraps around the chart */
.mw-content-ltr .thumb.tright {
clear: right;
}
.mw-content-ltr .thumb.tleft {
clear: left;
}
/* For better responsiveness */
@media (max-width: 600px) {
.thumb {
float: none !important;
margin: 1em auto !important;
}
.thumbinner {
display: inline-block;
}
}