Template:Croatian population data graph/styles.css

/* {{pp-template}} */
.kbs-title-table-scrollable,
.kbs-note-nonscrollable {
	max-width:52em;
	min-width:18em;
	padding-right:2em;
	padding-top:0.5em;
}

.kbs-title-table-scrollable {
	overflow-y:hidden;
	overflow-x:auto;
}


.kbs-title-table {
	display:table; 
	min-width:35em; 
	font-size:94%;
}

.kbs-table {
	display:table;
	table-layout:fixed; 
	width:98%; 
	border-collapse:collapse;
	margin-top:0.3em;
	margin-bottom:0.3em;
}

/*each year in a separate column*/
.kbs-for-columns {
   height:calc(8em + 2em); /*8em max bar height from the module + some space for data labels*/
   vertical-align:bottom; 
   text-align:center;
   line-height:1;
   border-bottom:1px solid #666; 
   padding-bottom:0; 
   white-space: nowrap; 
   overflow: visible;
}

/*bar chart*/
.kbs-columns {
   background:#25b;
   width:70%;
   margin-left:auto;
   margin-right:auto;
   border:1px solid black; 
   border-bottom:none;
}

.kbs-columns:hover {
   background:#d00;
}

/*population numbers, animated*/
.kbs-data-smaller {
   z-index:10;
   position:relative;
   padding:0.1em;
   font-size:64%;
}

.kbs-data {
   z-index:10;
   position:relative;
   padding:0.1em;
   font-size:74%;
}

.kbs-for-columns:hover .kbs-data,
.kbs-for-columns:hover .kbs-data-smaller {
   font-size:92%;
   font-weight:bold;
   color:#b00;
   background:#fff;
   z-index:20;
   display:inline-block;
   position:relative;
   border-radius:0.1em 0.1em 0.1em 0.3em;
   padding:0.3em 0.5em 0.2em 0.3em;
   transition:all 500ms;
   transform:translate(0.66em, 1.66em);
}

/*abscissa*/
.kbs-years {
   text-align:center;
   font-size:74%;
}

/*ordinate*/
.kbs-ordinate {
   width:1.5em;
   font-size:94%; 
   text-align:right;
   padding-left:0; 
   padding-right:0.5em; 
   border-right:1px solid #666;
}

.kbs-ordinate-text {
   white-space: nowrap;
 /*sideways-rl not available in some browsers*/
   writing-mode: vertical-rl;
   transform:rotate(180deg);
}

.kbs-title {
   font-size:100%;
   margin-top:0.5em;
   margin-bottom:0.5em;
   display:flex;
}

.kbs-title-left {
	flex-grow:1;
}

.kbs-note {
	font-size:84%; 
	line-height:1.3;
	color:var(--color-subtle,#54595d);
}