JavaGuide-Interview/docs/.vuepress/styles/index.scss at master · SuiJavaStudy/JavaGuide-Interview · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
body {
  @media (min-width: 1440px) {
    font-size: 16px;
  }
}

// ============================================
// 沉浸式阅读模式 - 隐藏导航栏、侧边栏和目录
// ============================================

// 过渡动画
.vp-navbar,
.vp-sidebar,
.vp-page,
.theme-container .vp-page {
  transition:
    transform 0.3s ease,
    opacity 0.3s ease,
    margin 0.3s ease,
    padding 0.3s ease,
    width 0.3s ease;
}

// 隐藏布局模式
html.layout-hidden {
  // 隐藏顶部导航栏
  .vp-navbar {
    transform: translateY(-100%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  // 隐藏左侧边栏
  .vp-sidebar {
    transform: translateX(-100%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
  }

  // 隐藏侧边栏切换按钮（小屏幕下的展开按钮）
  .toggle-sidebar-wrapper {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  // 隐藏侧边栏遮罩层
  .vp-sidebar-mask {
    display: none !important;
  }

  // 侧边栏包装器
  .vp-sidebar-wrapper,
  .sidebar-wrapper {
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  // 隐藏右侧目录 (TOC)
  .vp-toc-placeholder,
  .toc-wrapper,
  .vp-toc,
  aside.vp-toc,
  .toc {
    display: none !important;
    width: 0 !important;
  }

  // 主容器调整 - 移除左侧 padding/margin
  .theme-container {
    padding-left: 0 !important;
    padding-right: 0 !important;

    .vp-page {
      padding-left: 2rem !important;
      padding-right: 2rem !important;
      padding-top: 1rem !important;
      margin-left: 0 !important;
      max-width: 100% !important;
      width: 100% !important;
    }
  }

  // 主题内容区域调整 - 让内容更宽
  .theme-hope-content,
  .vp-page-content,
  .vp-content {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 1rem 2rem !important;
  }

  // 页面容器调整
  .vp-page-container {
    padding-top: 1rem !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }

  // 确保内容区域居中且宽度适中
  .theme-container > main {
    margin-left: 0 !important;
    padding-left: 0 !important;
    max-width: 100% !important;
  }

  // 响应式调整
  @media (min-width: 960px) {
    .theme-container .vp-page {
      margin-left: 0 !important;
      padding-left: 3rem !important;
      padding-right: 3rem !important;
    }

    .theme-hope-content,
    .vp-page-content,
    .vp-content {
      max-width: 100% !important;
      padding: 1rem 2rem !important;
    }
  }

  @media (min-width: 1440px) {
    .theme-container .vp-page {
      margin-left: 0 !important;
      padding-left: 4rem !important;
      padding-right: 4rem !important;
    }

    .theme-hope-content,
    .vp-page-content,
    .vp-content {
      max-width: 100% !important;
      padding: 1rem 3rem !important;
    }
  }
}