alisa
/
after-words
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2 Commits
1 Branch
19 KiB
 
 
 
Branch: main
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'main'
${ noResults }
after-words/style.css

129 lines
2.7 KiB
Raw Permalink Blame History 

  1. body {

  2.     /* display: grid

  3.     grid-template-columns: 100%

  4.     grid-template-rows: 1fr 1fr 1fr 1fr */

  5.     height: 100vh;

  6.     width: 100vw;

  7.     margin: 0px;

  8. }

  9. 

  10. .audio-player {

  11.     width: 100vw;

  12.     height: 30 rem;

  13.     --player-button-width: 3em;

  14.     --sound-button-width: 2em;

  15.     --space: .5em;  

  16.     --tw-bg-opacity: 1;

  17.     --acc-background: rgb(239 239 239/var(--tw-bg-opacity));

  18.     --acc-background: #d9d9d9;

  19.     --acc-button: rgb(255 255 255/var(--tw-bg-opacity));

  20.     --acc-black: rgb(0 0 0/var(--tw-bg-opacity));

  21. }

  22. 

  23. .icon-container {

  24.     width: 100%;

  25.     height: 100%;

  26.     background-color: #000000;

  27.     background-color: var(--acc-black);

  28.     color: #fff;

  29.     display: flex;

  30.     justify-content: center;

  31.     align-items: center;

  32. }

  33. 

  34. .audio-icon {

  35.     width: 90%;

  36.     height: 90%;

  37. }

  38. 

  39. .controls {

  40.     display: flex;

  41.     flex-direction: row;

  42.     align-items: center;

  43.     width: 100%;

  44.     /* margin-top: 10px; */

  45. }

  46. 

  47. .player-button {

  48.     background-color: transparent;

  49.     border: 0;

  50.     width: var(--player-button-width);

  51.     height: var(--player-button-width);

  52.     cursor: pointer;

  53.     padding: 0;

  54.     box-shadow: 0 0 20px 2px #00000040;

  55. }

  56. 

  57. 

  58. .timeline {

  59.     -webkit-appearance: none;

  60.     width: calc(100% - (var(--player-button-width) + var(--sound-button-width) + var(--space)));

  61.     height: .5em;

  62.     background-color: var(--acc-background);

  63.     border-radius: 5px;

  64.     background-size: 0% 100%;

  65.     background-image: linear-gradient(#00000080, var(--acc-background));

  66.     background-repeat: no-repeat;

  67.     margin-right: var(--space);

  68.     width: 100vw;

  69.   }

  70.   

  71.   .timeline::-webkit-slider-thumb {

  72.     -webkit-appearance: none;

  73.     width: 1em;

  74.     height: 1em;

  75.     border-radius: 50%;

  76.     cursor: pointer;

  77.     opacity: 0;

  78.     transition: all .1s;

  79.     background-color: var(--acc-background);

  80.   }

  81.   

  82.   .timeline::-moz-range-thumb {

  83.     -webkit-appearance: none;

  84.     width: 1em;

  85.     height: 1em;

  86.     border-radius: 50%;

  87.     cursor: pointer;

  88.     opacity: 0;

  89.     transition: all .1s;

  90.     background-color: var(--acc-background);

  91.   }

  92.   

  93.   .timeline::-ms-thumb {

  94.     -webkit-appearance: none;

  95.     width: 1em;

  96.     height: 1em;

  97.     border-radius: 50%;

  98.     cursor: pointer;

  99.     opacity: 0;

  100.     transition: all .1s;

  101.     background-color: var(--acc-background);

  102.   }

  103.     

  104.   .timeline::-webkit-slider-runnable-track {

  105.     -webkit-appearance: none;

  106.     box-shadow: none;

  107.     border: none;

  108.     background: transparent;

  109.   }

  110.   

  111.   .timeline::-moz-range-track {

  112.     -webkit-appearance: none;

  113.     box-shadow: none;

  114.     border: none;

  115.     background: transparent;

  116.   }

  117.   

  118.   .timeline::-ms-track {

  119.     -webkit-appearance: none;

  120.     box-shadow: none;

  121.     border: none;

  122.     background: transparent;

  123.   }

  124.   

  125.   iframe {

  126.     width: 100vw;

  127.     height: 100vh;

  128.     border: none; 

  129.   }