setup taillwind
This commit is contained in:
nikita
-184
@@ -1,184 +0,0 @@
|
||||
.counter {
|
||||
font-size: 16px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
color: var(--accent);
|
||||
background: var(--accent-bg);
|
||||
border: 2px solid transparent;
|
||||
transition: border-color 0.3s;
|
||||
margin-bottom: 24px;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--accent-border);
|
||||
}
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.hero {
|
||||
position: relative;
|
||||
|
||||
.base,
|
||||
.framework,
|
||||
.vite {
|
||||
inset-inline: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.base {
|
||||
width: 170px;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.framework,
|
||||
.vite {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.framework {
|
||||
z-index: 1;
|
||||
top: 34px;
|
||||
height: 28px;
|
||||
transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
|
||||
scale(1.4);
|
||||
}
|
||||
|
||||
.vite {
|
||||
z-index: 0;
|
||||
top: 107px;
|
||||
height: 26px;
|
||||
width: auto;
|
||||
transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
|
||||
scale(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
#center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 25px;
|
||||
place-content: center;
|
||||
place-items: center;
|
||||
flex-grow: 1;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
padding: 32px 20px 24px;
|
||||
gap: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
#next-steps {
|
||||
display: flex;
|
||||
border-top: 1px solid var(--border);
|
||||
text-align: left;
|
||||
|
||||
& > div {
|
||||
flex: 1 1 0;
|
||||
padding: 32px;
|
||||
@media (max-width: 1024px) {
|
||||
padding: 24px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-bottom: 16px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
#docs {
|
||||
border-right: 1px solid var(--border);
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
border-right: none;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
}
|
||||
|
||||
#next-steps ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin: 32px 0 0;
|
||||
|
||||
.logo {
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--text-h);
|
||||
font-size: 16px;
|
||||
border-radius: 6px;
|
||||
background: var(--social-bg);
|
||||
display: flex;
|
||||
padding: 6px 12px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
text-decoration: none;
|
||||
transition: box-shadow 0.3s;
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
.button-icon {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
margin-top: 20px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
li {
|
||||
flex: 1 1 calc(50% - 8px);
|
||||
}
|
||||
|
||||
a {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#spacer {
|
||||
height: 88px;
|
||||
border-top: 1px solid var(--border);
|
||||
@media (max-width: 1024px) {
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.ticks {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -4.5px;
|
||||
border: 5px solid transparent;
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: 0;
|
||||
border-left-color: var(--border);
|
||||
}
|
||||
&::after {
|
||||
right: 0;
|
||||
border-right-color: var(--border);
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
import { Routing } from "./providers/routing";
|
||||
import "@/shared/styles/index.css";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
|
||||
-111
@@ -1,111 +0,0 @@
|
||||
:root {
|
||||
--text: #6b6375;
|
||||
--text-h: #08060d;
|
||||
--bg: #fff;
|
||||
--border: #e5e4e7;
|
||||
--code-bg: #f4f3ec;
|
||||
--accent: #aa3bff;
|
||||
--accent-bg: rgba(170, 59, 255, 0.1);
|
||||
--accent-border: rgba(170, 59, 255, 0.5);
|
||||
--social-bg: rgba(244, 243, 236, 0.5);
|
||||
--shadow:
|
||||
rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
|
||||
|
||||
--sans: system-ui, 'Segoe UI', Roboto, sans-serif;
|
||||
--heading: system-ui, 'Segoe UI', Roboto, sans-serif;
|
||||
--mono: ui-monospace, Consolas, monospace;
|
||||
|
||||
font: 18px/145% var(--sans);
|
||||
letter-spacing: 0.18px;
|
||||
color-scheme: light dark;
|
||||
color: var(--text);
|
||||
background: var(--bg);
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--text: #9ca3af;
|
||||
--text-h: #f3f4f6;
|
||||
--bg: #16171d;
|
||||
--border: #2e303a;
|
||||
--code-bg: #1f2028;
|
||||
--accent: #c084fc;
|
||||
--accent-bg: rgba(192, 132, 252, 0.15);
|
||||
--accent-border: rgba(192, 132, 252, 0.5);
|
||||
--social-bg: rgba(47, 48, 58, 0.5);
|
||||
--shadow:
|
||||
rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
|
||||
}
|
||||
|
||||
#social .button-icon {
|
||||
filter: invert(1) brightness(2);
|
||||
}
|
||||
}
|
||||
|
||||
#root {
|
||||
width: 1126px;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
border-inline: 1px solid var(--border);
|
||||
min-height: 100svh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: var(--heading);
|
||||
font-weight: 500;
|
||||
color: var(--text-h);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 56px;
|
||||
letter-spacing: -1.68px;
|
||||
margin: 32px 0;
|
||||
@media (max-width: 1024px) {
|
||||
font-size: 36px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
line-height: 118%;
|
||||
letter-spacing: -0.24px;
|
||||
margin: 0 0 8px;
|
||||
@media (max-width: 1024px) {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
code,
|
||||
.counter {
|
||||
font-family: var(--mono);
|
||||
display: inline-flex;
|
||||
border-radius: 4px;
|
||||
color: var(--text-h);
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: 15px;
|
||||
line-height: 135%;
|
||||
padding: 4px 8px;
|
||||
background: var(--code-bg);
|
||||
}
|
||||
+1
-2
@@ -1,7 +1,6 @@
|
||||
import { StrictMode } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import App from "./app/App.tsx";
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
import App from "./app/App.tsx";
|
||||
|
||||
createRoot(document.getElementById("root")!).render(
|
||||
<BrowserRouter>
|
||||
|
||||
@@ -1,7 +1,3 @@
|
||||
export const HomePage = () => {
|
||||
return(
|
||||
<div>
|
||||
Домашняя
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return <div className="bg-red-500">Домашняя</div>;
|
||||
};
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
@import "tailwindcss";
|
||||
@import "./normalize.css";
|
||||
@import "./root.css";
|
||||
@import "./themes.css";
|
||||
|
||||
/* Hide scrollbar but keep functionality */
|
||||
.scrollbar-hide {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
|
||||
.scrollbar-hide::-webkit-scrollbar {
|
||||
display: none; /* Chrome, Safari and Opera */
|
||||
}
|
||||
Vendored
+365
@@ -0,0 +1,365 @@
|
||||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/* Document
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Correct the line height in all browsers.
|
||||
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||
*/
|
||||
|
||||
html {
|
||||
line-height: 1.15;
|
||||
/* 1 */
|
||||
-webkit-text-size-adjust: 100%;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the margin in all browsers.
|
||||
*/
|
||||
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the `main` element consistently in IE.
|
||||
*/
|
||||
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Firefox, and Safari.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
|
||||
hr {
|
||||
box-sizing: content-box;
|
||||
/* 1 */
|
||||
height: 0;
|
||||
/* 1 */
|
||||
overflow: visible;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace;
|
||||
/* 1 */
|
||||
font-size: 1em;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the gray background on active links in IE 10.
|
||||
*/
|
||||
|
||||
/* a {
|
||||
background-color: transparent;
|
||||
} */
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Chrome 57-
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none;
|
||||
/* 1 */
|
||||
text-decoration: underline;
|
||||
/* 2 */
|
||||
text-decoration: underline dotted;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace;
|
||||
/* 1 */
|
||||
font-size: 1em;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 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;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10.
|
||||
*/
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Change the font styles in all browsers.
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
|
||||
button,
|
||||
input {
|
||||
/* 1 */
|
||||
overflow: visible;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select {
|
||||
/* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the padding in Firefox.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
padding: 0.35em 0.75em 0.625em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
|
||||
legend {
|
||||
box-sizing: border-box;
|
||||
/* 1 */
|
||||
color: inherit;
|
||||
/* 2 */
|
||||
display: table;
|
||||
/* 1 */
|
||||
max-width: 100%;
|
||||
/* 1 */
|
||||
padding: 0;
|
||||
/* 3 */
|
||||
white-space: normal;
|
||||
/* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE 10+.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10.
|
||||
* 2. Remove the padding in IE 10.
|
||||
*/
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box;
|
||||
/* 1 */
|
||||
padding: 0;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
*/
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-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.
|
||||
*/
|
||||
|
||||
[type="search"]::-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 */
|
||||
}
|
||||
|
||||
/* Interactive
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Add the correct display in Edge, IE 10+, and Firefox.
|
||||
*/
|
||||
|
||||
details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Add the correct display in all browsers.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/* Misc
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10+.
|
||||
*/
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
@@ -0,0 +1,307 @@
|
||||
/* Дополнительные стили для PrimeReact с вашей темой */
|
||||
.p-tabmenu .p-tabmenuitem .p-menuitem-link {
|
||||
color: var(--text-secondary);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.p-tabmenu .p-tabmenuitem .p-menuitem-link:not(.p-disabled):hover {
|
||||
color: var(--text-primary);
|
||||
background-color: var(--bg-tertiary);
|
||||
}
|
||||
|
||||
.p-tabmenu .p-tabmenuitem.p-highlight .p-menuitem-link {
|
||||
color: var(--accent-primary);
|
||||
border-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.p-menubar {
|
||||
background-color: var(--bg-secondary);
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.p-menubar .p-menuitem-link {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.p-menubar .p-menuitem-link:hover {
|
||||
background-color: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.p-button.p-button-text {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.p-button.p-button-text:hover {
|
||||
color: var(--text-primary);
|
||||
background-color: var(--bg-tertiary);
|
||||
}
|
||||
|
||||
/* ==================== Стили для скроллов ==================== */
|
||||
|
||||
/* WebKit браузеры (Chrome, Safari, Edge, Opera) */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--border-secondary);
|
||||
border-radius: 4px;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--accent-primary);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
background: var(--bg-tertiary);
|
||||
}
|
||||
|
||||
/* Firefox */
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--border-secondary) var(--bg-tertiary);
|
||||
}
|
||||
|
||||
/* Для элементов с прокруткой (кастомные классы) */
|
||||
.custom-scrollbar {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--border-secondary) var(--bg-tertiary);
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: var(--border-secondary);
|
||||
border-radius: 4px;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--accent-primary);
|
||||
}
|
||||
|
||||
/* Для горизонтальных скроллов */
|
||||
.horizontal-scrollbar {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.horizontal-scrollbar::-webkit-scrollbar {
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
/* Для очень тонких скроллов (например, в таблицах) */
|
||||
.thin-scrollbar::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
.thin-scrollbar::-webkit-scrollbar-track {
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.thin-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: var(--border-secondary);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.thin-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--accent-primary);
|
||||
}
|
||||
|
||||
/* Для темных тем - дополнительная стилизация */
|
||||
[data-theme="dark"] ::-webkit-scrollbar-track,
|
||||
[data-theme="nightowl"] ::-webkit-scrollbar-track,
|
||||
[data-theme="sunset"] ::-webkit-scrollbar-track,
|
||||
[data-theme="forest"] ::-webkit-scrollbar-track,
|
||||
[data-theme="ocean"] ::-webkit-scrollbar-track,
|
||||
[data-theme="coffee"] ::-webkit-scrollbar-track,
|
||||
[data-theme="midnight"] ::-webkit-scrollbar-track {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
[data-theme="dark"] ::-webkit-scrollbar-thumb,
|
||||
[data-theme="nightowl"] ::-webkit-scrollbar-thumb,
|
||||
[data-theme="sunset"] ::-webkit-scrollbar-thumb,
|
||||
[data-theme="forest"] ::-webkit-scrollbar-thumb,
|
||||
[data-theme="ocean"] ::-webkit-scrollbar-thumb,
|
||||
[data-theme="coffee"] ::-webkit-scrollbar-thumb,
|
||||
[data-theme="midnight"] ::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover,
|
||||
[data-theme="nightowl"] ::-webkit-scrollbar-thumb:hover,
|
||||
[data-theme="sunset"] ::-webkit-scrollbar-thumb:hover,
|
||||
[data-theme="forest"] ::-webkit-scrollbar-thumb:hover,
|
||||
[data-theme="ocean"] ::-webkit-scrollbar-thumb:hover,
|
||||
[data-theme="coffee"] ::-webkit-scrollbar-thumb:hover,
|
||||
[data-theme="midnight"] ::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--accent-primary);
|
||||
}
|
||||
|
||||
/* Для светлых тем - более контрастные скроллы */
|
||||
[data-theme="light"] ::-webkit-scrollbar-track {
|
||||
background: #f1f5f9;
|
||||
}
|
||||
|
||||
[data-theme="light"] ::-webkit-scrollbar-thumb {
|
||||
background: #cbd5e1;
|
||||
}
|
||||
|
||||
[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--accent-primary);
|
||||
}
|
||||
|
||||
/* Для лавандовой темы */
|
||||
[data-theme="lavender"] ::-webkit-scrollbar-track {
|
||||
background: #e9d5ff;
|
||||
}
|
||||
|
||||
[data-theme="lavender"] ::-webkit-scrollbar-thumb {
|
||||
background: #c084fc;
|
||||
}
|
||||
|
||||
[data-theme="lavender"] ::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--accent-primary);
|
||||
}
|
||||
|
||||
/* Для розовой темы */
|
||||
[data-theme="rose"] ::-webkit-scrollbar-track {
|
||||
background: #fecdd3;
|
||||
}
|
||||
|
||||
[data-theme="rose"] ::-webkit-scrollbar-thumb {
|
||||
background: #fb7185;
|
||||
}
|
||||
|
||||
[data-theme="rose"] ::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--accent-primary);
|
||||
}
|
||||
|
||||
/* Стили для скролла в текстовых полях и textarea */
|
||||
textarea::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
textarea::-webkit-scrollbar-track {
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
textarea::-webkit-scrollbar-thumb {
|
||||
background: var(--border-secondary);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
textarea::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--accent-primary);
|
||||
}
|
||||
|
||||
/* Стили для скролла в выпадающих списках PrimeReact */
|
||||
.p-dropdown-panel .p-dropdown-items-wrapper::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.p-dropdown-panel .p-dropdown-items-wrapper::-webkit-scrollbar-track {
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.p-dropdown-panel .p-dropdown-items-wrapper::-webkit-scrollbar-thumb {
|
||||
background: var(--border-secondary);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.p-dropdown-panel .p-dropdown-items-wrapper::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--accent-primary);
|
||||
}
|
||||
|
||||
/* Стили для скролла в таблицах */
|
||||
.p-datatable-wrapper::-webkit-scrollbar {
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.p-datatable-wrapper::-webkit-scrollbar-track {
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.p-datatable-wrapper::-webkit-scrollbar-thumb {
|
||||
background: var(--border-secondary);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.p-datatable-wrapper::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--accent-primary);
|
||||
}
|
||||
|
||||
/* Стили для скролла в модальных окнах */
|
||||
.p-dialog .p-dialog-content::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.p-dialog .p-dialog-content::-webkit-scrollbar-track {
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.p-dialog .p-dialog-content::-webkit-scrollbar-thumb {
|
||||
background: var(--border-secondary);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.p-dialog .p-dialog-content::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--accent-primary);
|
||||
}
|
||||
|
||||
/* Стили для скролла в меню */
|
||||
.p-menu .p-menu-list::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.p-menu .p-menu-list::-webkit-scrollbar-track {
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.p-menu .p-menu-list::-webkit-scrollbar-thumb {
|
||||
background: var(--border-secondary);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.p-menu .p-menu-list::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--accent-primary);
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-pulse {
|
||||
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
@@ -0,0 +1,267 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
/* Tailwind dark mode через data-theme атрибут */
|
||||
@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
|
||||
|
||||
/* Кастомные утилиты */
|
||||
@layer utilities {
|
||||
.transition-theme {
|
||||
transition-property: background-color, border-color, color, fill, stroke;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 200ms;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
БАЗОВЫЕ ТЕМЫ (Light/Dark)
|
||||
=========================== */
|
||||
|
||||
/* Светлая тема (по умолчанию) */
|
||||
:root,
|
||||
[data-theme="light"] {
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #f8fafc;
|
||||
--bg-tertiary: #f1f5f9;
|
||||
--text-primary: #0f172a;
|
||||
--text-secondary: #475569;
|
||||
--text-muted: #94a3b8;
|
||||
--border: #e2e8f0;
|
||||
--border-focus: #94a3b8;
|
||||
--card-bg: #ffffff;
|
||||
--input-bg: #ffffff;
|
||||
--header-bg: #ffffff;
|
||||
--button-primary: #0f172a;
|
||||
--button-primary-text: #ffffff;
|
||||
--button-primary-hover: #1e293b;
|
||||
--button-danger: #ef4444;
|
||||
--button-danger-text: #ffffff;
|
||||
--button-danger-hover: #dc2626;
|
||||
--error-bg: #fef2f2;
|
||||
--error-border: #fecaca;
|
||||
--error-text: #dc2626;
|
||||
--shadow-color: rgba(0, 0, 0, 0.1);
|
||||
--accent: #6366f1;
|
||||
--accent-hover: #4f46e5;
|
||||
--link: #0f172a;
|
||||
--link-hover: #475569;
|
||||
}
|
||||
|
||||
/* Темная тема */
|
||||
[data-theme="dark"] {
|
||||
--bg-primary: #0f172a;
|
||||
--bg-secondary: #1e293b;
|
||||
--bg-tertiary: #334155;
|
||||
--text-primary: #f8fafc;
|
||||
--text-secondary: #cbd5e1;
|
||||
--text-muted: #64748b;
|
||||
--border: #334155;
|
||||
--border-focus: #64748b;
|
||||
--card-bg: #1e293b;
|
||||
--input-bg: #1e293b;
|
||||
--header-bg: #0f172a;
|
||||
--button-primary: #f8fafc;
|
||||
--button-primary-text: #0f172a;
|
||||
--button-primary-hover: #e2e8f0;
|
||||
--button-danger: #ef4444;
|
||||
--button-danger-text: #ffffff;
|
||||
--button-danger-hover: #f87171;
|
||||
--error-bg: rgba(239, 68, 68, 0.1);
|
||||
--error-border: rgba(239, 68, 68, 0.3);
|
||||
--error-text: #fca5a5;
|
||||
--shadow-color: rgba(0, 0, 0, 0.3);
|
||||
--accent: #818cf8;
|
||||
--accent-hover: #a5b4fc;
|
||||
--link: #f8fafc;
|
||||
--link-hover: #cbd5e1;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
ЦВЕТНЫЕ ТЕМЫ
|
||||
=========================== */
|
||||
|
||||
/* Night Owl */
|
||||
[data-theme="nightowl"] {
|
||||
--bg-primary: #011627;
|
||||
--bg-secondary: #011e3c;
|
||||
--bg-tertiary: #0d2f4f;
|
||||
--text-primary: #d6deeb;
|
||||
--text-secondary: #8892b0;
|
||||
--text-muted: #4a5568;
|
||||
--border: #1d3b53;
|
||||
--border-focus: #7dd3fc;
|
||||
--card-bg: #011e3c;
|
||||
--input-bg: #011e3c;
|
||||
--header-bg: #011627;
|
||||
--button-primary: #7dd3fc;
|
||||
--button-primary-text: #011627;
|
||||
--button-primary-hover: #bae6fd;
|
||||
--button-danger: #f87171;
|
||||
--button-danger-text: #ffffff;
|
||||
--button-danger-hover: #fca5a5;
|
||||
--error-bg: rgba(248, 113, 113, 0.1);
|
||||
--error-border: rgba(248, 113, 113, 0.3);
|
||||
--error-text: #fca5a5;
|
||||
--shadow-color: rgba(0, 0, 0, 0.4);
|
||||
--accent: #7dd3fc;
|
||||
--accent-hover: #bae6fd;
|
||||
--link: #7dd3fc;
|
||||
--link-hover: #bae6fd;
|
||||
}
|
||||
|
||||
/* Sunset */
|
||||
[data-theme="sunset"] {
|
||||
--bg-primary: #1c1917;
|
||||
--bg-secondary: #292524;
|
||||
--bg-tertiary: #44403c;
|
||||
--text-primary: #fafaf9;
|
||||
--text-secondary: #d6d3d1;
|
||||
--text-muted: #78716c;
|
||||
--border: #57534e;
|
||||
--border-focus: #f97316;
|
||||
--card-bg: #292524;
|
||||
--input-bg: #292524;
|
||||
--header-bg: #1c1917;
|
||||
--button-primary: #f97316;
|
||||
--button-primary-text: #1c1917;
|
||||
--button-primary-hover: #fb923c;
|
||||
--button-danger: #ef4444;
|
||||
--button-danger-text: #ffffff;
|
||||
--button-danger-hover: #f87171;
|
||||
--error-bg: rgba(239, 68, 68, 0.1);
|
||||
--error-border: rgba(239, 68, 68, 0.3);
|
||||
--error-text: #fca5a5;
|
||||
--shadow-color: rgba(0, 0, 0, 0.4);
|
||||
--accent: #f97316;
|
||||
--accent-hover: #fb923c;
|
||||
--link: #f97316;
|
||||
--link-hover: #fb923c;
|
||||
}
|
||||
|
||||
/* Forest */
|
||||
[data-theme="forest"] {
|
||||
--bg-primary: #052e16;
|
||||
--bg-secondary: #14532d;
|
||||
--bg-tertiary: #166534;
|
||||
--text-primary: #f0fdf4;
|
||||
--text-secondary: #bbf7d0;
|
||||
--text-muted: #4ade80;
|
||||
--border: #166534;
|
||||
--border-focus: #22c55e;
|
||||
--card-bg: #14532d;
|
||||
--input-bg: #14532d;
|
||||
--header-bg: #052e16;
|
||||
--button-primary: #22c55e;
|
||||
--button-primary-text: #052e16;
|
||||
--button-primary-hover: #4ade80;
|
||||
--button-danger: #ef4444;
|
||||
--button-danger-text: #ffffff;
|
||||
--button-danger-hover: #f87171;
|
||||
--error-bg: rgba(239, 68, 68, 0.1);
|
||||
--error-border: rgba(239, 68, 68, 0.3);
|
||||
--error-text: #fca5a5;
|
||||
--shadow-color: rgba(0, 0, 0, 0.4);
|
||||
--accent: #22c55e;
|
||||
--accent-hover: #4ade80;
|
||||
--link: #22c55e;
|
||||
--link-hover: #4ade80;
|
||||
}
|
||||
|
||||
/* Ocean */
|
||||
[data-theme="ocean"] {
|
||||
--bg-primary: #164e63;
|
||||
--bg-secondary: #0e7490;
|
||||
--bg-tertiary: #0891b2;
|
||||
--text-primary: #f0fdfd;
|
||||
--text-secondary: #a5f3fc;
|
||||
--text-muted: #22d3ee;
|
||||
--border: #0891b2;
|
||||
--border-focus: #06b6d4;
|
||||
--card-bg: #0e7490;
|
||||
--input-bg: #0e7490;
|
||||
--header-bg: #164e63;
|
||||
--button-primary: #06b6d4;
|
||||
--button-primary-text: #164e63;
|
||||
--button-primary-hover: #22d3ee;
|
||||
--button-danger: #ef4444;
|
||||
--button-danger-text: #ffffff;
|
||||
--button-danger-hover: #f87171;
|
||||
--error-bg: rgba(239, 68, 68, 0.1);
|
||||
--error-border: rgba(239, 68, 68, 0.3);
|
||||
--error-text: #fca5a5;
|
||||
--shadow-color: rgba(0, 0, 0, 0.4);
|
||||
--accent: #06b6d4;
|
||||
--accent-hover: #22d3ee;
|
||||
--link: #06b6d4;
|
||||
--link-hover: #22d3ee;
|
||||
}
|
||||
|
||||
/* Lavender */
|
||||
[data-theme="lavender"] {
|
||||
--bg-primary: #faf5ff;
|
||||
--bg-secondary: #f3e8ff;
|
||||
--bg-tertiary: #e9d5ff;
|
||||
--text-primary: #581c87;
|
||||
--text-secondary: #7e22ce;
|
||||
--text-muted: #a855f7;
|
||||
--border: #e9d5ff;
|
||||
--border-focus: #a855f7;
|
||||
--card-bg: #f3e8ff;
|
||||
--input-bg: #f3e8ff;
|
||||
--header-bg: #faf5ff;
|
||||
--button-primary: #a855f7;
|
||||
--button-primary-text: #faf5ff;
|
||||
--button-primary-hover: #c084fc;
|
||||
--button-danger: #ef4444;
|
||||
--button-danger-text: #ffffff;
|
||||
--button-danger-hover: #f87171;
|
||||
--error-bg: rgba(239, 68, 68, 0.1);
|
||||
--error-border: rgba(239, 68, 68, 0.3);
|
||||
--error-text: #dc2626;
|
||||
--shadow-color: rgba(88, 28, 135, 0.1);
|
||||
--accent: #a855f7;
|
||||
--accent-hover: #c084fc;
|
||||
--link: #7e22ce;
|
||||
--link-hover: #a855f7;
|
||||
}
|
||||
|
||||
/* Coffee */
|
||||
[data-theme="coffee"] {
|
||||
--bg-primary: #292524;
|
||||
--bg-secondary: #44403c;
|
||||
--bg-tertiary: #57534e;
|
||||
--text-primary: #f5f5f4;
|
||||
--text-secondary: #d6d3d1;
|
||||
--text-muted: #a8a29e;
|
||||
--border: #57534e;
|
||||
--border-focus: #d97706;
|
||||
--card-bg: #44403c;
|
||||
--input-bg: #44403c;
|
||||
--header-bg: #292524;
|
||||
--button-primary: #d97706;
|
||||
--button-primary-text: #292524;
|
||||
--button-primary-hover: #fbbf24;
|
||||
--button-danger: #ef4444;
|
||||
--button-danger-text: #ffffff;
|
||||
--button-danger-hover: #f87171;
|
||||
--error-bg: rgba(239, 68, 68, 0.1);
|
||||
--error-border: rgba(239, 68, 68, 0.3);
|
||||
--error-text: #fca5a5;
|
||||
--shadow-color: rgba(0, 0, 0, 0.4);
|
||||
--accent: #d97706;
|
||||
--accent-hover: #fbbf24;
|
||||
--link: #d97706;
|
||||
--link-hover: #fbbf24;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
БАЗОВЫЕ СТИЛИ
|
||||
=========================== */
|
||||
|
||||
body {
|
||||
background-color: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
transition:
|
||||
background-color 0.3s ease,
|
||||
color 0.3s ease,
|
||||
border-color 0.3s ease;
|
||||
}
|
||||
Reference in New Issue
Block a user