四零语境前端代码仓库
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

152 lines
2.8 KiB

  1. /deep/ .whole-reader-wrapper {
  2. width: 100%;
  3. height: 100%;
  4. box-sizing: border-box;
  5. position: relative;
  6. z-index: 0;
  7. }
  8. /deep/ .whole-reader-wrapper-selectable {
  9. -webkit-user-select: text; /*webkit浏览器*/
  10. -khtml-user-select: text; /*早期浏览器*/
  11. -moz-user-select: text; /*火狐*/
  12. -ms-user-select: text; /*IE10*/
  13. user-select: text;
  14. }
  15. /* 头部元素 */
  16. /deep/ .whole-reader-header {
  17. display: flex;
  18. align-items: center;
  19. height: 20px;
  20. margin-bottom: 10px;
  21. }
  22. /deep/ .whole-reader-header-back {
  23. width: 6px;
  24. height: 6px;
  25. border-top-width: 1px;
  26. border-left-width: 1px;
  27. border-top-style: solid;
  28. border-left-style: solid;
  29. transform: rotateZ(-45deg);
  30. margin-right: 5px;
  31. opacity: 0.5;
  32. }
  33. /deep/ .whole-reader-header-text {
  34. font-size: 10px;
  35. opacity: 0.5;
  36. }
  37. /* 底部元素 */
  38. /deep/ .whole-reader-footer {
  39. display: flex;
  40. align-items: center;
  41. justify-content: space-between;
  42. height: 20px;
  43. margin-top: 10px;
  44. }
  45. /deep/ .whole-reader-footer-left {
  46. display: flex;
  47. align-items: center;
  48. }
  49. /deep/ .whole-reader-footer-text {
  50. font-size: 10px;
  51. opacity: 0.5;
  52. margin-left: 10px;
  53. }
  54. /* 电池元素 */
  55. /deep/ .whole-reader-battery {
  56. display: flex;
  57. align-items: center;
  58. opacity: 0.5;
  59. }
  60. /deep/ .whole-reader-battery-wrapper {
  61. width: 20px;
  62. height: 9px;
  63. border-width: 1px;
  64. border-style: solid;
  65. padding: 1px;
  66. display: flex;
  67. flex-direction: column;
  68. box-sizing: border-box;
  69. overflow: hidden;
  70. }
  71. /deep/ .whole-reader-battery-content {
  72. flex: 1;
  73. display: flex;
  74. flex-direction: column;
  75. box-sizing: border-box;
  76. overflow: hidden;
  77. }
  78. /deep/ .whole-reader-battery-content-value {
  79. height: 5px;
  80. }
  81. /deep/ .whole-reader-battery-content-value-text {
  82. font-size: 8px;
  83. }
  84. /deep/ .whole-reader-battery-top {
  85. width: 2px;
  86. height: 5px;
  87. }
  88. /* 滚动阅读 */
  89. /deep/ .whole-scroll-reader {
  90. display: flex;
  91. flex-direction: column;
  92. width: 100%;
  93. height: 100%;
  94. box-sizing: border-box;
  95. }
  96. /deep/ .whole-scroll-reader-content {
  97. flex: 1;
  98. overflow-y: auto;
  99. }
  100. /deep/ .whole-scroll-reader-content::-webkit-scrollbar {
  101. display: none;
  102. width: 0 !important;
  103. height: 0 !important;
  104. -webkit-appearance: none;
  105. }
  106. /* 翻页阅读模式 */
  107. /deep/ .whole-flip-reader {
  108. overflow: hidden;
  109. }
  110. /deep/ .whole-flip-reader-page-item {
  111. position: absolute;
  112. top: 0;
  113. left: 0;
  114. right: 0;
  115. bottom: 0;
  116. overflow: hidden;
  117. }
  118. /deep/ .whole-flip-reader-page-item-content {
  119. position: absolute;
  120. display: flex;
  121. flex-direction: column;
  122. top: 0;
  123. left: 0;
  124. overflow: hidden;
  125. box-sizing: border-box;
  126. }
  127. /deep/ .whole-flip-reader-content-text {
  128. display: flex;
  129. flex-direction: column;
  130. flex: 1;
  131. overflow: hidden;
  132. }
  133. /deep/ .whole-flip-reader-page-item-bg {
  134. position: absolute;
  135. top: 50%;
  136. left: 100%;
  137. transform: translateY('-50%');
  138. width: 100%;
  139. box-shadow: 10px 0 20px rgba(0,0,0,0.2);
  140. }
  141. /deep/ .whole-flip-reader-page-item-shadow {
  142. width: 0;
  143. height: 100%;
  144. position: absolute;
  145. top: 0;
  146. right: 0;
  147. z-index: 9;
  148. }