diff --git a/public/css/styles.css b/public/css/styles.css index 965f91b..10bec08 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -1,3 +1,11 @@ +@font-face { + font-family: 'Minecraft'; + src: url('../font/MinecraftRegular-Bmg3.otf') format('opentype'); + font-weight: normal; + font-style: normal; + font-display: swap; +} + @import "tailwindcss"; @layer base { @@ -12,6 +20,10 @@ flex-direction: column; } + h1, h2, h3, h4, h5, h6 { + font-family: 'Minecraft', sans-serif; /* Apply Minecraft font to headers */ + } + #app { flex: 1 0 auto; /* Make #app grow to fill available space */ display: flex; @@ -48,6 +60,9 @@ bottom: 20px; right: 20px; z-index: 1000; + display: flex; + flex-direction: column-reverse; + gap: 8px; } .notification { @@ -55,7 +70,6 @@ color: white; padding: 16px; border-radius: 8px; - margin-top: 8px; display: flex; align-items: center; gap: 12px; @@ -180,6 +194,10 @@ cursor: not-allowed; pointer-events: none; } + + .disabled-btn:hover { + cursor: not-allowed; + } } @layer utilities { diff --git a/public/css/styles.min.css b/public/css/styles.min.css index 5512e55..6ed11d3 100644 --- a/public/css/styles.min.css +++ b/public/css/styles.min.css @@ -1,5 +1,12 @@ /*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */ @layer properties; +@font-face { + font-family: 'Minecraft'; + src: url('../font/MinecraftRegular-Bmg3.otf') format('opentype'); + font-weight: normal; + font-style: normal; + font-display: swap; +} @layer theme, base, components, utilities; @layer theme { :root, :host { @@ -25,6 +32,7 @@ --color-gray-700: oklch(37.3% 0.034 259.733); --color-gray-800: oklch(27.8% 0.033 256.848); --color-gray-900: oklch(21% 0.034 264.665); + --color-black: #000; --color-white: #fff; --spacing: 0.25rem; --container-md: 28rem; @@ -39,9 +47,8 @@ --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; + --leading-relaxed: 1.625; --radius-lg: 0.5rem; - --default-transition-duration: 150ms; - --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); } @@ -56,9 +63,7 @@ html, :host { line-height: 1.5; -webkit-text-size-adjust: 100%; - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; + tab-size: 4; font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); font-feature-settings: var(--default-font-feature-settings, normal); font-variation-settings: var(--default-font-variation-settings, normal); @@ -125,7 +130,7 @@ } img, svg, video, canvas, audio, iframe, embed, object { display: block; - /* vertical-align: middle; */ + vertical-align: middle; } img, video { max-width: 100%; @@ -150,19 +155,10 @@ ::file-selector-button { margin-inline-end: 4px; } - ::-moz-placeholder { - opacity: 1; - } ::placeholder { opacity: 1; } @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) { - ::-moz-placeholder { - color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { - color: color-mix(in oklab, currentcolor 50%, transparent); - } - } ::placeholder { color: currentcolor; @supports (color: color-mix(in lab, red, red)) { @@ -193,9 +189,7 @@ box-shadow: none; } button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button { - -webkit-appearance: button; - -moz-appearance: button; - appearance: button; + appearance: button; } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; @@ -274,6 +268,12 @@ .h-full { height: 100%; } + .max-h-\[95vh\] { + max-height: 95vh; + } + .max-h-\[calc\(95vh-10rem\)\] { + max-height: calc(95vh - 10rem); + } .min-h-full { min-height: 100%; } @@ -292,9 +292,15 @@ .w-full { width: 100%; } + .max-w-\[95\%\] { + max-width: 95%; + } .max-w-md { max-width: var(--container-md); } + .flex-1 { + flex: 1; + } .flex-grow { flex-grow: 1; } @@ -362,6 +368,9 @@ margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse))); } } + .overflow-x-auto { + overflow-x: auto; + } .overflow-x-hidden { overflow-x: hidden; } @@ -378,6 +387,17 @@ border-style: var(--tw-border-style); border-width: 1px; } + .border-t { + border-top-style: var(--tw-border-style); + border-top-width: 1px; + } + .border-b { + border-bottom-style: var(--tw-border-style); + border-bottom-width: 1px; + } + .bg-black { + background-color: var(--color-black); + } .bg-blue-600 { background-color: var(--color-blue-600); } @@ -405,6 +425,9 @@ .bg-yellow-600 { background-color: var(--color-yellow-600); } + .p-2 { + padding: calc(var(--spacing) * 2); + } .p-4 { padding: calc(var(--spacing) * 4); } @@ -454,6 +477,10 @@ font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } + .leading-relaxed { + --tw-leading: var(--leading-relaxed); + line-height: var(--leading-relaxed); + } .font-bold { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); @@ -466,6 +493,12 @@ --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); } + .break-words { + overflow-wrap: break-word; + } + .whitespace-pre-wrap { + white-space: pre-wrap; + } .text-blue-400 { color: var(--color-blue-400); } @@ -482,11 +515,6 @@ --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - .transition { - transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events; - transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); - transition-duration: var(--tw-duration, var(--default-transition-duration)); - } .hover\:bg-blue-700 { &:hover { @media (hover: hover) { @@ -536,6 +564,21 @@ } } } + .sm\:w-\[90\%\] { + @media (width >= 40rem) { + width: 90%; + } + } + .sm\:p-4 { + @media (width >= 40rem) { + padding: calc(var(--spacing) * 4); + } + } + .md\:w-\[85\%\] { + @media (width >= 48rem) { + width: 85%; + } + } .md\:grid-cols-2 { @media (width >= 48rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); @@ -546,6 +589,11 @@ grid-template-columns: repeat(3, minmax(0, 1fr)); } } + .lg\:w-\[80\%\] { + @media (width >= 64rem) { + width: 80%; + } + } } @layer base { html { @@ -556,6 +604,9 @@ display: flex; flex-direction: column; } + h1, h2, h3, h4, h5, h6 { + font-family: 'Minecraft', sans-serif; + } #app { flex: 1 0 auto; display: flex; @@ -591,13 +642,15 @@ bottom: 20px; right: 20px; z-index: 1000; + display: flex; + flex-direction: column-reverse; + gap: 8px; } .notification { background-color: #1f2937; color: white; padding: 16px; border-radius: 8px; - margin-top: 8px; display: flex; align-items: center; gap: 12px; @@ -702,6 +755,9 @@ cursor: not-allowed; pointer-events: none; } + .disabled-btn:hover { + cursor: not-allowed; + } } @layer utilities; @media (max-width: 640px) { @@ -714,8 +770,7 @@ gap: 0.5rem; word-break: break-all; } - .bg-gray-800.p-6.rounded-lg.shadow-lg a, - .bg-gray-800.p-6.rounded-lg.shadow-lg span { + .bg-gray-800.p-6.rounded-lg.shadow-lg a, .bg-gray-800.p-6.rounded-lg.shadow-lg span { word-break: break-all; overflow-wrap: anywhere; white-space: normal; @@ -766,6 +821,10 @@ inherits: false; initial-value: solid; } +@property --tw-leading { + syntax: "*"; + inherits: false; +} @property --tw-font-weight { syntax: "*"; inherits: false; @@ -851,6 +910,7 @@ --tw-space-y-reverse: 0; --tw-space-x-reverse: 0; --tw-border-style: solid; + --tw-leading: initial; --tw-font-weight: initial; --tw-shadow: 0 0 #0000; --tw-shadow-color: initial; @@ -868,4 +928,4 @@ --tw-ring-offset-shadow: 0 0 #0000; } } -} \ No newline at end of file +} diff --git a/public/font/MinecraftRegular-Bmg3.otf b/public/font/MinecraftRegular-Bmg3.otf new file mode 100644 index 0000000..54f08ad Binary files /dev/null and b/public/font/MinecraftRegular-Bmg3.otf differ diff --git a/public/index.html b/public/index.html index 29c6a73..47fe5ae 100644 --- a/public/index.html +++ b/public/index.html @@ -5,7 +5,7 @@
Memory Usage
+Memory Usage
0%
CPU Usage
+CPU Usage
0%