msg_list.css 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. .flex-container {
  2. display: flex;
  3. flex-direction: column;
  4. flex-wrap: wrap;
  5. justify-content: space-between;
  6. height: 100%;
  7. width: 100%; }
  8. .flex-container section {
  9. overflow: hidden;
  10. margin: 3px;
  11. padding: 2px;
  12. color: #eeeeee;
  13. background-color: #23262d; }
  14. .flex-container section ul li {
  15. display: flex;
  16. padding: 5px; }
  17. .flex-container section ul li .cont {
  18. font-size: 16px; }
  19. #secA {
  20. height: 32%; }
  21. #secB {
  22. height: 32%; }
  23. #secB ul.title {
  24. height: 100%;
  25. margin-bottom: 0; }
  26. #secB ul.title li {
  27. font-weight: 800;
  28. font-size: 18px;
  29. writing-mode: vertical-lr; }
  30. #secC {
  31. position: relative;
  32. height: 32%; }
  33. #weather {
  34. margin-right: 200px;
  35. height: 100%; }
  36. #weather #weatherArea {
  37. margin: auto 0; }
  38. #clock {
  39. position: absolute;
  40. top: 0;
  41. right: 0;
  42. width: 200px;
  43. background-color: #0055a6;
  44. height: 100%;
  45. display: flex;
  46. flex-direction: column;
  47. flex-wrap: wrap;
  48. justify-content: space-around; }
  49. #clock .time {
  50. text-align: center;
  51. height: 20px; }
  52. #clock .pic {
  53. width: 80px;
  54. margin: 0 auto; }
  55. #clock .pic img {
  56. width: 100%; }
  57. #clock .pic .feelTemper {
  58. text-align: center;
  59. font-size: 28px;
  60. font-weight: bold; }
  61. #clock .otherWeather {
  62. height: 20px;
  63. padding-left: 6px; }
  64. #clock .otherWeather span {
  65. display: inline-block;
  66. width: 48%;
  67. text-align: center; }
  68. /*# sourceMappingURL=msg_list.css.map */