CastofCharacters
From ThornsWiki
<style> .coc-row {
margin: 10px auto;
}
/* Add padding BETWEEN each column */ .coc-row, .coc-row > .coc-column {
display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-around;
}
/* Create three equal columns that floats next to each other */ .coc-column {
flex:1; width: 32.15%; display: none; /* Hide all elements by default */
}
/* Content */ .card-content {
background-color: #403c39 !important; padding: 0px 0px; color:#ccc5b9; border: 4px solid #deb975;
}
h4.charname { background-color:#deb975;
padding:10px; color:#fffcf2; display:block; width:100%; text-align:center; margin:-5px auto; font-family: 'Metamorphous', cursive; font-size:.9em; }
p { padding:0px 20px;
}
/* Race Colors */ .tint img { display: block; }
.tint {
position: relative; float: left; cursor: pointer; width:100%; margin-left:0px; margin-top:0px;
}
.tint:before {
content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(148, 124, 84, 0.45); transition: all .3s linear;
}
.tint:hover:before { background: none; }
.galdor:before { background: rgba(255,234,119, 0.45);
}
.human:before { background: rgba(204, 128, 63, 0.45); } .passive:before { background: rgba(190, 183, 164, 0.45);
}
.raen:before { background: rgba(89, 159, 160, 0.45); } .wick:before { background: rgba(203, 232, 150, 0.45);
}
/* The "show" class is added to the filtered elements */ .show {
display: block;
}
/* Style the buttons */
- btn-group button {
background-color: #403c39; color: #fffcf2; padding: 10px 30px; float: left; font-family: 'Open Sans', sans-serif; font-size: .75em; text-transform: uppercase; border: 1px solid #deb975; display: block; max-width: 100%; margin: 0px 13px; border-radius: 0px !important; }
/* Clear floats (clearfix hack) */
- btn-group:after {
content: ""; clear: both; display: table;
}
/*#btn-group button:not(:last-child) {
border-right: none;
}*/
/* Add a background color on hover */
- btn-group button:hover {
background-color: #403c39; color:#deb975;
}
- btn-group button:active {
background-color: #403c39; color:#deb975;
}
- btn-group button.active {
background-color: #deb975; color:#403c39;
}
/* Character Links */ .cs-link { display: block; border: 1px solid #deb975; padding: 10px; text-decoration: none; color: #fffcf2; background-color: #242422; width: 75%; margin: 10px auto; }
.cs-link a { color:#fffcf2;; text-decoration:none; }
.cs-link a:hover { color:#403c39; text-decoration:none; }
.cs-link:hover { background: #deb975; color:#403c39; }
/* GLOBAL NAV */ .staticnav { background-color:#474440; overflow:hidden; margin-top:-30px; margin-bottom:20px; border-bottom:2px solid #deb975; }
.staticnav a:link, .staticnav a:visited { float:left; display:block; Text-align:center; Padding:15px 20px; Text-decoration:none; Font-size:0.85em; Font-family:'Metamorphous', serif; text-transform:uppercase; color:#ccc5b9; }
.staticnav a:first-child { margin-left:30px; }
.staticnav a:hover { Background-color: #ccc5b9; Color:#474440; }
.staticnav.active { Background-color: #ccc5b9; Color:#474440; }
.staticnav .icon {
display: none;
}
@media screen and (max-width: 600px) {
.staticnav a { float: none;
margin:0px auto; width: 100%; }
.staticnav a:first-child { margin-left:0px; }
}
</style>
<script> filterSelection("all") function filterSelection(c) {
var x, i; x = document.getElementsByClassName("column"); if (c == "all") c = ""; for (i = 0; i < x.length; i++) { w3RemoveClass(x[i], "show"); if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show"); }
}
function w3AddClass(element, name) {
var i, arr1, arr2; arr1 = element.className.split(" "); arr2 = name.split(" "); for (i = 0; i < arr2.length; i++) { if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];} }
}
function w3RemoveClass(element, name) {
var i, arr1, arr2; arr1 = element.className.split(" "); arr2 = name.split(" "); for (i = 0; i < arr2.length; i++) { while (arr1.indexOf(arr2[i]) > -1) { arr1.splice(arr1.indexOf(arr2[i]), 1); } } element.className = arr1.join(" ");
}
// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("btn-group");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function(){ var current = document.getElementsByClassName("active"); current[0].className = current[0].className.replace(" active", ""); this.className += " active"; });
} </script>
<button class="btn active" onclick="filterSelection('all')"> Show all</button> <button class="btn" onclick="filterSelection('galdori')"> Galdor</button> <button class="btn" onclick="filterSelection('humans')"> Human</button> <button class="btn" onclick="filterSelection('passives')"> Passive</button> <button class="btn" onclick="filterSelection('raen')"> Raen</button> <button class="btn" onclick="filterSelection('wicks')"> Wick</button>