_slot-item.scss 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. .slot-item{
  2. overflow: hidden;
  3. position: relative;
  4. padding-top: 52%;
  5. border-radius: 16px;
  6. background-color:var(--body-bg-color);
  7. border: 1px solid var(--content-border-color);
  8. box-shadow: 0 2px 44px 0 rgba(188, 188, 188, 0.15);
  9. &__inner{
  10. position: absolute;
  11. top: 0;
  12. left: 0;
  13. width: 100%;
  14. overflow: hidden;
  15. height: calc(100% - 45px);
  16. }
  17. &__thumbnail{
  18. position: absolute;
  19. top: 0;
  20. left: 0;
  21. bottom: 0;
  22. right: 0;
  23. img{
  24. display:block;
  25. width:100%;
  26. height:100%;
  27. object-fit: cover;
  28. }
  29. }
  30. &__title{
  31. height:45px;
  32. display:flex;
  33. align-items: center;
  34. justify-content: center;
  35. padding: 12px;
  36. gap:8px;
  37. }
  38. &__title-txt{
  39. color: var(--text-color);
  40. text-align: center;
  41. font-size: 16px;
  42. font-style: normal;
  43. font-weight: 400;
  44. line-height: 26px; /* 162.5% */
  45. }
  46. &__provider{
  47. border-radius: 8px;
  48. background-color:var(--body-bg-color);
  49. backdrop-filter: blur(17px);
  50. position:absolute;
  51. top:12px;
  52. right:12px;
  53. padding: 8px;
  54. }
  55. &__rtp{
  56. background-color:var(--accent-color);
  57. display: flex;
  58. height: 24px;
  59. padding: 4px 8px;
  60. justify-content: center;
  61. align-items: center;
  62. gap: 4px;
  63. position:absolute;
  64. bottom:12px;
  65. right:12px;
  66. color: var(--text-color);
  67. font-size: 12px;
  68. font-style: normal;
  69. font-weight: 700;
  70. line-height: 14px; /* 116.667% */
  71. border-radius:5px;
  72. }
  73. &__icon{
  74. width:18px;
  75. height:18px;
  76. display:flex;
  77. align-items: center;
  78. justify-content: center;
  79. svg{
  80. fill:var(--link-color);
  81. }
  82. }
  83. }