index.css 1.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. .container {
  2. flex-direction: column;
  3. justify-content: center;
  4. align-items: center;
  5. }
  6. .bg-img{
  7. flex-shrink: 0;
  8. height: 100%;
  9. }
  10. .container-inner {
  11. flex-direction: column;
  12. justify-content: flex-end;
  13. align-items: flex-start;
  14. height: 100%;
  15. width: 100%;
  16. padding: 12px;
  17. }
  18. .title {
  19. font-size: 19px;
  20. font-weight: bold;
  21. color: white;
  22. text-overflow: ellipsis;
  23. max-lines: 1;
  24. }
  25. .detail_text {
  26. font-size: 16px;
  27. color: white;
  28. opacity: 0.66;
  29. text-overflow: ellipsis;
  30. max-lines: 1;
  31. margin-top: 6px;
  32. }
  33. @media (device-type: tablet) {
  34. .bg-img {
  35. object-fit: fill;
  36. }
  37. }
  38. @media (device-type: wearable) {
  39. .container-inner {
  40. justify-content: center;
  41. align-items: center;
  42. margin: 40px 26px;
  43. padding: 0;
  44. }
  45. .title {
  46. text-align: center;
  47. }
  48. .detail_text {
  49. max-lines: 2;
  50. text-align: center;
  51. }
  52. }
  53. @media (device-type: tv) {
  54. .title {
  55. font-size: 16px;
  56. }
  57. .detail_text {
  58. font-size: 12px;
  59. }
  60. }