Template:Pie chart/styles.css: Difference between revisions
Jump to navigation
Jump to search
Created page with ".pie-chart-wrapper { float: right; clear: right; margin: 0 0 1em 1em; width: auto; } .PieChartTemplate { display: inline-block; vertical-align: top; } .thumbcaption { text-align: left; } →Ensure text wraps around the chart: .mw-content-ltr .pie-chart-wrapper { clear: right; } →For better responsiveness: @media (max-width: 600px) { .pie-chart-wrapper { float: none; margin: 1em auto; text-align: center..." |
mNo edit summary |
||
(3 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: 600px) { | @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;
}
}