diff --git a/Cargo.toml b/Cargo.toml index 7b24575..332a3e2 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -74,7 +74,7 @@ style-file = "style/output.css" # The assets-dir cannot have a sub directory with the same name/path as site-pkg-dir. # # Optional. Env: LEPTOS_ASSETS_DIR. -assets-dir = "public" +assets-dir = "/home/denis/wallpaper-gen-data" # The IP and port (ex: 127.0.0.1:3000) where the server serves the content. Use it in your server setup. site-addr = "0.0.0.0:3000" diff --git a/input.css b/input.css index fc71d4f..a9da63d 100644 --- a/input.css +++ b/input.css @@ -21,6 +21,29 @@ body { align-content: flex-start; } +.hosting { + @apply inline-flex items-center justify-between; + @apply w-full; + @apply p-2; + @apply text-gray-500; + @apply bg-white; + @apply border; + @apply border-gray-200; + @apply rounded-lg; + @apply cursor-pointer; + @apply dark:hover:text-gray-300; + @apply dark:border-gray-700; + @apply dark:peer-checked:text-blue-500; + @apply peer-checked:border-blue-600; + @apply peer-checked:text-blue-600; + @apply hover:text-gray-600; + @apply hover:bg-gray-100; + @apply dark:text-gray-400; + @apply dark:bg-gray-800; + @apply dark:hover:bg-gray-700; + @apply text-center; +} + .pic-outer { display: flex; justify-content: center; @@ -41,7 +64,7 @@ body { } .pic-inner:hover { - transform: scale(0.98); + transform: scale(0.99); } #info-button { @@ -73,6 +96,7 @@ body { /* The container
- needed to position the dropdown content */ .dropdown { position: relative; + width: 20px; } /* Dropdown Content (Hidden by Default) */ diff --git a/src/app.rs b/src/app.rs index 3d3e49b..63974bb 100644 --- a/src/app.rs +++ b/src/app.rs @@ -3,6 +3,7 @@ use cfg_if::*; use leptos::*; use leptos_meta::*; use leptos_router::*; +use serde::{Deserialize, Serialize}; cfg_if! { if #[cfg(feature="ssr")]{ @@ -48,14 +49,14 @@ pub fn App() -> impl IntoView { fn Home() -> impl IntoView { use leptos::html::Div; use leptos_use::*; - let (size, set_size) = create_signal(1.); + let (size, set_size) = create_signal(1); let (page, set_page) = create_signal(0); //let res = create_local_resource(page, get_pics2); - let (all, set_all) = create_signal(Vec::::new()); - let res = create_local_resource( - move || (page.get(), size.get()), - move |d| get_pics2(d.0, d.1), - ); + let (all, set_all) = create_signal(Vec::::new()); + let (search_string, set_search_string) = create_signal("".to_string()); + let res = create_local_resource(page, get_pics2); + let s_res = create_local_resource(search_string, get_pics); + let el = create_node_ref::
(); let _ = use_infinite_scroll_with_options( @@ -67,294 +68,220 @@ fn Home() -> impl IntoView { res.and_then(move |_| { set_all.update(|dat| dat.extend(res().unwrap().unwrap())); }); - /*if !res.loading().get() { - set_page.update(|page| *page += 1); - } else if res().is_some() { - set_all.update(|dat| dat.extend(res().unwrap().unwrap())); - // println!("{:?}", all().len()) - }*/ }, - UseInfiniteScrollOptions::default().distance(10.0), + UseInfiniteScrollOptions::default().distance(512.), ); view! { -

"Home"

-
- ().unwrap()); - } +
+
+
+ - prop:value=size - type="range" - min="0.5" - max="2" - step="0.5" - value="1" - /> + +

"Input is: " {search_string}

+
+
+
    +
  • + + + +
    • +
  • + + + +
    • +
  • + + + +
    • +
- - + +
-
-

{move || page()}

-
} } -use serde::{Deserialize, Serialize}; - #[derive(Debug, Clone, PartialEq, Serialize, Deserialize)] -pub struct PicStruct { - key: String, - width: i32, - height: i32, - url: String, -} - -#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)] -struct Wallpaper { +pub struct Wallpaper { file_name: String, info: String, date_added: String, - height: u64, - width: u64, + height: i32, + width: i32, path: String, thumbs: Vec, } - -#[derive(Debug, Serialize)] -struct Name<'a> { - first: &'a str, - last: &'a str, -} - -#[derive(Debug, Serialize)] -struct Person<'a> { - title: &'a str, - name: Name<'a>, - marketing: bool, -} - -#[derive(Debug, Serialize)] -struct Responsibility { - marketing: bool, -} - -#[derive(Debug, Deserialize)] -struct Record { - #[allow(dead_code)] - id: i32, -} - -use std::env; - -#[server(GetPics, "/api")] -pub async fn get_pics2(page: i32, size: f64) -> Result, ServerFnError> { - use image::GenericImageView; - use imageinfo::ImageInfo; - use std::fs; - use std::path::PathBuf; - +#[server(GetPicsSearch, "/api")] +pub async fn get_pics(search_string: String) -> Result, ServerFnError> { let query = " - SELECT * FROM wallpapers LIMIT 10; + DEFINE ANALYZER book_analyzer TOKENIZERS blank,class,punct FILTERS snowball(english); + DEFINE INDEX info_s ON wallpapers FIELDS info SEARCH ANALYZER book_analyzer BM25(1.2,0.75); + SELECT * + FROM wallpapers + WHERE info @0@ 'asdasd' + LIMIT 10; "; - let db = Surreal::new::("127.0.0.1:8000") .await .expect("Couldnt connect to db server"); + println!("{search_string:#?}"); + db.set("page", search_string) + .await + .expect("Couldnt set war"); // Select a specific namespace / database db.use_ns("test") .use_db("test") .await .expect("Couldnt find db"); - //let papers: Vec = db.select("wallpapers").await.expect("Err"); - //println!("{papers:#?}"); - let mut res = db.query(query).await?; - let pap: Vec = res.take(0)?; - println!("{pap:#?}"); + let mut res = db.query(query).await.expect("Something"); + let pap: Vec = res.take(0).expect("Something"); + //println!("{pap:#?}"); - let mut pics = Vec::new(); + Ok(pap) +} - let folder_path = "./public"; +#[server(GetPics, "/api")] +pub async fn get_pics2(page: i32) -> Result, ServerFnError> { + let query = " + SELECT * FROM wallpapers LIMIT 20 START $page; + "; - // Define the number of pictures per page - let pics_per_page = 10; + let db = Surreal::new::("127.0.0.1:8000") + .await + .expect("Couldnt connect to db server"); + println!("{page:#?}"); + db.set("page", page * 20).await.expect("Couldnt set war"); + // Select a specific namespace / database + db.use_ns("test") + .use_db("test") + .await + .expect("Couldnt find db"); - // Calculate the index to start from based on the page number - let start_index = (page) * pics_per_page; - let end_index = start_index + pics_per_page; + let mut res = db.query(query).await.expect("Something"); + let pap: Vec = res.take(0).expect("Something"); + //println!("{pap:#?}"); - // manage a vector with all the image paths - let mut image_file_paths = Vec::::new(); - for entry in fs::read_dir(folder_path)? { - let entry = entry?; - let file_path = entry.path(); - let file_name_str = file_path.file_name().unwrap_or_default().to_str().unwrap(); - if size == 0.5 { - //skip 1024 and 512 - if file_name_str.contains("512x512") || file_name_str.contains("1024x1024") { - continue; - } - } else if size == 1.0 { - if file_name_str.contains("256x256") || file_name_str.contains("1024x1024") { - println!("sdfasdf"); - continue; - } - } else if size == 1.5 { - if file_name_str.contains("256x256") || file_name_str.contains("512x512") { - continue; - } - } - image_file_paths.push(file_path.clone()); - } - - for (i, file_path) in image_file_paths.iter().enumerate() { - if file_path.is_file() { - if i < start_index as usize { - continue; - } - let file = std::fs::File::open(file_path)?; - let mut bufreader = std::io::BufReader::new(&file); - let exifreader = exif::Reader::new(); - let exif = exifreader.read_from_container(&mut bufreader)?; - for f in exif.fields() { - println!( - "{} {} {}", - f.tag, - f.ifd_num, - f.display_value().with_unit(&exif) - ); - } - let file_name = file_path.file_name().unwrap_or_default(); - let file_name_str = file_name.to_str().unwrap(); - // Check if the file has a supported image extension - if let Some(extension) = file_path.extension() { - if let Some(extension_str) = extension.to_str() { - if image::ImageFormat::from_extension(extension_str).is_some() { - // Process the image - let img = image::open(&file_path).expect("Failed to open image"); - let (x, y) = img.dimensions(); - - pics.push(PicStruct { - key: file_name_str.to_string(), // Could not be unique if two images were created at exactly - // the same time - width: x as i32, - height: y as i32, - url: file_name.to_string_lossy().into(), - }); - if i + 1 >= end_index as usize { - break; - } - } - } - } - } - } - - // Send different picture resolutions depending on selected size - // sizes 256 512 1024 - - // Iterate over the entries in the folder - /*for (index, entry) in fs::read_dir(folder_path) - .expect("Failed to read directory") - .enumerate() - { - if let Ok(entry) = entry { - if index < start_index as usize { - // Skip pictures before the start index - continue; - } - - let file_path = entry.path(); - let file_name = file_path.file_name().unwrap_or_default(); - let file_name_str = file_name.to_str().unwrap(); - // Skip the wrong sizes - if size == 0.5 { - //skip 1024 and 512 - if file_name_str.contains("512x512") || file_name_str.contains("1024x1024") { - continue; - } - } else if size == 1.0 { - if file_name_str.contains("256x256") || file_name_str.contains("1024x1024") { - continue; - } - } else if size == 1.5 { - if file_name_str.contains("256x256") || file_name_str.contains("512x512") { - continue; - } - } - - // Check if the entry is a file - if file_path.is_file() { - // Check if the file has a supported image extension - if let Some(extension) = file_path.extension() { - if let Some(extension_str) = extension.to_str() { - if image::ImageFormat::from_extension(extension_str).is_some() { - // Process the image - let img = image::open(&file_path).expect("Failed to open image"); - let (x, y) = img.dimensions(); - - pics.push(PicStruct { - key: file_name_str.to_string(), // Could not be unique if two images were created at exactly - // the same time - width: x as i32, - height: y as i32, - url: file_name.to_string_lossy().into(), - }); - - // Break if we have reached the end index - if index + 1 >= end_index as usize { - break; - } - } - } - } - } - } - }*/ - println!("{:#?}", pics); - - Ok(pics) + Ok(pap) } #[component] -fn Info(show: ReadSignal, set_show: WriteSignal) -> impl IntoView { +fn Info(show: ReadSignal, set_show: WriteSignal, wp: Wallpaper) -> impl IntoView { view! { -
- - -
-
+
+
+ + +
+
} } #[component] -fn Pic(width: i32, height: i32, url: String, scale: ReadSignal) -> impl IntoView { +fn Pic(url: String, size: i32, wp: Wallpaper) -> impl IntoView { let (showInfo, set_showInfo) = create_signal(false); + let mut w_url = url.clone(); + let ww_url = w_url.split_off(31); + let asd = &url.chars().position(|c| c == 'x').unwrap(); + let wh = &url[(asd - 3)..(asd + 4)]; + println!("{wh:#?}"); + + //let w: i32 = (&wh[..3]).parse().unwrap_or(333); + //let h: i32 = (&wh[4..]).parse().unwrap_or(333); + let w: i32 = 256 as i32 * (2 as i32).pow(size as u32); + let h: i32 = (&wh[4..]).parse().unwrap_or(333); view! {
-
+
@@ -364,12 +291,18 @@ fn Pic(width: i32, height: i32, url: String, scale: ReadSignal) -> impl Int 4:3
-
- + } } diff --git a/style/output.css b/style/output.css index 7e66f3a..dec72d1 100644 --- a/style/output.css +++ b/style/output.css @@ -22,7 +22,7 @@ ::before, ::after { - --tw-content: ""; + --tw-content: ''; } /* @@ -44,10 +44,9 @@ html, -moz-tab-size: 4; /* 3 */ -o-tab-size: 4; - 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, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */ font-feature-settings: normal; /* 5 */ @@ -90,7 +89,7 @@ Add the correct text decoration in Chrome, Edge, and Safari. abbr:where([title]) { -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; + text-decoration: underline dotted; } /* @@ -136,8 +135,7 @@ code, kbd, samp, pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, - "Liberation Mono", "Courier New", monospace; + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */ font-feature-settings: normal; /* 2 */ @@ -236,9 +234,9 @@ select { */ button, -[type="button"], -[type="reset"], -[type="submit"] { +[type='button'], +[type='reset'], +[type='submit'] { -webkit-appearance: button; /* 1 */ background-color: transparent; @@ -285,7 +283,7 @@ Correct the cursor style of increment and decrement buttons in Safari. 2. Correct the outline style in Safari. */ -[type="search"] { +[type='search'] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; @@ -378,8 +376,7 @@ textarea { 2. Set the default placeholder color to the user's configured gray 400 color. */ -input::-moz-placeholder, -textarea::-moz-placeholder { +input::-moz-placeholder, textarea::-moz-placeholder { opacity: 1; /* 1 */ color: #9ca3af; @@ -447,9 +444,7 @@ video { display: none; } -*, -::before, -::after { +*, ::before, ::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; @@ -549,26 +544,216 @@ video { --tw-backdrop-sepia: ; } +.pointer-events-none { + pointer-events: none; +} + +.absolute { + position: absolute; +} + .relative { position: relative; } +.-top-1 { + top: -0.25rem; +} + +.-top-1\.5 { + top: -0.375rem; +} + +.left-0 { + left: 0px; +} + +.m-3 { + margin: 0.75rem; +} + +.m-auto { + margin: auto; +} + +.block { + display: block; +} + +.flex { + display: flex; +} + +.grid { + display: grid; +} + +.hidden { + display: none; +} + +.h-10 { + height: 2.5rem; +} + +.h-full { + height: 100%; +} + +.min-h-\[100px\] { + min-height: 100px; +} + +.w-1\/3 { + width: 33.333333%; +} + +.w-72 { + width: 18rem; +} + +.w-96 { + width: 24rem; +} + .w-full { width: 100%; } +.min-w-\[200px\] { + min-width: 200px; +} + +.select-none { + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} + +.resize-none { + resize: none; +} + +.gap-3 { + gap: 0.75rem; +} + +.\!overflow-visible { + overflow: visible !important; +} + .overflow-y-auto { overflow-y: auto; } +.truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + .rounded { border-radius: 0.25rem; } +.rounded-\[7px\] { + border-radius: 7px; +} + +.border { + border-width: 1px; +} + +.border-b-4 { + border-bottom-width: 4px; +} + +.border-blue-700 { + --tw-border-opacity: 1; + border-color: rgb(29 78 216 / var(--tw-border-opacity)); +} + +.border-t-transparent { + border-top-color: transparent; +} + +.bg-blue-500 { + --tw-bg-opacity: 1; + background-color: rgb(59 130 246 / var(--tw-bg-opacity)); +} + +.bg-transparent { + background-color: transparent; +} + +.px-3 { + padding-left: 0.75rem; + padding-right: 0.75rem; +} + +.px-4 { + padding-left: 1rem; + padding-right: 1rem; +} + +.py-2 { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.py-2\.5 { + padding-top: 0.625rem; + padding-bottom: 0.625rem; +} + .text-center { text-align: center; } +.text-\[11px\] { + font-size: 11px; +} + +.text-sm { + font-size: 0.750rem; +} + +.font-bold { + font-weight: 700; +} + +.font-normal { + font-weight: 400; +} + +.leading-tight { + line-height: 1.25; +} + +.text-gray-500 { + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); +} + +.text-white { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +.outline { + outline-style: solid; +} + +.outline-0 { + outline-width: 0px; +} + +.transition-all { + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + * { font-family: Noto Sans Tai Tham; color: #eaf0f0; @@ -588,6 +773,72 @@ body { align-content: flex-start; } +.hosting { + display: inline-flex; + align-items: center; + justify-content: space-between; + width: 100%; + padding: 0.5rem; + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + border-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(229 231 235 / var(--tw-border-opacity)); + border-radius: 0.5rem; + cursor: pointer; +} + +@media (prefers-color-scheme: dark) { + .hosting:hover { + --tw-text-opacity: 1; + color: rgb(209 213 219 / var(--tw-text-opacity)); + } + + .hosting { + --tw-border-opacity: 1; + border-color: rgb(55 65 81 / var(--tw-border-opacity)); + } + + .peer:checked ~ .hosting { + --tw-text-opacity: 1; + color: rgb(59 130 246 / var(--tw-text-opacity)); + } +} + +.peer:checked ~ .hosting { + --tw-border-opacity: 1; + border-color: rgb(37 99 235 / var(--tw-border-opacity)); + --tw-text-opacity: 1; + color: rgb(37 99 235 / var(--tw-text-opacity)); +} + +.hosting:hover { + --tw-text-opacity: 1; + color: rgb(75 85 99 / var(--tw-text-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(243 244 246 / var(--tw-bg-opacity)); +} + +@media (prefers-color-scheme: dark) { + .hosting { + --tw-text-opacity: 1; + color: rgb(156 163 175 / var(--tw-text-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(31 41 55 / var(--tw-bg-opacity)); + } + + .hosting:hover { + --tw-bg-opacity: 1; + background-color: rgb(55 65 81 / var(--tw-bg-opacity)); + } +} + +.hosting { + text-align: center; +} + .pic-outer { display: flex; justify-content: center; @@ -603,13 +854,13 @@ body { #country { background-color: rgba(0, 0, 0, 0.61); -webkit-backdrop-filter: blur(5px); - backdrop-filter: blur(5px); + backdrop-filter: blur(5px); padding: 4px; margin: 5px; } .pic-inner:hover { - transform: scale(0.98); + transform: scale(0.99); } #info-button { @@ -634,7 +885,7 @@ body { position: absolute; background-color: rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: blur(5px); - backdrop-filter: blur(5px); + backdrop-filter: blur(5px); overflow: auto; z-index: 2; } @@ -643,7 +894,7 @@ body { .dropdown { position: relative; - width: 40px; + width: 20px; } /* Dropdown Content (Hidden by Default) */ @@ -655,7 +906,7 @@ body { border-radius: 0.25rem; background-color: rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: blur(5px); - backdrop-filter: blur(5px); + backdrop-filter: blur(5px); min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; @@ -682,7 +933,7 @@ body { .dropdown-content a:hover { background-color: rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: blur(10px); - backdrop-filter: blur(10px); + backdrop-filter: blur(10px); } /* Show the dropdown menu on hover */ @@ -690,3 +941,298 @@ body { .dropdown:hover .dropdown-content { display: block; } + +.before\:pointer-events-none::before { + content: var(--tw-content); + pointer-events: none; +} + +.before\:mr-1::before { + content: var(--tw-content); + margin-right: 0.25rem; +} + +.before\:mt-\[6\.5px\]::before { + content: var(--tw-content); + margin-top: 6.5px; +} + +.before\:box-border::before { + content: var(--tw-content); + box-sizing: border-box; +} + +.before\:block::before { + content: var(--tw-content); + display: block; +} + +.before\:h-1::before { + content: var(--tw-content); + height: 0.25rem; +} + +.before\:h-1\.5::before { + content: var(--tw-content); + height: 0.375rem; +} + +.before\:w-2::before { + content: var(--tw-content); + width: 0.5rem; +} + +.before\:w-2\.5::before { + content: var(--tw-content); + width: 0.625rem; +} + +.before\:rounded-tl-md::before { + content: var(--tw-content); + border-top-left-radius: 0.375rem; +} + +.before\:border-l::before { + content: var(--tw-content); + border-left-width: 1px; +} + +.before\:border-t::before { + content: var(--tw-content); + border-top-width: 1px; +} + +.before\:transition-all::before { + content: var(--tw-content); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.after\:pointer-events-none::after { + content: var(--tw-content); + pointer-events: none; +} + +.after\:ml-1::after { + content: var(--tw-content); + margin-left: 0.25rem; +} + +.after\:mt-\[6\.5px\]::after { + content: var(--tw-content); + margin-top: 6.5px; +} + +.after\:box-border::after { + content: var(--tw-content); + box-sizing: border-box; +} + +.after\:block::after { + content: var(--tw-content); + display: block; +} + +.after\:h-1::after { + content: var(--tw-content); + height: 0.25rem; +} + +.after\:h-1\.5::after { + content: var(--tw-content); + height: 0.375rem; +} + +.after\:w-2::after { + content: var(--tw-content); + width: 0.5rem; +} + +.after\:w-2\.5::after { + content: var(--tw-content); + width: 0.625rem; +} + +.after\:flex-grow::after { + content: var(--tw-content); + flex-grow: 1; +} + +.after\:rounded-tr-md::after { + content: var(--tw-content); + border-top-right-radius: 0.375rem; +} + +.after\:border-r::after { + content: var(--tw-content); + border-right-width: 1px; +} + +.after\:border-t::after { + content: var(--tw-content); + border-top-width: 1px; +} + +.after\:transition-all::after { + content: var(--tw-content); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.placeholder-shown\:border:-moz-placeholder-shown { + border-width: 1px; +} + +.placeholder-shown\:border:placeholder-shown { + border-width: 1px; +} + +.hover\:border-blue-500:hover { + --tw-border-opacity: 1; + border-color: rgb(59 130 246 / var(--tw-border-opacity)); +} + +.hover\:bg-blue-400:hover { + --tw-bg-opacity: 1; + background-color: rgb(96 165 250 / var(--tw-bg-opacity)); +} + +.focus\:border-2:focus { + border-width: 2px; +} + +.focus\:border-gray-900:focus { + --tw-border-opacity: 1; + border-color: rgb(17 24 39 / var(--tw-border-opacity)); +} + +.focus\:border-t-transparent:focus { + border-top-color: transparent; +} + +.focus\:outline-0:focus { + outline-width: 0px; +} + +.disabled\:resize-none:disabled { + resize: none; +} + +.disabled\:border-0:disabled { + border-width: 0px; +} + +.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:text-sm { + font-size: 0.750rem; +} + +.peer:placeholder-shown ~ .peer-placeholder-shown\:text-sm { + font-size: 0.750rem; +} + +.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:leading-\[3\.75\] { + line-height: 3.75; +} + +.peer:placeholder-shown ~ .peer-placeholder-shown\:leading-\[3\.75\] { + line-height: 3.75; +} + +.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:before\:border-transparent::before { + content: var(--tw-content); + border-color: transparent; +} + +.peer:placeholder-shown ~ .peer-placeholder-shown\:before\:border-transparent::before { + content: var(--tw-content); + border-color: transparent; +} + +.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:after\:border-transparent::after { + content: var(--tw-content); + border-color: transparent; +} + +.peer:placeholder-shown ~ .peer-placeholder-shown\:after\:border-transparent::after { + content: var(--tw-content); + border-color: transparent; +} + +.peer:focus ~ .peer-focus\:text-\[11px\] { + font-size: 11px; +} + +.peer:focus ~ .peer-focus\:leading-tight { + line-height: 1.25; +} + +.peer:focus ~ .peer-focus\:text-gray-900 { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + +.peer:focus ~ .peer-focus\:before\:border-l-2::before { + content: var(--tw-content); + border-left-width: 2px; +} + +.peer:focus ~ .peer-focus\:before\:border-t-2::before { + content: var(--tw-content); + border-top-width: 2px; +} + +.peer:focus ~ .peer-focus\:before\:\!border-gray-900::before { + content: var(--tw-content); + --tw-border-opacity: 1 !important; + border-color: rgb(17 24 39 / var(--tw-border-opacity)) !important; +} + +.peer:focus ~ .peer-focus\:before\:border-gray-900::before { + content: var(--tw-content); + --tw-border-opacity: 1; + border-color: rgb(17 24 39 / var(--tw-border-opacity)); +} + +.peer:focus ~ .peer-focus\:after\:border-r-2::after { + content: var(--tw-content); + border-right-width: 2px; +} + +.peer:focus ~ .peer-focus\:after\:border-t-2::after { + content: var(--tw-content); + border-top-width: 2px; +} + +.peer:focus ~ .peer-focus\:after\:\!border-gray-900::after { + content: var(--tw-content); + --tw-border-opacity: 1 !important; + border-color: rgb(17 24 39 / var(--tw-border-opacity)) !important; +} + +.peer:focus ~ .peer-focus\:after\:border-gray-900::after { + content: var(--tw-content); + --tw-border-opacity: 1; + border-color: rgb(17 24 39 / var(--tw-border-opacity)); +} + +.peer:disabled ~ .peer-disabled\:text-transparent { + color: transparent; +} + +.peer:disabled ~ .peer-disabled\:before\:border-transparent::before { + content: var(--tw-content); + border-color: transparent; +} + +.peer:disabled ~ .peer-disabled\:after\:border-transparent::after { + content: var(--tw-content); + border-color: transparent; +} + +@media (min-width: 768px) { + .md\:grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } +}