style.css 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. .chapter_list {
  2. display: flex;
  3. }
  4. .chapter_list .grid {
  5. width: 400px;
  6. max-width: 100%;
  7. }
  8. .chapter_list .list {
  9. width: 200px;
  10. }
  11. .chapter_list .list .res_more {
  12. display: none;
  13. }
  14. .chapter_list .show {
  15. display: block;
  16. }
  17. .chapter_list .hidden {
  18. display: none;
  19. }
  20. .chapter_list .list .resource .item {
  21. display: none;
  22. }
  23. .chapter_list ul {
  24. background-color: antiquewhite;
  25. border-left: 1px solid brown;
  26. border-right: 1px solid brown;
  27. padding: 0;
  28. }
  29. .chapter_list ul li {
  30. display: flex;
  31. justify-content: space-between;
  32. padding: 8px;
  33. white-space: nowrap;
  34. overflow-x: hidden;
  35. }
  36. .chapter_list ul li:hover {
  37. background-color: darkorange;
  38. }
  39. .chapter_list .resource {
  40. display: flex;
  41. margin-top: auto;
  42. margin-bottom: auto;
  43. }
  44. .chapter_list .title .title_1 {
  45. font-weight: 700;
  46. font-size: 110%;
  47. }
  48. .chapter_list .title .title_2 {
  49. font-size: 80%;
  50. color: var(--main-color1);
  51. }
  52. .selected .title_2 {
  53. font-size: 80%;
  54. color: unset;
  55. }
  56. .chapter_list .title {
  57. text-transform: capitalize;
  58. }
  59. .chapter_list .title div:lang(pali) {
  60. font-size: 80%;
  61. }
  62. .chapter_list .selected {
  63. background-color: chocolate;
  64. color: whitesmoke;
  65. }
  66. /*書標題特殊樣式*/
  67. .chapter_list .level_1 {
  68. background: linear-gradient(45deg, #e89650 20%, transparent 90%);
  69. color: whitesmoke;
  70. }
  71. .progress_circle {
  72. transform-origin: center;
  73. transform: rotateZ(-90deg);
  74. }
  75. .progress_color {
  76. stroke: mediumseagreen;
  77. }
  78. .progress_bg {
  79. stroke: lightgrey;
  80. }
  81. .chapter_head {
  82. border-bottom: 1px solid var(--border-line-color);
  83. }
  84. .chapter_head .title {
  85. text-align: center;
  86. }
  87. .chapter_head .title .title_1 {
  88. font-size: 120%;
  89. padding: 1em 0 0.5em 0;
  90. font-weight: 700;
  91. }
  92. .chapter_head .title .title_1 {
  93. font-size: 120%;
  94. padding: 1em 0 0.5em 0;
  95. font-weight: 700;
  96. }
  97. .chapter_head .title .title_2 {
  98. padding: 0 0 0.5em 0;
  99. }
  100. .progress .item {
  101. display: flex;
  102. margin: 5px;
  103. }
  104. .progress .item .lang {
  105. line-height: 30px;
  106. padding-left: 10px;
  107. }
  108. .chapter_head .res {
  109. border-top: 1px solid var(--border-line-color);
  110. }
  111. .chapter_head .res h2 {
  112. padding: 0 5px;
  113. font-size: 100%;
  114. font-weight: 700;
  115. }