kato/WarpBox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(update): Updated the styling amd layout to be much better!

Browse Source
This commit is contained in:
Daniel Legt
2026-04-29 01:16:17 +03:00
parent cb026d4fd1
commit 82acaffdd8
9 changed files with 2475 additions and 863 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
static/css/admin.css
View File

@@ -11,6 +11,10 @@ body {
display: grid;
gap: 16px;
padding: 16px;
background-color: #ffffff;
background-image:
linear-gradient(180deg, rgba(255,255,255,.9), rgba(238,238,238,.58)),
repeating-linear-gradient(0deg, rgba(0,0,0,.025) 0 1px, transparent 1px 6px);
}
.admin-nav {
@@ -35,6 +39,12 @@ body {
padding: 12px;
color: inherit;
text-decoration: none;
background: #dfdfdf;
border-top: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #808080;
border-bottom: 1px solid #808080;
box-shadow: inset 1px 1px 0 #f7f7f7, inset -1px -1px 0 #b0b0b0;
}
.admin-link strong,
@@ -50,6 +60,10 @@ body {
width: 100%;
border-collapse: collapse;
background: #fff;
border-top: 2px solid #808080;
border-left: 2px solid #808080;
border-right: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
}
.admin-table th,
@@ -74,7 +88,14 @@ body {
.admin-form-row textarea,
.admin-form-row select {
width: 100%;
box-sizing: border-box;
min-height: 24px;
color: #000000;
background: #ffffff;
border-top: 1px solid #808080;
border-left: 1px solid #808080;
border-right: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
font-family: inherit;
}
.admin-checks {
@@ -103,4 +124,9 @@ body {
.admin-summary span {
padding: 6px 8px;
background: #dfdfdf;
border-top: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #808080;
border-bottom: 1px solid #808080;
}

189
static/css/app.css
View File

@@ -15,82 +15,183 @@
}
@font-face {
font-family: 'PixelOperatorMono';
src: url('/static/fonts/pixel_operator/PixelOperatorMono-Bold.ttf');
font-weight: bold;
}
@font-face {
font-family: 'PixeloidSans';
src: url('/static/fonts/pixeloid_sans/PixeloidSans.ttf');
}
@font-face {
font-family: 'PixeloidSans';
src: url('/static/fonts/pixeloid_sans/PixeloidSans-Bold.ttf');
font-weight: bold;
font-family: 'MonoCraft';
src: url('/static/fonts/Monocraft.ttf');
}
:root {
font-family: 'PixeloidSans', 'PixelOperator', sans-serif, Arial, Helvetica;
font-family: 'PixelOperator', 'MS Sans Serif', Arial, sans-serif;
font-smooth: never;
image-rendering: pixelated;
cursor: url('/static/cursors/vaporwave-hotline-white-plus/Normal\ Select.cur'), auto;
--base-font-size: 14px;
/* Colours */
--w98-blue: #000078;
--w98-blue-gradient: linear-gradient(to right, #000078, 80%, #0f80cd);
--w98-gray: #c0c0c0;
--w98-blue-gradient: linear-gradient(90deg, #000078 0%, #000078 28%, #0f80cd 50%, #000078 72%, #000078 100%);
--w98-gray: #c0c0c0;
--w98-gray2: #a6a6a6;
--w98-gray-gradient: linear-gradient(to bottom, #fff, 95%, #c0c0c0);
scroll-behavior: smooth;
--ok: #008000;
--danger: #800000;
}
a,
button,
label[for],
.win98-button:not(:disabled) {
cursor: url('/static/cursors/vaporwave-hotline-white-plus/Link\ Select.cur'), auto;
}
input[type="text"],
input[type="password"],
input[type="file"],
textarea,
[contenteditable="true"] {
cursor: url('/static/cursors/vaporwave-hotline-white-plus/Hotline\ Black\ Handwriting.cur'), text;
* {
box-sizing: border-box;
scrollbar-width: auto;
scrollbar-color: #c0c0c0 #808080;
}
html {
min-height: 100%;
font-size: var(--base-font-size);
color: white;
background-color: #000;
color: #ffffff;
background: #000000;
}
html,
body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
body {
width: 100vw;
min-height: 100vh;
height: auto;
overflow-x: hidden;
background-color: #000000;
background-image: url('/static/img/bg/stars1.gif');
background-repeat: repeat;
background-size: auto;
font-family: 'PixelOperator', 'MS Sans Serif', Arial, sans-serif;
}
main {
min-height: 100vh;
display: grid;
place-items: center;
width: 100vw;
min-height: 100vh;
padding: 18px;
}
button,
label[for],
.menu-button,
.win98-button:not(:disabled),
a {
cursor: url('/static/cursors/vaporwave-hotline-white-plus/Link\ Select.cur'), pointer;
}
button,
input,
select,
textarea {
font-family: inherit;
}
input[type="text"],
input[type="password"],
input[type="number"],
input[type="file"],
textarea {
cursor: url('/static/cursors/vaporwave-hotline-white-plus/Hotline\ Black\ Handwriting.cur'), text;
}
:focus-visible {
outline: 2px dotted #000078;
outline-offset: 2px;
}
::-webkit-scrollbar {
width: 17px;
height: 17px;
background: #c0c0c0;
}
::-webkit-scrollbar-track {
background: repeating-linear-gradient(45deg, #c0c0c0 0 2px, #b5b5b5 2px 4px);
border-top: 1px solid #808080;
border-left: 1px solid #808080;
border-right: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
}
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-button:single-button {
background: #c0c0c0;
border-top: 2px solid #ffffff;
border-left: 2px solid #ffffff;
border-right: 2px solid #000000;
border-bottom: 2px solid #000000;
box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf;
}
::-webkit-scrollbar-corner {
background: #c0c0c0;
}
.win98-button {
min-width: 92px;
height: 28px;
display: grid;
place-items: center;
margin: 0;
padding: 0 10px;
color: #000000;
background: var(--w98-gray);
border-top: 2px solid #ffffff;
border-left: 2px solid #ffffff;
border-right: 2px solid #000000;
border-bottom: 2px solid #000000;
box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf;
font-size: 13px;
line-height: 13px;
text-align: center;
text-decoration: none;
appearance: none;
}
.win98-button:disabled,
button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
cursor: not-allowed;
}
.win98-button:disabled {
color: #808080;
text-shadow: 1px 1px 0 #ffffff;
}
.win98-button:active:not(:disabled),
.win98-control:active,
.menu-button[aria-expanded="true"] {
border-top-color: #000000;
border-left-color: #000000;
border-right-color: #ffffff;
border-bottom-color: #ffffff;
box-shadow: inset -1px -1px 0 #dfdfdf, inset 1px 1px 0 #808080;
padding-top: 1px;
}
@media (min-width: 1800px) {
:root { --base-font-size: 15px; }
.desktop-wrap { zoom: 1.2; }
}
@media (min-width: 2048px) {
:root { --base-font-size: 16px; }
.desktop-wrap { zoom: 1.36; }
}
@media (min-width: 2560px) {
:root { --base-font-size: 18px; }
.desktop-wrap { zoom: 1.58; }
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
}
}

14
static/css/box.css
View File

@@ -1,13 +1,12 @@
.box-window {
width: 640px;
height: 460px;
width: min(760px, calc(100vw - 36px));
height: min(560px, calc(100vh - 36px));
}
.box-toolbar {
display: flex;
gap: 8px;
height: 40px;
box-sizing: border-box;
padding: 6px 8px;
}
@@ -20,7 +19,6 @@
grid-template-columns: 58px minmax(0, 1fr);
align-items: center;
height: 28px;
box-sizing: border-box;
padding: 0 8px 6px;
gap: 6px;
font-size: 13px;
@@ -32,7 +30,6 @@
grid-template-columns: 58px minmax(0, 1fr);
align-items: center;
height: 24px;
box-sizing: border-box;
padding: 0 8px 6px;
gap: 6px;
color: #333333;
@@ -45,7 +42,6 @@
height: 22px;
display: flex;
align-items: center;
box-sizing: border-box;
padding: 0 6px;
overflow: hidden;
text-overflow: ellipsis;
@@ -64,6 +60,10 @@
min-height: 0;
margin: 0 8px 8px;
overflow: auto;
background-color: #ffffff;
background-image:
linear-gradient(180deg, rgba(255,255,255,.9), rgba(238,238,238,.58)),
repeating-linear-gradient(0deg, rgba(0,0,0,.025) 0 1px, transparent 1px 6px);
}
.box-file-grid {
@@ -81,7 +81,6 @@
grid-template-rows: 34px 18px 28px;
justify-items: center;
align-items: center;
box-sizing: border-box;
padding: 8px 6px;
color: #000000;
text-decoration: none;
@@ -185,6 +184,7 @@
main {
display: block;
min-height: 100dvh;
padding: 0;
}
.box-window {

10
static/css/login.css
View File

@@ -14,7 +14,12 @@
flex: 1;
margin: 8px;
padding: 12px;
background: #c0c0c0;
background-color: #dfdfdf;
background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.18) 0 1px, transparent 1px 5px);
border-top: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #808080;
border-bottom: 1px solid #808080;
}
.login-alert {
@@ -52,7 +57,6 @@
.login-input {
width: 100%;
height: 24px;
box-sizing: border-box;
padding: 2px 5px;
color: #000000;
background: #ffffff;
@@ -82,7 +86,6 @@
justify-content: flex-end;
gap: 8px;
height: 40px;
box-sizing: border-box;
padding: 0 8px 8px;
}
@@ -98,6 +101,7 @@
main {
display: block;
min-height: 100dvh;
padding: 0;
}
.login-window {

1200
static/css/upload.css
View File

File diff suppressed because it is too large Load Diff

103
static/css/window.css
View File

@@ -1,16 +1,16 @@
.win98-window {
box-sizing: border-box;
display: flex;
flex-direction: column;
color: #000000;
background: var(--w98-gray);
border-top: 2px solid #ffffff;
border-left: 2px solid #ffffff;
border-right: 2px solid #000000;
border-bottom: 2px solid #000000;
box-shadow:
inset -1px -1px 0 #808080,
inset 1px 1px 0 #dfdfdf;
background-color: #c0c0c0;
background-image:
linear-gradient(180deg, rgba(255,255,255,.34), rgba(0,0,0,.06)),
repeating-linear-gradient(45deg, rgba(255,255,255,.12) 0 1px, transparent 1px 5px);
border-top: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf, 5px 6px 0 rgba(0,0,0,.5);
}
.win98-titlebar {
@@ -18,14 +18,23 @@
align-items: center;
justify-content: space-between;
height: 22px;
box-sizing: border-box;
margin: 2px;
padding: 2px 3px 2px 6px;
color: #ffffff;
background: var(--w98-blue-gradient);
background-size: 240% 100%;
box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.35);
user-select: none;
animation: titlebar-center-drift 34s ease-in-out infinite alternate;
}
.win98-titlebar h1 {
@keyframes titlebar-center-drift {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
.win98-titlebar h1,
.win98-titlebar h2 {
min-width: 0;
margin: 0;
overflow: hidden;
@@ -60,36 +69,28 @@
.win98-control {
width: 16px;
height: 14px;
box-sizing: border-box;
display: grid;
place-items: center;
padding: 0;
color: #000000;
background: var(--w98-gray);
border-top: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
box-shadow:
inset -1px -1px 0 #808080,
inset 1px 1px 0 #dfdfdf;
box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 12px;
}
.win98-menu {
display: flex;
align-items: center;
gap: 18px;
height: 22px;
box-sizing: border-box;
padding: 0 8px;
font-size: 13px;
line-height: 13px;
.win98-minimize {
align-items: start;
padding-top: 0;
line-height: 8px;
}
.win98-panel {
box-sizing: border-box;
background: #ffffff;
border-top: 2px solid #808080;
border-left: 2px solid #808080;
@@ -97,51 +98,10 @@
border-bottom: 2px solid #ffffff;
}
.win98-button {
width: 92px;
height: 28px;
box-sizing: border-box;
display: grid;
place-items: center;
margin: 0;
padding: 0 10px;
color: #000000;
background: var(--w98-gray);
border-top: 2px solid #ffffff;
border-left: 2px solid #ffffff;
border-right: 2px solid #000000;
border-bottom: 2px solid #000000;
box-shadow:
inset -1px -1px 0 #808080,
inset 1px 1px 0 #dfdfdf;
font-family: inherit;
font-size: 13px;
line-height: 13px;
text-align: center;
appearance: none;
}
.win98-button:active {
border-top-color: #000000;
border-left-color: #000000;
border-right-color: #ffffff;
border-bottom-color: #ffffff;
box-shadow:
inset -1px -1px 0 #dfdfdf,
inset 1px 1px 0 #808080;
padding: 1px 9px 0 11px;
}
.win98-button:focus-visible {
outline: 1px dotted #000000;
outline-offset: -5px;
}
.win98-statusbar {
display: grid;
gap: 4px;
height: 22px;
box-sizing: border-box;
padding: 0 4px 4px;
font-size: 12px;
line-height: 12px;
@@ -152,7 +112,6 @@
align-items: center;
min-width: 0;
padding: 0 5px;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -161,3 +120,13 @@
border-right: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
}
.win98-menu {
display: flex;
align-items: center;
gap: 18px;
height: 22px;
padding: 0 8px;
font-size: 13px;
line-height: 13px;
}

1468
static/js/app.js
View File

File diff suppressed because it is too large Load Diff