diff options
Diffstat (limited to 'windowmanager.css')
| -rw-r--r-- | windowmanager.css | 213 |
1 files changed, 213 insertions, 0 deletions
diff --git a/windowmanager.css b/windowmanager.css new file mode 100644 index 0000000..528a16a --- /dev/null +++ b/windowmanager.css @@ -0,0 +1,213 @@ +.window-titlebar { + background: rgba(51, 51, 51, 0.75); + border-top-left-radius: 10px; + border-top-right-radius: 10px; + border-bottom: 1px solid black; + color: rgba(255, 255, 255, 0.75); + cursor: default; + display: flex; + align-items: center; + justify-content: left; + font-weight: bolder; + font-size: 14px; +} + +.window-titlebar:active { + cursor: move; +} + +.window { + background-color: rgba(18, 18, 18, 0.75); + border-radius: 10px; + border: 1px solid rgba(199, 199, 199, 0.5); + box-shadow: 1px 5px 15px rgba(0, 0, 0, .75); + backdrop-filter: blur(15px); + transition: background-color 200ms; +} + +.window.unfocused { + background-color: rgba(18, 18, 18, 1); +} + +.window.unfocused .resizers *:not(.window-titlebar) { + opacity: .75; + pointer-events: none; +} + +.window.maximized { + top: 0 !important; + left: 0 !important; + right: 0 !important; + bottom: 0 !important; + position: fixed !important; + width: 100% !important; + height: calc(100% - 50px) !important; + border-radius: 0; + border-color: transparent; + box-shadow: none; + transition: height 200ms, width 200ms, top 200ms, bottom 200ms, left 200ms, right 200ms; +} + +.window.restored { + transition: height 200ms, width 200ms, top 200ms, bottom 200ms, left 200ms, right 200ms; +} + +.window.maximized .resizer { + display: none; +} + +.window.dragging .window-content { + pointer-events: none; +} + +.window.maximized.maximized-left { + width: 50vw !important; + left: 0 !important; +} + +.window.maximized.maximized-right { + width: 50vw !important; + left: 50vw !important; +} + +.window.minimized { + opacity: 0; + position: fixed; + height: 0 !important; + width: 0 !important; + transition: height 200ms, width 200ms, top 200ms, bottom 200ms, left 200ms, right 200ms, opacity 200ms; +} + +.window.unminimized { + transition: height 200ms, width 200ms, top 200ms, bottom 200ms, left 200ms, right 200ms, opacity 200ms; +} + +.window.maximized .window-titlebar, #appbar.has-maximized { + border-radius: 0; +} + +.resizable .resizers{ + width: 100%; + height: 100%; + box-sizing: border-box; + opacity: 1; + transition: opacity 200ms; +} + +.resizable .resizers .resizer{ + width: 10px; + height: 10px; + border-radius: 50%; + position: absolute; + background: white; +} +.resizable .resizers .resizer.top-left { + left: -5px; + top: -5px; + cursor: nwse-resize; /*resizer cursor*/ + } +.resizable .resizers .resizer.top-right { + right: -5px; + top: -5px; + cursor: nesw-resize; + } +.resizable .resizers .resizer.bottom-left { + left: -5px; + bottom: -5px; + cursor: nesw-resize; + } +.resizable .resizers .resizer.bottom-right { + right: -5px; + bottom: -5px; + cursor: nwse-resize; + } + +.window-sandbox { + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; + height: 100%; +} + +.window-content { + height: calc(100% - 25px); + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; +} + +.window.loading .window-loader { + height: calc(100% - 25px); + width: 100%; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; + background: rgba(51, 51, 51, 1); +} + +.window.loading .window-titlebar { + border-bottom: none; + background-color: rgba(51, 51, 51, 1); +} + +.window.loading:not(.dragging) * { + cursor: wait !important; +} + +.window-loader { + display: flex; + align-items: center; + justify-content: center; + text-align: center; +} + +.window-loader-icon { + width: 64px; +} + +.window-loader-spinner { + width: 36px; +} + +.window.maximized .window-loader, .window.maximized .window-content, .window.maximized .window-sandbox { + border-radius: 0 !important; +} + +.window.loading .window-content { + display: none; +} + +.window-action { + width: 16px; + vertical-align: middle; + padding: 4px; + pointer-events: all !important; + cursor: default !important; +} + +.window-action:nth-child(1) { + padding-right: 2px; +} + +.window-action:nth-child(2) { + padding-left: 2px; + padding-right: 2px; +} + +.window-action:nth-child(3) { + padding-left: 2px; +} + +.window-action:hover { + opacity: .5; +} + +.window-action:active { + opacity: .1; +} + +.window-title { + margin-left: 5px; +} + +.window-action.disabled { + pointer-events: none; + opacity: .25 !important; +}
\ No newline at end of file |