diff --git a/CHANGELOG.md b/CHANGELOG.md index 833d238..ff436bb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,7 +11,7 @@ * increase session count on game overview when starting a new session * game overview: * sort purchases also by date purchased (on top of date released) - * improve header format + * improve header format, make it more appealing * ignore manual sessions when calculating session average * stats: improve purchase name consistency * session list: use display name instead of sort name diff --git a/common/input.css b/common/input.css index 415013d..113775c 100644 --- a/common/input.css +++ b/common/input.css @@ -23,6 +23,21 @@ font-style: normal; } +@font-face { + font-family: "IBM Plex Serif"; + src: url("fonts/IBMPlexSerif-Bold.woff2") format("woff2"); + font-weight: 700; + font-style: normal; +} + +@font-face { + font-family: "IBM Plex Sans Condensed"; + src: url("fonts/IBMPlexSansCondensed-Regular.woff2") format("woff2"); + font-weight: 400; + font-style: normal; +} + + /* a:hover { text-decoration-color: #ff4400; color: rgb(254, 185, 160); @@ -149,12 +164,10 @@ th label { padding-left: 1em; } -.truncate-container { - @apply inline-block relative transition-all; +/* .truncate-container { + @apply inline-block relative; a { - @apply inline-block truncate max-w-20char; - &:hover { - @apply absolute max-w-none -top-8 -left-6 min-w-60 px-6 py-3.5 bg-purple-600 rounded-sm outline-dashed outline-purple-400 outline-4; - } + @apply inline-block truncate max-w-20char transition-all group-hover:absolute group-hover:max-w-none group-hover:-top-8 group-hover:-left-6 group-hover:min-w-60 group-hover:px-6 group-hover:py-3.5 group-hover:bg-purple-600 group-hover:rounded-sm group-hover:outline-dashed group-hover:outline-purple-400 group-hover:outline-4; + } -} \ No newline at end of file +} */ \ No newline at end of file diff --git a/games/static/base.css b/games/static/base.css index fbbeedf..e09485f 100644 --- a/games/static/base.css +++ b/games/static/base.css @@ -16,7 +16,7 @@ /* 2 */ border-style: solid; /* 2 */ - border-color: #e5e7eb; + border-color: #E5E7EB; /* 2 */ } @@ -381,7 +381,7 @@ textarea { input::-moz-placeholder, textarea::-moz-placeholder { opacity: 1; /* 1 */ - color: #9ca3af; + color: #9CA3AF; /* 2 */ } @@ -389,7 +389,7 @@ input::placeholder, textarea::placeholder { opacity: 1; /* 1 */ - color: #9ca3af; + color: #9CA3AF; /* 2 */ } @@ -451,7 +451,7 @@ video { -moz-appearance: none; appearance: none; background-color: #fff; - border-color: #6b7280; + border-color: #6B7280; border-width: 1px; border-radius: 0px; padding-top: 0.5rem; @@ -469,20 +469,20 @@ video { --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; - --tw-ring-color: #2563eb; + --tw-ring-color: #1C64F2; --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - border-color: #2563eb; + border-color: #1C64F2; } input::-moz-placeholder, textarea::-moz-placeholder { - color: #6b7280; + color: #6B7280; opacity: 1; } input::placeholder,textarea::placeholder { - color: #6b7280; + color: #6B7280; opacity: 1; } @@ -505,7 +505,7 @@ input::placeholder,textarea::placeholder { } select { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-position: right 0.5rem center; background-repeat: no-repeat; background-size: 1.5em 1.5em; @@ -540,9 +540,9 @@ select { flex-shrink: 0; height: 1rem; width: 1rem; - color: #2563eb; + color: #1C64F2; background-color: #fff; - border-color: #6b7280; + border-color: #6B7280; border-width: 1px; --tw-shadow: 0 0 #0000; } @@ -561,7 +561,7 @@ select { --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); --tw-ring-offset-width: 2px; --tw-ring-offset-color: #fff; - --tw-ring-color: #2563eb; + --tw-ring-color: #1C64F2; --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); @@ -641,6 +641,469 @@ select { outline: 1px auto -webkit-focus-ring-color; } +.tooltip-arrow,.tooltip-arrow:before { + position: absolute; + width: 8px; + height: 8px; + background: inherit; +} + +.tooltip-arrow { + visibility: hidden; +} + +.tooltip-arrow:before { + content: ""; + visibility: visible; + transform: rotate(45deg); +} + +[data-tooltip-style^='light'] + .tooltip > .tooltip-arrow:before { + border-style: solid; + border-color: #e5e7eb; +} + +[data-tooltip-style^='light'] + .tooltip[data-popper-placement^='top'] > .tooltip-arrow:before { + border-bottom-width: 1px; + border-right-width: 1px; +} + +[data-tooltip-style^='light'] + .tooltip[data-popper-placement^='right'] > .tooltip-arrow:before { + border-bottom-width: 1px; + border-left-width: 1px; +} + +[data-tooltip-style^='light'] + .tooltip[data-popper-placement^='bottom'] > .tooltip-arrow:before { + border-top-width: 1px; + border-left-width: 1px; +} + +[data-tooltip-style^='light'] + .tooltip[data-popper-placement^='left'] > .tooltip-arrow:before { + border-top-width: 1px; + border-right-width: 1px; +} + +.tooltip[data-popper-placement^='top'] > .tooltip-arrow { + bottom: -4px; +} + +.tooltip[data-popper-placement^='bottom'] > .tooltip-arrow { + top: -4px; +} + +.tooltip[data-popper-placement^='left'] > .tooltip-arrow { + right: -4px; +} + +.tooltip[data-popper-placement^='right'] > .tooltip-arrow { + left: -4px; +} + +.tooltip.invisible > .tooltip-arrow:before { + visibility: hidden; +} + +[data-popper-arrow],[data-popper-arrow]:before { + position: absolute; + width: 8px; + height: 8px; + background: inherit; +} + +[data-popper-arrow] { + visibility: hidden; +} + +[data-popper-arrow]:before { + content: ""; + visibility: visible; + transform: rotate(45deg); +} + +[data-popper-arrow]:after { + content: ""; + visibility: visible; + transform: rotate(45deg); + position: absolute; + width: 9px; + height: 9px; + background: inherit; +} + +[role="tooltip"] > [data-popper-arrow]:before { + border-style: solid; + border-color: #e5e7eb; +} + +.dark [role="tooltip"] > [data-popper-arrow]:before { + border-style: solid; + border-color: #4b5563; +} + +[role="tooltip"] > [data-popper-arrow]:after { + border-style: solid; + border-color: #e5e7eb; +} + +.dark [role="tooltip"] > [data-popper-arrow]:after { + border-style: solid; + border-color: #4b5563; +} + +[data-popover][role="tooltip"][data-popper-placement^='top'] > [data-popper-arrow]:before { + border-bottom-width: 1px; + border-right-width: 1px; +} + +[data-popover][role="tooltip"][data-popper-placement^='top'] > [data-popper-arrow]:after { + border-bottom-width: 1px; + border-right-width: 1px; +} + +[data-popover][role="tooltip"][data-popper-placement^='right'] > [data-popper-arrow]:before { + border-bottom-width: 1px; + border-left-width: 1px; +} + +[data-popover][role="tooltip"][data-popper-placement^='right'] > [data-popper-arrow]:after { + border-bottom-width: 1px; + border-left-width: 1px; +} + +[data-popover][role="tooltip"][data-popper-placement^='bottom'] > [data-popper-arrow]:before { + border-top-width: 1px; + border-left-width: 1px; +} + +[data-popover][role="tooltip"][data-popper-placement^='bottom'] > [data-popper-arrow]:after { + border-top-width: 1px; + border-left-width: 1px; +} + +[data-popover][role="tooltip"][data-popper-placement^='left'] > [data-popper-arrow]:before { + border-top-width: 1px; + border-right-width: 1px; +} + +[data-popover][role="tooltip"][data-popper-placement^='left'] > [data-popper-arrow]:after { + border-top-width: 1px; + border-right-width: 1px; +} + +[data-popover][role="tooltip"][data-popper-placement^='top'] > [data-popper-arrow] { + bottom: -5px; +} + +[data-popover][role="tooltip"][data-popper-placement^='bottom'] > [data-popper-arrow] { + top: -5px; +} + +[data-popover][role="tooltip"][data-popper-placement^='left'] > [data-popper-arrow] { + right: -5px; +} + +[data-popover][role="tooltip"][data-popper-placement^='right'] > [data-popper-arrow] { + left: -5px; +} + +[role="tooltip"].invisible > [data-popper-arrow]:before { + visibility: hidden; +} + +[role="tooltip"].invisible > [data-popper-arrow]:after { + visibility: hidden; +} + +[type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: #fff; + border-color: #6B7280; + border-width: 1px; + border-radius: 0px; + padding-top: 0.5rem; + padding-right: 0.75rem; + padding-bottom: 0.5rem; + padding-left: 0.75rem; + font-size: 1rem; + line-height: 1.5rem; + --tw-shadow: 0 0 #0000; +} + +[type='text']:focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus { + outline: 2px solid transparent; + outline-offset: 2px; + --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: #1C64F2; + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + border-color: #1C64F2; +} + +input::-moz-placeholder, textarea::-moz-placeholder { + color: #6B7280; + opacity: 1; +} + +input::placeholder,textarea::placeholder { + color: #6B7280; + opacity: 1; +} + +::-webkit-datetime-edit-fields-wrapper { + padding: 0; +} + +input[type="time"]::-webkit-calendar-picker-indicator { + background: none; +} + +select:not([size]) { + background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 10 6'%3e %3cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 1 4 4 4-4'/%3e %3c/svg%3e"); + background-position: right 0.75rem center; + background-repeat: no-repeat; + background-size: 0.75em 0.75em; + padding-right: 2.5rem; + -webkit-print-color-adjust: exact; + print-color-adjust: exact; +} + +:is([dir=rtl]) select:not([size]) { + background-position: left 0.75rem center; + padding-right: 0.75rem; + padding-left: 0; +} + +[multiple] { + background-image: initial; + background-position: initial; + background-repeat: unset; + background-size: initial; + padding-right: 0.75rem; + -webkit-print-color-adjust: unset; + print-color-adjust: unset; +} + +[type='checkbox'],[type='radio'] { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + padding: 0; + -webkit-print-color-adjust: exact; + print-color-adjust: exact; + display: inline-block; + vertical-align: middle; + background-origin: border-box; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + flex-shrink: 0; + height: 1rem; + width: 1rem; + color: #1C64F2; + background-color: #fff; + border-color: #6B7280; + border-width: 1px; + --tw-shadow: 0 0 #0000; +} + +[type='checkbox'] { + border-radius: 0px; +} + +[type='radio'] { + border-radius: 100%; +} + +[type='checkbox']:focus,[type='radio']:focus { + outline: 2px solid transparent; + outline-offset: 2px; + --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); + --tw-ring-offset-width: 2px; + --tw-ring-offset-color: #fff; + --tw-ring-color: #1C64F2; + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); +} + +[type='checkbox']:checked,[type='radio']:checked,.dark [type='checkbox']:checked,.dark [type='radio']:checked { + border-color: transparent; + background-color: currentColor; + background-size: 0.55em 0.55em; + background-position: center; + background-repeat: no-repeat; +} + +[type='checkbox']:checked { + background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 12'%3e %3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M1 5.917 5.724 10.5 15 1.5'/%3e %3c/svg%3e"); + background-repeat: no-repeat; + background-size: 0.55em 0.55em; + -webkit-print-color-adjust: exact; + print-color-adjust: exact; +} + +[type='radio']:checked { + background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e"); + background-size: 1em 1em; +} + +.dark [type='radio']:checked { + background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e"); + background-size: 1em 1em; +} + +[type='checkbox']:indeterminate { + background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 12'%3e %3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M0.5 6h14'/%3e %3c/svg%3e"); + background-color: currentColor; + border-color: transparent; + background-position: center; + background-repeat: no-repeat; + background-size: 0.55em 0.55em; + -webkit-print-color-adjust: exact; + print-color-adjust: exact; +} + +[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus { + border-color: transparent; + background-color: currentColor; +} + +[type='file'] { + background: unset; + border-color: inherit; + border-width: 0; + border-radius: 0; + padding: 0; + font-size: unset; + line-height: inherit; +} + +[type='file']:focus { + outline: 1px auto inherit; +} + +input[type=file]::file-selector-button { + color: white; + background: #1F2937; + border: 0; + font-weight: 500; + font-size: 0.875rem; + cursor: pointer; + padding-top: 0.625rem; + padding-bottom: 0.625rem; + padding-left: 2rem; + padding-right: 1rem; + margin-inline-start: -1rem; + margin-inline-end: 1rem; +} + +input[type=file]::file-selector-button:hover { + background: #374151; +} + +:is([dir=rtl]) input[type=file]::file-selector-button { + padding-right: 2rem; + padding-left: 1rem; +} + +.dark input[type=file]::file-selector-button { + color: white; + background: #4B5563; +} + +.dark input[type=file]::file-selector-button:hover { + background: #6B7280; +} + +input[type="range"]::-webkit-slider-thumb { + height: 1.25rem; + width: 1.25rem; + background: #1C64F2; + border-radius: 9999px; + border: 0; + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; + cursor: pointer; +} + +input[type="range"]:disabled::-webkit-slider-thumb { + background: #9CA3AF; +} + +.dark input[type="range"]:disabled::-webkit-slider-thumb { + background: #6B7280; +} + +input[type="range"]:focus::-webkit-slider-thumb { + outline: 2px solid transparent; + outline-offset: 2px; + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); + --tw-ring-opacity: 1px; + --tw-ring-color: rgb(164 202 254 / var(--tw-ring-opacity)); +} + +input[type="range"]::-moz-range-thumb { + height: 1.25rem; + width: 1.25rem; + background: #1C64F2; + border-radius: 9999px; + border: 0; + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; + cursor: pointer; +} + +input[type="range"]:disabled::-moz-range-thumb { + background: #9CA3AF; +} + +.dark input[type="range"]:disabled::-moz-range-thumb { + background: #6B7280; +} + +input[type="range"]::-moz-range-progress { + background: #3F83F8; +} + +input[type="range"]::-ms-fill-lower { + background: #3F83F8; +} + +.toggle-bg:after { + content: ""; + position: absolute; + top: 0.125rem; + left: 0.125rem; + background: white; + border-color: #D1D5DB; + border-width: 1px; + border-radius: 9999px; + height: 1.25rem; + width: 1.25rem; + transition-property: background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter; + transition-duration: .15s; + box-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color); +} + +input:checked + .toggle-bg:after { + transform: translateX(100%);; + border-color: white; +} + +input:checked + .toggle-bg { + background: #1C64F2; + border-color: #1C64F2; +} + *, ::before, ::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; @@ -666,7 +1129,7 @@ select { --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-color: rgb(63 131 248 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; @@ -720,7 +1183,7 @@ select { --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-color: rgb(63 131 248 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; @@ -795,10 +1258,18 @@ select { border-width: 0; } +.visible { + visibility: visible; +} + .invisible { visibility: hidden; } +.collapse { + visibility: collapse; +} + .static { position: static; } @@ -815,28 +1286,64 @@ select { position: relative; } +.inset-0 { + inset: 0px; +} + +.bottom-0 { + bottom: 0px; +} + .bottom-2 { bottom: 0.5rem; } +.bottom-\[60px\] { + bottom: 60px; +} + +.left-0 { + left: 0px; +} + .left-2 { left: 0.5rem; } +.right-0 { + right: 0px; +} + .right-3 { right: 0.75rem; } +.top-0 { + top: 0px; +} + .top-3 { top: 0.75rem; } -.-left-6 { - left: -1.5rem; +.z-10 { + z-index: 10; } -.-top-\[31\.5px\] { - top: -31.5px; +.z-20 { + z-index: 20; +} + +.z-30 { + z-index: 30; +} + +.z-40 { + z-index: 40; +} + +.z-50 { + z-index: 50; } .mx-2 { @@ -849,11 +1356,6 @@ select { margin-right: auto; } -.my-2 { - margin-top: 0.5rem; - margin-bottom: 0.5rem; -} - .my-4 { margin-top: 1rem; margin-bottom: 1rem; @@ -876,6 +1378,10 @@ select { margin-bottom: 0.5rem; } +.mb-3 { + margin-bottom: 0.75rem; +} + .mb-8 { margin-bottom: 2rem; } @@ -888,14 +1394,14 @@ select { margin-left: 0.25rem; } -.ml-2 { - margin-left: 0.5rem; -} - .mr-4 { margin-right: 1rem; } +.mt-2 { + margin-top: 0.5rem; +} + .mt-4 { margin-top: 1rem; } @@ -924,10 +1430,19 @@ select { display: table; } +.grid { + display: grid; +} + .hidden { display: none; } +.size-6 { + width: 1.5rem; + height: 1.5rem; +} + .h-12 { height: 3rem; } @@ -948,14 +1463,26 @@ select { height: 1.5rem; } +.h-9 { + height: 2.25rem; +} + .min-h-screen { min-height: 100vh; } +.w-1\/2 { + width: 50%; +} + .w-24 { width: 6rem; } +.w-4 { + width: 1rem; +} + .w-5 { width: 1.25rem; } @@ -964,6 +1491,10 @@ select { width: 1.5rem; } +.w-64 { + width: 16rem; +} + .w-7 { width: 1.75rem; } @@ -976,8 +1507,16 @@ select { width: 100%; } -.min-w-60 { - min-width: 15rem; +.min-w-14 { + min-width: 3.5rem; +} + +.max-w-24 { + max-width: 6rem; +} + +.max-w-80 { + max-width: 20rem; } .max-w-screen-lg { @@ -996,6 +1535,48 @@ select { flex: 1 1 0%; } +.flex-shrink { + flex-shrink: 1; +} + +.-translate-x-full { + --tw-translate-x: -100%; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.-translate-y-full { + --tw-translate-y: -100%; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.translate-x-0 { + --tw-translate-x: 0px; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.translate-x-full { + --tw-translate-x: 100%; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.translate-y-full { + --tw-translate-y: 100%; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.rotate-180 { + --tw-rotate: 180deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.transform { + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.transform-none { + transform: none; +} + @keyframes spin { to { transform: rotate(360deg); @@ -1006,6 +1587,30 @@ select { animation: spin 1s linear infinite; } +.cursor-default { + cursor: default; +} + +.cursor-not-allowed { + cursor: not-allowed; +} + +.cursor-pointer { + cursor: pointer; +} + +.resize { + resize: both; +} + +.grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); +} + +.grid-cols-7 { + grid-template-columns: repeat(7, minmax(0, 1fr)); +} + .flex-col { flex-direction: column; } @@ -1014,10 +1619,26 @@ select { flex-wrap: wrap; } +.items-start { + align-items: flex-start; +} + +.items-end { + align-items: flex-end; +} + .items-center { align-items: center; } +.justify-start { + justify-content: flex-start; +} + +.justify-end { + justify-content: flex-end; +} + .justify-center { justify-content: center; } @@ -1030,16 +1651,34 @@ select { gap: 0.5rem; } +.gap-4 { + gap: 1rem; +} + +.gap-5 { + gap: 1.25rem; +} + .space-x-1 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(0.25rem * var(--tw-space-x-reverse)); margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse))); } +.space-x-2 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(0.5rem * var(--tw-space-x-reverse)); + margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); +} + .self-center { align-self: center; } +.overflow-hidden { + overflow: hidden; +} + .truncate { overflow: hidden; text-overflow: ellipsis; @@ -1050,6 +1689,10 @@ select { white-space: nowrap; } +.text-wrap { + text-wrap: wrap; +} + .rounded-full { border-radius: 9999px; } @@ -1058,23 +1701,80 @@ select { border-radius: 0.5rem; } +.rounded-md { + border-radius: 0.375rem; +} + .rounded-sm { border-radius: 0.125rem; } +.rounded-e-lg { + border-start-end-radius: 0.5rem; + border-end-end-radius: 0.5rem; +} + +.rounded-l-lg { + border-top-left-radius: 0.5rem; + border-bottom-left-radius: 0.5rem; +} + +.rounded-r-lg { + border-top-right-radius: 0.5rem; + border-bottom-right-radius: 0.5rem; +} + +.rounded-s-lg { + border-start-start-radius: 0.5rem; + border-end-start-radius: 0.5rem; +} + +.border { + border-width: 1px; +} + +.border-0 { + border-width: 0px; +} + +.border-blue-600 { + --tw-border-opacity: 1; + border-color: rgb(28 100 242 / var(--tw-border-opacity)); +} + +.border-blue-700 { + --tw-border-opacity: 1; + border-color: rgb(26 86 219 / var(--tw-border-opacity)); +} + +.border-gray-100 { + --tw-border-opacity: 1; + border-color: rgb(243 244 246 / var(--tw-border-opacity)); +} + .border-gray-200 { --tw-border-opacity: 1; border-color: rgb(229 231 235 / var(--tw-border-opacity)); } -.border-slate-500 { +.border-gray-300 { --tw-border-opacity: 1; - border-color: rgb(100 116 139 / var(--tw-border-opacity)); + border-color: rgb(209 213 219 / var(--tw-border-opacity)); +} + +.border-purple-200 { + --tw-border-opacity: 1; + border-color: rgb(220 215 254 / var(--tw-border-opacity)); } .bg-blue-700 { --tw-bg-opacity: 1; - background-color: rgb(29 78 216 / var(--tw-bg-opacity)); + background-color: rgb(26 86 219 / var(--tw-bg-opacity)); +} + +.bg-gray-100 { + --tw-bg-opacity: 1; + background-color: rgb(243 244 246 / var(--tw-bg-opacity)); } .bg-gray-200 { @@ -1082,9 +1782,18 @@ select { background-color: rgb(229 231 235 / var(--tw-bg-opacity)); } +.bg-gray-800 { + --tw-bg-opacity: 1; + background-color: rgb(31 41 55 / var(--tw-bg-opacity)); +} + +.bg-gray-900\/50 { + background-color: rgb(17 24 39 / 0.5); +} + .bg-green-600 { --tw-bg-opacity: 1; - background-color: rgb(22 163 74 / var(--tw-bg-opacity)); + background-color: rgb(5 122 85 / var(--tw-bg-opacity)); } .bg-violet-600 { @@ -1092,6 +1801,19 @@ select { background-color: rgb(124 58 237 / var(--tw-bg-opacity)); } +.bg-white { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.bg-white\/50 { + background-color: rgb(255 255 255 / 0.5); +} + +.p-1 { + padding: 0.25rem; +} + .p-2 { padding: 0.5rem; } @@ -1109,11 +1831,21 @@ select { padding-right: 0.5rem; } +.px-3 { + padding-left: 0.75rem; + padding-right: 0.75rem; +} + .px-4 { padding-left: 1rem; padding-right: 1rem; } +.px-5 { + padding-left: 1.25rem; + padding-right: 1.25rem; +} + .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; @@ -1124,14 +1856,14 @@ select { padding-bottom: 0.5rem; } -.px-6 { - padding-left: 1.5rem; - padding-right: 1.5rem; +.py-2\.5 { + padding-top: 0.625rem; + padding-bottom: 0.625rem; } -.py-\[13\.5px\] { - padding-top: 13.5px; - padding-bottom: 13.5px; +.py-3 { + padding-top: 0.75rem; + padding-bottom: 0.75rem; } .pb-16 { @@ -1150,6 +1882,10 @@ select { padding-top: 0.25rem; } +.pt-2 { + padding-top: 0.5rem; +} + .pt-8 { padding-top: 2rem; } @@ -1162,10 +1898,23 @@ select { vertical-align: top; } +.font-condensed { + font-family: IBM Plex Sans Condensed, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; +} + .font-mono { font-family: IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } +.font-serif { + font-family: IBM Plex Serif, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; +} + +.text-2xl { + font-size: 1.5rem; + line-height: 2rem; +} + .text-3xl { font-size: 1.875rem; line-height: 2.25rem; @@ -1206,6 +1955,10 @@ select { line-height: 1rem; } +.font-bold { + font-weight: 700; +} + .font-medium { font-weight: 500; } @@ -1214,14 +1967,47 @@ select { font-weight: 600; } +.leading-6 { + line-height: 1.5rem; +} + +.leading-9 { + line-height: 2.25rem; +} + +.text-blue-600 { + --tw-text-opacity: 1; + color: rgb(28 100 242 / var(--tw-text-opacity)); +} + +.text-gray-400 { + --tw-text-opacity: 1; + color: rgb(156 163 175 / var(--tw-text-opacity)); +} + +.text-gray-500 { + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); +} + .text-gray-700 { --tw-text-opacity: 1; color: rgb(55 65 81 / var(--tw-text-opacity)); } +.text-gray-800 { + --tw-text-opacity: 1; + color: rgb(31 41 55 / var(--tw-text-opacity)); +} + +.text-gray-900 { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + .text-red-600 { --tw-text-opacity: 1; - color: rgb(220 38 38 / var(--tw-text-opacity)); + color: rgb(224 36 36 / var(--tw-text-opacity)); } .text-slate-300 { @@ -1241,7 +2027,7 @@ select { .text-yellow-300 { --tw-text-opacity: 1; - color: rgb(253 224 71 / var(--tw-text-opacity)); + color: rgb(250 202 21 / var(--tw-text-opacity)); } .underline { @@ -1252,12 +2038,47 @@ select { text-decoration-color: #64748b; } +.opacity-0 { + opacity: 0; +} + +.opacity-100 { + opacity: 1; +} + +.shadow { + --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.shadow-lg { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + .shadow-md { --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } +.shadow-sm { + --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); + --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.outline { + outline-style: solid; +} + +.blur { + --tw-blur: blur(8px); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + .filter { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } @@ -1270,14 +2091,34 @@ select { transition-duration: 150ms; } +.transition-opacity { + transition-property: opacity; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.transition-transform { + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + .duration-200 { transition-duration: 200ms; } +.duration-300 { + transition-duration: 300ms; +} + .ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); } +.ease-out { + transition-timing-function: cubic-bezier(0, 0, 0.2, 1); +} + .max-w-20char { max-width: 20ch; } @@ -1289,7 +2130,7 @@ select { @font-face { font-family: "IBM Plex Mono"; - src: url("fonts/IBMPlexMono-regular.woff2") format("woff2"); + src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; @@ -1316,6 +2157,26 @@ select { font-style: normal; } +@font-face { + font-family: "IBM Plex Serif"; + + src: url("fonts/IBMPlexSerif-Bold.woff2") format("woff2"); + + font-weight: 700; + + font-style: normal; +} + +@font-face { + font-family: "IBM Plex Sans Condensed"; + + src: url("fonts/IBMPlexSansCondensed-Regular.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; +} + /* a:hover { text-decoration-color: #ff4400; color: rgb(254, 185, 160); @@ -1390,7 +2251,7 @@ textarea:disabled:is(.dark *) { margin-bottom: 0.25rem; width: 300px; --tw-bg-opacity: 1; - background-color: rgb(220 38 38 / var(--tw-bg-opacity)); + background-color: rgb(224 36 36 / var(--tw-bg-opacity)); padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 0.75rem; @@ -1442,7 +2303,7 @@ th label { display: inline-block; border-radius: 0.25rem; --tw-bg-opacity: 1; - background-color: rgb(37 99 235 / var(--tw-bg-opacity)); + background-color: rgb(28 100 242 / var(--tw-bg-opacity)); padding-left: 1.5rem; padding-right: 1.5rem; padding-top: 0.625rem; @@ -1466,7 +2327,7 @@ th label { .basic-button:hover { --tw-bg-opacity: 1; - background-color: rgb(29 78 216 / var(--tw-bg-opacity)); + background-color: rgb(26 86 219 / var(--tw-bg-opacity)); --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); @@ -1474,7 +2335,7 @@ th label { .basic-button:focus { --tw-bg-opacity: 1; - background-color: rgb(29 78 216 / var(--tw-bg-opacity)); + background-color: rgb(26 86 219 / var(--tw-bg-opacity)); --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); @@ -1487,7 +2348,7 @@ th label { .basic-button:active { --tw-bg-opacity: 1; - background-color: rgb(30 64 175 / var(--tw-bg-opacity)); + background-color: rgb(30 66 159 / var(--tw-bg-opacity)); --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); @@ -1521,69 +2382,27 @@ th label { padding-left: 1em; } -.truncate-container { - position: relative; - display: inline-block; - transition-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; +/* .truncate-container { + @apply inline-block relative; a { - display: inline-block; - } - a { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - a { - max-width: 20ch; - } - a { - &:hover { - position: absolute; - } - &:hover { - top: -2rem; - } - &:hover { - left: -1.5rem; - } - &:hover { - min-width: 15rem; - } - &:hover { - max-width: none; - } - &:hover { - border-radius: 0.125rem; - } - &:hover { - --tw-bg-opacity: 1; - background-color: rgb(147 51 234 / var(--tw-bg-opacity)); - } - &:hover { - padding-left: 1.5rem; - padding-right: 1.5rem; - } - &:hover { - padding-top: 0.875rem; - padding-bottom: 0.875rem; - } - &:hover { - outline-style: dashed; - } - &:hover { - outline-width: 4px; - } - &:hover { - outline-color: #c084fc; - } - } + @apply inline-block truncate max-w-20char transition-all group-hover:absolute group-hover:max-w-none group-hover:-top-8 group-hover:-left-6 group-hover:min-w-60 group-hover:px-6 group-hover:py-3.5 group-hover:bg-purple-600 group-hover:rounded-sm group-hover:outline-dashed group-hover:outline-purple-400 group-hover:outline-4; + + } +} */ + +.hover\:border-gray-300:hover { + --tw-border-opacity: 1; + border-color: rgb(209 213 219 / var(--tw-border-opacity)); } .hover\:bg-blue-800:hover { --tw-bg-opacity: 1; - background-color: rgb(30 64 175 / var(--tw-bg-opacity)); + background-color: rgb(30 66 159 / var(--tw-bg-opacity)); +} + +.hover\:bg-gray-100:hover { + --tw-bg-opacity: 1; + background-color: rgb(243 244 246 / var(--tw-bg-opacity)); } .hover\:bg-gray-400:hover { @@ -1593,7 +2412,12 @@ th label { .hover\:bg-green-700:hover { --tw-bg-opacity: 1; - background-color: rgb(21 128 61 / var(--tw-bg-opacity)); + background-color: rgb(4 108 78 / var(--tw-bg-opacity)); +} + +.hover\:bg-red-100:hover { + --tw-bg-opacity: 1; + background-color: rgb(253 232 232 / var(--tw-bg-opacity)); } .hover\:bg-violet-700:hover { @@ -1601,10 +2425,44 @@ th label { background-color: rgb(109 40 217 / var(--tw-bg-opacity)); } +.hover\:bg-white:hover { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.hover\:text-blue-600:hover { + --tw-text-opacity: 1; + color: rgb(28 100 242 / var(--tw-text-opacity)); +} + +.hover\:text-blue-700:hover { + --tw-text-opacity: 1; + color: rgb(26 86 219 / var(--tw-text-opacity)); +} + +.hover\:text-gray-600:hover { + --tw-text-opacity: 1; + color: rgb(75 85 99 / var(--tw-text-opacity)); +} + +.hover\:text-gray-900:hover { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + .hover\:underline:hover { text-decoration-line: underline; } +.focus\:z-10:focus { + z-index: 10; +} + +.focus\:text-blue-700:focus { + --tw-text-opacity: 1; + color: rgb(26 86 219 / var(--tw-text-opacity)); +} + .focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; @@ -1624,12 +2482,22 @@ th label { .focus\:ring-blue-300:focus { --tw-ring-opacity: 1; - --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity)); + --tw-ring-color: rgb(164 202 254 / var(--tw-ring-opacity)); +} + +.focus\:ring-blue-700:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(26 86 219 / var(--tw-ring-opacity)); +} + +.focus\:ring-gray-200:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity)); } .focus\:ring-green-500:focus { --tw-ring-opacity: 1; - --tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity)); + --tw-ring-color: rgb(14 159 110 / var(--tw-ring-opacity)); } .focus\:ring-violet-500:focus { @@ -1642,20 +2510,119 @@ th label { } .focus\:ring-offset-blue-200:focus { - --tw-ring-offset-color: #bfdbfe; + --tw-ring-offset-color: #C3DDFD; } .focus\:ring-offset-violet-200:focus { --tw-ring-offset-color: #ddd6fe; } +.group:hover .group-hover\:absolute { + position: absolute; +} + +.group:hover .group-hover\:-left-6 { + left: -1.5rem; +} + +.group:hover .group-hover\:-top-8 { + top: -2rem; +} + .group:hover .group-hover\:block { display: block; } +.group:hover .group-hover\:min-w-60 { + min-width: 15rem; +} + +.group:hover .group-hover\:max-w-none { + max-width: none; +} + +.group:hover .group-hover\:rounded-sm { + border-radius: 0.125rem; +} + +.group:hover .group-hover\:bg-purple-600 { + --tw-bg-opacity: 1; + background-color: rgb(126 58 242 / var(--tw-bg-opacity)); +} + +.group:hover .group-hover\:px-6 { + padding-left: 1.5rem; + padding-right: 1.5rem; +} + +.group:hover .group-hover\:py-3 { + padding-top: 0.75rem; + padding-bottom: 0.75rem; +} + +.group:hover .group-hover\:py-3\.5 { + padding-top: 0.875rem; + padding-bottom: 0.875rem; +} + +.group:hover .group-hover\:text-purple-100 { + --tw-text-opacity: 1; + color: rgb(237 235 254 / var(--tw-text-opacity)); +} + +.group:hover .group-hover\:decoration-purple-900 { + text-decoration-color: #4A1D96; +} + +.group:hover .group-hover\:outline-dashed { + outline-style: dashed; +} + +.group:hover .group-hover\:outline-4 { + outline-width: 4px; +} + +.group:hover .group-hover\:outline-purple-400 { + outline-color: #AC94FA; +} + +.dark\:border-blue-500:is(.dark *) { + --tw-border-opacity: 1; + border-color: rgb(63 131 248 / var(--tw-border-opacity)); +} + +.dark\:border-gray-600:is(.dark *) { + --tw-border-opacity: 1; + border-color: rgb(75 85 99 / var(--tw-border-opacity)); +} + +.dark\:border-gray-700:is(.dark *) { + --tw-border-opacity: 1; + border-color: rgb(55 65 81 / var(--tw-border-opacity)); +} + +.dark\:border-purple-600:is(.dark *) { + --tw-border-opacity: 1; + border-color: rgb(126 58 242 / var(--tw-border-opacity)); +} + +.dark\:border-transparent:is(.dark *) { + border-color: transparent; +} + .dark\:bg-blue-600:is(.dark *) { --tw-bg-opacity: 1; - background-color: rgb(37 99 235 / var(--tw-bg-opacity)); + background-color: rgb(28 100 242 / var(--tw-bg-opacity)); +} + +.dark\:bg-gray-600:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(75 85 99 / var(--tw-bg-opacity)); +} + +.dark\:bg-gray-700:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(55 65 81 / var(--tw-bg-opacity)); } .dark\:bg-gray-800:is(.dark *) { @@ -1663,11 +2630,39 @@ th label { background-color: rgb(31 41 55 / var(--tw-bg-opacity)); } +.dark\:bg-gray-800\/50:is(.dark *) { + background-color: rgb(31 41 55 / 0.5); +} + .dark\:bg-gray-900:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(17 24 39 / var(--tw-bg-opacity)); } +.dark\:bg-gray-900\/80:is(.dark *) { + background-color: rgb(17 24 39 / 0.8); +} + +.dark\:bg-purple-800:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(85 33 181 / var(--tw-bg-opacity)); +} + +.dark\:text-blue-500:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(63 131 248 / var(--tw-text-opacity)); +} + +.dark\:text-gray-400:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(156 163 175 / var(--tw-text-opacity)); +} + +.dark\:text-gray-500:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); +} + .dark\:text-slate-400:is(.dark *) { --tw-text-opacity: 1; color: rgb(148 163 184 / var(--tw-text-opacity)); @@ -1690,12 +2685,57 @@ th label { .dark\:hover\:bg-blue-700:hover:is(.dark *) { --tw-bg-opacity: 1; - background-color: rgb(29 78 216 / var(--tw-bg-opacity)); + background-color: rgb(26 86 219 / var(--tw-bg-opacity)); +} + +.dark\:hover\:bg-gray-600:hover:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(75 85 99 / var(--tw-bg-opacity)); +} + +.dark\:hover\:bg-gray-700:hover:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(55 65 81 / var(--tw-bg-opacity)); +} + +.dark\:hover\:bg-gray-800:hover:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(31 41 55 / var(--tw-bg-opacity)); +} + +.dark\:hover\:bg-red-700:hover:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(200 30 30 / var(--tw-bg-opacity)); +} + +.dark\:hover\:text-blue-500:hover:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(63 131 248 / var(--tw-text-opacity)); +} + +.dark\:hover\:text-gray-300:hover:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(209 213 219 / var(--tw-text-opacity)); +} + +.dark\:hover\:text-white:hover:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +.dark\:focus\:text-white:focus:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +.dark\:focus\:ring-blue-500:focus:is(.dark *) { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(63 131 248 / var(--tw-ring-opacity)); } .dark\:focus\:ring-blue-800:focus:is(.dark *) { --tw-ring-opacity: 1; - --tw-ring-color: rgb(30 64 175 / var(--tw-ring-opacity)); + --tw-ring-color: rgb(30 66 159 / var(--tw-ring-opacity)); } @media (min-width: 640px) { @@ -1777,4 +2817,13 @@ th label { .lg\:max-w-lg { max-width: 32rem; } +} + +.rtl\:rotate-180:where([dir="rtl"], [dir="rtl"] *) { + --tw-rotate: 180deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.rtl\:space-x-reverse:where([dir="rtl"], [dir="rtl"] *) > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 1; } \ No newline at end of file diff --git a/games/static/fonts/IBMPlexSansCondensed-Regular.woff2 b/games/static/fonts/IBMPlexSansCondensed-Regular.woff2 new file mode 100644 index 0000000..37be80e Binary files /dev/null and b/games/static/fonts/IBMPlexSansCondensed-Regular.woff2 differ diff --git a/games/static/fonts/IBMPlexSerif-Bold.woff2 b/games/static/fonts/IBMPlexSerif-Bold.woff2 new file mode 100644 index 0000000..2bc5622 Binary files /dev/null and b/games/static/fonts/IBMPlexSerif-Bold.woff2 differ diff --git a/games/templates/base.html b/games/templates/base.html index b5a9f1e..0e24d55 100644 --- a/games/templates/base.html +++ b/games/templates/base.html @@ -15,6 +15,7 @@ {% django_htmx_script %} + + + + \ No newline at end of file diff --git a/games/templates/view_game.html b/games/templates/view_game.html index 00fa2e5..5c3850c 100644 --- a/games/templates/view_game.html +++ b/games/templates/view_game.html @@ -6,22 +6,68 @@ {% load markdown_extras %} {% block content %}
-

- {{ game.name }} - {% url 'edit_game' game.id as edit_url %} - {% include 'components/edit_button.html' with edit_url=edit_url %} -

-

First Released: {{ game.year_released }}

-

- Playtime: - {{ hours_sum }} hours over {{ session_count }} sessions ({{ session_average_without_manual }}/session) -

-

- Played in: - {{ playrange }} -

-
-

+
+
+ + {{ game.name }} {{ game.year_released }} + {% #popover id="popover-year" %} + Original release year + {% /popover %} + +
+
+ + + + + {{ hours_sum }} + {% #popover id="popover-hours" %} + Total hours played + {% /popover %} + + + + + + {{ session_count }} + {% #popover id="popover-sessions" %} + Number of sessions + {% /popover %} + + + + + + {{ session_average_without_manual }} + {% #popover id="popover-average" %} + Average playtime per session + {% /popover %} + + + + + + {{ playrange }} + {% #popover id="popover-playrange" %} + Earliest and latest dates played + {% /popover %} + +
+ +
+ +

Editions ({{ edition_count }}) and Purchases ({{ purchase_count }})

{% endfor %} -

+

Sessions ({{ session_count }}) {% if latest_session_id %} diff --git a/games/urls.py b/games/urls.py index d65ab3b..7ea9411 100644 --- a/games/urls.py +++ b/games/urls.py @@ -15,6 +15,7 @@ urlpatterns = [ path("game/add", views.add_game, name="add_game"), path("game//edit", views.edit_game, name="edit_game"), path("game//view", views.view_game, name="view_game"), + path("game//delete", views.delete_game, name="delete_game"), path("platform/add", views.add_platform, name="add_platform"), path("platform//edit", views.edit_platform, name="edit_platform"), path("purchase/add", views.add_purchase, name="add_purchase"), diff --git a/games/views.py b/games/views.py index 89d6afa..bd2fb91 100644 --- a/games/views.py +++ b/games/views.py @@ -148,6 +148,13 @@ def edit_game(request, game_id=None): return render(request, "add.html", context) +@login_required +def delete_game(request, game_id=None): + game = get_object_or_404(Game, id=game_id) + game.delete() + return redirect("list_sessions") + + @login_required def view_game(request, game_id=None): game = Game.objects.get(id=game_id) diff --git a/package.json b/package.json index deb7d93..b83b477 100644 --- a/package.json +++ b/package.json @@ -5,5 +5,8 @@ "concurrently": "^8.2.2", "npm-check-updates": "^16.14.20", "tailwindcss": "^3.4.4" + }, + "dependencies": { + "flowbite": "^2.4.1" } } diff --git a/tailwind.config.js b/tailwind.config.js index 8047bc1..c141c1d 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,19 +1,21 @@ const defaultTheme = require('tailwindcss/defaultTheme') module.exports = { - darkMode: 'class', - content: ["./games/**/*.{html,js}"], - theme: { - extend: { - fontFamily: { - 'sans': ['IBM Plex Sans', ...defaultTheme.fontFamily.sans], - 'mono': ['IBM Plex Mono', ...defaultTheme.fontFamily.mono], - 'serif': ['IBM Plex Serif', ...defaultTheme.fontFamily.serif], - } - }, + darkMode: 'class', + content: ["./games/**/*.{html,js}", './node_modules/flowbite/**/*.js'], + theme: { + extend: { + fontFamily: { + 'sans': ['IBM Plex Sans', ...defaultTheme.fontFamily.sans], + 'mono': ['IBM Plex Mono', ...defaultTheme.fontFamily.mono], + 'serif': ['IBM Plex Serif', ...defaultTheme.fontFamily.serif], + 'condensed': ['IBM Plex Sans Condensed', ...defaultTheme.fontFamily.sans], + } }, - plugins: [ - require('@tailwindcss/typography'), - require('@tailwindcss/forms') - ], + }, + plugins: [ + require('@tailwindcss/typography'), + require('@tailwindcss/forms'), + require('flowbite/plugin') + ], }