Difference between revisions of "User:Loch210/Rufus style.css"

From City of Hope MUSH
Jump to navigation Jump to search
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:
−
*{
+
/***** HEADERS AND TRIANGLES *****/
−
   margin:0;
+
div.sheet-header {
−
   padding:0;
+
   display: inline-flex;
−
}
+
   float: right;
 +
  height: 20px; }
  
−
.container{  padding-top: 20px;
+
div.sheet-triangle,
−
  padding-bottom: 20px;}
+
div.sheet-right-tri {
−
body{
+
   border-top: 20px solid transparent; }
−
   background-color: #111845;
 
−
}
 
  
−
.background-img{
+
div.sheet-triangle {
−
   background-image: url("https://3.bp.blogspot.com/-piZWCW2uUbg/W2fPXxkWZgI/AAAAAAAAOu0/eydmMjTIqcwLMHEEr2H7imqoRTxMw4o9QCLcBGAs/s1600/among_trees_night_dribbble.png");
+
   border-right: 30px solid #afd3e2; }
−
height: 400px;
 
−
  width: 800px;
 
−
  background-repeat: no-repeat;
 
−
  background-size: cover;
 
−
  margin: 5% auto;
 
−
  padding:20px;
 
−
  border: 1px solid #2a3cad;
 
−
  border-radius: 4px;
 
−
  box-shadow: 0px 0px 5px #2a3cad;
 
−
  position: relative;
 
−
}
 
  
−
.content h2{ font-size:19px;}
+
div.sheet-right-tri {
 +
  border-left: 30px solid #afd3e2; }
  
−
.box{
+
div.sheet-right-header {
−
  position: absolute;
+
   margin-right: -8%;
−
  top: 50%;
+
   float: left; }
−
  left: 50%;
 
−
  transform: translate(-50%, -50%);
 
−
   width: 300px;
 
−
  height: 300px;
 
−
  background: #111845a6;
 
−
  box-sizing: border-box;
 
−
   overflow: hidden;
 
−
  box-shadow: 0 20px 50px rgb(23, 32, 90);
 
−
  border: 2px solid #2a3cad;
 
−
  color: white;
 
−
  padding: 20px;
 
−
}
 
  
−
.box:before{
+
/***** BOXES FOR DIFFERENT PC SECTIONS *****/
−
   content: '';
+
.sheet-pc-box {
−
   position:absolute;
+
   background-color: #e7e6e5;
−
   top:0;
+
   margin-left: 1.5px;
−
   left:-100%;
+
   margin-right: 1.5px;
−
   width:100%;
+
   padding-left: 5px;
−
   height:100%;
+
   padding-right: 5px;
−
  background: rgba(255,255,255,0.1);
+
   height: auto; }
−
  transition:0.5s;
 
−
  pointer-events: none;
 
−
}
 
  
−
.box:hover:before{
+
.sheet-small-box {
−
   left:-50%;
+
   min-height: 150px; }
−
  transform: skewX(-5deg);
 
−
}
 
  
−
 
+
.sheet-medium-box {
−
.box .content{
+
   min-height: 330px; }
−
  position:absolute;
 
−
  top:15px;
 
−
  left:15px;
 
−
  right:15px;
 
−
  bottom:15px;
 
−
  border:1px solid #f0a591;
 
−
  padding:20px;
 
−
  text-align:center;
 
−
  box-shadow: 0 5px 10px rgba(9,0,0,0.5);
 
−
 
 
−
}
 
−
 
 
−
.box span{
 
−
  position: absolute;
 
−
  top: 0;
 
−
  left: 0;
 
−
  width: 100%;
 
−
  height: 100%;
 
−
  display: block;
 
−
  box-sizing: border-box;
 
−
 
 
−
}
 
−
 
 
−
.box span:nth-child(1)
 
−
{
 
−
   transform:rotate(0deg);
 
−
}
 
−
 
 
−
.box span:nth-child(2)
 
−
{
 
−
  transform:rotate(90deg);
 
−
}
 
−
 
 
−
.box span:nth-child(3)
 
−
{
 
−
  transform:rotate(180deg);
 
−
}
 
−
 
 
−
.box span:nth-child(4)
 
−
{
 
−
  transform:rotate(270deg);
 
−
}
 
−
 
 
−
.box span:before
 
−
{
 
−
  content: '';
 
−
  position: absolute;
 
−
  width:100%;
 
−
  height: 2px;
 
−
  background: #50dfdb;
 
−
  animation: animate 4s linear infinite;
 
−
}
 
−
 
 
−
@keyframes animate {
 
−
  0% {
 
−
  transform:scaleX(0);
 
−
  transform-origin: left;
 
−
  }
 
−
  50%
 
−
  {
 
−
    transform:scaleX(1);
 
−
  transform-origin: left;
 
−
  }
 
−
  50.1%
 
−
  {
 
−
    transform:scaleX(1);
 
−
  transform-origin: right;
 
−
   
 
−
  }
 
−
 
 
−
  100%
 
−
  {
 
−
    transform:scaleX(0);
 
−
  transform-origin: right;
 
−
   
 
−
  }
 
−
 
 
−
 
 
−
}
 

Latest revision as of 14:18, 4 August 2020

/***** HEADERS AND TRIANGLES *****/
div.sheet-header {
  display: inline-flex;
  float: right;
  height: 20px; }

div.sheet-triangle,
div.sheet-right-tri {
  border-top: 20px solid transparent; }

div.sheet-triangle {
  border-right: 30px solid #afd3e2; }

div.sheet-right-tri {
  border-left: 30px solid #afd3e2; }

div.sheet-right-header {
  margin-right: -8%;
  float: left; }

/***** BOXES FOR DIFFERENT PC SECTIONS *****/
.sheet-pc-box {
  background-color: #e7e6e5;
  margin-left: 1.5px;
  margin-right: 1.5px;
  padding-left: 5px;
  padding-right: 5px;
  height: auto; }

.sheet-small-box {
  min-height: 150px; }

.sheet-medium-box {
  min-height: 330px; }
Retrieved from "https://cityofhopemush.net/index.php?title=User:Loch210/Rufus_style.css&oldid=213139"