Compare commits
No commits in common. 'main' and 'TabBarDesign' have entirely different histories.
main
...
TabBarDesi
23 changed files with 5709 additions and 1 deletions
@ -0,0 +1,18 @@ |
|||||||
|
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 }, |
||||||
|
], |
||||||
|
}, |
||||||
|
} |
||||||
@ -0,0 +1,24 @@ |
|||||||
|
# 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,2 +1,30 @@ |
|||||||
# TabBar_Project |
# React + TypeScript + Vite |
||||||
|
|
||||||
|
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. |
||||||
|
|
||||||
|
Currently, two official plugins are available: |
||||||
|
|
||||||
|
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh |
||||||
|
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh |
||||||
|
|
||||||
|
## Expanding the ESLint configuration |
||||||
|
|
||||||
|
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: |
||||||
|
|
||||||
|
- Configure the top-level `parserOptions` property like this: |
||||||
|
|
||||||
|
```js |
||||||
|
export default { |
||||||
|
// other rules... |
||||||
|
parserOptions: { |
||||||
|
ecmaVersion: 'latest', |
||||||
|
sourceType: 'module', |
||||||
|
project: ['./tsconfig.json', './tsconfig.node.json'], |
||||||
|
tsconfigRootDir: __dirname, |
||||||
|
}, |
||||||
|
} |
||||||
|
``` |
||||||
|
|
||||||
|
- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked` |
||||||
|
- Optionally add `plugin:@typescript-eslint/stylistic-type-checked` |
||||||
|
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list |
||||||
|
|||||||
@ -0,0 +1,12 @@ |
|||||||
|
<!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
@ -0,0 +1,33 @@ |
|||||||
|
{ |
||||||
|
"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" |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,6 @@ |
|||||||
|
export default { |
||||||
|
plugins: { |
||||||
|
tailwindcss: {}, |
||||||
|
autoprefixer: {}, |
||||||
|
}, |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 1.5 KiB |
@ -0,0 +1,69 @@ |
|||||||
|
@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; |
||||||
|
} |
||||||
@ -0,0 +1,13 @@ |
|||||||
|
import './App.css' |
||||||
|
import TabBar from './components/TabBar' |
||||||
|
|
||||||
|
function App() { |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<TabBar /> |
||||||
|
</> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default App |
||||||
|
After Width: | Height: | Size: 4.0 KiB |
@ -0,0 +1,27 @@ |
|||||||
|
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; |
||||||
|
|
||||||
|
// ×
|
||||||
@ -0,0 +1,104 @@ |
|||||||
|
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; |
||||||
@ -0,0 +1,68 @@ |
|||||||
|
: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; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,3 @@ |
|||||||
|
@tailwind base; |
||||||
|
@tailwind components; |
||||||
|
@tailwind utilities; |
||||||
@ -0,0 +1,10 @@ |
|||||||
|
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>, |
||||||
|
) |
||||||
@ -0,0 +1,882 @@ |
|||||||
|
/* |
||||||
|
! 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; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1 @@ |
|||||||
|
/// <reference types="vite/client" />
|
||||||
@ -0,0 +1,24 @@ |
|||||||
|
/** @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", |
||||||
|
}, |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,27 @@ |
|||||||
|
{ |
||||||
|
"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"] |
||||||
|
} |
||||||
@ -0,0 +1,11 @@ |
|||||||
|
{ |
||||||
|
"files": [], |
||||||
|
"references": [ |
||||||
|
{ |
||||||
|
"path": "./tsconfig.app.json" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"path": "./tsconfig.node.json" |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
@ -0,0 +1,13 @@ |
|||||||
|
{ |
||||||
|
"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"] |
||||||
|
} |
||||||
@ -0,0 +1,7 @@ |
|||||||
|
import { defineConfig } from 'vite' |
||||||
|
import react from '@vitejs/plugin-react' |
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({ |
||||||
|
plugins: [react()], |
||||||
|
}) |
||||||
Loading…
Reference in new issue