lrc.css 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. #lyriccontainer:fullscreen,-webkit-full-screen,-moz-full-screen,-ms-fullscreen {
  2. background-color: white;
  3. align-items: center;
  4. justify-content: center;
  5. font-size: 5rem;
  6. }
  7. #lyriccontainer:fullscreen > #line-last {
  8. padding-left: 0rem;
  9. }
  10. #lyriccontainer:fullscreen > #line-current {
  11. padding-left: 0rem;
  12. }
  13. #lyriccontainer:fullscreen > #line-next {
  14. padding-left: 0rem;
  15. }
  16. #lyriccontainer {
  17. background: linear-gradient(to right, rgba(0,0,0,.1) 0%, rgba(202,234,206) 50%, rgba(0,0,0,.1) 100%);
  18. font-size: 4rem;
  19. display: flex;
  20. width: 100%;
  21. flex-direction: column;
  22. }
  23. #lyriccontainer .active {
  24. font-weight: bold
  25. }
  26. #lyriccontainer div {
  27. display: flex;
  28. flex-direction: column;
  29. }
  30. #lyriccontainer #line-last {
  31. height: 25rem;
  32. padding-left: 1rem;
  33. }
  34. #lyriccontainer #line-current {
  35. height: 30rem;
  36. padding-left: 4rem;
  37. }
  38. #lyriccontainer #line-next {
  39. height: 25rem;
  40. padding-left: 6rem;
  41. }
  42. #lyricFullscreen {
  43. height: 3rem;
  44. width: 10rem;
  45. color: #fff;
  46. text-shadow: 0 1px 0 rgba(0,0,0,.2);
  47. background-color: #57a957;
  48. border-color: #57a957;
  49. background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.3)), to(rgba(255,255,255,0)));
  50. background-image: -webkit-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
  51. background-image: -moz-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
  52. background-image: -ms-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
  53. background-image: -o-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
  54. background-image: linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
  55. }