diff options
Diffstat (limited to 'src/app/main.css')
-rw-r--r-- | src/app/main.css | 87 |
1 files changed, 81 insertions, 6 deletions
diff --git a/src/app/main.css b/src/app/main.css index de0db46..d3d3b72 100644 --- a/src/app/main.css +++ b/src/app/main.css @@ -30,8 +30,83 @@ cursor: pointer; } -#winbtns { +#browser { + --spacing: calc(var(--padding) * 3); + + z-index: 2; + opacity: 0.0; + position: fixed; + overflow-y: scroll; + top: var(--spacing); + pointer-events: none; + left: var(--spacing); + background: var(--bg); + right: var(--spacing); + bottom: var(--spacing); + transform: scale(0.98); + backdrop-filter: blur(15px); + border-radius: calc(var(--padding) / 2); + transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out; +} + +#browser.shown { + opacity: 1.0; + pointer-events: all; + transform: scale(1.0); +} + +#overlay { + top: 0; + left: 0; + right: 0; + bottom: 0; z-index: 1; + opacity: 0.0; + position: fixed; + background: var(--bg); + pointer-events: none; + transition: opacity 0.15s ease-in-out; +} + +#overlay.shown { + opacity: 0.8; + pointer-events: all; +} + +#browser .el, #browser #search { + --spacing: calc(var(--padding) / 2); + --height: calc(var(--padding) * 2.5); + + color: white; + display: flex; + align-items: center; + height: var(--height); + margin: var(--spacing); + padding: var(--spacing); + background: var(--selbg); + border-radius: var(--spacing); + width: calc(100% - var(--spacing) * 4); +} + +#browser #search { + --height: calc(var(--padding) * 1.5); + + border: none; + outline: none; + width: calc(100% - var(--spacing) * 2); +} + +#browser .el .image, #browser .el .image img { + width: var(--height); + height: var(--height); + margin-right: var(--spacing); +} + +#browser .el .title {font-size: 1.2em} +#browser .el .description {font-size: 0.8em} + +#winbtns { + z-index: 2; display: flex; position: fixed; top: var(--padding); @@ -58,9 +133,10 @@ body { margin: 0; overflow: hidden; user-select: none; - font-family: "Roboto", sans-serif; } +body, button, input {font-family: "Roboto", sans-serif} + button {outline: none} b, strong {font-weight: 700} body, input, button {font-weight: 500} @@ -85,9 +161,8 @@ img {pointer-events: none} left: 0; right: 0; bottom: 0; - pointer-events: none; - position: fixed; - transform: scale(1.1); + z-index: -1; + position: absolute; background-size: cover; background-position: center; background-repeat: no-repeat; @@ -395,6 +470,6 @@ code { -webkit-app-region: drag; } -a, button, .contentMenu, #close, #nsRelease, #vpReleaseNotes, .mod { +a, button, .contentMenu, #close, #nsRelease, #vpReleaseNotes, .mod, #overlay { -webkit-app-region: no-drag; } |