Skip to content

Commit 90f7672

Browse files
EduardoOliveiraEduardoOliveira
committed
some styles
1 parent 35ea90b commit 90f7672

File tree

2 files changed

+193
-7
lines changed

2 files changed

+193
-7
lines changed

‎frontend/public/index.css

+157
Original file line numberDiff line numberDiff line change
@@ -1148,6 +1148,18 @@ html {
11481148
}
11491149
}
11501150

1151+
.btn-outline.btn-primary:hover {
1152+
--tw-text-opacity: 1;
1153+
color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
1154+
}
1155+
1156+
@supports (color: color-mix(in oklab, black, black)) {
1157+
.btn-outline.btn-primary:hover {
1158+
background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
1159+
border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
1160+
}
1161+
}
1162+
11511163
.btn-disabled:hover,
11521164
.btn[disabled]:hover,
11531165
.btn:disabled:hover {
@@ -1195,6 +1207,60 @@ html {
11951207
display: none;
11961208
}
11971209

1210+
.file-input {
1211+
height: 3rem;
1212+
flex-shrink: 1;
1213+
padding-inline-end: 1rem;
1214+
font-size: 1rem;
1215+
line-height: 2;
1216+
line-height: 1.5rem;
1217+
overflow: hidden;
1218+
border-radius: var(--rounded-btn, 0.5rem);
1219+
border-width: 1px;
1220+
border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
1221+
--tw-border-opacity: 0;
1222+
--tw-bg-opacity: 1;
1223+
background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
1224+
}
1225+
1226+
.file-input::file-selector-button {
1227+
margin-inline-end: 1rem;
1228+
display: inline-flex;
1229+
height: 100%;
1230+
flex-shrink: 0;
1231+
cursor: pointer;
1232+
-webkit-user-select: none;
1233+
-moz-user-select: none;
1234+
user-select: none;
1235+
flex-wrap: wrap;
1236+
align-items: center;
1237+
justify-content: center;
1238+
padding-left: 1rem;
1239+
padding-right: 1rem;
1240+
text-align: center;
1241+
font-size: 0.875rem;
1242+
line-height: 1.25rem;
1243+
line-height: 1em;
1244+
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
1245+
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
1246+
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
1247+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1248+
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
1249+
transition-duration: 200ms;
1250+
border-style: solid;
1251+
--tw-border-opacity: 1;
1252+
border-color: var(--fallback-n,oklch(var(--n)/var(--tw-border-opacity)));
1253+
--tw-bg-opacity: 1;
1254+
background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
1255+
font-weight: 600;
1256+
text-transform: uppercase;
1257+
--tw-text-opacity: 1;
1258+
color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity)));
1259+
text-decoration-line: none;
1260+
border-width: var(--border-btn, 1px);
1261+
animation: button-pop var(--animation-btn, 0.25s) ease-out;
1262+
}
1263+
11981264
.footer {
11991265
display: grid;
12001266
width: 100%;
@@ -1223,6 +1289,11 @@ html {
12231289
}
12241290
}
12251291

1292+
.form-control {
1293+
display: flex;
1294+
flex-direction: column;
1295+
}
1296+
12261297
.label {
12271298
display: flex;
12281299
-webkit-user-select: none;
@@ -1684,6 +1755,17 @@ input.tab:checked + .tab-content,
16841755
background-color: var(--btn-color, var(--fallback-b2));
16851756
border-color: var(--btn-color, var(--fallback-b2));
16861757
}
1758+
1759+
.btn-primary {
1760+
--btn-color: var(--fallback-p);
1761+
}
1762+
}
1763+
1764+
@supports (color: color-mix(in oklab, black, black)) {
1765+
.btn-outline.btn-primary.btn-active {
1766+
background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
1767+
border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
1768+
}
16871769
}
16881770

16891771
.btn:focus-visible {
@@ -1692,6 +1774,18 @@ input.tab:checked + .tab-content,
16921774
outline-offset: 2px;
16931775
}
16941776

1777+
.btn-primary {
1778+
--tw-text-opacity: 1;
1779+
color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
1780+
outline-color: var(--fallback-p,oklch(var(--p)/1));
1781+
}
1782+
1783+
@supports (color: oklch(0% 0 0)) {
1784+
.btn-primary {
1785+
--btn-color: var(--p);
1786+
}
1787+
}
1788+
16951789
.btn.glass {
16961790
--tw-shadow: 0 0 #0000;
16971791
--tw-shadow-colored: 0 0 #0000;
@@ -1720,6 +1814,16 @@ input.tab:checked + .tab-content,
17201814
background-color: var(--fallback-bc,oklch(var(--bc)/0.2));
17211815
}
17221816

1817+
.btn-outline.btn-primary {
1818+
--tw-text-opacity: 1;
1819+
color: var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity)));
1820+
}
1821+
1822+
.btn-outline.btn-primary.btn-active {
1823+
--tw-text-opacity: 1;
1824+
color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
1825+
}
1826+
17231827
.btn.btn-disabled,
17241828
.btn[disabled],
17251829
.btn:disabled {
@@ -1866,6 +1970,46 @@ input.tab:checked + .tab-content,
18661970
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));
18671971
}
18681972

1973+
.file-input-bordered {
1974+
--tw-border-opacity: 0.2;
1975+
}
1976+
1977+
.file-input:focus {
1978+
outline-style: solid;
1979+
outline-width: 2px;
1980+
outline-offset: 2px;
1981+
outline-color: var(--fallback-bc,oklch(var(--bc)/0.2));
1982+
}
1983+
1984+
.file-input-disabled,
1985+
.file-input[disabled] {
1986+
cursor: not-allowed;
1987+
--tw-border-opacity: 1;
1988+
border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
1989+
--tw-bg-opacity: 1;
1990+
background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
1991+
--tw-text-opacity: 0.2;
1992+
}
1993+
1994+
.file-input-disabled::-moz-placeholder, .file-input[disabled]::-moz-placeholder {
1995+
color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity)));
1996+
--tw-placeholder-opacity: 0.2;
1997+
}
1998+
1999+
.file-input-disabled::placeholder,
2000+
.file-input[disabled]::placeholder {
2001+
color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity)));
2002+
--tw-placeholder-opacity: 0.2;
2003+
}
2004+
2005+
.file-input-disabled::file-selector-button, .file-input[disabled]::file-selector-button {
2006+
--tw-border-opacity: 0;
2007+
background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
2008+
--tw-bg-opacity: 0.2;
2009+
color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
2010+
--tw-text-opacity: 0.2;
2011+
}
2012+
18692013
.label-text {
18702014
font-size: 0.875rem;
18712015
line-height: 1.25rem;
@@ -2409,6 +2553,10 @@ input.tab:checked + .tab-content,
24092553
border-top-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
24102554
}
24112555

2556+
.textarea-bordered {
2557+
border-color: var(--fallback-bc,oklch(var(--bc)/0.2));
2558+
}
2559+
24122560
.textarea:focus {
24132561
box-shadow: none;
24142562
border-color: var(--fallback-bc,oklch(var(--bc)/0.2));
@@ -2658,6 +2806,15 @@ input.tab:checked + .tab-content,
26582806
--tab-padding: 0.5rem;
26592807
}
26602808

2809+
.textarea-sm {
2810+
padding-left: 0.75rem;
2811+
padding-right: 0.75rem;
2812+
padding-top: 0.25rem;
2813+
padding-bottom: 0.25rem;
2814+
font-size: 0.875rem;
2815+
line-height: 2rem;
2816+
}
2817+
26612818
.tooltip {
26622819
position: relative;
26632820
display: inline-block;

‎v2/library/web/comp/new.templ

+36-7
Original file line numberDiff line numberDiff line change
@@ -8,21 +8,50 @@ templ New(m *NewModel) {
88
hx-trigger="tab-new from:body"
99
hx-vals="js:{assetID:event.detail.assetID}"
1010
>
11+
<a class="btn btn-ghost text-xl">New Asset</a>
1112
if m!=nil {
1213
<form hx-post="/lib/new" hx-vals="unset">
13-
<h1>Import</h1>
14+
<h1>Import URLS</h1>
1415
<input name="mode" type="hidden" value="import"/>
1516
<input name="parentID" type="hidden" value={ m.ParentID }/>
16-
<textarea name="urls" class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring" rows="5"></textarea>
17-
<button class="btn btn-sm">Import</button>
17+
<textarea
18+
name="urls"
19+
class="textarea textarea-bordered textarea-sm w-full"
20+
></textarea>
21+
<button class="btn btn-sm btn-primary mt-1">Import</button>
1822
</form>
19-
<form hx-post="/lib/new" hx-vals="unset" enctype="multipart/form-data">
23+
<form
24+
class="mt-2"
25+
hx-post="/lib/new"
26+
hx-vals="unset"
27+
enctype="multipart/form-data"
28+
>
2029
<h1>New</h1>
2130
<input name="mode" type="hidden" value="upload"/>
2231
<input name="parentID" type="hidden" value={ m.ParentID }/>
23-
<input name="folder" type="text" class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"/>
24-
<input type="file" name="files" multiple class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"/>
25-
<button class="btn btn-sm">Save</button>
32+
<label class="form-control w-full">
33+
<div class="label">
34+
<span class="label-text">Folder</span>
35+
</div>
36+
<input
37+
name="folder"
38+
type="text"
39+
placeholder="Type here"
40+
class="input input-bordered w-full"
41+
/>
42+
</label>
43+
<label class="form-control w-full">
44+
<div class="label">
45+
<span class="label-text">Upload files</span>
46+
</div>
47+
<input
48+
type="file"
49+
name="files"
50+
multiple
51+
class="file-input file-input-bordered w-full"
52+
/>
53+
</label>
54+
<button class="btn btn-sm btn-primary mt-1">Save</button>
2655
</form>
2756
/*<form hx-post="/lib/new" hx-target="#asset-sidebar">
2857
<h1>Move Uploaded gcode</h1>

0 commit comments

Comments
 (0)