/* * side panel * (c) 2020 dragonwocky (https://dragonwocky.me/) * (c) 2020 CloudHill * under the MIT license */ .notion-frame { transition: padding-right 300ms ease-in-out; } .enhancer-panel--container { flex-grow: 0; flex-shrink: 0; position: absolute; top: 0; bottom: 0; right: 0; z-index: 99; height: 100vh; background: var(--theme--sidebar); color: var(--theme--text_ui); font-weight: 500; cursor: default; transition: box-shadow 300ms ease-in, width 300ms ease-in-out; } #enhancer-panel { display: flex; flex-direction: column; position: relative; pointer-events: auto; background: var(--theme--sidebar); cursor: auto; max-height: 100%; transition: transform 300ms ease-in-out, opacity 300ms ease-in-out, right 300ms ease-in-out; } #enhancer-panel[data-locked="false"] { max-height: calc(100vh - 120px); box-shadow: var(--theme--box-shadow_strong) !important; } #enhancer-panel[data-full-height="true"] { height: 100%; } #enhancer-panel[data-locked="false"][data-full-height="true"] { height: calc(100vh - 120px); } .enhancer-panel--header { flex-grow: 0; flex-shrink: 0; display: flex; align-items: center; height: 45px; width: 100%; color: var(--theme--text); font-size: 14px; padding: 2px 14px; overflow: hidden; user-select: none; cursor: pointer; transition: color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease; } .enhancer-panel--header:hover { background: var(--theme--interactive_hover); } .enhancer-panel--icon { flex-grow: 0; flex-shrink: 0; border-radius: 3px; width: 22px; height: 22px; margin-right: 8px; display: flex; align-items: center; justify-content: center; } .enhancer-panel--icon svg { width: 100%; height: 100%; } .enhancer-panel--title { margin-right: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .enhancer-panel--reload-button { flex-grow: 0; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 6px; margin-right: 6px; border-radius: 3px; transition: background 20ms ease-in; } .enhancer-panel--reload-button:hover { background: var(--theme--main) } .enhancer-panel--switcher-icon { flex-grow: 0; flex-shrink: 0; width: 12px; height: 12px; fill: var(--theme--text_ui); } .enhancer-panel--reload-button svg, .enhancer-panel--switcher-icon svg { width: 100%; height: 100%; display: block; fill: var(--theme--text_ui_info); } .enhancer-panel--toggle { flex-grow: 0; flex-shrink: 0; position: relative; display: flex; align-items: center; justify-content: center; margin-left: auto; height: 24px; width: 24px; border-radius: 3px; cursor: pointer; opacity: 0; transition: background 20ms ease-in, opacity 300ms ease-in; } #enhancer-panel:hover .enhancer-panel--toggle { opacity: 1; } .enhancer-panel--toggle:hover { background: var(--theme--interactive_hover); } .enhancer-panel--toggle svg { width: 14px; height: 14px; fill: var(--theme--text_ui); transition: transform 400ms ease-in; fill: var(--theme--text_ui_info); } #enhancer-panel[data-locked="false"] .enhancer-panel--toggle svg { transform: rotateZ(-180deg); } #enhancer-panel--content { flex: 1; width: 100%; color: var(--theme--text); font-size: var(--theme--font_body-size); display: flex; flex-direction: column; position: relative; min-height: 0; } .enhancer-panel--resize { position: absolute; top: 0px; left: 0px; height: 100vh; width: 0px; z-index: 1; } #enhancer-panel[data-locked="false"] .enhancer-panel--resize { height: 100%; } .enhancer-panel--resize div { height: 100%; width: 6px; } .enhancer-panel--overlay-container { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 999; overflow: hidden; } .enhancer-panel--switcher { max-width: 320px; position: relative; right: 14px; border-radius: 3px; padding: 8px 0; box-shadow: var(--theme--box-shadow_strong); background: var(--theme--card); overflow: hidden; } .enhancer-panel--switcher-item { display: flex; align-items: center; width: 100%; padding: 8px 14px; color: var(--theme--text); font-size: 14px; user-select: none; cursor: pointer; overflow: hidden; transition: background 300ms ease; } .enhancer-panel--switcher-item:hover { background: var(--theme--interactive_hover); }