Template:Pie Chart/styles.css
From Archon Arcana - The KeyForge Wiki
.pieContainer { height: 150px; float:left; display:table; position: relative; margin-top:10px; margin-left: 30px; margin-right:200px; margin-bottom:10px; } .innerCircle { position: absolute; width: 60px; height: 60px; background-color: #fafafa; border-radius: 30px; top: 45px; left: 45px; box-shadow: 0px 0px 8px rgba(0,0,0,0.5) inset; color: black; } .pieContainer4 { height:160px; } .pieContainer5 { height:170px; } .pieContainer6 { height:170px; } .pieContainer7 { height:175px; } .pieContainer8 { height:200px; } .pieBackground { position: absolute; width: 150px; height: 150px; border-radius: 75px; box-shadow: 0px 0px 8px rgba(0,0,0,0.5); } .pie { transition: all 1s; position: absolute; width: 150px; height: 150px; border-radius: 75px; clip: rect(0px, 75px, 150px, 0px); } .hold { position: absolute; width: 150px; height: 150px; border-radius: 75px; clip: rect(0px, 150px, 150px, 75px); } #pieSlice1 .pie { background-color: #4040bf; } .pieSlice1 { background-color:#4040bf; } #pieSlice2 .pie { background-color: #86e2f9; } .pieSlice2 { background-color:#86e2f9; } #pieSlice3 .pie { background-color: #0a760a; } .pieSlice3 { background-color:#0a760a; } #pieSlice4 .pie { background-color: #99f042; } .pieSlice4 { background-color:#99f042; } #pieSlice5 .pie { background-color: #f6f655; } .pieSlice5 { background-color:#f6f655; } #pieSlice6 .pie { background-color: #eea02b; } .pieSlice6 { background-color:#eea02b; } #pieSlice7 .pie { background-color: #f04242; } .pieSlice7 { background-color:#f04242; } #pieSlice8 .pie { background-color: #a50d40; } .pieSlice8 { background-color:#a50d40; } .my-legend .legend-title { position:relative; top:0px; width:160px; left:180px; text-align: left; margin-bottom: 5px; font-weight: bold; font-size: 90%; } .my-legend .legend-scale ul { margin: 0; margin-bottom: 5px; position:relative; top:0px; left:180px; padding: 0; float: left; list-style: none; } .my-legend .legend-scale ul li { font-size: 80%; list-style: none; margin-left: 0; width:170px; line-height: 18px; margin-bottom: 2px; } .my-legend ul.legend-labels li span { display: block; float: left; height: 16px; width: 30px; margin-right: 5px; margin-left: 0; } .my-legend .legend-source { font-size: 70%; position:relative; top:0px; left:180px; color: #999; clear: both; } .my-legend a { color: #777; } .brobnar { background-color:#ff787f; } #brobnar .pie { background-color:#ff787f; } .dis { background-color:#f7a1cf; } #dis .pie { background-color:#f7a1cf; } #logos .pie { background-color:#ffc880; } .logos { background-color:#ffc880; } .mars { background-color:#93fb83; } #mars .pie { background-color:#93fb83; } .sanctum { background-color:#86a4f9; } #sanctum .pie { background-color:#86a4f9; } .saurian { background-color:#8cf2eb; } #saurian .pie { background-color:#8cf2eb; } .shadows { background-color:#bababa; } #shadows .pie { background-color:#bababa; } .staralliance { background-color:#616073; } #staralliance .pie { background-color:#616073; } .untamed { background-color:#859c80; } #untamed .pie { background-color:#859c80; } .wc { background-color:#884fe3; } #wc .pie { background-color:#884fe3; } .mm { background-color:#bac2d1; } #mm .pie { background-color:#bac2d1; }