Difference between revisions of "Widget:CastofCharacters"

Revision as of 14:16, 5 May 2020

<style> .row {

   margin: 10px auto;

}

/* Add padding BETWEEN each column */ .row, .row > .column {

   padding: 5px;

}

/* Create three equal columns that floats next to each other */ .column {

   float: left;
   width: 32.15%;

/*min-width:250px;*/ /*max-width:350px;*/

   display: none; /* Hide all elements by default */

}

/* Clear floats after rows */ .row:after {

   content: "";
   display: table;
   clear: both;

}

/* Content */ .card-content {

   background-color: #403c39;
   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>

 <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>

@@ Line 3: / Line 3: @@
      margin: 10px auto;
 }
 /* Add padding BETWEEN each column */
 .row,
@@ Line 8: / Line 9: @@
      padding: 5px;
 }
 /* Create three equal columns that floats next to each other */
 .column {
@@ Line 16: / Line 18: @@
      display: none; /* Hide all elements by default */
 }
 /* Clear floats after rows */
 .row:after {
@@ Line 22: / Line 25: @@
      clear: both;
 }
 /* Content */
 .card-content {
@@ Line 29: / Line 33: @@
      border: 4px solid #deb975;
 }
 h4.charname {
 	background-color:#deb975;
@@ Line 216: / Line 221: @@
 </style>
-<!-- Original Cast of Characters Janky AF JS Script -->
-<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>
-<!-- Navigation -->
 <div style="width:100%; margin:25px auto 0px; padding:5px 0px;">

Widget

Difference between revisions of "CastofCharacters"

From ThornsWiki

Revision as of 14:16, 5 May 2020