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