Good-Production/Fakel-Gym
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

переработал систему модалок и добавил блоки

Browse Source
This commit is contained in:
GP_DEV
2025-06-07 23:28:58 +03:00
parent 9aa5906efa
commit 5e346cfa36
10 changed files with 348 additions and 314 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
css/app.css
View File

@@ -8,12 +8,10 @@
"Courier New", monospace;
--color-blue-50: oklch(0.97 0.014 254.604);
--color-blue-500: oklch(0.623 0.214 259.815);
--color-blue-600: oklch(0.546 0.245 262.881);
--color-blue-800: oklch(0.424 0.199 265.638);
--color-blue-900: oklch(0.379 0.146 265.522);
--color-gray-100: oklch(0.967 0.003 264.542);
--color-gray-200: oklch(0.928 0.006 264.531);
--color-gray-300: oklch(0.872 0.01 258.338);
--color-gray-500: oklch(0.551 0.027 264.364);
--color-gray-600: oklch(0.446 0.03 256.802);
--color-gray-700: oklch(0.373 0.034 259.733);
@@ -38,7 +36,6 @@
--text-5xl: var(--wp--preset--font-size--5xl, 3rem);
--text-5xl--line-height: 1;
--font-weight-light: 300;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
@@ -47,7 +44,6 @@
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--blur-sm: 8px;
--aspect-video: 16 / 9;
--default-transition-duration: 150ms;
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
--default-font-family: var(--font-sans);
@@ -327,6 +323,9 @@
.mt-\[20px\] {
margin-top: 20px;
}
.mt-\[22px\] {
margin-top: 22px;
}
.mt-\[24px\] {
margin-top: 24px;
}
@@ -342,8 +341,8 @@
.mt-\[50px\] {
margin-top: 50px;
}
.mr-\[8px\] {
margin-right: 8px;
.mt-auto {
margin-top: auto;
}
.mb-1 {
margin-bottom: calc(var(--spacing) * 1);
@@ -369,11 +368,14 @@
.mb-\[20px\] {
margin-bottom: 20px;
}
.mb-\[24px\] {
margin-bottom: 24px;
}
.mb-\[30px\] {
margin-bottom: 30px;
}
.mb-\[60px\] {
margin-bottom: 60px;
.mb-\[40px\] {
margin-bottom: 40px;
}
.block {
display: block;
@@ -390,9 +392,6 @@
.inline-block {
display: inline-block;
}
.aspect-video {
aspect-ratio: var(--aspect-video);
}
.h-1 {
height: calc(var(--spacing) * 1);
}
@@ -408,12 +407,12 @@
.h-\[8px\] {
height: 8px;
}
.h-\[16px\] {
height: 16px;
}
.h-\[24px\] {
height: 24px;
}
.h-\[32px\] {
height: 32px;
}
.h-\[44px\] {
height: 44px;
}
@@ -423,6 +422,9 @@
.h-\[60px\] {
height: 60px;
}
.h-\[64px\] {
height: 64px;
}
.h-\[75px\] {
height: 75px;
}
@@ -444,6 +446,9 @@
.h-full {
height: 100%;
}
.max-h-\[60px\] {
max-height: 60px;
}
.max-h-\[90vh\] {
max-height: 90vh;
}
@@ -465,15 +470,18 @@
.w-\[8px\] {
width: 8px;
}
.w-\[16px\] {
width: 16px;
}
.w-\[24px\] {
width: 24px;
}
.w-\[32px\] {
width: 32px;
}
.w-\[60px\] {
width: 60px;
}
.w-\[64px\] {
width: 64px;
}
.w-\[80px\] {
width: 80px;
}
@@ -491,12 +499,18 @@
.max-w-2xl {
max-width: var(--container-2xl);
}
.max-w-\[60px\] {
max-width: 60px;
}
.max-w-\[210px\] {
max-width: 210px;
}
.max-w-\[281px\] {
max-width: 281px;
}
.max-w-\[300px\] {
max-width: 300px;
}
.max-w-\[380px\] {
max-width: 380px;
}
@@ -556,9 +570,6 @@
.resize {
resize: both;
}
.resize-none {
resize: none;
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
@@ -617,11 +628,6 @@
margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
}
:where(.space-y-\[16px\] > :not(:last-child)) {
--tw-space-y-reverse: 0;
margin-block-start: calc(16px * var(--tw-space-y-reverse));
margin-block-end: calc(16px * calc(1 - var(--tw-space-y-reverse)));
}
.overflow-hidden {
overflow: hidden;
}
@@ -637,9 +643,6 @@
.rounded-\[5px\] {
border-radius: 5px;
}
.rounded-\[6px\] {
border-radius: 6px;
}
.rounded-\[8px\] {
border-radius: 8px;
}
@@ -704,15 +707,18 @@
.border-\[\#e5e7eb\] {
border-color: #e5e7eb;
}
.border-gray-300 {
border-color: var(--color-gray-300);
}
.border-primary {
border-color: var(--color-primary);
}
.border-transparent {
border-color: transparent;
}
.bg-\[\#3b82f6\] {
background-color: #3b82f6;
}
.bg-\[\#10b981\] {
background-color: #10b981;
}
.bg-\[\#222\] {
background-color: #222;
}
@@ -740,18 +746,12 @@
.bg-blue-50 {
background-color: var(--color-blue-50);
}
.bg-blue-500 {
background-color: var(--color-blue-500);
}
.bg-gray-100 {
background-color: var(--color-gray-100);
}
.bg-gray-200 {
background-color: var(--color-gray-200);
}
.bg-gray-500 {
background-color: var(--color-gray-500);
}
.bg-primary {
background-color: var(--color-primary);
}
@@ -775,9 +775,6 @@
.p-\[10px\] {
padding: 10px;
}
.p-\[24px\] {
padding: 24px;
}
.p-\[30px\] {
padding: 30px;
}
@@ -790,9 +787,6 @@
.px-6 {
padding-inline: calc(var(--spacing) * 6);
}
.px-\[12px\] {
padding-inline: 12px;
}
.px-\[16px\] {
padding-inline: 16px;
}
@@ -808,9 +802,6 @@
.py-2 {
padding-block: calc(var(--spacing) * 2);
}
.py-\[8px\] {
padding-block: 8px;
}
.py-\[12px\] {
padding-block: 12px;
}
@@ -880,6 +871,10 @@
--tw-leading: 110%;
line-height: 110%;
}
.leading-\[120\%\] {
--tw-leading: 120%;
line-height: 120%;
}
.leading-\[125\%\] {
--tw-leading: 125%;
line-height: 125%;
@@ -920,10 +915,6 @@
--tw-font-weight: var(--font-weight-light);
font-weight: var(--font-weight-light);
}
.font-medium {
--tw-font-weight: var(--font-weight-medium);
font-weight: var(--font-weight-medium);
}
.font-semibold {
--tw-font-weight: var(--font-weight-semibold);
font-weight: var(--font-weight-semibold);
@@ -937,11 +928,14 @@
.text-\[\#222\] {
color: #222;
}
.text-\[\#374151\] {
color: #374151;
}
.text-\[\#f8f8f8\] {
color: #f8f8f8;
}
.text-blue-600 {
color: var(--color-blue-600);
.text-\[\#ffffff\] {
color: #ffffff;
}
.text-blue-800 {
color: var(--color-blue-800);
@@ -1043,10 +1037,6 @@
--tw-duration: 300ms;
transition-duration: 300ms;
}
.duration-\[300ms\] {
--tw-duration: 300ms;
transition-duration: 300ms;
}
@media (hover: hover) {
.hover\:translate-y-\[-1px\]:hover {
--tw-translate-y: -1px;
@@ -1054,8 +1044,8 @@
}
}
@media (hover: hover) {
.hover\:bg-blue-600:hover {
background-color: var(--color-blue-600);
.hover\:bg-\[\#2563eb\]:hover {
background-color: #2563eb;
}
}
@media (hover: hover) {
@@ -1063,11 +1053,6 @@
background-color: var(--color-gray-100);
}
}
@media (hover: hover) {
.hover\:bg-gray-600:hover {
background-color: var(--color-gray-600);
}
}
@media (hover: hover) {
.hover\:text-gray-700:hover {
color: var(--color-gray-700);
@@ -1088,18 +1073,17 @@
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.focus\:ring-blue-500:focus {
--tw-ring-color: var(--color-blue-500);
.focus\:ring-\[\#3b82f6\]:focus {
--tw-ring-color: #3b82f6;
}
.focus\:ring-offset-2:focus {
--tw-ring-offset-width: 2px;
--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
}
.focus\:outline-none:focus {
--tw-outline-style: none;
outline-style: none;
}
@media (width < 768px) {
.max-\[768px\]\:mb-\[40px\] {
margin-bottom: 40px;
}
}
@media (width < 768px) {
.max-\[768px\]\:gap-\[20px\] {
gap: 20px;
@@ -1140,6 +1124,11 @@
font-size: 28px;
}
}
@media (width < 768px) {
.max-\[768px\]\:text-\[34px\] {
font-size: 34px;
}
}
@media (width < 768px) {
.max-\[768px\]\:text-\[36px\] {
font-size: 36px;