diff --git a/blueprints/users.py b/blueprints/users.py index 7bb4f5d..f3bdc1a 100644 --- a/blueprints/users.py +++ b/blueprints/users.py @@ -69,9 +69,19 @@ def user(uid: int): @UserController.route('/user//delete', methods=["POST", "GET"]) @login_required def delete_user(uid: int): - name = dbs.get_user(uid).nickname + user = dbs.get_user(uid) or abort(404) + name = user.nickname dbs.delete_user(uid) info(f"User {name} deleted by {current_user.nickname} (ID: {current_user.uid})") flash(f'Uživatel {name} smazán') - return redirect(url_for('index')) \ No newline at end of file + return redirect(url_for('index')) + +# TODO: Move this to separate Blueprint +# TODO: Don't forget to add type parameter for forwards compatibility +@UserController.route('/user//embed', methods=["GET"]) +def user_badge(uid: int): + user = dbs.get_user(uid) or abort(404) + stats = dbs.get_user_stats(uid) + last = dbs.get_last_translation(uid) + return render_template("partials/translator_badge.j2", user=user, stats=stats, last=last) \ No newline at end of file diff --git a/data/scp.db.bak b/data/scp.db.bak new file mode 100644 index 0000000..f63106c Binary files /dev/null and b/data/scp.db.bak differ diff --git a/db.py b/db.py index 8ded8e9..8d34ea5 100644 --- a/db.py +++ b/db.py @@ -340,6 +340,14 @@ def get_global_stats(self) -> StatisticsRow: query = "SELECT * FROM Statistics" data = self.__tryexec(query).fetchone() return StatisticsRow(*data) + + def get_last_translation(self, uid: int) -> t.Optional[Article]: + query = "SELECT * FROM Article WHERE idauthor=? AND is_original=FALSE ORDER BY added DESC, id DESC LIMIT 1" + data = (uid,) + row = self.__tryexec(query, data).fetchone() + if not row: + return None + return self.__make_article(row) def add_article(self, a: Article) -> int: query = "INSERT INTO Article (name, words, bonus, added, link, idauthor, is_original) VALUES (?, ?, ?, ?, ?, ?, ?)" diff --git a/scripts/build_badge_css.bat b/scripts/build_badge_css.bat new file mode 100644 index 0000000..99fb5f8 --- /dev/null +++ b/scripts/build_badge_css.bat @@ -0,0 +1 @@ +npx tailwindcss -c ./tailwind_badge_config.js -i ../static/css/src/badge.css -o ../static/css/badge.css --watch \ No newline at end of file diff --git a/scripts/tailwind_badge_config.js b/scripts/tailwind_badge_config.js new file mode 100644 index 0000000..6e04c95 --- /dev/null +++ b/scripts/tailwind_badge_config.js @@ -0,0 +1,8 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: ["../templates/partials/translator_badge.j2", "../models/user.py"], + corePlugins: { + preflight: false, // Disable the preflight / reset so that we don't break WikiDot's (or other sites) CSS + }, + plugins: [], +} \ No newline at end of file diff --git a/static/css/badge.css b/static/css/badge.css new file mode 100644 index 0000000..69f8cd7 --- /dev/null +++ b/static/css/badge.css @@ -0,0 +1,374 @@ +@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&display=swap'); + +*, ::before, ::after{ + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop{ + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.static{ + position: static; +} + +.absolute{ + position: absolute; +} + +.relative{ + position: relative; +} + +.bottom-0{ + bottom: 0px; +} + +.right-1{ + right: 0.25rem; +} + +.top-0{ + top: 0px; +} + +.right-0{ + right: 0px; +} + +.m-0{ + margin: 0px; +} + +.mt-1{ + margin-top: 0.25rem; +} + +.mr-5{ + margin-right: 1.25rem; +} + +.block{ + display: block; +} + +.inline{ + display: inline; +} + +.flex{ + display: flex; +} + +.h-24{ + height: 6rem; +} + +.h-full{ + height: 100%; +} + +.flex-1{ + flex: 1 1 0%; +} + +.flex-row{ + flex-direction: row; +} + +.flex-col{ + flex-direction: column; +} + +.items-center{ + align-items: center; +} + +.justify-start{ + justify-content: flex-start; +} + +.rounded-lg{ + border-radius: 0.5rem; +} + +.rounded-xl{ + border-radius: 0.75rem; +} + +.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-tr-lg{ + border-top-right-radius: 0.5rem; +} + +.rounded-bl-lg{ + border-bottom-left-radius: 0.5rem; +} + +.border{ + border-width: 1px; +} + +.border-solid{ + border-style: solid; +} + +.border-white{ + --tw-border-opacity: 1; + border-color: rgb(255 255 255 / var(--tw-border-opacity)); +} + +.bg-black{ + --tw-bg-opacity: 1; + background-color: rgb(0 0 0 / var(--tw-bg-opacity)); +} + +.bg-gradient-to-r{ + background-image: linear-gradient(to right, var(--tw-gradient-stops)); +} + +.from-gray-400{ + --tw-gradient-from: #9ca3af; + --tw-gradient-to: rgb(156 163 175 / 0); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-sky-400{ + --tw-gradient-from: #38bdf8; + --tw-gradient-to: rgb(56 189 248 / 0); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-fuchsia-600{ + --tw-gradient-from: #c026d3; + --tw-gradient-to: rgb(192 38 211 / 0); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-pink-500{ + --tw-gradient-from: #ec4899; + --tw-gradient-to: rgb(236 72 153 / 0); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-gray-700{ + --tw-gradient-from: #374151; + --tw-gradient-to: rgb(55 65 81 / 0); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-slate-900{ + --tw-gradient-from: #0f172a; + --tw-gradient-to: rgb(15 23 42 / 0); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.via-red-500{ + --tw-gradient-to: rgb(239 68 68 / 0); + --tw-gradient-stops: var(--tw-gradient-from), #ef4444, var(--tw-gradient-to); +} + +.via-gray-900{ + --tw-gradient-to: rgb(17 24 39 / 0); + --tw-gradient-stops: var(--tw-gradient-from), #111827, var(--tw-gradient-to); +} + +.via-purple-900{ + --tw-gradient-to: rgb(88 28 135 / 0); + --tw-gradient-stops: var(--tw-gradient-from), #581c87, var(--tw-gradient-to); +} + +.to-gray-600{ + --tw-gradient-to: #4b5563; +} + +.to-blue-500{ + --tw-gradient-to: #3b82f6; +} + +.to-pink-600{ + --tw-gradient-to: #db2777; +} + +.to-yellow-500{ + --tw-gradient-to: #eab308; +} + +.to-black{ + --tw-gradient-to: #000; +} + +.to-slate-900{ + --tw-gradient-to: #0f172a; +} + +.p-2{ + padding: 0.5rem; +} + +.pl-4{ + padding-left: 1rem; +} + +.text-xl{ + font-size: 1.25rem; + line-height: 1.75rem; +} + +.text-xs{ + font-size: 0.75rem; + line-height: 1rem; +} + +.text-sm{ + font-size: 0.875rem; + line-height: 1.25rem; +} + +.font-bold{ + font-weight: 700; +} + +.font-semibold{ + font-weight: 600; +} + +.text-white{ + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +.no-underline{ + text-decoration-line: none; +} + +.opacity-50{ + opacity: 0.5; +} + +.opacity-40{ + opacity: 0.4; +} + +.opacity-25{ + opacity: 0.25; +} + +.transition-opacity{ + transition-property: opacity; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +html, body { + font-family: 'IBM Plex Sans'; +} + +.gradient-background { + background: linear-gradient(15deg,#a71bb9,#000000,#9f1239); + background-size: 150% 150%; + animation: gradient-animation 6s ease infinite; +} + +.hover\:opacity-75:hover{ + opacity: 0.75; +} + +.hover\:opacity-100:hover{ + opacity: 1; +} \ No newline at end of file diff --git a/static/css/src/badge.css b/static/css/src/badge.css new file mode 100644 index 0000000..3045540 --- /dev/null +++ b/static/css/src/badge.css @@ -0,0 +1,14 @@ +@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&display=swap'); +@tailwind base; +@tailwind components; +@tailwind utilities; + +html, body { + font-family: 'IBM Plex Sans'; +} + +.gradient-background { + background: linear-gradient(15deg,#a71bb9,#000000,#9f1239); + background-size: 150% 150%; + animation: gradient-animation 6s ease infinite; + } \ No newline at end of file diff --git a/static/css/style.css b/static/css/style.css index 0dadc55..b47ff5d 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -1,115 +1,7 @@ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&display=swap'); -*, ::before, ::after{ - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; - --tw-contain-size: ; - --tw-contain-layout: ; - --tw-contain-paint: ; - --tw-contain-style: ; -} - -::backdrop{ - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; - --tw-contain-size: ; - --tw-contain-layout: ; - --tw-contain-paint: ; - --tw-contain-style: ; -} - /* -! tailwindcss v3.4.13 | MIT License | https://tailwindcss.com +! tailwindcss v3.2.4 | MIT License | https://tailwindcss.com */ /* @@ -141,12 +33,9 @@ 3. Use a more readable tab size. 4. Use the user's configured `sans` font-family by default. 5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -7. Disable tap highlights on iOS */ -html, -:host { +html { line-height: 1.5; /* 1 */ -webkit-text-size-adjust: 100%; @@ -156,14 +45,10 @@ html, -o-tab-size: 4; tab-size: 4; /* 3 */ - font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */ font-feature-settings: normal; /* 5 */ - font-variation-settings: normal; - /* 6 */ - -webkit-tap-highlight-color: transparent; - /* 7 */ } /* @@ -235,10 +120,8 @@ strong { } /* -1. Use the user's configured `mono` font-family by default. -2. Use the user's configured `mono` font-feature-settings by default. -3. Use the user's configured `mono` font-variation-settings by default. -4. Correct the odd `em` font sizing in all browsers. +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. */ code, @@ -247,12 +130,8 @@ samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */ - font-feature-settings: normal; - /* 2 */ - font-variation-settings: normal; - /* 3 */ font-size: 1em; - /* 4 */ + /* 2 */ } /* @@ -311,18 +190,12 @@ select, textarea { font-family: inherit; /* 1 */ - font-feature-settings: inherit; - /* 1 */ - font-variation-settings: inherit; - /* 1 */ font-size: 100%; /* 1 */ font-weight: inherit; /* 1 */ line-height: inherit; /* 1 */ - letter-spacing: inherit; - /* 1 */ color: inherit; /* 1 */ margin: 0; @@ -346,9 +219,9 @@ select { */ button, -input:where([type='button']), -input:where([type='reset']), -input:where([type='submit']) { +[type='button'], +[type='reset'], +[type='submit'] { -webkit-appearance: button; /* 1 */ background-color: transparent; @@ -467,14 +340,6 @@ menu { padding: 0; } -/* -Reset default styling for dialogs. -*/ - -dialog { - padding: 0; -} - /* Prevent resizing textareas horizontally by default. */ @@ -556,6 +421,100 @@ video { display: none; } +*, ::before, ::after{ + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop{ + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + .container{ width: 100%; } @@ -806,7 +765,7 @@ video { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); --tw-backdrop-blur: blur(4px); -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); - backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } @media (min-width: 768px){ @@ -829,7 +788,7 @@ video { justify-content: center; --tw-backdrop-blur: blur(4px); -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); - backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); height: 100%; width: 100%; } @@ -900,26 +859,26 @@ video { position: relative; } -.bottom-0{ - bottom: 0px; +.top-0{ + top: 0px; } .left-0{ left: 0px; } -.left-5{ - left: 1.25rem; -} - -.top-0{ - top: 0px; +.bottom-0{ + bottom: 0px; } .top-3{ top: 0.75rem; } +.left-5{ + left: 1.25rem; +} + .z-40{ z-index: 40; } @@ -932,19 +891,14 @@ video { margin: 0px; } -.mx-1{ - margin-left: 0.25rem; - margin-right: 0.25rem; -} - -.mx-10{ - margin-left: 2.5rem; - margin-right: 2.5rem; +.my-4{ + margin-top: 1rem; + margin-bottom: 1rem; } -.mx-2{ - margin-left: 0.5rem; - margin-right: 0.5rem; +.my-5{ + margin-top: 1.25rem; + margin-bottom: 1.25rem; } .mx-auto{ @@ -952,9 +906,9 @@ video { margin-right: auto; } -.my-1{ - margin-top: 0.25rem; - margin-bottom: 0.25rem; +.my-6{ + margin-top: 1.5rem; + margin-bottom: 1.5rem; } .my-2{ @@ -962,84 +916,89 @@ video { margin-bottom: 0.5rem; } +.mx-10{ + margin-left: 2.5rem; + margin-right: 2.5rem; +} + +.my-1{ + margin-top: 0.25rem; + margin-bottom: 0.25rem; +} + .my-3{ margin-top: 0.75rem; margin-bottom: 0.75rem; } -.my-4{ - margin-top: 1rem; - margin-bottom: 1rem; -} - -.my-5{ - margin-top: 1.25rem; - margin-bottom: 1.25rem; +.mx-1{ + margin-left: 0.25rem; + margin-right: 0.25rem; } -.my-6{ - margin-top: 1.5rem; - margin-bottom: 1.5rem; +.mx-2{ + margin-left: 0.5rem; + margin-right: 0.5rem; } -.mb-10{ - margin-bottom: 2.5rem; +.mb-4{ + margin-bottom: 1rem; } -.mb-2{ - margin-bottom: 0.5rem; +.mb-6{ + margin-bottom: 1.5rem; +} + +.mr-2{ + margin-right: 0.5rem; } .mb-3{ margin-bottom: 0.75rem; } -.mb-4{ - margin-bottom: 1rem; +.mt-auto{ + margin-top: auto; } -.mb-6{ - margin-bottom: 1.5rem; +.mb-2{ + margin-bottom: 0.5rem; } -.mb-8{ - margin-bottom: 2rem; +.mr-6{ + margin-right: 1.5rem; } -.ml-3{ - margin-left: 0.75rem; +.mt-1{ + margin-top: 0.25rem; } -.mr-2{ - margin-right: 0.5rem; +.mt-4{ + margin-top: 1rem; } .mr-4{ margin-right: 1rem; } -.mr-6{ - margin-right: 1.5rem; +.mb-8{ + margin-bottom: 2rem; } -.mt-1{ - margin-top: 0.25rem; +.ml-3{ + margin-left: 0.75rem; } -.mt-16{ - margin-top: 4rem; +.mb-10{ + margin-bottom: 2.5rem; } .mt-2{ margin-top: 0.5rem; } -.mt-4{ - margin-top: 1rem; -} - -.mt-auto{ - margin-top: auto; +.mt-16{ + margin-top: 4rem; } .block{ @@ -1078,48 +1037,52 @@ video { display: none; } +.h-full{ + height: 100%; +} + .h-10{ height: 2.5rem; } -.h-12{ - height: 3rem; +.h-auto{ + height: auto; } .h-2{ height: 0.5rem; } -.h-8{ - height: 2rem; +.h-screen{ + height: 100vh; } -.h-auto{ - height: auto; +.h-12{ + height: 3rem; } -.h-full{ - height: 100%; +.h-8{ + height: 2rem; } -.h-screen{ - height: 100vh; +.h-48{ + height: 12rem; } .max-h-48{ max-height: 12rem; } -.w-36{ - width: 9rem; +.max-h-64{ + max-height: 16rem; } -.w-64{ - width: 16rem; +.w-full{ + width: 100%; } -.w-8{ - width: 2rem; +.w-64{ + width: 16rem; } .w-\[90\%\]{ @@ -1130,22 +1093,22 @@ video { width: auto; } -.w-fit{ - width: -moz-fit-content; - width: fit-content; +.w-min{ + width: -moz-min-content; + width: min-content; } -.w-full{ - width: 100%; +.w-36{ + width: 9rem; } -.w-min{ - width: -moz-min-content; - width: min-content; +.w-8{ + width: 2rem; } -.min-w-56{ - min-width: 14rem; +.w-fit{ + width: -moz-fit-content; + width: fit-content; } .min-w-\[12em\]{ @@ -1171,6 +1134,22 @@ video { 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)); } +@keyframes fadeout{ + 0%{ + opacity: 1; + transform: translateY(0); + } + + 100%{ + opacity: 0; + transform: translateY(10em); + } +} + +.animate-fadeout{ + animation: fadeout 1s ease-in-out; +} + @keyframes fadein{ 0%{ opacity: 0; @@ -1191,20 +1170,18 @@ video { animation: fadein 1s ease-in-out; } -@keyframes fadeout{ +@keyframes timeout{ 0%{ - opacity: 1; - transform: translateY(0); + width: 100%; } 100%{ - opacity: 0; - transform: translateY(10em); + width: 0%; } } -.animate-fadeout{ - animation: fadeout 1s ease-in-out; +.animate-timeout{ + animation: timeout 5s linear; } @keyframes pulse{ @@ -1217,20 +1194,6 @@ video { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } -@keyframes timeout{ - 0%{ - width: 100%; - } - - 100%{ - width: 0%; - } -} - -.animate-timeout{ - animation: timeout 5s linear; -} - .cursor-pointer{ cursor: pointer; } @@ -1291,20 +1254,20 @@ video { justify-content: space-around; } -.gap-1{ - gap: 0.25rem; -} - .gap-2{ gap: 0.5rem; } +.gap-4{ + gap: 1rem; +} + .gap-3{ gap: 0.75rem; } -.gap-4{ - gap: 1rem; +.gap-1{ + gap: 0.25rem; } .gap-6{ @@ -1323,64 +1286,55 @@ video { overflow: hidden; } +.rounded-md{ + border-radius: 0.375rem; +} + .rounded-2xl{ border-radius: 1rem; } -.rounded-\[50\%\]{ - border-radius: 50%; +.rounded-xl{ + border-radius: 0.75rem; } .rounded-full{ border-radius: 9999px; } -.rounded-lg{ - border-radius: 0.5rem; +.rounded-\[50\%\]{ + border-radius: 50%; } -.rounded-md{ - border-radius: 0.375rem; +.rounded-lg{ + border-radius: 0.5rem; } -.rounded-xl{ - border-radius: 0.75rem; +.border-2{ + border-width: 2px; } .border{ border-width: 1px; } -.border-2{ - border-width: 2px; -} - .border-b-2{ border-bottom-width: 2px; } -.border-black{ - --tw-border-opacity: 1; - border-color: rgb(0 0 0 / var(--tw-border-opacity)); -} - .border-green-500{ --tw-border-opacity: 1; border-color: rgb(34 197 94 / var(--tw-border-opacity)); } -.border-green-800{ - --tw-border-opacity: 1; - border-color: rgb(22 101 52 / var(--tw-border-opacity)); -} - .border-purple-600{ --tw-border-opacity: 1; border-color: rgb(147 51 234 / var(--tw-border-opacity)); } -.border-red-500\/40{ - border-color: rgb(239 68 68 / 0.4); +.border-yellow-400{ + --tw-border-opacity: 1; + border-color: rgb(250 204 21 / var(--tw-border-opacity)); } .border-red-600{ @@ -1388,19 +1342,14 @@ video { border-color: rgb(220 38 38 / var(--tw-border-opacity)); } -.border-red-900{ - --tw-border-opacity: 1; - border-color: rgb(127 29 29 / var(--tw-border-opacity)); -} - .border-rose-500{ --tw-border-opacity: 1; border-color: rgb(244 63 94 / var(--tw-border-opacity)); } -.border-slate-400{ +.border-white{ --tw-border-opacity: 1; - border-color: rgb(148 163 184 / var(--tw-border-opacity)); + border-color: rgb(255 255 255 / var(--tw-border-opacity)); } .border-slate-900{ @@ -1408,36 +1357,41 @@ video { border-color: rgb(15 23 42 / var(--tw-border-opacity)); } -.border-white{ +.border-black{ --tw-border-opacity: 1; - border-color: rgb(255 255 255 / var(--tw-border-opacity)); + border-color: rgb(0 0 0 / var(--tw-border-opacity)); +} + +.border-slate-400{ + --tw-border-opacity: 1; + border-color: rgb(148 163 184 / var(--tw-border-opacity)); } .border-white\/20{ border-color: rgb(255 255 255 / 0.2); } -.border-yellow-400{ +.border-green-800{ --tw-border-opacity: 1; - border-color: rgb(250 204 21 / var(--tw-border-opacity)); + border-color: rgb(22 101 52 / var(--tw-border-opacity)); } -.border-opacity-20{ - --tw-border-opacity: 0.2; +.border-red-900{ + --tw-border-opacity: 1; + border-color: rgb(127 29 29 / var(--tw-border-opacity)); } -.bg-black{ - --tw-bg-opacity: 1; - background-color: rgb(0 0 0 / var(--tw-bg-opacity)); +.border-red-500\/40{ + border-color: rgb(239 68 68 / 0.4); } -.bg-black\/30{ - background-color: rgb(0 0 0 / 0.3); +.border-opacity-20{ + --tw-border-opacity: 0.2; } -.bg-blue-600{ +.bg-green-600{ --tw-bg-opacity: 1; - background-color: rgb(37 99 235 / var(--tw-bg-opacity)); + background-color: rgb(22 163 74 / var(--tw-bg-opacity)); } .bg-gray-500{ @@ -1445,42 +1399,51 @@ video { background-color: rgb(107 114 128 / var(--tw-bg-opacity)); } -.bg-green-600{ - --tw-bg-opacity: 1; - background-color: rgb(22 163 74 / var(--tw-bg-opacity)); +.bg-white\/5{ + background-color: rgb(255 255 255 / 0.05); } -.bg-red-500\/10{ - background-color: rgb(239 68 68 / 0.1); +.bg-black{ + --tw-bg-opacity: 1; + background-color: rgb(0 0 0 / var(--tw-bg-opacity)); } .bg-transparent{ background-color: transparent; } +.bg-white\/75{ + background-color: rgb(255 255 255 / 0.75); +} + +.bg-black\/30{ + background-color: rgb(0 0 0 / 0.3); +} + .bg-white{ --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } -.bg-white\/10{ - background-color: rgb(255 255 255 / 0.1); -} - .bg-white\/20{ background-color: rgb(255 255 255 / 0.2); } -.bg-white\/30{ - background-color: rgb(255 255 255 / 0.3); +.bg-blue-600{ + --tw-bg-opacity: 1; + background-color: rgb(37 99 235 / var(--tw-bg-opacity)); } -.bg-white\/5{ - background-color: rgb(255 255 255 / 0.05); +.bg-red-500\/10{ + background-color: rgb(239 68 68 / 0.1); } -.bg-white\/75{ - background-color: rgb(255 255 255 / 0.75); +.bg-white\/10{ + background-color: rgb(255 255 255 / 0.1); +} + +.bg-white\/30{ + background-color: rgb(255 255 255 / 0.3); } .bg-opacity-20{ @@ -1499,100 +1462,95 @@ video { background-image: linear-gradient(to right, var(--tw-gradient-stops)); } -.from-fuchsia-600{ - --tw-gradient-from: #c026d3 var(--tw-gradient-from-position); - --tw-gradient-to: rgb(192 38 211 / 0) var(--tw-gradient-to-position); +.from-gray-400{ + --tw-gradient-from: #9ca3af; + --tw-gradient-to: rgb(156 163 175 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } -.from-gray-400{ - --tw-gradient-from: #9ca3af var(--tw-gradient-from-position); - --tw-gradient-to: rgb(156 163 175 / 0) var(--tw-gradient-to-position); +.from-sky-400{ + --tw-gradient-from: #38bdf8; + --tw-gradient-to: rgb(56 189 248 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } -.from-gray-700{ - --tw-gradient-from: #374151 var(--tw-gradient-from-position); - --tw-gradient-to: rgb(55 65 81 / 0) var(--tw-gradient-to-position); +.from-fuchsia-600{ + --tw-gradient-from: #c026d3; + --tw-gradient-to: rgb(192 38 211 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .from-pink-500{ - --tw-gradient-from: #ec4899 var(--tw-gradient-from-position); - --tw-gradient-to: rgb(236 72 153 / 0) var(--tw-gradient-to-position); + --tw-gradient-from: #ec4899; + --tw-gradient-to: rgb(236 72 153 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } -.from-sky-400{ - --tw-gradient-from: #38bdf8 var(--tw-gradient-from-position); - --tw-gradient-to: rgb(56 189 248 / 0) var(--tw-gradient-to-position); +.from-gray-700{ + --tw-gradient-from: #374151; + --tw-gradient-to: rgb(55 65 81 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .from-slate-900{ - --tw-gradient-from: #0f172a var(--tw-gradient-from-position); - --tw-gradient-to: rgb(15 23 42 / 0) var(--tw-gradient-to-position); + --tw-gradient-from: #0f172a; + --tw-gradient-to: rgb(15 23 42 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } -.via-gray-900{ - --tw-gradient-to: rgb(17 24 39 / 0) var(--tw-gradient-to-position); - --tw-gradient-stops: var(--tw-gradient-from), #111827 var(--tw-gradient-via-position), var(--tw-gradient-to); +.via-red-500{ + --tw-gradient-to: rgb(239 68 68 / 0); + --tw-gradient-stops: var(--tw-gradient-from), #ef4444, var(--tw-gradient-to); } -.via-purple-900{ - --tw-gradient-to: rgb(88 28 135 / 0) var(--tw-gradient-to-position); - --tw-gradient-stops: var(--tw-gradient-from), #581c87 var(--tw-gradient-via-position), var(--tw-gradient-to); +.via-gray-900{ + --tw-gradient-to: rgb(17 24 39 / 0); + --tw-gradient-stops: var(--tw-gradient-from), #111827, var(--tw-gradient-to); } -.via-red-500{ - --tw-gradient-to: rgb(239 68 68 / 0) var(--tw-gradient-to-position); - --tw-gradient-stops: var(--tw-gradient-from), #ef4444 var(--tw-gradient-via-position), var(--tw-gradient-to); +.via-purple-900{ + --tw-gradient-to: rgb(88 28 135 / 0); + --tw-gradient-stops: var(--tw-gradient-from), #581c87, var(--tw-gradient-to); } -.to-black{ - --tw-gradient-to: #000 var(--tw-gradient-to-position); +.to-gray-600{ + --tw-gradient-to: #4b5563; } .to-blue-500{ - --tw-gradient-to: #3b82f6 var(--tw-gradient-to-position); + --tw-gradient-to: #3b82f6; } -.to-gray-600{ - --tw-gradient-to: #4b5563 var(--tw-gradient-to-position); +.to-pink-600{ + --tw-gradient-to: #db2777; } -.to-pink-600{ - --tw-gradient-to: #db2777 var(--tw-gradient-to-position); +.to-yellow-500{ + --tw-gradient-to: #eab308; } -.to-slate-900{ - --tw-gradient-to: #0f172a var(--tw-gradient-to-position); +.to-black{ + --tw-gradient-to: #000; } -.to-yellow-500{ - --tw-gradient-to: #eab308 var(--tw-gradient-to-position); +.to-slate-900{ + --tw-gradient-to: #0f172a; } .p-10{ padding: 2.5rem; } -.p-2{ - padding: 0.5rem; -} - .p-4{ padding: 1rem; } -.p-6{ - padding: 1.5rem; +.p-2{ + padding: 0.5rem; } -.px-1{ - padding-left: 0.25rem; - padding-right: 0.25rem; +.p-6{ + padding: 1.5rem; } .px-10{ @@ -1600,24 +1558,29 @@ video { padding-right: 2.5rem; } -.px-16{ - padding-left: 4rem; - padding-right: 4rem; +.py-4{ + padding-top: 1rem; + padding-bottom: 1rem; } -.px-2{ - padding-left: 0.5rem; - padding-right: 0.5rem; +.px-3{ + padding-left: 0.75rem; + padding-right: 0.75rem; } -.px-24{ - padding-left: 6rem; - padding-right: 6rem; +.py-2{ + padding-top: 0.5rem; + padding-bottom: 0.5rem; } -.px-3{ - padding-left: 0.75rem; - padding-right: 0.75rem; +.py-8{ + padding-top: 2rem; + padding-bottom: 2rem; +} + +.px-2{ + padding-left: 0.5rem; + padding-right: 0.5rem; } .px-4{ @@ -1625,39 +1588,39 @@ video { padding-right: 1rem; } -.px-5{ - padding-left: 1.25rem; - padding-right: 1.25rem; -} - .py-1{ padding-top: 0.25rem; padding-bottom: 0.25rem; } -.py-10{ - padding-top: 2.5rem; - padding-bottom: 2.5rem; +.py-5{ + padding-top: 1.25rem; + padding-bottom: 1.25rem; } -.py-2{ - padding-top: 0.5rem; - padding-bottom: 0.5rem; +.px-1{ + padding-left: 0.25rem; + padding-right: 0.25rem; } -.py-4{ - padding-top: 1rem; - padding-bottom: 1rem; +.px-24{ + padding-left: 6rem; + padding-right: 6rem; } -.py-5{ - padding-top: 1.25rem; - padding-bottom: 1.25rem; +.px-5{ + padding-left: 1.25rem; + padding-right: 1.25rem; } -.py-8{ - padding-top: 2rem; - padding-bottom: 2rem; +.px-16{ + padding-left: 4rem; + padding-right: 4rem; +} + +.py-10{ + padding-top: 2.5rem; + padding-bottom: 2.5rem; } .pb-3{ @@ -1672,9 +1635,14 @@ video { text-align: center; } -.text-2xl{ - font-size: 1.5rem; - line-height: 2rem; +.text-4xl{ + font-size: 2.25rem; + line-height: 2.5rem; +} + +.text-lg{ + font-size: 1.125rem; + line-height: 1.75rem; } .text-3xl{ @@ -1682,18 +1650,13 @@ video { line-height: 2.25rem; } -.text-4xl{ - font-size: 2.25rem; - line-height: 2.5rem; -} - -.text-5xl{ - font-size: 3rem; - line-height: 1; +.text-2xl{ + font-size: 1.5rem; + line-height: 2rem; } -.text-lg{ - font-size: 1.125rem; +.text-xl{ + font-size: 1.25rem; line-height: 1.75rem; } @@ -1702,9 +1665,9 @@ video { line-height: 1.25rem; } -.text-xl{ - font-size: 1.25rem; - line-height: 1.75rem; +.text-5xl{ + font-size: 3rem; + line-height: 1; } .font-bold{ @@ -1723,29 +1686,29 @@ video { font-style: italic; } -.text-black{ +.text-slate-100{ --tw-text-opacity: 1; - color: rgb(0 0 0 / var(--tw-text-opacity)); + color: rgb(241 245 249 / var(--tw-text-opacity)); } -.text-gray-500{ +.text-white{ --tw-text-opacity: 1; - color: rgb(107 114 128 / var(--tw-text-opacity)); + color: rgb(255 255 255 / var(--tw-text-opacity)); } -.text-slate-100{ +.text-black{ --tw-text-opacity: 1; - color: rgb(241 245 249 / var(--tw-text-opacity)); + color: rgb(0 0 0 / var(--tw-text-opacity)); } -.text-slate-300{ +.text-gray-500{ --tw-text-opacity: 1; - color: rgb(203 213 225 / var(--tw-text-opacity)); + color: rgb(107 114 128 / var(--tw-text-opacity)); } -.text-white{ +.text-slate-300{ --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); + color: rgb(203 213 225 / var(--tw-text-opacity)); } .underline{ @@ -1760,6 +1723,10 @@ video { opacity: 0; } +.opacity-60{ + opacity: 0.6; +} + .opacity-40{ opacity: 0.4; } @@ -1768,27 +1735,23 @@ video { opacity: 0.5; } -.opacity-60{ - opacity: 0.6; +.opacity-90{ + opacity: 0.9; } .opacity-70{ opacity: 0.7; } -.opacity-90{ - opacity: 0.9; -} - .shadow-2xl{ --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); --tw-shadow-colored: 0 25px 50px -12px 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-inner{ - --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); - --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color); +.shadow-xl{ + --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } @@ -1798,9 +1761,9 @@ video { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.shadow-xl{ - --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); +.shadow-inner{ + --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); + --tw-shadow-colored: inset 0 2px 4px 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); } @@ -1818,22 +1781,22 @@ video { 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); } -.backdrop-blur-lg{ - --tw-backdrop-blur: blur(16px); +.backdrop-blur-sm{ + --tw-backdrop-blur: blur(4px); -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); - backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-blur-md{ --tw-backdrop-blur: blur(12px); -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); - backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } -.backdrop-blur-sm{ - --tw-backdrop-blur: blur(4px); +.backdrop-blur-lg{ + --tw-backdrop-blur: blur(16px); -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); - backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .transition-all{ @@ -1992,11 +1955,6 @@ td::before{ border-color: rgb(239 68 68 / var(--tw-border-opacity)); } -.hover\:bg-blue-500:hover{ - --tw-bg-opacity: 1; - background-color: rgb(59 130 246 / var(--tw-bg-opacity)); -} - .hover\:bg-green-500:hover{ --tw-bg-opacity: 1; background-color: rgb(34 197 94 / var(--tw-bg-opacity)); @@ -2014,6 +1972,11 @@ td::before{ background-color: rgb(255 255 255 / 0.3); } +.hover\:bg-blue-500:hover{ + --tw-bg-opacity: 1; + background-color: rgb(59 130 246 / var(--tw-bg-opacity)); +} + .hover\:text-blue-400:hover{ --tw-text-opacity: 1; color: rgb(96 165 250 / var(--tw-text-opacity)); @@ -2056,24 +2019,24 @@ td::before{ margin-bottom: 0.5rem; } - .md\:mb-0{ - margin-bottom: 0px; + .md\:mr-6{ + margin-right: 1.5rem; } - .md\:mb-8{ - margin-bottom: 2rem; + .md\:mt-4{ + margin-top: 1rem; } .md\:mr-4{ margin-right: 1rem; } - .md\:mr-6{ - margin-right: 1.5rem; + .md\:mb-0{ + margin-bottom: 0px; } - .md\:mt-4{ - margin-top: 1rem; + .md\:mb-8{ + margin-bottom: 2rem; } .md\:block{ @@ -2100,14 +2063,14 @@ td::before{ width: 9rem; } - .md\:w-64{ - width: 16rem; - } - .md\:w-auto{ width: auto; } + .md\:w-64{ + width: 16rem; + } + .md\:min-w-\[60\%\]{ min-width: 60%; } @@ -2144,10 +2107,6 @@ td::before{ background-color: rgb(255 255 255 / 0.05); } - .md\:p-10{ - padding: 2.5rem; - } - .md\:p-12{ padding: 3rem; } @@ -2160,6 +2119,10 @@ td::before{ padding: 1rem; } + .md\:p-10{ + padding: 2.5rem; + } + .md\:py-5{ padding-top: 1.25rem; padding-bottom: 1.25rem; diff --git a/templates/partials/translator_badge.j2 b/templates/partials/translator_badge.j2 new file mode 100644 index 0000000..c2bc961 --- /dev/null +++ b/templates/partials/translator_badge.j2 @@ -0,0 +1,15 @@ + + + + +
+ +
+

{{user.wikidot}}

+

{{stats.points}} Překladatelských bodů

+

{{stats.count}} Přeložených článků

+

Poslední překlad: {{last.name}}

+
+
{{get_user_role(stats.points)}}
+ Powered by SCUTTLE +
\ No newline at end of file