diff --git a/frontend/sass/index.scss b/frontend/sass/index.scss index 22f25ed..b6179d5 100644 --- a/frontend/sass/index.scss +++ b/frontend/sass/index.scss @@ -1,128 +1,132 @@ +:root { + --nav-width: 48px; +} + body { - display: flex; - flex-direction: row; + display: flex; + flex-direction: row; } #navigation { - display: flex; - flex-direction: column; - height: 100%; - width: 48px; + display: flex; + flex-direction: column; + height: 100%; + width: var(--nav-width); } #navigation > :not(#service-buttons) { - flex-shrink: 0; + flex-shrink: 0; } #service-buttons { - flex-grow: 1; + flex-grow: 1; - overflow: hidden auto; + overflow: hidden auto; } #service-selector { - display: block; - margin: 0; - padding: 0; + display: block; + margin: 0; + padding: 0; - list-style: none; + list-style: none; } #service-selector::-webkit-scrollbar { - width: 6px; + width: 6px; } #service-selector [draggable] { - user-select: none; - background-color: rgb(43, 43, 43); + user-select: none; + background-color: rgb(43, 43, 43); } #service-selector [draggable] img { - -webkit-user-drag: none; - user-drag: none; + -webkit-user-drag: none; + user-drag: none; } #service-selector .drag-target button::after, #service-last-drag-position.drag-target { - content: ""; - height: 4px; - transform: translateY(-50%); - border: 0; - box-sizing: border-box; - background: #fff9; + content: ""; + height: 4px; + transform: translateY(-50%); + border: 0; + box-sizing: border-box; + background: #fff9; } #service-selector .drag-target-self button::after { - height: 48px; - border: 1px dashed #fff; - transform: none; + height: var(--nav-width); + border: 1px dashed #fff; + transform: none; } #service-selector .drag-target button::after { - position: absolute; - left: 0; - top: 0; - width: 100%; + position: absolute; + left: 0; + top: 0; + width: 100%; } #service-selector .drag-target::after { - top: 75% !important; + top: 75% !important; } *:focus { - outline-color: rgb(118, 93, 176); + outline-color: rgb(118, 93, 176); } #navigation button { - position: relative; - display: block; - width: 48px; - height: 48px; - margin: 0; - padding: 0; + position: relative; + display: block; + width: var(--nav-width); + height: var(--nav-width); + margin: 0; + padding: 0; - color: #fff; - border: 0; - background: transparent; + color: #fff; + border: 0; + background: transparent; - cursor: pointer; + cursor: pointer; } #navigation button:focus { - outline: none; - background: #fff3 !important; + outline: none; + background: #fff3 !important; } #navigation button img { - width: 24px; + width: calc(var(--nav-width) / 2); } #navigation button i { - font-size: 24px; + font-size: calc(var(--nav-width) / 2); } #service-selector li { - position: relative; + position: relative; } #service-selector li button, #navigation > button { - border-radius: 0; + border-radius: 0; } #service-selector li.active button { - background-color: #fff2; + background-color: #fff2; } #service-selector li.loaded button::before { - content: ""; - display: block; - position: absolute; - right: 0; - top: 50%; - transform: translateY(-50%); - height: 75%; - border-right: 4px solid #ffffff3e; + content: ""; + display: block; + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%); + height: 75%; + border-right: 4px solid #ffffff3e; } /*#service-selector li.loaded::after {*/ @@ -139,194 +143,206 @@ body { /*}*/ #navigation button:hover { - background-color: #fff3; + background-color: #fff3; } #history { - display: flex; - flex-direction: column; - align-items: center; - padding: 2px; + display: flex; + flex-direction: column; + align-items: center; + padding: 2px; } #history button, #history .status { - display: inline; - width: 24px; - height: 24px; - margin: 2px; - padding: initial; - font-size: 12px; + display: inline; + width: calc(var(--nav-width) / 2); + height: calc(var(--nav-width) / 2); + margin: 2px; + padding: initial; + font-size: calc(var(--nav-width) / 4); - background: #fff1; + background: #fff1; - color: #fff; - cursor: pointer; + color: #fff; + cursor: pointer; - border-radius: 3px; + border-radius: 3px; } #history button i { - font-size: inherit; + font-size: inherit; } #history button.disabled { - color: #888; - border: transparent; - background: transparent; - cursor: initial; + color: #888; + border: transparent; + background: transparent; + cursor: initial; } #history button:focus, #history button:hover { - outline: none; - border-color: #fff9; + outline: none; + border-color: #fff9; } #history button:hover:not(.disabled) { - outline: none; - background-color: #fff2; + outline: none; + background-color: #fff2; } #history button:active:not(.disabled) { - background-color: #fff4; + background-color: #fff4; } #history #status { - background: transparent; + background: transparent; } #history #status .unknown, #history #status .file { - color: #888; + color: #888; } #history #status .https { - color: #009800; + color: #009800; } #history #status .http { - color: #e20000; + color: #e20000; } #history #status > :not(.active) { - display: none; + display: none; } #history #status > * .tip { - position: absolute; - z-index: 1; - left: 100%; - top: 50%; - transform: translateY(-50%); - display: none; - margin-left: 8px; + position: absolute; + z-index: 1; + left: 100%; + top: 50%; + transform: translateY(-50%); + display: none; + margin-left: 8px; - background-color: #000; - padding: 8px; - border-radius: 4px; - white-space: nowrap; - color: #fff; - text-transform: none; - font-family: sans-serif; - font-size: 16px; - font-weight: 100; + background-color: #000; + padding: 8px; + border-radius: 4px; + white-space: nowrap; + color: #fff; + text-transform: none; + font-family: sans-serif; + font-size: 16px; + font-weight: 100; } #history #status > * .tip::before { - content: ""; - position: absolute; - left: 0; - top: 50%; - transform: translate(-100%, -50%); - display: inline-block; - width: 0; - height: 0; - border: 0 solid transparent; - border-top-width: 4px; - border-bottom-width: 4px; - border-right: 7px solid black; + content: ""; + position: absolute; + left: 0; + top: 50%; + transform: translate(-100%, -50%); + display: inline-block; + width: 0; + height: 0; + border: 0 solid transparent; + border-top-width: 4px; + border-bottom-width: 4px; + border-right: 7px solid black; } #history #status:focus > * .tip { - display: block; + display: block; } #navigation #add-button:not(:hover) { - opacity: 0.75; + opacity: 0.75; } #services { - position: relative; - flex-grow: 1; + position: relative; + flex-grow: 1; } #services > *:not(.loader):not(#url-preview) { - height: 100%; + height: 100%; } -#services > :not(.active):not(.loader):not(#url-preview) { - display: none; +#services > :not(.active):not(.loader):not(#url-preview):not(webview) { + display: none; +} + +#services > webview { + position: absolute; + width: 100%; + height: 100%; + z-index: 10; + background-color: rgb(43, 43, 43); +} + +#services > webview.active { + z-index: 20; } #services > .loader { - width: 64px; - height: 64px; + width: 64px; + height: 64px; - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - z-index: -1; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + z-index: -1; } #url-preview { - position: absolute; - bottom: 0; - left: 0; - display: block; - padding: 2px 5px 1px 5px; + position: absolute; + bottom: 0; + left: 0; + display: block; + padding: 2px 5px 1px 5px; - max-width: 48%; - overflow: hidden; - text-overflow: ellipsis; + max-width: 48%; + overflow: hidden; + text-overflow: ellipsis; - font-family: monospace; + font-family: monospace; - border-width: 1px 1px 0 0; - border-color: #232323; - border-style: solid; - border-radius: 0 5px 0 0; + border-width: 1px 1px 0 0; + border-color: #232323; + border-style: solid; + border-radius: 0 5px 0 0; - background: #2b2b2b; + background: #2b2b2b; - opacity: 1; - transition: 100ms ease opacity; - transition-delay: 200ms; + opacity: 1; + transition: 100ms ease opacity; + transition-delay: 200ms; } #url-preview.right { - left: auto; - right: 0; + left: auto; + right: 0; - border-width: 1px 0 0 1px; - border-radius: 5px 0 0 0; + border-width: 1px 0 0 1px; + border-radius: 5px 0 0 0; } #url-preview.hidden { - opacity: 0; + opacity: 0; } #services > #empty-message { - display: flex !important; - position: absolute; - z-index: -1; - bottom: 0; - width: 100%; - justify-content: center; - align-items: center; + display: flex !important; + position: absolute; + z-index: -1; + bottom: 0; + width: 100%; + justify-content: center; + align-items: center; } #services > .loader:not(.hidden) ~ #empty-message { - display: none !important; + display: none !important; } \ No newline at end of file diff --git a/frontend/settings.html b/frontend/settings.html index 3ecc41d..1190c7b 100644 --- a/frontend/settings.html +++ b/frontend/settings.html @@ -27,20 +27,34 @@

Loading...

- + startMinimized -

History navigation buttons

+
+

Startup

- - - - - + +
+ +
+

Appearance

+ + +
+ +
+

History navigation buttons

+ + + + + + +