coze_demo/socket/public/style.css

@import url('https://fonts.googleapis.com/css?family=Asap|Asap+Condensed');

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Asap';
}

body{
    overflow: hidden;
}

h1{font-size: 80px;}
h2{font-size: 70px;}
h3{font-size: 60px;}
h4{font-size: 40px;}
h5{font-size: 35px;}
h6{font-size: 25px;}

h1,h2,h3,h4,h5,h6{
     padding: 10px 0;
     margin: 10px 0;
}

section{
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #222;
} 

section.white{
    background-color: #fff;
}

section.grey{
    background-color: #333;
}


section > div{
    position: absolute;
    min-height: 80px;
    width: 50vw;
    top: 50%;
    left: 10vw;
    transform: translate(0,-50%);
}
section > div.full{
    width: 80vw;
}

section > div.half{
    width: 35vw;
}

section > img{
    position: absolute;
    right: 10vw;
    top: 50%;
    width: 25vw;
    transform: translate(0, -50%);
}

section > img.git{
    position: absolute;
    right: 10vw;
    top: 50%;
    width: 30vw;
    transform: translate(0, -50%);
}

section > img.git.top{
    top: 0;
    transform: translate(0, 0);
}

section > img.git.bottom{
    top: auto;
    bottom: 0;
    transform: translate(0, 0);
}

section > img.git.half{
    width: 35vw;
    transform: translate(0, -50%);
}







section.git{
    background-image: url(img/git_repeat.png);
    background-position: right 10vw top;
    background-repeat: repeat-y;
    background-size: 30vw;
}

section.git-start{
    background-image: url(img/git_start.png);
    background-position: right 10vw bottom;
    background-repeat: no-repeat;
    background-size: 30vw;/* 50vh*/
}

section.git-stop{
    background-image: url(img/git_stop.png);
    background-position: right 10vw top;
    background-repeat: no-repeat;
    background-size: 30vw;
}





section.git-classic{
    background-image: url(img/git_repeat-classic.png);
    background-position: right 10vw top;
    background-repeat: repeat-y;
    background-size: 30vw;
}

section.git-start-classic{
    background-image: url(img/git_start-classic.png);
    background-position: right 10vw bottom;
    background-repeat: no-repeat;
    background-size: 30vw;/* 50vh*/
}

section.git-stop-classic{
    background-image: url(img/git_stop-classic.png);
    background-position: right 10vw top;
    background-repeat: no-repeat;
    background-size: 30vw;
}






section.git-feature{
    background-image: url(img/git_flow-feature-repeat.png);
    background-position: right 10vw top;
    background-repeat: repeat-y;
    background-size: 30vw;
}
section.git-features{
    background-image: url(img/git_flow-features-repeat.png);
    background-position: right 10vw top;
    background-repeat: repeat-y;
    background-size: 30vw;
}

section.git-start-feature{
    background-image: url(img/git_flow-feature-start.png);
    background-position: right 10vw top;
    background-repeat: no-repeat;
    background-size: 30vw;/* 50vh*/
}

section.git-stop-feature{
    background-image: url(img/git_flow-feature-stop.png);
    background-position: right 10vw top;
    background-repeat: no-repeat;
    background-size: 30vw;
}


table{
    width: 100%;
    padding:0;
}

tr td{
    background: rgba(0,0,0,0.5);
}
tr:nth-child(even) td{
    background: rgba(0,0,0,0.4);
}

table.nobg td{
    background: none;
}
td{
    padding: 8px 15px;
    border-radius: 4px;
}
td.big{
    font-size: 30px;
}

code{
    display: block;
    padding: 15px 30px;
    margin-top: 20px;
    background: rgba(0,0,0,0.5);
    font-size: 20px;
    border-radius: 4px;
    border-top: 3px solid #444;
    border-bottom: 3px solid #444;
}

code span{
    display: block;
    padding: 4px;
}

code comment{
    font-weight: 100;
    color: green
}

.text-white{ color: white;}
.text-white b{color: #999;}

.text-right{
    text-align: right;
}
.text-center{
    text-align: center;
}










/*  ################# CONTROLS */




#controls{
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
}


button{
    width: 90%;
    height:30vh;
    margin: 2vh 0;
    font-size: 10vh;
}


select{
    width: 90%;
    height: 18vh;
    margin: 2vh 0;
    font-size: 5vh;
    text-align: center;
    text-align-last:center;
    -webkit-appearance: none; 
    -moz-appearance: none;
    appearance: none;    
}

option{
    text-align: center;
}