chapter.module.scss 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. .chapter-page {
  2. @apply w-full lg:w-0 lg:max-w-4xl flex-1 p-5 bg-white;
  3. :global(.dark) & {
  4. @apply bg-gray-800;
  5. }
  6. }
  7. .chapter-header {
  8. @apply flex px-5 items-center relative;
  9. }
  10. .novel {
  11. @apply w-full;
  12. header {
  13. @apply mb-5;
  14. }
  15. h1 {
  16. @apply text-2xl font-bold;
  17. }
  18. p {
  19. @apply my-3;
  20. }
  21. }
  22. .toolbar {
  23. @apply fixed bottom-0 left-0 w-full bg-gray-900 z-30; // hidden;
  24. @apply lg:right-0 lg:w-11 lg:left-auto lg:h-full lg:flex lg:items-center lg:justify-center ;
  25. .toolbar-items {
  26. @apply flex lg:flex-col lg:w-full;
  27. }
  28. .toolbar-item {
  29. // position: relative;
  30. // display: flex;
  31. // height: 100%;
  32. // flex-basis: 100%;
  33. // cursor: pointer;
  34. // flex-direction: column;
  35. // align-items: center;
  36. // justify-content: center;
  37. // gap: 0.25rem;
  38. // border-color: currentColor;
  39. @apply flex-1 flex items-center justify-center py-5;
  40. svg {
  41. @apply w-full w-5 h-5;
  42. }
  43. }
  44. }
  45. .toolbar-display {
  46. @apply fixed bottom-0 left-0 w-full bg-gray-900 z-40 pt-4 pb-5 px-5;
  47. @apply relative w-96;
  48. .toolbar-display-title {
  49. @apply text-base mb-2;
  50. }
  51. .toolbar-display-label {
  52. @apply text-sm mb-2 mt-5;
  53. }
  54. // :global(.btn-group){
  55. // @apply w-full;
  56. // }
  57. }