From cca6525790fac3a2b3538f85e3b18cc588dfd627 Mon Sep 17 00:00:00 2001 From: "[esekyi]" <[sskert10@gmail.com]> Date: Sun, 25 Aug 2024 02:54:35 +0000 Subject: [PATCH] =?UTF-8?q?[Static=F0=9F=9B=B0=EF=B8=8F]=20Tailwind=20css?= =?UTF-8?q?=20addition?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/static/css/output.css | 623 +++++++++++++++++++++++++++++++++++++- app/static/css/style.css | 5 +- tailwind.config.js | 34 ++- 3 files changed, 658 insertions(+), 4 deletions(-) diff --git a/app/static/css/output.css b/app/static/css/output.css index 144e92a..600ec17 100644 --- a/app/static/css/output.css +++ b/app/static/css/output.css @@ -1 +1,622 @@ -/*! tailwindcss v3.4.10 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:after,:before{--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:rgba(59,130,246,.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:rgba(59,130,246,.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: }.static{position:static}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.text-center{text-align:center}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-4xl{font-size:2.25rem;line-height:2.5rem}.font-black{font-weight:900}.text-emerald-600{--tw-text-opacity:1;color:rgb(5 150 105/var(--tw-text-opacity))} \ No newline at end of file +@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"); + + +/*! tailwindcss v3.4.10 | MIT License | https://tailwindcss.com*/ +*, +:after, +:before { + box-sizing: border-box; + border: 0 solid #e5e7eb +} + +:after, +:before { + --tw-content: "" +} + +:host, +html { + line-height: 1.5; + -webkit-text-size-adjust: 100%; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + font-family: Inter, ui-sans-serif, system-ui, sans-serif; + font-feature-settings: normal; + font-variation-settings: normal; + -webkit-tap-highlight-color: transparent +} + +body { + margin: 0; + line-height: inherit +} + +hr { + height: 0; + color: inherit; + border-top-width: 1px +} + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit +} + +a { + color: inherit; + text-decoration: inherit +} + +b, +strong { + font-weight: bolder +} + +code, +kbd, +pre, +samp { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; + font-feature-settings: normal; + font-variation-settings: normal; + font-size: 1em +} + +small { + font-size: 80% +} + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline +} + +sub { + bottom: -.25em +} + +sup { + top: -.5em +} + +table { + text-indent: 0; + border-color: inherit; + border-collapse: collapse +} + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + font-feature-settings: inherit; + font-variation-settings: inherit; + font-size: 100%; + font-weight: inherit; + line-height: inherit; + letter-spacing: inherit; + color: inherit; + margin: 0; + padding: 0 +} + +button, +select { + text-transform: none +} + +button, +input:where([type=button]), +input:where([type=reset]), +input:where([type=submit]) { + -webkit-appearance: button; + background-color: transparent; + background-image: none +} + +:-moz-focusring { + outline: auto +} + +:-moz-ui-invalid { + box-shadow: none +} + +progress { + vertical-align: baseline +} + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto +} + +[type=search] { + -webkit-appearance: textfield; + outline-offset: -2px +} + +::-webkit-search-decoration { + -webkit-appearance: none +} + +::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit +} + +summary { + display: list-item +} + +blockquote, +dd, +dl, +figure, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +p, +pre { + margin: 0 +} + +fieldset { + margin: 0 +} + +fieldset, +legend { + padding: 0 +} + +menu, +ol, +ul { + list-style: none; + margin: 0; + padding: 0 +} + +dialog { + padding: 0 +} + +textarea { + resize: vertical +} + +input::-moz-placeholder, +textarea::-moz-placeholder { + opacity: 1; + color: #9ca3af +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + color: #9ca3af +} + +[role=button], +button { + cursor: pointer +} + +:disabled { + cursor: default +} + +audio, +canvas, +embed, +iframe, +img, +object, +svg, +video { + display: block; + vertical-align: middle +} + +img, +video { + max-width: 100%; + height: auto +} + +[hidden] { + display: none +} + +*, +:after, +:before { + --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: rgba(59, 130, 246, .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: rgba(59, 130, 246, .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: +} + +.container { + width: 100% +} + +@media (min-width:640px) { + .container { + max-width: 640px + } +} + +@media (min-width:768px) { + .container { + max-width: 768px + } +} + +@media (min-width:1024px) { + .container { + max-width: 1024px + } +} + +@media (min-width:1280px) { + .container { + max-width: 1280px + } +} + +@media (min-width:1536px) { + .container { + max-width: 1536px + } +} + +.static { + position: static +} + +.mx-auto { + margin-left: auto; + margin-right: auto +} + +.mb-2 { + margin-bottom: .5rem +} + +.mb-4 { + margin-bottom: 1rem +} + +.mb-6 { + margin-bottom: 1.5rem +} + +.mb-8 { + margin-bottom: 2rem +} + +.ml-4 { + margin-left: 1rem +} + +.mr-6 { + margin-right: 1.5rem +} + +.mt-1 { + margin-top: .25rem +} + +.mt-8 { + margin-top: 2rem +} + +.block { + display: block +} + +.flex { + display: flex +} + +.min-h-screen { + min-height: 100vh +} + +.w-full { + width: 100% +} + +.max-w-md { + max-width: 28rem +} + +.flex-grow { + flex-grow: 1 +} + +.flex-col { + flex-direction: column +} + +.items-center { + align-items: center +} + +.justify-between { + justify-content: space-between +} + +.rounded { + border-radius: .25rem +} + +.border { + border-width: 1px +} + +.bg-background { + --tw-bg-opacity: 1; + background-color: rgb(247 255 247/var(--tw-bg-opacity)) +} + +.bg-error { + --tw-bg-opacity: 1; + background-color: rgb(255 107 107/var(--tw-bg-opacity)) +} + +.bg-info { + --tw-bg-opacity: 1; + background-color: rgb(33 150 243/var(--tw-bg-opacity)) +} + +.bg-primary { + --tw-bg-opacity: 1; + background-color: rgb(255 107 107/var(--tw-bg-opacity)) +} + +.bg-secondary { + --tw-bg-opacity: 1; + background-color: rgb(78 205 196/var(--tw-bg-opacity)) +} + +.bg-success { + --tw-bg-opacity: 1; + background-color: rgb(76 175 80/var(--tw-bg-opacity)) +} + +.bg-warning { + --tw-bg-opacity: 1; + background-color: rgb(255 152 0/var(--tw-bg-opacity)) +} + +.bg-white { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255/var(--tw-bg-opacity)) +} + +.p-2 { + padding: .5rem +} + +.p-4 { + padding: 1rem +} + +.p-8 { + padding: 2rem +} + +.px-4 { + padding-left: 1rem; + padding-right: 1rem +} + +.py-2 { + padding-top: .5rem; + padding-bottom: .5rem +} + +.py-4 { + padding-top: 1rem; + padding-bottom: 1rem +} + +.text-center { + text-align: center +} + +.font-sans { + font-family: Inter, ui-sans-serif, system-ui, sans-serif +} + +.text-2xl { + font-size: 1.5rem; + line-height: 2rem +} + +.text-3xl { + font-size: 1.875rem; + line-height: 2.25rem +} + +.text-4xl { + font-size: 2.25rem; + line-height: 2.5rem +} + +.text-lg { + font-size: 1.125rem; + line-height: 1.75rem +} + +.text-sm { + font-size: .875rem; + line-height: 1.25rem +} + +.font-bold { + font-weight: 700 +} + +.font-medium { + font-weight: 500 +} + +.font-semibold { + font-weight: 600 +} + +.text-primary { + --tw-text-opacity: 1; + color: rgb(255 107 107/var(--tw-text-opacity)) +} + +.text-text { + --tw-text-opacity: 1; + color: rgb(26 83 92/var(--tw-text-opacity)) +} + +.text-white { + --tw-text-opacity: 1; + color: rgb(255 255 255/var(--tw-text-opacity)) +} + +.shadow-md { + --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(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) +} + +.hover\:bg-primary-dark:hover { + --tw-bg-opacity: 1; + background-color: rgb(224 90 90/var(--tw-bg-opacity)) +} + +.hover\:text-accent:hover { + --tw-text-opacity: 1; + color: rgb(255 230 109/var(--tw-text-opacity)) +} \ No newline at end of file diff --git a/app/static/css/style.css b/app/static/css/style.css index bd6213e..7d6cb86 100644 --- a/app/static/css/style.css +++ b/app/static/css/style.css @@ -1,3 +1,6 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); + + @tailwind base; @tailwind components; -@tailwind utilities; \ No newline at end of file +@tailwind utilities; diff --git a/tailwind.config.js b/tailwind.config.js index cc6c6b1..309a281 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -5,7 +5,37 @@ module.exports = { "./app/static/**/*.js", ], theme: { - extend: {}, + extend: { + colors: { + success: '#4CAF50', // Green for success messages + info: '#2196F3', // Blue for info messages + warning: '#FF9800', // Orange for warning messages + primary: { + DEFAULT: '#FF6B6B', + dark: '#E05A5A', + }, + secondary: { + DEFAULT: '#4ECDC4', + dark: '#3DBCB3', + }, + background: '#F7FFF7', + text: '#1A535C', + accent: '#FFE66D', + error: '#FF6B6B', + }, + fontFamily: { + sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'], + }, + }, }, + safelist: [ + 'bg-success', + 'bg-info', + 'bg-warning', + 'bg-error', + 'bg-primary', + 'bg-secondary', + // add any other dynamic classes you might use + ], plugins: [], -} \ No newline at end of file +}