OpenWebUI/extension
1
0
Fork 0
mirror of https://github.com/open-webui/extension synced 2025-06-26 18:25:58 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: styling

Browse Source
This commit is contained in:
Timothy J. Baek 2024-05-22 21:42:21 -07:00
parent f8bf7465e0
commit e53bcb5202
4 changed files with 22 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
extension/src/App.jsx
View File

@ -2,7 +2,9 @@ import { SpotlightSearch } from "./components/SpotlightSearch";
function App() {
return (
<>
<SpotlightSearch />
<div className="extension-container">
<SpotlightSearch />
</div>
</>
);
}

18
extension/src/components/SpotlightSearch.jsx
View File

@ -37,22 +37,22 @@ export const SpotlightSearch = () => {
};
return open ? (
<div className="fixed top-0 right-0 left-0 bottom-0 w-full min-h-screen h-screen flex justify-center z-[9999999999] overflow-hidden overscroll-contain">
<div className=" m-auto max-w-xl w-full pb-32">
<div className="w-full flex flex-col justify-between py-2.5 px-3.5 rounded-2xl outline outline-1 outline-gray-900 backdrop-blur-3xl bg-gray-850/70 shadow-4xl modal-animation">
<div className="tlwd-fixed tlwd-top-0 tlwd-right-0 tlwd-left-0 tlwd-bottom-0 tlwd-w-full tlwd-min-h-screen tlwd-h-screen tlwd-flex tlwd-justify-center tlwd-z-[9999999999] tlwd-overflow-hidden tlwd-overscroll-contain">
<div className=" tlwd-m-auto tlwd-max-w-xl tlwd-w-full tlwd-pb-32">
<div className="tlwd-w-full tlwd-flex tlwd-flex-col tlwd-justify-between tlwd-py-2.5 tlwd-px-3.5 tlwd-rounded-2xl tlwd-outline tlwd-outline-1 tlwd-outline-gray-850 tlwd-backdrop-blur-3xl tlwd-bg-gray-850/70 shadow-4xl modal-animation">
<form
className="text-gray-200 w-full p-0 m-0"
className="tlwd-text-gray-200 tlwd-w-full tlwd-p-0 tlwd-m-0"
onSubmit={submitHandler}
>
<div className="flex items-center gap-2 w-full">
<div>
<div className="tlwd-flex tlwd-items-center tlwd-gap-2 tlwd-w-full">
<div className=" tlwd-flex tlwd-items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={2.5}
stroke="currentColor"
className="size-5"
className="tlwd-size-5"
>
<path
strokeLinecap="round"
@ -64,14 +64,14 @@ export const SpotlightSearch = () => {
<input
id="open-webui-search-input"
placeholder="Search Open WebUI"
className="text-xl w-full font-medium bg-transparent border-none placeholder:text-gray-500 text-neutral-100 outline-none"
className="tlwd-p-0 tlwd-m-0 tlwd-text-xl tlwd-w-full tlwd-font-medium tlwd-bg-transparent tlwd-border-none placeholder:tlwd-text-gray-500 tlwd-text-neutral-100 tlwd-outline-none"
value={searchValue}
onChange={(e) => setSearchValue(e.target.value)}
autoComplete="off"
/>
</div>
<p className="text-right text-[0.7rem] text-neutral-300">
<p className="tlwd-text-right tlwd-text-[0.7rem] tlwd-p-0 tlwd-m-0 tlwd-text-neutral-300">
Press ⌘Space+Shift to toggle
</p>
</form>

13
extension/src/index.css
View File

@ -1,15 +1,12 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind screens;
@layer base {
html,
pre {
font-family: -apple-system, ui-sans-serif, system-ui, "Segoe UI", Roboto,
Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Noto Color Emoji";
}
.extension-container {
font-family: -apple-system, ui-sans-serif, system-ui, "Segoe UI", Roboto,
Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.shadow-3xl {

5
extension/tailwind.config.js
View File

@ -22,4 +22,9 @@ export default {
},
},
plugins: [],
important: "#extension-app",
prefix: "tlwd-",
corePlugins: {
preflight: false,
},
};