Skip to content

Instantly share code, notes, and snippets.

@the-vampiire
Created April 24, 2017 19:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save the-vampiire/cda9085989fe55175626415ba24bf2e4 to your computer and use it in GitHub Desktop.
Save the-vampiire/cda9085989fe55175626415ba24bf2e4 to your computer and use it in GitHub Desktop.
Multi Twitch Final CSS
body{
background-color: rgba(100,65,164,1);
}
.modal{
display:none;
background-color: rgba(0,0,0,0.7);
width: 100vw;
height: 100vh;
}
#instructions{
align-items: center;
margin: 100px auto;
width: 75vw;
height: 75vh;
background: url("Images/Instructions.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.title_combo{
height: 200px;
width: 200px;
margin-bottom: -50px;
}
.title_font{
font-family: 'Permanent Marker', cursive;
position: absolute;
color: rgba(100,65,164,1);
margin-bottom: -50px;
margin-top: 40px;
margin-left: -80px;
transform: rotate(320deg);
font-size: 2.5em;
}
#twitch_logo{
width: 100%;
height: 100%;
background: url("Images/Twitch_Purple_RGB.png");
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
#jumbotron_online{
margin: 40px auto;
background-color: rgba(20,20,20,0.6);
max-width: 700px;
box-shadow: rgba(255,255,255,0.4) -8px -6px 5px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
#jumbotron_online a{
text-decoration: none;
}
.channel_banner{
display:flex;
max-width: 600px;
color:white;
background-color:rgba(0,0,0,0.8);
border-radius: 5px;
padding-bottom: 15px;
justify-content: flex-start;
}
.online{
box-shadow: forestgreen -6px -5px 5px; !important;
}
.offline{
box-shadow: red -6px -5px 5px;
}
.channel_logo{
align-self: center;
width: 80px;
height: 80px;
}
.channel_logo_img{
width: 100%;
border-radius: 50px;
padding: 10px 10px 10px 10px;
}
.channel_name{
max-width: 500px;
font-size: 5vh;
margin-left: 20px;
align-self: center;
justify-content: center;
}
.channel_status{
display:flex;
max-width: 600px;
background-color:rgba(0,0,0,0.8);
color: white;
align-items: center;
justify-content: center;
font-size: 2em;
border-radius: 5px;
padding: 10px 0px 10px 0px;
margin-bottom: 20px;
}
.channel_content{
background-color: black;
margin-top: -10px;
border: groove rgba(0,0,0,1) 5px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment