hw-gs-player

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README

style.css (3867B)

      1 @import './reset-style.css';
      2 @import url('https://fonts.googleapis.com/css2?family=Lekton:wght@700&family=Noto+Sans+JP:wght@100..900&family=Noto+Sans+KR:wght@100..900&family=Noto+Sans+SC:wght@100..900&family=Noto+Sans:wght@100..900&family=Poppins&display=swap');
      3 
      4 /* general */
      5 body {
      6   margin: 0px;
      7   padding: 0px;
      8   color: #ffffff;
      9   font-family: sans-serif;
     10   font-size: 14px;
     11   font-weight: 400;
     12   background: #000000;
     13   -webkit-text-size-adjust: none;
     14   user-select: none;
     15   -webkit-user-select: none;
     16   -webkit-tap-highlight-color: transparent;
     17   overflow: hidden;
     18 }
     19 
     20 /* font for language */
     21 .locale-ja,
     22 .locale-en {
     23   font-family: "Poppins", "Noto Sans JP", "Noto Sans", sans-serif;
     24 }
     25 
     26 .locale-zh {
     27   font-family: "Poppins", "Noto Sans SC", "Noto Sans", sans-serif;
     28 }
     29 
     30 .locale-ko {
     31   font-family: "Poppins", "Noto Sans KR", "Noto Sans", sans-serif;
     32 }
     33 
     34 
     35 /* pages */
     36 .page {
     37   position: absolute;
     38   top: 55px;
     39   padding: 10px;
     40   z-index: -100;
     41 }
     42 
     43 
     44 /* title bar */
     45 .title_bar {
     46   position: fixed;
     47   padding: 15px;
     48   width: calc(100vw - 30px);
     49   height: 25px;
     50   background-color: #1f1f1f;
     51   -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 95%, rgba(0, 0, 0, 0) 100%);
     52   mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 95%, rgba(0, 0, 0, 0) 100%);
     53   z-index: -10;
     54 }
     55 
     56 .title_bar p {
     57   margin-top: 1px;
     58   margin-left: 5px;
     59   font-size: 20px;
     60   line-height: 1;
     61 }
     62 
     63 .title_bar a {
     64   text-decoration: none;
     65   color: #ffffff;
     66 }
     67 
     68 
     69 /* hamburger button */
     70 .language-switcher {
     71   width: 150px;
     72   z-index: -20;
     73   text-align: center;
     74 }
     75 
     76 .language_btn {
     77   background: none;
     78   width: 30px;
     79   margin: 5px;
     80   border: none;
     81   cursor: pointer;
     82   opacity: 0.7;
     83   transition: 0.4s ease;
     84 }
     85 
     86 .language_btn:hover {
     87   opacity: 1;
     88 }
     89 
     90 
     91 .tracklist_btn {
     92   position: fixed;
     93   top: 0;
     94   right: 50px;
     95   width: 60px;
     96   height: 5px;
     97   cursor: pointer;
     98   z-index: -10;
     99   padding: 5.5px;
    100 }
    101 
    102 .tracklist_btn svg {
    103   width: 40px;
    104   height: 40px;
    105   color: #999999;
    106 }
    107 
    108 
    109 /* hamburger button */
    110 .hamburger_btn {
    111   position: fixed;
    112   top: 0;
    113   right: 0;
    114   width: 70px;
    115   height: 55px;
    116   cursor: pointer;
    117   z-index: -10;
    118 }
    119 
    120 .hamburger_btn .line {
    121   position: absolute;
    122   top: 0;
    123   right: 25px;
    124   width: 28px;
    125   height: 3.5px;
    126   background: #999999;
    127   text-align: center;
    128   transition: 0.4s ease;
    129 }
    130 
    131 .hamburger_btn .line_01 {
    132   top: 16px;
    133 }
    134 
    135 .hamburger_btn .line_02 {
    136   top: 25.5px;
    137 }
    138 
    139 .hamburger_btn .line_03 {
    140   top: 36px;
    141 }
    142 
    143 /* hamburger button -transform */
    144 .btn_line01 {
    145   transform: translateY(10px) rotate(-45deg) scale(1.1);
    146 }
    147 
    148 .btn_line02 {
    149   opacity: 0;
    150 }
    151 
    152 .btn_line03 {
    153   transform: translateY(-10px) rotate(45deg) scale(1.1);
    154 }
    155 
    156 
    157 /* side menu */
    158 .menu {
    159   background-color: #1f1f1f;
    160   z-index: 30;
    161   padding: 50px 5px 5px 5px;
    162   position: fixed;
    163   width: 160px;
    164   height: 100vh;
    165   top: 0;
    166   right: 0;
    167   font-weight: 500;
    168   transform: translateX(100%);
    169   transition: transform 0.4s ease;
    170   z-index: -20;
    171 }
    172 
    173 .menu.open {
    174   transform: translateX(0);
    175 }
    176 
    177 .menu li {
    178   list-style: none;
    179   line-height: 1;
    180   padding: 1rem;
    181 }
    182 
    183 .menu a {
    184   color: #999999;
    185   text-decoration: none;
    186   font-size: 1rem;
    187   transition: 0.4s ease;
    188 }
    189 
    190 .menu a:hover {
    191   color: #dddddd;
    192 }
    193 
    194 .menu ul {
    195   margin: 1rem;
    196   padding: 0;
    197 }
    198 
    199 .menu hr {
    200   border-color: #999999;
    201   border-width: 1.5px;
    202   margin-top: 6px;
    203   margin-bottom: 6px;
    204 }
    205 
    206 
    207 /* iframe in player */
    208 .container iframe {
    209   width: 10vw;
    210   max-width: 60px;
    211   height: 10vw;
    212   max-height: 60px;
    213   aspect-ratio: 1/1;
    214 }
    215 
    216 .fscontainer iframe {
    217   position: relative;
    218   margin-bottom: 5px;
    219   width: 100%;
    220 
    221   height: auto;
    222   aspect-ratio: 1/1;
    223 }
    224 
    225 
    226 /* screen saver */
    227 .screen-saver {
    228   position: fixed;
    229   top: 0;
    230   left: 0;
    231   width: 100%;
    232   height: 100%;
    233   background: rgba(0, 0, 0, 0.66);
    234   z-index: 9999;
    235   display: none;
    236   animation: screenSaverAnm 2s ease forwards;
    237 }
    238 
    239 @keyframes screenSaverAnm {
    240   0% {
    241     opacity: 0;
    242   }
    243 
    244   100% {
    245     opacity: 1;
    246   }
    247 }