Advertisement
makispaiktis

Mixer GUI - CSS

Dec 30th, 2019 (edited)
492
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 2.18 KB | None | 0 0
  1. body{
  2.     background-color: #212c3d;
  3.     font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  4. }
  5.  
  6. nav{
  7.     background-color: #212c3d;
  8.     height: 48px;
  9.     width: 100%;
  10.     /*border: 3px solid red;*/
  11.     display: flex;
  12.     justify-content: space-between;
  13. }
  14.  
  15. nav div{
  16.     /*display: inline-block;*/
  17.     height: 100%;
  18.     width: 49%;
  19.     /*border: 2px solid green;*/
  20.     display: flex;
  21. }
  22.  
  23. div.navLeft{
  24.     justify-content: flex-start;
  25. }
  26.  
  27.  
  28. div.navLeft a, div.navLeft img{
  29.     height: 100%;
  30.     width: auto;
  31.     /*border: 1px solid red;*/
  32. }
  33.  
  34. div.navLeft h2{
  35.     margin: 0 10px;
  36.     color: grey;
  37.     font-size: 16px;
  38.     /*border: 1px solid red;*/
  39.     position: relative;
  40.     top: 16.66%;
  41. }
  42.  
  43. div.navRight{
  44.     justify-content: flex-end;
  45. }
  46.  
  47. div.navRight img{
  48.     height: 100%;
  49.     width: auto;
  50.     margin: 0 20px;
  51. }
  52.  
  53. div.navRight h2{
  54.     height: 100%;
  55.     width: auto;
  56.     /*border: 1px solid red;*/
  57.     border-radius: 15%;
  58.     font-size: 16px;
  59.     color: white;
  60.     background-color: blue;
  61.     margin: 0 10px;
  62. }
  63.  
  64.  
  65.  
  66. /* SECTION */
  67. section.section1{
  68.     height: 90vh;
  69.     width: 100%;
  70.     /*border: 2px solid black;*/
  71.     display: flex;
  72.     justify-content: space-around;
  73. }
  74.  
  75. section.section1 div.left{
  76.     height: 100%;
  77.     width: 74%;
  78.     /*border: 1px solid blue;*/
  79. }
  80.  
  81. section.section1 div.right{
  82.     height: 100%;
  83.     width: 24%;
  84.     border: 2px solid blue;
  85. }
  86.  
  87. div.left div.screen{
  88.     width: 100%;
  89.     height: 85%;
  90.     /*border: 1px solid pink;*/
  91. }
  92.  
  93. div.left div.streamerInfo{
  94.     width: 100%;
  95.     height: 15%;
  96.     border: 1px solid pink;
  97. }
  98.  
  99. div.screen img{
  100.     width: 100%;
  101.     height: auto;
  102. }
  103.  
  104. .section1 .container{
  105.     display: flex;
  106.     justify-content: flex-start;
  107. }
  108.  
  109. /*
  110. .section1 .container .item{
  111.     border: 1px solid red;
  112. }
  113. */
  114.  
  115. .section1 .container .item img{
  116.     height: 11%;
  117.     width: auto;
  118. }
  119.  
  120. .item img.logo{
  121.     height: 4%;
  122.     width: auto;
  123.     position: relative;
  124.     right: 200%;
  125. }
  126.  
  127. .container h1.item{
  128.     color: lightgrey;
  129.     font-size: 16px;
  130.     position: relative;
  131.     right: 67%;
  132. }
  133.  
  134. .container #viewersCounter{
  135.     right: 88%;
  136. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement