-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathbothview.css
78 lines (69 loc) · 4.12 KB
/
bothview.css
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
/*BothView by XiLaiTL|MIT License|English-Chinese*/
/*You can copy the code below and paste it in the top of theme css file which you want*/
/*
当点击显示侧边栏时，类.pin-outline被激活（添加到body），类.open（添加到sidebar）
当点击文件时，类.active-tab-files被激活（添加到sidebar）
当点击大纲时，类.active-tab-outline被激活（添加到sidebar）
*//*When you toggle sidebar, the class named ".pin-outline" is adding in the <body> and the class named ".open" is adding in the <div>#typora-sidebar. As clicking "Files", the class named ".active-tab-files" is adding in the <div>#typora-sidebar while clicking "Outline" the the class named ".active-tab-outline" is adding in it.
*/
/*=======================================================================*/
/*初始设置，让sidebar占满整个屏幕并让content显示在上方，调节其他部分依旧在左侧*//*Firstly setting for making sidebar cover the whole view and let content show above the header, and remaining other part at right area*/
/*更新层叠顺序，让content显示在header上方，并且依然保留下方调节sidebar大小的能力*//*Renew the z-index and width*/
header{ z-index: -1;}
.pin-outline header:hover ~ footer{ z-index: -2; }
/*设置【侧边栏】满宽度 *//*Set sidebar's width*/
.typora-node.pin-outline:not(.megamenu-opened):not(.typora-sourceview-on) #typora-sidebar{ width: 100% }
/*设置【信息侧边栏】宽度 *//*Set other parts' width*/
.info-panel-tab-wrapper { width: var(--sidebar-width);}
.sidebar-footer{ width: var(--sidebar-width);}
#file-library-search{ width: var(--sidebar-width);}
/*=======================================================================*/
/*逻辑设置，当点击“显示侧边栏时”，【内容】被移动到中间，留出两侧分别放置【文件】和【大纲】*//*Logical setting for you toggling sidebar, move the content to the middle area and remain the left area for Files and right area for Outline*/
/*当点击“显示侧边栏”时 【内容】 *//*When toggling sidebar, move the content to the middle area*/
.pin-outline content {
min-height: 0%;
height:calc(100% - 30px);
left: var(--sidebar-width);
right: var(--sidebar-width);
}
/*-----------------------------------------------------------------------*/
/*当点击“文件”时，【大纲侧边栏】同时显示在右侧*//*When clicking "Files", move outline bar to right area*/
/*点击“文件”时 【文件侧边栏】*//*When clicking "Files", set the files bar*/
.pin-outline .active-tab-files #file-library {
width: var(--sidebar-width);
min-width: 0%;
}
/*点击“文件”时 【大纲侧边栏】*//*When clicking "Files", set the outline bar*/
.pin-outline .active-tab-files #outline-content{
position: fixed;
width: var(--sidebar-width);
min-width: 0%;
right: 0;
left: calc(100% - var(--sidebar-width));
display: block;
padding-bottom: 84px;
}
/*-----------------------------------------------------------------------*/
/*当点击“大纲”时，【大纲侧边栏】显示在左侧，右侧空白由【文件侧边栏】的div去填补*//*When clicking "Outline", move outline bar to left area and let files bar fill the right area which is empty*/
/*点击“大纲”时 【大纲侧边栏】*//*When clicking "Outline", set the outline bar*/
.pin-outline .active-tab-outline #outline-content {
background-color: var(--side-bar-bg-color);
position: relative;
width: var(--sidebar-width);
min-width: 0%;
left: 0;
display: block;
}
/*点击“大纲”时 【文件侧边栏】*//*When clicking "Outline", set the files bar*/
.pin-outline .active-tab-outline #file-library{
background-color: var(--bg-color);
position: fixed;
top: 0;
width: var(--sidebar-width);
left: calc(100% - var(--sidebar-width));
display: block !important;
}
.pin-outline .active-tab-outline #file-library div{ /*Just let files bar be an empty bg-color div*/
display:none
}
/*=======================================================================*/