Compare commits
No commits in common. 'TabBarDesign' and 'main' have entirely different histories.
TabBarDesi
...
main
23 changed files with 1 additions and 5709 deletions
@ -1,18 +0,0 @@ |
|||||||
module.exports = { |
|
||||||
root: true, |
|
||||||
env: { browser: true, es2020: true }, |
|
||||||
extends: [ |
|
||||||
'eslint:recommended', |
|
||||||
'plugin:@typescript-eslint/recommended', |
|
||||||
'plugin:react-hooks/recommended', |
|
||||||
], |
|
||||||
ignorePatterns: ['dist', '.eslintrc.cjs'], |
|
||||||
parser: '@typescript-eslint/parser', |
|
||||||
plugins: ['react-refresh'], |
|
||||||
rules: { |
|
||||||
'react-refresh/only-export-components': [ |
|
||||||
'warn', |
|
||||||
{ allowConstantExport: true }, |
|
||||||
], |
|
||||||
}, |
|
||||||
} |
|
||||||
@ -1,24 +0,0 @@ |
|||||||
# Logs |
|
||||||
logs |
|
||||||
*.log |
|
||||||
npm-debug.log* |
|
||||||
yarn-debug.log* |
|
||||||
yarn-error.log* |
|
||||||
pnpm-debug.log* |
|
||||||
lerna-debug.log* |
|
||||||
|
|
||||||
node_modules |
|
||||||
dist |
|
||||||
dist-ssr |
|
||||||
*.local |
|
||||||
|
|
||||||
# Editor directories and files |
|
||||||
.vscode/* |
|
||||||
!.vscode/extensions.json |
|
||||||
.idea |
|
||||||
.DS_Store |
|
||||||
*.suo |
|
||||||
*.ntvs* |
|
||||||
*.njsproj |
|
||||||
*.sln |
|
||||||
*.sw? |
|
||||||
@ -1,12 +0,0 @@ |
|||||||
<!doctype html> |
|
||||||
<html lang="en"> |
|
||||||
<head> |
|
||||||
<meta charset="UTF-8" /> |
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> |
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|
||||||
</head> |
|
||||||
<body> |
|
||||||
<div id="root"></div> |
|
||||||
<script type="module" src="/src/main.tsx"></script> |
|
||||||
</body> |
|
||||||
</html> |
|
||||||
File diff suppressed because it is too large
Load Diff
@ -1,33 +0,0 @@ |
|||||||
{ |
|
||||||
"name": "my-react-app", |
|
||||||
"private": true, |
|
||||||
"version": "0.0.0", |
|
||||||
"type": "module", |
|
||||||
"scripts": { |
|
||||||
"dev": "vite", |
|
||||||
"build": "tsc -b && vite build", |
|
||||||
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", |
|
||||||
"preview": "vite preview" |
|
||||||
}, |
|
||||||
"dependencies": { |
|
||||||
"react": "^18.3.1", |
|
||||||
"react-dom": "^18.3.1", |
|
||||||
"react-router-dom": "^6.24.0" |
|
||||||
}, |
|
||||||
"devDependencies": { |
|
||||||
"@types/react": "^18.3.3", |
|
||||||
"@types/react-dom": "^18.3.0", |
|
||||||
"@typescript-eslint/eslint-plugin": "^7.13.1", |
|
||||||
"@typescript-eslint/parser": "^7.13.1", |
|
||||||
"@vitejs/plugin-react": "^4.3.1", |
|
||||||
"autoprefixer": "^10.4.19", |
|
||||||
"daisyui": "^4.12.10", |
|
||||||
"eslint": "^8.57.0", |
|
||||||
"eslint-plugin-react-hooks": "^4.6.2", |
|
||||||
"eslint-plugin-react-refresh": "^0.4.7", |
|
||||||
"postcss": "^8.4.38", |
|
||||||
"tailwindcss": "^3.4.4", |
|
||||||
"typescript": "^5.2.2", |
|
||||||
"vite": "^5.3.1" |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,6 +0,0 @@ |
|||||||
export default { |
|
||||||
plugins: { |
|
||||||
tailwindcss: {}, |
|
||||||
autoprefixer: {}, |
|
||||||
}, |
|
||||||
} |
|
||||||
|
Before Width: | Height: | Size: 1.5 KiB |
@ -1,69 +0,0 @@ |
|||||||
@tailwind base; |
|
||||||
@tailwind components; |
|
||||||
@tailwind utilities; |
|
||||||
|
|
||||||
|
|
||||||
.rtl{ |
|
||||||
direction: rtl !important; |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
.ltr{ |
|
||||||
direction: ltr !important; |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
:root { |
|
||||||
--tab-bg: gray; |
|
||||||
--tab-border-color: gray; |
|
||||||
--color: white; |
|
||||||
} |
|
||||||
|
|
||||||
#root { |
|
||||||
max-width: 1280px; |
|
||||||
margin: 0 auto; |
|
||||||
padding: 2rem; |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
|
|
||||||
.logo { |
|
||||||
height: 6em; |
|
||||||
padding: 1.5em; |
|
||||||
will-change: filter; |
|
||||||
transition: filter 300ms; |
|
||||||
} |
|
||||||
.logo:hover { |
|
||||||
filter: drop-shadow(0 0 2em #646cffaa); |
|
||||||
} |
|
||||||
.logo.react:hover { |
|
||||||
filter: drop-shadow(0 0 2em #61dafbaa); |
|
||||||
} |
|
||||||
|
|
||||||
@keyframes logo-spin { |
|
||||||
from { |
|
||||||
transform: rotate(0deg); |
|
||||||
} |
|
||||||
to { |
|
||||||
transform: rotate(360deg); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@media (prefers-reduced-motion: no-preference) { |
|
||||||
a:nth-of-type(2) .logo { |
|
||||||
animation: logo-spin infinite 20s linear; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.card { |
|
||||||
padding: 2em; |
|
||||||
} |
|
||||||
|
|
||||||
.read-the-docs { |
|
||||||
color: #888; |
|
||||||
} |
|
||||||
|
|
||||||
#root { |
|
||||||
width: 100%; |
|
||||||
padding: 0; |
|
||||||
margin: 0; |
|
||||||
} |
|
||||||
@ -1,13 +0,0 @@ |
|||||||
import './App.css' |
|
||||||
import TabBar from './components/TabBar' |
|
||||||
|
|
||||||
function App() { |
|
||||||
|
|
||||||
return ( |
|
||||||
<> |
|
||||||
<TabBar /> |
|
||||||
</> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
export default App |
|
||||||
|
Before Width: | Height: | Size: 4.0 KiB |
@ -1,27 +0,0 @@ |
|||||||
import React from "react"; |
|
||||||
|
|
||||||
interface Props { |
|
||||||
name: string; |
|
||||||
} |
|
||||||
|
|
||||||
const Tab: React.FC<Props> = ({ }) => { |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return( |
|
||||||
<div className="w-2/12 min-h-10 bg-yellow-300 flex flex-row-reverse rounded-md"> |
|
||||||
{/* sample tab */} |
|
||||||
<div className='w-11/12 p-auto py-1/2'> |
|
||||||
<p className="h-full text-right pr-4 pt-2">تب شماره 1</p> |
|
||||||
</div> |
|
||||||
<button key={1} className="relative top-0 left-2 rounded-full my-3"></button> |
|
||||||
{/* <div className='w-2/12 h-full p-0 pl-1'> |
|
||||||
<button className=""></button> |
|
||||||
</div> */} |
|
||||||
</div> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
export default Tab; |
|
||||||
|
|
||||||
// ×
|
|
||||||
@ -1,104 +0,0 @@ |
|||||||
import React, { useState } from "react"; |
|
||||||
|
|
||||||
const TabBar: React.FC = () => { |
|
||||||
|
|
||||||
const [tabs, setTabs] = useState([ |
|
||||||
{ title: "تب 1", url: "/question", props: {}, states: {} }, |
|
||||||
{ title: "تب 2", url: "/question", props: {}, states: {} }, |
|
||||||
{ title: "تب 3", url: "/question", props: {}, states: {} }, |
|
||||||
{ title: "تب 4", url: "/question", props: {}, states: {} }, |
|
||||||
|
|
||||||
]); |
|
||||||
const [activeTab, setActiveTab]: [number, Function] = useState(0); |
|
||||||
|
|
||||||
const handleTabClick = (index: number) => { |
|
||||||
setActiveTab(index); |
|
||||||
}; |
|
||||||
|
|
||||||
const newTab = () => { |
|
||||||
let x = [...tabs]; |
|
||||||
x.push({ title: "تب "+ (+tabs.length+1), url: "/question", props: {}, states: {} }); |
|
||||||
setActiveTab(x.length-1); |
|
||||||
setTabs(x); |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
const handleTabClose = (index: number,e: any) => { |
|
||||||
e.preventDefault(); |
|
||||||
|
|
||||||
let x = [...tabs]; |
|
||||||
x.splice(index, 1); |
|
||||||
setTabs(x); |
|
||||||
if (index === activeTab && activeTab === tabs.length) setActiveTab(x.length - 1); |
|
||||||
else if (activeTab > index) setActiveTab(activeTab - 1) |
|
||||||
e.stopPropagation() |
|
||||||
}; |
|
||||||
let revtabs = [...tabs].reverse(); |
|
||||||
return ( |
|
||||||
<div className="w-full fixed top-0 rtl bg-gray-800"> |
|
||||||
<div role="tablist" className="tabs ltr flex justify-end tabs-lifted pt-1 px-1"> |
|
||||||
<a role="tab"> <div className="btn my-1 btn-xs btn-ghost" onClick={()=> newTab()}>+</div></a> |
|
||||||
{revtabs.map((tab, i) => { |
|
||||||
let index = revtabs.length-i-1; |
|
||||||
return ( |
|
||||||
<a |
|
||||||
role="tab" |
|
||||||
key={index} |
|
||||||
|
|
||||||
className={`tab rtl w-40 min-w-12 ${ |
|
||||||
activeTab === index |
|
||||||
? "tab-active text-primary [--tab-bg:gray] " |
|
||||||
: "" |
|
||||||
} [--tab-padding:1px] [--tab-border-color:gray]`}
|
|
||||||
onClick={() => handleTabClick(index)}> |
|
||||||
<div className={`w-full px-2 py-0.5`} > |
|
||||||
<div className={`${ activeTab === index ? "":"hover:bg-slate-700 transition-all"} flex justify-between w-full rounded-lg px-1 `}> |
|
||||||
<span className="pr-1 text-white truncate" title={tab.title} >{tab.title}</span> |
|
||||||
|
|
||||||
<div className="btn my-1 btn-xs btn-ghost" onClick={(e)=> handleTabClose(index,e)}>x</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</a> |
|
||||||
); |
|
||||||
})} |
|
||||||
|
|
||||||
<div className="flex justify-end align-bottom absolute top-2 left-0"> |
|
||||||
<div className="w-8 h-8 bg-red-500 rounded-md mx-2"> |
|
||||||
<a className="w-full h-full" href="###" ></a> |
|
||||||
</div> |
|
||||||
<div className="w-8 h-8 bg-red-500 rounded-md mx-2"> |
|
||||||
<a className="w-full h-full" href="###"></a> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
|
|
||||||
<div className="dropdown rtl " role="tab"> |
|
||||||
<div tabIndex={0} role="button" className="btn my-1 btn-xs btn-neutral mx-2 rotate-180">^</div> |
|
||||||
<ul tabIndex={0} className="dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow"> |
|
||||||
{tabs.map((tab) => { |
|
||||||
return ( |
|
||||||
<li><a className="text-gray-50 no-underline">{tab.title}</a></li>); |
|
||||||
})} |
|
||||||
</ul> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div className="breadcrumbs w-full text-sm bg-slate-800 !text-white"> |
|
||||||
<ul className="flex justify-end"> |
|
||||||
<li className="pr-2"> |
|
||||||
<a className="text-gray-50 no-underline"> |
|
||||||
تب 1 |
|
||||||
</a> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<a className="text-gray-50"> |
|
||||||
تب 2 |
|
||||||
</a> |
|
||||||
</li> |
|
||||||
</ul> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
export default TabBar; |
|
||||||
@ -1,68 +0,0 @@ |
|||||||
:root { |
|
||||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; |
|
||||||
line-height: 1.5; |
|
||||||
font-weight: 400; |
|
||||||
|
|
||||||
color-scheme: light dark; |
|
||||||
color: rgb(0, 0, 0); |
|
||||||
background-color: white; |
|
||||||
|
|
||||||
font-synthesis: none; |
|
||||||
text-rendering: optimizeLegibility; |
|
||||||
-webkit-font-smoothing: antialiased; |
|
||||||
-moz-osx-font-smoothing: grayscale; |
|
||||||
} |
|
||||||
|
|
||||||
a { |
|
||||||
font-weight: 500; |
|
||||||
color: #646cff; |
|
||||||
text-decoration: inherit; |
|
||||||
} |
|
||||||
a:hover { |
|
||||||
color: #535bf2; |
|
||||||
} |
|
||||||
|
|
||||||
body { |
|
||||||
margin: 0; |
|
||||||
display: flex; |
|
||||||
place-items: center; |
|
||||||
min-width: 320px; |
|
||||||
min-height: 100vh; |
|
||||||
} |
|
||||||
|
|
||||||
h1 { |
|
||||||
font-size: 3.2em; |
|
||||||
line-height: 1.1; |
|
||||||
} |
|
||||||
|
|
||||||
button { |
|
||||||
border-radius: 8px; |
|
||||||
border: 1px solid transparent; |
|
||||||
padding: 0.6em 1.2em; |
|
||||||
font-size: 1em; |
|
||||||
font-weight: 500; |
|
||||||
font-family: inherit; |
|
||||||
background-color: #1a1a1a; |
|
||||||
cursor: pointer; |
|
||||||
transition: border-color 0.25s; |
|
||||||
} |
|
||||||
button:hover { |
|
||||||
border-color: #646cff; |
|
||||||
} |
|
||||||
button:focus, |
|
||||||
button:focus-visible { |
|
||||||
outline: 4px auto -webkit-focus-ring-color; |
|
||||||
} |
|
||||||
|
|
||||||
@media (prefers-color-scheme: light) { |
|
||||||
:root { |
|
||||||
color: #213547; |
|
||||||
background-color: #ffffff; |
|
||||||
} |
|
||||||
a:hover { |
|
||||||
color: #747bff; |
|
||||||
} |
|
||||||
button { |
|
||||||
background-color: #f9f9f9; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,3 +0,0 @@ |
|||||||
@tailwind base; |
|
||||||
@tailwind components; |
|
||||||
@tailwind utilities; |
|
||||||
@ -1,10 +0,0 @@ |
|||||||
import React from 'react' |
|
||||||
import ReactDOM from 'react-dom/client' |
|
||||||
import App from './App.tsx' |
|
||||||
import './index.css' |
|
||||||
|
|
||||||
ReactDOM.createRoot(document.getElementById('root')!).render( |
|
||||||
<React.StrictMode> |
|
||||||
<App /> |
|
||||||
</React.StrictMode>, |
|
||||||
) |
|
||||||
@ -1,882 +0,0 @@ |
|||||||
/* |
|
||||||
! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com |
|
||||||
*/ |
|
||||||
|
|
||||||
/* |
|
||||||
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) |
|
||||||
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) |
|
||||||
*/ |
|
||||||
|
|
||||||
*, |
|
||||||
::before, |
|
||||||
::after { |
|
||||||
box-sizing: border-box; |
|
||||||
/* 1 */ |
|
||||||
border-width: 0; |
|
||||||
/* 2 */ |
|
||||||
border-style: solid; |
|
||||||
/* 2 */ |
|
||||||
border-color: #e5e7eb; |
|
||||||
/* 2 */ |
|
||||||
} |
|
||||||
|
|
||||||
::before, |
|
||||||
::after { |
|
||||||
--tw-content: ''; |
|
||||||
} |
|
||||||
|
|
||||||
/* |
|
||||||
1. Use a consistent sensible line-height in all browsers. |
|
||||||
2. Prevent adjustments of font size after orientation changes in iOS. |
|
||||||
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 { |
|
||||||
line-height: 1.5; |
|
||||||
/* 1 */ |
|
||||||
-webkit-text-size-adjust: 100%; |
|
||||||
/* 2 */ |
|
||||||
-moz-tab-size: 4; |
|
||||||
/* 3 */ |
|
||||||
-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"; |
|
||||||
/* 4 */ |
|
||||||
font-feature-settings: normal; |
|
||||||
/* 5 */ |
|
||||||
font-variation-settings: normal; |
|
||||||
/* 6 */ |
|
||||||
-webkit-tap-highlight-color: transparent; |
|
||||||
/* 7 */ |
|
||||||
} |
|
||||||
|
|
||||||
/* |
|
||||||
1. Remove the margin in all browsers. |
|
||||||
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. |
|
||||||
*/ |
|
||||||
|
|
||||||
body { |
|
||||||
margin: 0; |
|
||||||
/* 1 */ |
|
||||||
line-height: inherit; |
|
||||||
/* 2 */ |
|
||||||
} |
|
||||||
|
|
||||||
/* |
|
||||||
1. Add the correct height in Firefox. |
|
||||||
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) |
|
||||||
3. Ensure horizontal rules are visible by default. |
|
||||||
*/ |
|
||||||
|
|
||||||
hr { |
|
||||||
height: 0; |
|
||||||
/* 1 */ |
|
||||||
color: inherit; |
|
||||||
/* 2 */ |
|
||||||
border-top-width: 1px; |
|
||||||
/* 3 */ |
|
||||||
} |
|
||||||
|
|
||||||
/* |
|
||||||
Add the correct text decoration in Chrome, Edge, and Safari. |
|
||||||
*/ |
|
||||||
|
|
||||||
abbr:where([title]) { |
|
||||||
-webkit-text-decoration: underline dotted; |
|
||||||
text-decoration: underline dotted; |
|
||||||
} |
|
||||||
|
|
||||||
/* |
|
||||||
Remove the default font size and weight for headings. |
|
||||||
*/ |
|
||||||
|
|
||||||
h1, |
|
||||||
h2, |
|
||||||
h3, |
|
||||||
h4, |
|
||||||
h5, |
|
||||||
h6 { |
|
||||||
font-size: inherit; |
|
||||||
font-weight: inherit; |
|
||||||
} |
|
||||||
|
|
||||||
/* |
|
||||||
Reset links to optimize for opt-in styling instead of opt-out. |
|
||||||
*/ |
|
||||||
|
|
||||||
a { |
|
||||||
color: inherit; |
|
||||||
text-decoration: inherit; |
|
||||||
} |
|
||||||
|
|
||||||
/* |
|
||||||
Add the correct font weight in Edge and Safari. |
|
||||||
*/ |
|
||||||
|
|
||||||
b, |
|
||||||
strong { |
|
||||||
font-weight: bolder; |
|
||||||
} |
|
||||||
|
|
||||||
/* |
|
||||||
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. |
|
||||||
*/ |
|
||||||
|
|
||||||
code, |
|
||||||
kbd, |
|
||||||
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 */ |
|
||||||
} |
|
||||||
|
|
||||||
/* |
|
||||||
Add the correct font size in all browsers. |
|
||||||
*/ |
|
||||||
|
|
||||||
small { |
|
||||||
font-size: 80%; |
|
||||||
} |
|
||||||
|
|
||||||
/* |
|
||||||
Prevent `sub` and `sup` elements from affecting the line height in all browsers. |
|
||||||
*/ |
|
||||||
|
|
||||||
sub, |
|
||||||
sup { |
|
||||||
font-size: 75%; |
|
||||||
line-height: 0; |
|
||||||
position: relative; |
|
||||||
vertical-align: baseline; |
|
||||||
} |
|
||||||
|
|
||||||
sub { |
|
||||||
bottom: -0.25em; |
|
||||||
} |
|
||||||
|
|
||||||
sup { |
|
||||||
top: -0.5em; |
|
||||||
} |
|
||||||
|
|
||||||
/* |
|
||||||
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) |
|
||||||
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) |
|
||||||
3. Remove gaps between table borders by default. |
|
||||||
*/ |
|
||||||
|
|
||||||
table { |
|
||||||
text-indent: 0; |
|
||||||
/* 1 */ |
|
||||||
border-color: inherit; |
|
||||||
/* 2 */ |
|
||||||
border-collapse: collapse; |
|
||||||
/* 3 */ |
|
||||||
} |
|
||||||
|
|
||||||
/* |
|
||||||
1. Change the font styles in all browsers. |
|
||||||
2. Remove the margin in Firefox and Safari. |
|
||||||
3. Remove default padding in all browsers. |
|
||||||
*/ |
|
||||||
|
|
||||||
button, |
|
||||||
input, |
|
||||||
optgroup, |
|
||||||
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; |
|
||||||
/* 2 */ |
|
||||||
padding: 0; |
|
||||||
/* 3 */ |
|
||||||
} |
|
||||||
|
|
||||||
/* |
|
||||||
Remove the inheritance of text transform in Edge and Firefox. |
|
||||||
*/ |
|
||||||
|
|
||||||
button, |
|
||||||
select { |
|
||||||
text-transform: none; |
|
||||||
} |
|
||||||
|
|
||||||
/* |
|
||||||
1. Correct the inability to style clickable types in iOS and Safari. |
|
||||||
2. Remove default button styles. |
|
||||||
*/ |
|
||||||
|
|
||||||
button, |
|
||||||
input:where([type='button']), |
|
||||||
input:where([type='reset']), |
|
||||||
input:where([type='submit']) { |
|
||||||
-webkit-appearance: button; |
|
||||||
/* 1 */ |
|
||||||
background-color: transparent; |
|
||||||
/* 2 */ |
|
||||||
background-image: none; |
|
||||||
/* 2 */ |
|
||||||
} |
|
||||||
|
|
||||||
/* |
|
||||||
Use the modern Firefox focus style for all focusable elements. |
|
||||||
*/ |
|
||||||
|
|
||||||
:-moz-focusring { |
|
||||||
outline: auto; |
|
||||||
} |
|
||||||
|
|
||||||
/* |
|
||||||
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) |
|
||||||
*/ |
|
||||||
|
|
||||||
:-moz-ui-invalid { |
|
||||||
box-shadow: none; |
|
||||||
} |
|
||||||
|
|
||||||
/* |
|
||||||
Add the correct vertical alignment in Chrome and Firefox. |
|
||||||
*/ |
|
||||||
|
|
||||||
progress { |
|
||||||
vertical-align: baseline; |
|
||||||
} |
|
||||||
|
|
||||||
/* |
|
||||||
Correct the cursor style of increment and decrement buttons in Safari. |
|
||||||
*/ |
|
||||||
|
|
||||||
::-webkit-inner-spin-button, |
|
||||||
::-webkit-outer-spin-button { |
|
||||||
height: auto; |
|
||||||
} |
|
||||||
|
|
||||||
/* |
|
||||||
1. Correct the odd appearance in Chrome and Safari. |
|
||||||
2. Correct the outline style in Safari. |
|
||||||
*/ |
|
||||||
|
|
||||||
[type='search'] { |
|
||||||
-webkit-appearance: textfield; |
|
||||||
/* 1 */ |
|
||||||
outline-offset: -2px; |
|
||||||
/* 2 */ |
|
||||||
} |
|
||||||
|
|
||||||
/* |
|
||||||
Remove the inner padding in Chrome and Safari on macOS. |
|
||||||
*/ |
|
||||||
|
|
||||||
::-webkit-search-decoration { |
|
||||||
-webkit-appearance: none; |
|
||||||
} |
|
||||||
|
|
||||||
/* |
|
||||||
1. Correct the inability to style clickable types in iOS and Safari. |
|
||||||
2. Change font properties to `inherit` in Safari. |
|
||||||
*/ |
|
||||||
|
|
||||||
::-webkit-file-upload-button { |
|
||||||
-webkit-appearance: button; |
|
||||||
/* 1 */ |
|
||||||
font: inherit; |
|
||||||
/* 2 */ |
|
||||||
} |
|
||||||
|
|
||||||
/* |
|
||||||
Add the correct display in Chrome and Safari. |
|
||||||
*/ |
|
||||||
|
|
||||||
summary { |
|
||||||
display: list-item; |
|
||||||
} |
|
||||||
|
|
||||||
/* |
|
||||||
Removes the default spacing and border for appropriate elements. |
|
||||||
*/ |
|
||||||
|
|
||||||
blockquote, |
|
||||||
dl, |
|
||||||
dd, |
|
||||||
h1, |
|
||||||
h2, |
|
||||||
h3, |
|
||||||
h4, |
|
||||||
h5, |
|
||||||
h6, |
|
||||||
hr, |
|
||||||
figure, |
|
||||||
p, |
|
||||||
pre { |
|
||||||
margin: 0; |
|
||||||
} |
|
||||||
|
|
||||||
fieldset { |
|
||||||
margin: 0; |
|
||||||
padding: 0; |
|
||||||
} |
|
||||||
|
|
||||||
legend { |
|
||||||
padding: 0; |
|
||||||
} |
|
||||||
|
|
||||||
ol, |
|
||||||
ul, |
|
||||||
menu { |
|
||||||
list-style: none; |
|
||||||
margin: 0; |
|
||||||
padding: 0; |
|
||||||
} |
|
||||||
|
|
||||||
/* |
|
||||||
Reset default styling for dialogs. |
|
||||||
*/ |
|
||||||
|
|
||||||
dialog { |
|
||||||
padding: 0; |
|
||||||
} |
|
||||||
|
|
||||||
/* |
|
||||||
Prevent resizing textareas horizontally by default. |
|
||||||
*/ |
|
||||||
|
|
||||||
textarea { |
|
||||||
resize: vertical; |
|
||||||
} |
|
||||||
|
|
||||||
/* |
|
||||||
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) |
|
||||||
2. Set the default placeholder color to the user's configured gray 400 color. |
|
||||||
*/ |
|
||||||
|
|
||||||
input::-moz-placeholder, textarea::-moz-placeholder { |
|
||||||
opacity: 1; |
|
||||||
/* 1 */ |
|
||||||
color: #9ca3af; |
|
||||||
/* 2 */ |
|
||||||
} |
|
||||||
|
|
||||||
input::placeholder, |
|
||||||
textarea::placeholder { |
|
||||||
opacity: 1; |
|
||||||
/* 1 */ |
|
||||||
color: #9ca3af; |
|
||||||
/* 2 */ |
|
||||||
} |
|
||||||
|
|
||||||
/* |
|
||||||
Set the default cursor for buttons. |
|
||||||
*/ |
|
||||||
|
|
||||||
button, |
|
||||||
[role="button"] { |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
|
|
||||||
/* |
|
||||||
Make sure disabled buttons don't get the pointer cursor. |
|
||||||
*/ |
|
||||||
|
|
||||||
:disabled { |
|
||||||
cursor: default; |
|
||||||
} |
|
||||||
|
|
||||||
/* |
|
||||||
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) |
|
||||||
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) |
|
||||||
This can trigger a poorly considered lint error in some tools but is included by design. |
|
||||||
*/ |
|
||||||
|
|
||||||
img, |
|
||||||
svg, |
|
||||||
video, |
|
||||||
canvas, |
|
||||||
audio, |
|
||||||
iframe, |
|
||||||
embed, |
|
||||||
object { |
|
||||||
display: block; |
|
||||||
/* 1 */ |
|
||||||
vertical-align: middle; |
|
||||||
/* 2 */ |
|
||||||
} |
|
||||||
|
|
||||||
/* |
|
||||||
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) |
|
||||||
*/ |
|
||||||
|
|
||||||
img, |
|
||||||
video { |
|
||||||
max-width: 100%; |
|
||||||
height: auto; |
|
||||||
} |
|
||||||
|
|
||||||
/* Make elements with the HTML hidden attribute stay hidden by default */ |
|
||||||
|
|
||||||
[hidden] { |
|
||||||
display: none; |
|
||||||
} |
|
||||||
|
|
||||||
:root, |
|
||||||
[data-theme] { |
|
||||||
background-color: var(--fallback-b1,oklch(var(--b1)/1)); |
|
||||||
color: var(--fallback-bc,oklch(var(--bc)/1)); |
|
||||||
} |
|
||||||
|
|
||||||
@supports not (color: oklch(0% 0 0)) { |
|
||||||
:root { |
|
||||||
color-scheme: light; |
|
||||||
--fallback-p: #491eff; |
|
||||||
--fallback-pc: #d4dbff; |
|
||||||
--fallback-s: #ff41c7; |
|
||||||
--fallback-sc: #fff9fc; |
|
||||||
--fallback-a: #00cfbd; |
|
||||||
--fallback-ac: #00100d; |
|
||||||
--fallback-n: #2b3440; |
|
||||||
--fallback-nc: #d7dde4; |
|
||||||
--fallback-b1: #ffffff; |
|
||||||
--fallback-b2: #e5e6e6; |
|
||||||
--fallback-b3: #e5e6e6; |
|
||||||
--fallback-bc: #1f2937; |
|
||||||
--fallback-in: #00b3f0; |
|
||||||
--fallback-inc: #000000; |
|
||||||
--fallback-su: #00ca92; |
|
||||||
--fallback-suc: #000000; |
|
||||||
--fallback-wa: #ffc22d; |
|
||||||
--fallback-wac: #000000; |
|
||||||
--fallback-er: #ff6f70; |
|
||||||
--fallback-erc: #000000; |
|
||||||
} |
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) { |
|
||||||
:root { |
|
||||||
color-scheme: dark; |
|
||||||
--fallback-p: #7582ff; |
|
||||||
--fallback-pc: #050617; |
|
||||||
--fallback-s: #ff71cf; |
|
||||||
--fallback-sc: #190211; |
|
||||||
--fallback-a: #00c7b5; |
|
||||||
--fallback-ac: #000e0c; |
|
||||||
--fallback-n: #2a323c; |
|
||||||
--fallback-nc: #a6adbb; |
|
||||||
--fallback-b1: #1d232a; |
|
||||||
--fallback-b2: #191e24; |
|
||||||
--fallback-b3: #15191e; |
|
||||||
--fallback-bc: #a6adbb; |
|
||||||
--fallback-in: #00b3f0; |
|
||||||
--fallback-inc: #000000; |
|
||||||
--fallback-su: #00ca92; |
|
||||||
--fallback-suc: #000000; |
|
||||||
--fallback-wa: #ffc22d; |
|
||||||
--fallback-wac: #000000; |
|
||||||
--fallback-er: #ff6f70; |
|
||||||
--fallback-erc: #000000; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
html { |
|
||||||
-webkit-tap-highlight-color: transparent; |
|
||||||
} |
|
||||||
|
|
||||||
* { |
|
||||||
scrollbar-color: color-mix(in oklch, currentColor 35%, transparent) transparent; |
|
||||||
} |
|
||||||
|
|
||||||
*:hover { |
|
||||||
scrollbar-color: color-mix(in oklch, currentColor 60%, transparent) transparent; |
|
||||||
} |
|
||||||
|
|
||||||
:root { |
|
||||||
color-scheme: light; |
|
||||||
--in: 72.06% 0.191 231.6; |
|
||||||
--su: 64.8% 0.150 160; |
|
||||||
--wa: 84.71% 0.199 83.87; |
|
||||||
--er: 71.76% 0.221 22.18; |
|
||||||
--pc: 89.824% 0.06192 275.75; |
|
||||||
--ac: 15.352% 0.0368 183.61; |
|
||||||
--inc: 0% 0 0; |
|
||||||
--suc: 0% 0 0; |
|
||||||
--wac: 0% 0 0; |
|
||||||
--erc: 0% 0 0; |
|
||||||
--rounded-box: 1rem; |
|
||||||
--rounded-btn: 0.5rem; |
|
||||||
--rounded-badge: 1.9rem; |
|
||||||
--animation-btn: 0.25s; |
|
||||||
--animation-input: .2s; |
|
||||||
--btn-focus-scale: 0.95; |
|
||||||
--border-btn: 1px; |
|
||||||
--tab-border: 1px; |
|
||||||
--tab-radius: 0.5rem; |
|
||||||
--p: 49.12% 0.3096 275.75; |
|
||||||
--s: 69.71% 0.329 342.55; |
|
||||||
--sc: 98.71% 0.0106 342.55; |
|
||||||
--a: 76.76% 0.184 183.61; |
|
||||||
--n: 32.1785% 0.02476 255.701624; |
|
||||||
--nc: 89.4994% 0.011585 252.096176; |
|
||||||
--b1: 100% 0 0; |
|
||||||
--b2: 96.1151% 0 0; |
|
||||||
--b3: 92.4169% 0.00108 197.137559; |
|
||||||
--bc: 27.8078% 0.029596 256.847952; |
|
||||||
} |
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) { |
|
||||||
:root { |
|
||||||
color-scheme: dark; |
|
||||||
--in: 72.06% 0.191 231.6; |
|
||||||
--su: 64.8% 0.150 160; |
|
||||||
--wa: 84.71% 0.199 83.87; |
|
||||||
--er: 71.76% 0.221 22.18; |
|
||||||
--pc: 13.138% 0.0392 275.75; |
|
||||||
--sc: 14.96% 0.052 342.55; |
|
||||||
--ac: 14.902% 0.0334 183.61; |
|
||||||
--inc: 0% 0 0; |
|
||||||
--suc: 0% 0 0; |
|
||||||
--wac: 0% 0 0; |
|
||||||
--erc: 0% 0 0; |
|
||||||
--rounded-box: 1rem; |
|
||||||
--rounded-btn: 0.5rem; |
|
||||||
--rounded-badge: 1.9rem; |
|
||||||
--animation-btn: 0.25s; |
|
||||||
--animation-input: .2s; |
|
||||||
--btn-focus-scale: 0.95; |
|
||||||
--border-btn: 1px; |
|
||||||
--tab-border: 1px; |
|
||||||
--tab-radius: 0.5rem; |
|
||||||
--p: 65.69% 0.196 275.75; |
|
||||||
--s: 74.8% 0.26 342.55; |
|
||||||
--a: 74.51% 0.167 183.61; |
|
||||||
--n: 31.3815% 0.021108 254.139175; |
|
||||||
--nc: 74.6477% 0.0216 264.435964; |
|
||||||
--b1: 25.3267% 0.015896 252.417568; |
|
||||||
--b2: 23.2607% 0.013807 253.100675; |
|
||||||
--b3: 21.1484% 0.01165 254.087939; |
|
||||||
--bc: 74.6477% 0.0216 264.435964; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
[data-theme=light] { |
|
||||||
color-scheme: light; |
|
||||||
--in: 72.06% 0.191 231.6; |
|
||||||
--su: 64.8% 0.150 160; |
|
||||||
--wa: 84.71% 0.199 83.87; |
|
||||||
--er: 71.76% 0.221 22.18; |
|
||||||
--pc: 89.824% 0.06192 275.75; |
|
||||||
--ac: 15.352% 0.0368 183.61; |
|
||||||
--inc: 0% 0 0; |
|
||||||
--suc: 0% 0 0; |
|
||||||
--wac: 0% 0 0; |
|
||||||
--erc: 0% 0 0; |
|
||||||
--rounded-box: 1rem; |
|
||||||
--rounded-btn: 0.5rem; |
|
||||||
--rounded-badge: 1.9rem; |
|
||||||
--animation-btn: 0.25s; |
|
||||||
--animation-input: .2s; |
|
||||||
--btn-focus-scale: 0.95; |
|
||||||
--border-btn: 1px; |
|
||||||
--tab-border: 1px; |
|
||||||
--tab-radius: 0.5rem; |
|
||||||
--p: 49.12% 0.3096 275.75; |
|
||||||
--s: 69.71% 0.329 342.55; |
|
||||||
--sc: 98.71% 0.0106 342.55; |
|
||||||
--a: 76.76% 0.184 183.61; |
|
||||||
--n: 32.1785% 0.02476 255.701624; |
|
||||||
--nc: 89.4994% 0.011585 252.096176; |
|
||||||
--b1: 100% 0 0; |
|
||||||
--b2: 96.1151% 0 0; |
|
||||||
--b3: 92.4169% 0.00108 197.137559; |
|
||||||
--bc: 27.8078% 0.029596 256.847952; |
|
||||||
} |
|
||||||
|
|
||||||
[data-theme=dark] { |
|
||||||
color-scheme: dark; |
|
||||||
--in: 72.06% 0.191 231.6; |
|
||||||
--su: 64.8% 0.150 160; |
|
||||||
--wa: 84.71% 0.199 83.87; |
|
||||||
--er: 71.76% 0.221 22.18; |
|
||||||
--pc: 13.138% 0.0392 275.75; |
|
||||||
--sc: 14.96% 0.052 342.55; |
|
||||||
--ac: 14.902% 0.0334 183.61; |
|
||||||
--inc: 0% 0 0; |
|
||||||
--suc: 0% 0 0; |
|
||||||
--wac: 0% 0 0; |
|
||||||
--erc: 0% 0 0; |
|
||||||
--rounded-box: 1rem; |
|
||||||
--rounded-btn: 0.5rem; |
|
||||||
--rounded-badge: 1.9rem; |
|
||||||
--animation-btn: 0.25s; |
|
||||||
--animation-input: .2s; |
|
||||||
--btn-focus-scale: 0.95; |
|
||||||
--border-btn: 1px; |
|
||||||
--tab-border: 1px; |
|
||||||
--tab-radius: 0.5rem; |
|
||||||
--p: 65.69% 0.196 275.75; |
|
||||||
--s: 74.8% 0.26 342.55; |
|
||||||
--a: 74.51% 0.167 183.61; |
|
||||||
--n: 31.3815% 0.021108 254.139175; |
|
||||||
--nc: 74.6477% 0.0216 264.435964; |
|
||||||
--b1: 25.3267% 0.015896 252.417568; |
|
||||||
--b2: 23.2607% 0.013807 253.100675; |
|
||||||
--b3: 21.1484% 0.01165 254.087939; |
|
||||||
--bc: 74.6477% 0.0216 264.435964; |
|
||||||
} |
|
||||||
|
|
||||||
*, ::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: ; |
|
||||||
} |
|
||||||
|
|
||||||
@media (hover:hover) { |
|
||||||
.tabs-boxed :is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):hover, .tabs-boxed :is(input:checked):hover { |
|
||||||
--tw-text-opacity: 1; |
|
||||||
color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity))); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.tabs { |
|
||||||
display: grid; |
|
||||||
align-items: flex-end; |
|
||||||
} |
|
||||||
|
|
||||||
@keyframes button-pop { |
|
||||||
0% { |
|
||||||
transform: scale(var(--btn-focus-scale, 0.98)); |
|
||||||
} |
|
||||||
|
|
||||||
40% { |
|
||||||
transform: scale(1.02); |
|
||||||
} |
|
||||||
|
|
||||||
100% { |
|
||||||
transform: scale(1); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@keyframes checkmark { |
|
||||||
0% { |
|
||||||
background-position-y: 5px; |
|
||||||
} |
|
||||||
|
|
||||||
50% { |
|
||||||
background-position-y: -2px; |
|
||||||
} |
|
||||||
|
|
||||||
100% { |
|
||||||
background-position-y: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@keyframes modal-pop { |
|
||||||
0% { |
|
||||||
opacity: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@keyframes progress-loading { |
|
||||||
50% { |
|
||||||
background-position-x: -115%; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@keyframes radiomark { |
|
||||||
0% { |
|
||||||
box-shadow: 0 0 0 12px var(--fallback-b1,oklch(var(--b1)/1)) inset, |
|
||||||
0 0 0 12px var(--fallback-b1,oklch(var(--b1)/1)) inset; |
|
||||||
} |
|
||||||
|
|
||||||
50% { |
|
||||||
box-shadow: 0 0 0 3px var(--fallback-b1,oklch(var(--b1)/1)) inset, |
|
||||||
0 0 0 3px var(--fallback-b1,oklch(var(--b1)/1)) inset; |
|
||||||
} |
|
||||||
|
|
||||||
100% { |
|
||||||
box-shadow: 0 0 0 4px var(--fallback-b1,oklch(var(--b1)/1)) inset, |
|
||||||
0 0 0 4px var(--fallback-b1,oklch(var(--b1)/1)) inset; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@keyframes rating-pop { |
|
||||||
0% { |
|
||||||
transform: translateY(-0.125em); |
|
||||||
} |
|
||||||
|
|
||||||
40% { |
|
||||||
transform: translateY(-0.125em); |
|
||||||
} |
|
||||||
|
|
||||||
100% { |
|
||||||
transform: translateY(0); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@keyframes skeleton { |
|
||||||
from { |
|
||||||
background-position: 150%; |
|
||||||
} |
|
||||||
|
|
||||||
to { |
|
||||||
background-position: -50%; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.tabs-boxed { |
|
||||||
border-radius: var(--rounded-btn, 0.5rem); |
|
||||||
--tw-bg-opacity: 1; |
|
||||||
background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity))); |
|
||||||
padding: 0.25rem; |
|
||||||
} |
|
||||||
|
|
||||||
.tabs-boxed .tab { |
|
||||||
border-radius: var(--rounded-btn, 0.5rem); |
|
||||||
} |
|
||||||
|
|
||||||
.tabs-boxed :is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]), .tabs-boxed :is(input:checked) { |
|
||||||
--tw-bg-opacity: 1; |
|
||||||
background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity))); |
|
||||||
--tw-text-opacity: 1; |
|
||||||
color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity))); |
|
||||||
} |
|
||||||
|
|
||||||
@keyframes toast-pop { |
|
||||||
0% { |
|
||||||
transform: scale(0.9); |
|
||||||
opacity: 0; |
|
||||||
} |
|
||||||
|
|
||||||
100% { |
|
||||||
transform: scale(1); |
|
||||||
opacity: 1; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1 +0,0 @@ |
|||||||
/// <reference types="vite/client" />
|
|
||||||
@ -1,24 +0,0 @@ |
|||||||
/** @type {import('tailwindcss').Config} */ |
|
||||||
export default { |
|
||||||
content: ['./src/**/*.{html,js,ts,jsx,tsx}'], |
|
||||||
theme: { |
|
||||||
extend: {}, |
|
||||||
}, |
|
||||||
plugins: [ |
|
||||||
require('daisyui'), |
|
||||||
], |
|
||||||
|
|
||||||
daisyui: { |
|
||||||
themes: false, |
|
||||||
darkTheme: "dark", |
|
||||||
base: true, |
|
||||||
styled: true, |
|
||||||
utils: true, |
|
||||||
prefix: "", |
|
||||||
logs: true, |
|
||||||
themeRoot: ":root", |
|
||||||
}, |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -1,27 +0,0 @@ |
|||||||
{ |
|
||||||
"compilerOptions": { |
|
||||||
"composite": true, |
|
||||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", |
|
||||||
"target": "ES2020", |
|
||||||
"useDefineForClassFields": true, |
|
||||||
"lib": ["ES2020", "DOM", "DOM.Iterable"], |
|
||||||
"module": "ESNext", |
|
||||||
"skipLibCheck": true, |
|
||||||
|
|
||||||
/* Bundler mode */ |
|
||||||
"moduleResolution": "bundler", |
|
||||||
"allowImportingTsExtensions": true, |
|
||||||
"resolveJsonModule": true, |
|
||||||
"isolatedModules": true, |
|
||||||
"moduleDetection": "force", |
|
||||||
"noEmit": true, |
|
||||||
"jsx": "react-jsx", |
|
||||||
|
|
||||||
/* Linting */ |
|
||||||
"strict": true, |
|
||||||
"noUnusedLocals": true, |
|
||||||
"noUnusedParameters": true, |
|
||||||
"noFallthroughCasesInSwitch": true |
|
||||||
}, |
|
||||||
"include": ["src"] |
|
||||||
} |
|
||||||
@ -1,11 +0,0 @@ |
|||||||
{ |
|
||||||
"files": [], |
|
||||||
"references": [ |
|
||||||
{ |
|
||||||
"path": "./tsconfig.app.json" |
|
||||||
}, |
|
||||||
{ |
|
||||||
"path": "./tsconfig.node.json" |
|
||||||
} |
|
||||||
] |
|
||||||
} |
|
||||||
@ -1,13 +0,0 @@ |
|||||||
{ |
|
||||||
"compilerOptions": { |
|
||||||
"composite": true, |
|
||||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", |
|
||||||
"skipLibCheck": true, |
|
||||||
"module": "ESNext", |
|
||||||
"moduleResolution": "bundler", |
|
||||||
"allowSyntheticDefaultImports": true, |
|
||||||
"strict": true, |
|
||||||
"noEmit": true |
|
||||||
}, |
|
||||||
"include": ["vite.config.ts"] |
|
||||||
} |
|
||||||
@ -1,7 +0,0 @@ |
|||||||
import { defineConfig } from 'vite' |
|
||||||
import react from '@vitejs/plugin-react' |
|
||||||
|
|
||||||
// https://vitejs.dev/config/
|
|
||||||
export default defineConfig({ |
|
||||||
plugins: [react()], |
|
||||||
}) |
|
||||||
Loading…
Reference in new issue