RealHero

web1 mainArea.css

Jun 2nd, 2021
816
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. #mainArea{
  2.   margin: 0 20px 20px 20px;
  3.   background: white;
  4.   border-radius: 5px;
  5.   padding: 10px;
  6.   color: black;
  7.   display: flex;
  8. }
  9.  
  10. .sideList{
  11.   list-style: none;
  12.   padding: 0;
  13.   margin: 0;
  14.   user-select: none;
  15.   background: #dbd9da;
  16.   width: max-content;
  17. }
  18. .sideList>li{
  19.   background: #eaeaea;
  20.   margin: 4px 2px;
  21. }
  22. .sideList>li span{
  23.   padding: 0 2px;
  24. }
  25. .sideList>li span::before{
  26.   content: "▸";
  27.   display: inline-block;
  28.   transform: rotate(90deg) translateY(1px) translateX(-1px);
  29. }
  30. .sideList>li.hidden span::before{
  31.   transform:none;
  32. }
  33.  
  34. .sideList li ul{
  35.   overflow: hidden;
  36.   transition: height 0.2s;
  37. }
  38.  
  39. .sideList li.hidden ul{
  40.   height: 0 !important;
  41. }
  42.  
  43. .sideList h3{
  44.   color: dodgerblue;
  45.   margin: 0;
  46.   background: linear-gradient(180deg, #000000 , #555555);
  47.   text-align: center;
  48. }
  49.  
  50. .add{
  51.   background: #dbd9da;
  52.   width: min-content;
  53.   margin: 0 auto;
  54. }
  55. .add h3{
  56.   color: dodgerblue;
  57.   margin: 0;
  58.   background: linear-gradient(180deg, #000000 , #555555);
  59.   text-align: center;
  60.   padding: 0 10px;
  61. }
  62. .add iframe{
  63.   width: calc(100% - 20px);
  64.   border: none;
  65.   margin: 10px 10px 6px 10px;
  66.   background: white;
  67. }
  68. .middleArea{
  69.   width: 100%;
  70.   margin: 0 10px;
  71. }
  72. .sideArea{
  73.   width: auto;
  74. }
  75. .textCard{
  76.   background: #dbd9da;
  77.   border: 2px solid #eaeaea;
  78. }
  79. .search{
  80.   margin: 5px 25px;
  81.   display: flex;
  82.   padding: 10px;
  83.   background: linear-gradient(180deg, #000000 , #555555);
  84.   border-radius: 5px;
  85. }
  86. .search input{
  87.   width: 100%;
  88. }
  89. .bigCard .cardHolder{
  90.   display: flex;
  91. }
  92. .bigCard .card{
  93.   width: 25%;
  94.   height: 250px;
  95.   margin: 10px;
  96.   display: flex;
  97.   flex-direction: column;
  98. }
  99. .bigCard h3{
  100.   margin: 0;
  101.   background: linear-gradient(180deg, #000000 , #555555);
  102.   color: dodgerblue;
  103.   padding: 5px;
  104. }
  105. .bigCard{
  106.   background: #dbd9da;
  107.   border: 2px solid #eaeaea;
  108. }
  109. .filmPoster{
  110.   background: white;
  111.   width: 100%;
  112.   height: 100%;
  113. }
  114. .bigCard .card span{
  115.   text-align: center;
  116. }
  117. .cardHolder .desciptionCard{
  118.   width: calc(75% + 45px);
  119.   margin: 10px;
  120. }
  121. .cardHolder .desciptionCard h4{
  122.   margin: 0;
  123. }
  124. .newsCard{
  125.   background: linear-gradient(180deg, #000000 , #555555);
  126.   margin-top: 5px;
  127.   display: flex;
  128.   color: white;
  129. }
  130. .newsCard a{
  131.   margin-left: 10px;
  132.   text-decoration: none;
  133.   height: 100%;
  134.   width: 100%;
  135.   display: block;
  136.   color: dodgerblue;
  137. }
  138.  
RAW Paste Data