|
768 | 768 | min-width: 0; |
769 | 769 | } |
770 | 770 |
|
771 | | - /* ── 章节导航按钮 ── */ |
772 | | - .chapter-nav-toggle { |
773 | | - position: fixed; |
774 | | - bottom: 2rem; |
775 | | - right: 6rem; |
776 | | - width: 48px; |
777 | | - height: 48px; |
778 | | - background: var(--color-primary); |
779 | | - color: #fff; |
780 | | - border: none; |
781 | | - border-radius: var(--radius-full); |
782 | | - cursor: pointer; |
783 | | - display: flex; |
784 | | - align-items: center; |
785 | | - justify-content: center; |
786 | | - font-size: 1.5rem; |
787 | | - box-shadow: var(--shadow-lg); |
788 | | - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
789 | | - z-index: 9998; |
790 | | - } |
791 | | - |
792 | | - .chapter-nav-toggle:hover { |
793 | | - background: var(--color-primary-dark); |
794 | | - transform: scale(1.1); |
795 | | - box-shadow: var(--shadow-xl); |
796 | | - } |
797 | | - |
798 | | - .chapter-nav-toggle:active { |
799 | | - transform: scale(0.95); |
800 | | - } |
801 | | - |
802 | | - /* ── 章节导航面板 ── */ |
803 | | - .chapter-nav-panel { |
804 | | - position: fixed; |
805 | | - top: 50%; |
806 | | - right: -400px; |
807 | | - transform: translateY(-50%); |
808 | | - width: 360px; |
809 | | - max-height: 80vh; |
810 | | - background: var(--color-bg); |
811 | | - border: 2px solid var(--color-border); |
812 | | - border-radius: var(--radius-lg); |
813 | | - box-shadow: var(--shadow-xl); |
814 | | - overflow: hidden; |
815 | | - transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
816 | | - z-index: 9997; |
817 | | - display: flex; |
818 | | - flex-direction: column; |
819 | | - } |
820 | | - |
821 | | - .chapter-nav-panel.open { |
822 | | - right: 2rem; |
823 | | - } |
824 | | - |
825 | | - .chapter-nav-header { |
826 | | - padding: 1.25rem; |
827 | | - background: var(--color-bg-alt); |
828 | | - border-bottom: 1px solid var(--color-border); |
829 | | - display: flex; |
830 | | - justify-content: space-between; |
831 | | - align-items: center; |
832 | | - } |
833 | | - |
834 | | - .chapter-nav-header h3 { |
835 | | - margin: 0; |
836 | | - font-size: 1.1rem; |
837 | | - color: var(--color-text); |
838 | | - } |
839 | | - |
840 | | - .chapter-nav-close { |
841 | | - background: none; |
842 | | - border: none; |
843 | | - font-size: 1.5rem; |
844 | | - cursor: pointer; |
845 | | - color: var(--color-text-muted); |
846 | | - padding: 0.25rem; |
847 | | - line-height: 1; |
848 | | - transition: color 0.2s; |
849 | | - } |
850 | | - |
851 | | - .chapter-nav-close:hover { |
852 | | - color: var(--color-accent); |
853 | | - } |
854 | | - |
855 | | - .chapter-nav-content { |
856 | | - overflow-y: auto; |
857 | | - flex: 1; |
858 | | - padding: 1rem; |
859 | | - } |
860 | | - |
861 | | - .chapter-nav-content::-webkit-scrollbar { |
862 | | - width: 6px; |
863 | | - } |
864 | | - |
865 | | - .chapter-nav-content::-webkit-scrollbar-track { |
866 | | - background: var(--color-bg-alt); |
867 | | - } |
868 | | - |
869 | | - .chapter-nav-content::-webkit-scrollbar-thumb { |
870 | | - background: var(--color-border); |
871 | | - border-radius: 3px; |
872 | | - } |
873 | | - |
874 | | - .chapter-nav-content::-webkit-scrollbar-thumb:hover { |
875 | | - background: var(--color-text-muted); |
876 | | - } |
877 | | - |
878 | | - .chapter-nav-section { |
879 | | - margin-bottom: 1.5rem; |
880 | | - } |
881 | | - |
882 | | - .chapter-nav-section-title { |
883 | | - font-size: 0.9rem; |
884 | | - font-weight: 600; |
885 | | - color: var(--color-text-secondary); |
886 | | - margin-bottom: 0.75rem; |
887 | | - text-transform: uppercase; |
888 | | - letter-spacing: 0.05em; |
889 | | - } |
890 | | - |
891 | | - .chapter-nav-link { |
892 | | - display: block; |
893 | | - padding: 0.5rem 0.75rem; |
894 | | - color: var(--color-text); |
895 | | - text-decoration: none; |
896 | | - border-radius: var(--radius-sm); |
897 | | - margin-bottom: 0.25rem; |
898 | | - transition: all 0.2s; |
899 | | - font-size: 0.9rem; |
900 | | - } |
901 | | - |
902 | | - .chapter-nav-link:hover { |
903 | | - background: var(--color-bg-alt); |
904 | | - color: var(--color-primary); |
905 | | - transform: translateX(4px); |
906 | | - } |
907 | | - |
908 | | - .chapter-nav-link.current { |
909 | | - background: var(--color-primary); |
910 | | - color: #fff; |
911 | | - } |
912 | | - |
913 | 771 | /* ── 返回顶部按钮 ── */ |
914 | 772 | .back-to-top { |
915 | 773 | position: fixed; |
|
946 | 804 |
|
947 | 805 | /* 响应式调整 */ |
948 | 806 | @media screen and (max-width: 42em) { |
949 | | - .chapter-nav-panel { |
950 | | - width: calc(100vw - 2rem); |
951 | | - max-width: 360px; |
952 | | - } |
953 | | - |
954 | | - .chapter-nav-panel.open { |
955 | | - right: 1rem; |
956 | | - } |
957 | | - |
958 | | - .chapter-nav-toggle { |
959 | | - bottom: 1rem; |
960 | | - right: 4.5rem; |
961 | | - } |
962 | | - |
963 | 807 | .back-to-top { |
964 | 808 | bottom: 1rem; |
965 | 809 | right: 1rem; |
|
1231 | 1075 | </script> |
1232 | 1076 | </head> |
1233 | 1077 | <body> |
1234 | | - <!-- 章节导航按钮 --> |
1235 | | - <button class="chapter-nav-toggle" id="chapter-nav-toggle" aria-label="章节导航"> |
1236 | | - </button> |
1237 | | - |
1238 | | - <!-- 章节导航面板 --> |
1239 | | - <div class="chapter-nav-panel" id="chapter-nav-panel"> |
1240 | | - <div class="chapter-nav-header"> |
1241 | | - <h3>章节导航</h3> |
1242 | | - <button class="chapter-nav-close" id="chapter-nav-close" aria-label="关闭">×</button> |
1243 | | - </div> |
1244 | | - <div class="chapter-nav-content" id="chapter-nav-content"> |
1245 | | - <!-- 内容将由 JavaScript 动态生成 --> |
1246 | | - </div> |
1247 | | - </div> |
1248 | | - |
1249 | 1078 | <header class="page-header" role="banner"> |
1250 | 1079 | <!-- 主题切换按钮 --> |
1251 | 1080 | <button class="theme-toggle" id="theme-toggle" aria-label="切换主题"> |
|
0 commit comments