* { user-select: none; } .hidden { display: none; } .appbar { position: absolute; top: 0; left: 0; right: 0; z-index: 300; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(3px); } .appbar-profile-button { position: relative; overflow: hidden; } .appbar-profile-button:focus span, .appbar-profile-button:active span { position: static; } .appbar-profile-button img + span { padding-left: 32px; } .appbar-profile-button img { width: 32px; height: 32px; position: absolute; top: -1px; left: -1px; } .appbar-draggable-titlebar { flex-grow: 1; height: 32px; display: block; } .appbar-draggable-titlebar > div { cursor: move; height: 32px; width: 100%; } :root { --pb-custom-window-main-color: #000; --pb-custom-window-main-unfocused-color: #000; --pb-custom-window-background-color: #000; --pb-custom-window-title-color: #fff; --pb-custom-window-controls-color: #fff; --pb-custom-window-close-control-background: firebrick; --pb-custom-window-controls-background: rgba(0,0,0,.25); /* rgba(255,255,255,.25); */ --pb-custom-window-controls-background-hover: rgba(0,0,0,.5); /* rgba(255,255,255,.5); */ } .pb-custom-window > * { position: absolute; z-index: 500; } .pb-custom-window-content { top: 0 !important; left: 0 !important; height: 100vh !important; width: 100vw !important; display: flex; flex-direction: column; } .pb-custom-window-content::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 37px; backdrop-filter: blur(3px); z-index: 700; background: rgba(0, 0, 0, 0.5); } .pb-custom-window-drag-area { background: none !important; } .pb-custom-window-controls { background: none !important; } .pb-custom-window-controls .ant-btn-icon-only > * { font-size: 22px; display: flex; justify-content: center; } .pb-custom-window-controls .ant-btn.ant-btn-loading::before { display: none; } .pb-custom-window-control-button { border-radius: 0; } .pb-custom-window-title { display: none; } .pb-custom-window-header { display: none; } .pb-custom-window-resize-thumb { z-index: 9999; } *:hover::-webkit-scrollbar { opacity: 1; } *::-webkit-scrollbar { width: 6px; opacity: 0; transition: opacity 0.1s; } *::-webkit-scrollbar-track { background-color: #141414; border: none; } *::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0); transition: background-color linear 0.1s; } *:hover::-webkit-scrollbar-thumb { background-color: rgb(255, 255, 255); } .no-scrollbar::-webkit-scrollbar { width: 0; } body { background: #000; } app { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .ant-layout { flex-grow: 1; overflow: hidden; } .logo { position: fixed; width: 333px; height: 74px; z-index: 1000; } .logo > img { width: 100%; filter: drop-shadow(5px 0px 5px rgba(0, 0, 0, 0.5)); } .logo::before { content: ""; opacity: 0; background: linear-gradient(100deg, rgb(255, 0, 0) 0%, rgb(255, 154, 0) 10%, rgb(208, 222, 33) 20%, rgb(79, 220, 74) 30%, rgb(63, 218, 216) 40%, rgb(47, 201, 226) 50%, rgb(28, 127, 238) 60%, rgb(95, 21, 242) 70%, rgb(186, 12, 248) 80%, rgb(251, 7, 217) 90%, rgb(255, 0, 0) 100%) 0 0/200% 100%; position: absolute; top: 0; left: 0; right: 16px; bottom: 0; transition: 0.5s opacity; animation: a 3s linear infinite; } .logo:hover::before { opacity: 1; } @keyframes a { to { background-position: -200% 0; } } .footer { background: #1f1f1f; padding: 8px; } .ant-btn, .ant-btn-sm, .ant-btn-lg { border-radius: 0; } .radio-group-vertical .ant-radio-wrapper, .radio-group-vertical .ant-radio-button-wrapper { display: block; } .radio-group-vertical .ant-radio-wrapper + .ant-radio-wrapper, .radio-group-vertical .ant-radio-button-wrapper + .ant-radio-button-wrapper { margin-top: 16px; } .radio-group-block { width: 100%; } .radio-group-block .ant-radio-wrapper, .radio-group-block .ant-radio-button-wrapper { display: block; } .ant-modal-close, .ant-modal-max-btn { color: rgba(255, 255, 255, 0.45); } .ant-modal-close:hover, .ant-modal-max-btn:hover { color: rgba(255, 255, 255, 0.75); } .ant-modal-wrap-no-padding .ant-modal-body { padding: 0; } .ant-modal-wrap-no-padding .ant-table-tbody > tr > td:first-child, .ant-modal-wrap-no-padding .ant-table-thead > tr > th:first-child { padding-left: 24px; } .ant-modal-wrap-no-padding .ant-table-tbody > tr > td:last-child, .ant-modal-wrap-no-padding .ant-table-thead > tr > th:last-child { padding-right: 24px; } .ant-collapse .ant-list { margin: -16px; } .ant-card-body > .ant-list { border: none; border-radius: 0; margin: -24px; } .ant-list-clickable .ant-list-item { cursor: pointer; position: relative; } .ant-list-clickable .ant-list-item:hover, .ant-list-clickable .ant-list-item.selected { background: #262626; } .ant-list-clickable .ant-list-item:hover::after, .ant-list-clickable .ant-list-item.selected::after { background: linear-gradient(270deg, rgb(38, 38, 38) 0%, rgba(38, 38, 38, 0) 100%); } .ant-list-clickable .ant-list-item::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 24px; background: linear-gradient(270deg, rgb(20, 20, 20) 0%, rgba(20, 20, 20, 0) 100%); } .authentication-form { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; } .authentication-form .ant-spin-nested-loading { width: 100%; } .authentication-form .authentication-box { min-width: 640px; max-width: 800px; box-shadow: 0px 0px 32px rgba(255, 255, 255, 0.05); } .authentication-form .discovered-servers-pane { background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(8px); } .authentication-form .discovered-servers-pane .ant-list-header { padding: 12px; text-align: center; border: none; } .authentication-form .discovered-servers-pane .ant-list-item { padding: 12px; } .authentication-form .discovered-servers-pane .ant-list-item:hover { background-color: rgba(255, 255, 255, 0.1); cursor: pointer; } .authentication-form .discovered-servers-pane .ant-list-item-meta-title { margin-bottom: 0; } .authentication-form .login-form-pane { background: #000; } .authentication-form .login-form-pane .ant-form { padding: 24px; } .authentication-form .login-form-pane .ant-form-item:last-child { margin-bottom: 0; } .library { width: 100%; height: 100%; display: flex; position: relative; flex-direction: row; } .library .pane { overflow-x: hidden; } .library::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%); z-index: 600; } .library-list { position: relative; z-index: 500; width: 320px; margin-top: 74px; flex-shrink: 0; } .library-list .ant-collapse { border: none; overflow-y: scroll; overflow-x: hidden; height: 100%; } .library-list .ant-collapse::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 10px; background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%); z-index: 600; } .library-list .ant-collapse-content { padding-top: 8px; padding-bottom: 8px; } .library-list .ant-collapse > .ant-collapse-item.no-header > .ant-collapse-header { display: none; } .library-list .ant-collapse > .ant-collapse-item.no-header > .ant-collapse-content { display: block; } .library-list .ant-collapse > .ant-collapse-item > .ant-collapse-header { padding: 10px 12px; } .library-list .ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow { margin: 0; margin-right: 12px; padding-left: 6px; padding-right: 6px; } .library-list .ant-list-item { cursor: pointer; white-space: nowrap; gap: 12px; padding: 5px 12px; border: none; color: #aaa; } .library-list .ant-list-item.installed { font-weight: 400; color: #fff; } .library-list .ant-list-item .library-list-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .library-list .ant-list-item .library-list-icon img { width: 24px; height: 24px; object-fit: cover; } .library-list .ant-list-item span { flex-grow: 1; } .library-list .ant-collapse-header-text { cursor: pointer; white-space: nowrap; } .library-filter .ant-popover-inner-content { width: 320px; } .library-filter .ant-form-item { margin-bottom: 8px; } .library-filter .ant-form-item-label { padding-bottom: 0; } .game-details { width: 100%; overflow-y: scroll; overflow-x: hidden; } .game-hero { position: relative; aspect-ratio: 8/3; } .game-hero h1 { position: absolute; left: 32px; bottom: 32px; margin-bottom: 0; z-index: 200; font-size: 2rem; } .game-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 128px; background: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%); z-index: 100; } .game-details-background { width: 100%; height: 100%; object-fit: cover; } .game-details-logo { position: absolute; left: 48px; bottom: 64px; width: 512px; height: 512px; object-fit: contain; object-position: bottom left; max-width: 33%; max-height: 50%; z-index: 200; } .game-info { padding-left: 16px; padding-right: 16px; } .game-action-bar .ant-statistic { line-height: 1; } .game-action-bar .ant-statistic-title { margin-bottom: 4px; } .game-action-bar .ant-statistic-content { font-size: 16px; } .game-cover img { width: 100%; } .game-metadata { display: flex; flex-direction: column; gap: 16px; padding-top: 32px; padding-bottom: 32px; } .game-metadata-description { text-align: justify; } .game-metadata h3 { font-weight: bold; margin-bottom: 0; } .depot { width: 100%; height: 100%; display: flex; position: relative; flex-direction: row; } .depot .ant-drawer-content-wrapper { height: calc(100% - 128px) !important; transform: none !important; } .depot-filter { position: relative; z-index: 500; width: 320px; margin-top: 74px; flex-shrink: 0; } .depot-games { width: 100%; overflow-y: scroll; overflow-x: hidden; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; padding-top: 59.5px; padding-left: 31px; padding-right: 31px; padding-bottom: 38.5px; } .depot-game { display: flex; align-items: center; aspect-ratio: 2/3; } .depot-game-cover { transition: all 0.25s; box-shadow: 0px 0px 0px 0px #000; position: relative; cursor: pointer; } .depot-game-cover:hover { transform: scale(1.2); box-shadow: 0px 0px 64px 32px #000; z-index: 100; } .depot-game-add-btn, .depot-game-add-btn.ant-btn.ant-btn-loading { position: absolute; top: 0; right: 0; display: none; opacity: 0; transition: opacity 0.25s; } .depot-game-cover:hover .depot-game-add-btn { display: block; opacity: 1; } .depot-game img { width: 100%; } .depot-game-details { z-index: 600; } .depot-game-details .ant-drawer-mask { background: linear-gradient(45deg, rgba(0, 0, 0, 0.5882352941), rgba(58, 58, 58, 0.5411764706)); backdrop-filter: blur(3px); z-index: auto; } .depot-game-details .ant-drawer-content { background: #000; } .depot-game-details .ant-drawer-header-no-title { display: none; } .depot-game-details .ant-drawer-content-wrapper { height: calc(100% - 128px) !important; width: 106.6666666667vh; transform: none !important; left: calc(50vw - 53.33vh); right: auto; box-shadow: 0 0 64px black; } .depot-game-details .ant-drawer-body { padding: 0; } .depot-game-details .ant-drawer-body::-webkit-scrollbar { width: 0; } .depot-game-details .game-hero { position: relative; aspect-ratio: 2.6666666667; height: 40vh; } .depot-game-details-background { object-fit: cover; max-height: 20vw; } .depot-game-details .game-details-close-btn { position: absolute; top: 0; right: 0; z-index: 100; } .downloader { flex-grow: 1; max-width: 512px; font-size: 12px; cursor: pointer; } .downloader-current { display: flex; gap: 16px; } .downloader-current .ant-progress, .downloader-current .ant-progress-inner, .downloader-current .ant-progress-outer { display: block; } .downloader-current .ant-progress-text { display: none; } .downloader-current .ant-progress-show-info .ant-progress-outer { padding-right: 0; } .downloader-current-icon { display: flex; align-items: center; } .downloader-current-icon img { width: 32px; height: 32px; object-fit: contain; } .downloader-current-info { flex-grow: 1; } .downloader-current-upper, .downloader-current-lower { display: flex; justify-content: space-between; } .downloader-current-progress { margin-top: 4px; margin-bottom: 4px; } .download-queue { top: 100%; transition: 0.3s all; z-index: 9999 !important; } .download-queue.ant-drawer-open { top: 0; } .download-queue .ant-drawer-mask { position: fixed; } .download-queue .ant-drawer-content-wrapper { height: calc(100% - 128px) !important; transform: none !important; } .download-queue .queue-item { display: flex; gap: 16px; align-items: center; } .download-queue .queue-item + .queue-item { margin-top: 16px; } .download-queue .queue-item-info { flex-grow: 1; } .download-queue .queue-item-info h3 { font-size: 1.4rem; } .download-queue .queue-item-cover { max-height: 128px; } .download-queue .queue-item-current-download { flex-grow: 1; min-width: 300px; } .download-queue .queue-item + h2 { margin-top: 32px; } .download-queue .ant-drawer-close { position: absolute; top: 4px; right: 0; padding: 4px; font-size: 24px; } .game-actions-dialog .ant-modal-body { padding: 0; } .game-actions-dialog .ant-list-clickable .ant-list-item::after { display: none; } .install-dialog-addons-selector .ant-collapse-header { padding: 6px 8px; } .install-dialog-addons-selector .ant-collapse-content { border: 0; } .install-dialog-addons-selector + .install-dialog-directory-selector { margin-top: 16px; } .checkbox-button-group { width: 100%; } .checkbox-button-group .ant-btn { display: flex; flex-direction: row-reverse; align-items: center; } .checkbox-button-group .ant-btn span:not(.anticon) { flex-grow: 1; text-align: left; margin-left: 0; } /*# sourceMappingURL=app.css.map */