#typora-sidebar. As clicking "Files", the class named ".active-tab-files" is adding in the

#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 } /*=======================================================================*/