:root {
--primary: #0062ff;
--secondary: #4caf50;
--dark: #212529;
--light: #f8f9fa;
--success: #4cc9f0;
--danger: #f72585;
--active-bg: #e9ecef;
--tab-height: 40px;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Segoe UI', system-ui, sans-serif !important;
background-color: #f5f7fa;
color: var(--dark);
line-height: 1.6;
max-width: 1800px;
margin: 0 auto;
padding: 10px;
height: 100vh;
display: flex;
flex-direction: column;
animation: fadeInStart 1s ease-in-out forwards;
}
@keyframes fadeInStart {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.app-container {
display: grid;
grid-template-columns: 1fr 350px;
gap: 10px;
flex: 1;
min-height: 0;
}
/* Preview Area */
.preview-area {
background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
height: 100%;
overflow:hidden;
min-height:720px;
}
.preview-header {
padding: 10px 15px;
border-bottom: 1px solid #e2e8f0;
flex-shrink: 0;
}
.preview-header h2,
.settings-header h2 {
font-size: 1.3rem;
}
.preview-container {
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: white;
overflow: hidden;
}
.preview-footer {
padding: 10px;
border-top: 1px solid #e2e8f0;
flex-shrink: 0;
display: flex;
gap: 10px;
}
#preview-preloader {
position: absolute;
inset: 0;
background: #3a0ca3;
color: #fff;
z-index: 9999;
font-family: sans-serif;
min-height:10vmin;
}
/* Settings Sidebar */
.settings-sidebar {
background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
height: 100%;
min-height:270px;
}
.settings-header {
padding: 10px 15px;
border-bottom: 1px solid #e2e8f0;
flex-shrink: 0;
}
.settings-tabs {
display: flex;
border-bottom: 1px solid #e2e8f0;
flex-shrink: 0;
}
.settings-tab {
padding: 10px 15px;
cursor: pointer;
border-bottom: 2px solid transparent;
transition: all 0.2s;
font-size: 14px;
font-weight: 500;
}
.settings-tab.active {
border-bottom-color: var(--primary);
color: var(--primary);
}
.settings-content {
flex: 1;
overflow-y: auto;
padding: 15px;
}
.settings-group {
margin-bottom: 15px;
}
.settings-footer {
padding: 10px;
border-top: 1px solid #e2e8f0;
flex-shrink: 0;
display: flex;
gap: 10px;
}
.form-control {
margin-bottom: 15px;
}
.form-control label {
display: block;
margin-bottom: 5px;
font-size: 14px;
color: #495057;
}
.form-control input[type="text"],
.form-control input[type="number"],
.form-control select {
width: 100%;
padding: 8px 12px;
border: 1px solid #ced4da;
border-radius: 4px;
font-size: 14px;
}
.form-control input[type="color"] {
width: 100%;
height: 40px;
padding: 2px;
border: 1px solid #ced4da;
border-radius: 4px;
}
.form-control input[type="range"] {
width: 100%;
}
/* Додати після існуючих стилів для .form-control */
.gradient-control {
transition: all 0.3s ease;
}
.range-value {
display: inline-block;
margin-left: 10px;
font-size: 14px;
color: var(--secondary);
}
.position-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-bottom: 15px;
}
.position-option {
display: flex;
flex-direction: column;
align-items: center;
padding: 8px;
border: 1px solid #ced4da;
border-radius: 4px;
cursor: pointer;
text-align: center;
font-size: 12px;
}
.position-option.selected {
border-color: var(--primary);
background-color: rgba(67, 97, 238, 0.1);
}
.position-option i {
font-size: 20px;
margin-bottom: 4px;
}
/* Buttons */
.btn {
padding: 8px 12px;
border-radius: 6px;
border: none;
font-size: 14px;
cursor: pointer;
transition: all 0.2s;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 1;
white-space: nowrap;
}
.btn i {
margin-right: 6px;
}
.btn-primary {
background-color: var(--primary);
color: white;
}
.btn-primary:hover {
background-color: var(--secondary);
}
.btn-outline {
background-color: transparent;
border: 1px solid #ced4da;
color: #495057;
}
.btn-outline:hover {
background-color: #f1f3f5;
}
/* Preview elements styles */
.preview-spinner-wrap {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
}
.preview-spinner {
width: 8vmin;
height: 8vmin;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
aspect-ratio: 1/1;
}
.preview-spinner-inner {
width: 100%;
height: 100%;
aspect-ratio: 1/1;
border: ${size/8}vmin solid rgba(255,255,255,.2);
border-top: ${size/8}vmin solid #fff;
border-radius: 50%;
animation: spin 1s linear infinite;
}
.preview-progress-text {
font-size: 2.5vmin;
position: absolute;
text-align:center;
}
.preview-logo {
position: absolute;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Додайте ці стилі в розділ CSS */
input[type="range"] {
-webkit-appearance: none;
width: 100%;
height: 8px;
background: #e9ecef;
border-radius: 4px;
margin-top: 8px;
background-image: linear-gradient(var(--primary), var(--primary));
background-size: 0% 100%;
background-repeat: no-repeat;
}
input[type="range"]::-webkit-slider-runnable-track {
-webkit-appearance: none;
box-shadow: none;
border: none;
background: transparent;
}
input[type="range"]::-moz-range-track {
box-shadow: none;
border: none;
background: transparent;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 18px;
height: 18px;
background: var(--primary);
border-radius: 50%;
cursor: pointer;
position: relative;
z-index: 1;
}
input[type="range"]::-moz-range-thumb {
width: 18px;
height: 18px;
background: var(--primary);
border-radius: 50%;
cursor: pointer;
position: relative;
z-index: 1;
}
/* Додати до існуючих стилів для .form-control */
.form-control label input[type="checkbox"] {
margin-right: 8px;
vertical-align: middle;
}
/* Pulse spinner */
.preview-spinner-pulse {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: currentColor;
opacity: 1;
animation: pulse 1.5s infinite ease-in-out;
flex-shrink: 0;
}
@keyframes pulse {
0%, 100% { transform: scale(0.8); opacity: 0.5; }
50% { transform: scale(1.2); opacity: 1; }
}
/* Dots spinner */
.preview-spinner-dots {
display: flex;
align-items: center;
justify-content: space-around;
width: 100%;
height: 100%;
}
.preview-spinner-dots span {
width: 25%;
height: 25%;
background-color: currentColor;
border-radius: 50%;
display: inline-block;
animation: dots-animation 1.4s infinite ease-in-out both;
flex-shrink: 0;
}
.preview-spinner-dots span:nth-child(1) { animation-delay: -0.32s; }
.preview-spinner-dots span:nth-child(2) { animation-delay: -0.16s; }
@keyframes dots-animation {
0%, 80%, 100% { transform: scale(0); }
40% { transform: scale(1); }
}
.preview-spinner-circle-pulse-ring {
width: 100%;
height: 100%;
position: relative;
}
.preview-spinner-circle-pulse-ring div {
position: absolute;
width: 20%;
height: 20%;
background: currentColor;
border-radius: 50%;
animation: spin-circle-pulse-ring 2s linear infinite;
}
.preview-spinner-circle-pulse-ring div:nth-child(1) { top: 0; left: 40%; animation-delay: 0s; }
.preview-spinner-circle-pulse-ring div:nth-child(2) { top: 10%; left: 10%; animation-delay: -0.5s; }
.preview-spinner-circle-pulse-ring div:nth-child(3) { top: 40%; left: 0; animation-delay: -1s; }
.preview-spinner-circle-pulse-ring div:nth-child(4) { top: 70%; left: 10%; animation-delay: -1.5s; }
.preview-spinner-circle-pulse-ring div:nth-child(5) { top: 80%; left: 40%; animation-delay: -2s; }
.preview-spinner-circle-pulse-ring div:nth-child(6) { top: 70%; left: 70%; animation-delay: -2.5s; }
.preview-spinner-circle-pulse-ring div:nth-child(7) { top: 40%; left: 80%; animation-delay: -3s; }
.preview-spinner-circle-pulse-ring div:nth-child(8) { top: 10%; left: 70%; animation-delay: -3.5s; }
@keyframes spin-circle-pulse-ring {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.3; transform: scale(0.5); }
}
.preview-spinner-dual-line-ring {
width: 100%;
height: 100%;
box-sizing: border-box;
border: 0.25em solid transparent;
border-top-color: currentColor;
border-bottom-color: currentColor;
border-radius: 50%;
animation: spin-dual-line-ring 1.5s linear infinite;
}
@keyframes spin-dual-line-ring {
to { transform: rotate(360deg); }
}
.preview-spinner-grid-pulse-blocks {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10%;
}
.preview-spinner-grid-pulse-blocks div {
background-color: currentColor;
border-radius: 2px;
animation: pulse-grid-pb 1.2s infinite ease-in-out;
width: 100%;
height: 100%;
}
.preview-spinner-grid-pulse-blocks div:nth-child(1) { animation-delay: 0s; }
.preview-spinner-grid-pulse-blocks div:nth-child(2) { animation-delay: 0.2s; }
.preview-spinner-grid-pulse-blocks div:nth-child(3) { animation-delay: 0.4s; }
.preview-spinner-grid-pulse-blocks div:nth-child(4) { animation-delay: 0.2s; }
.preview-spinner-grid-pulse-blocks div:nth-child(5) { animation-delay: 0.4s; }
.preview-spinner-grid-pulse-blocks div:nth-child(6) { animation-delay: 0.6s; }
.preview-spinner-grid-pulse-blocks div:nth-child(7) { animation-delay: 0.4s; }
.preview-spinner-grid-pulse-blocks div:nth-child(8) { animation-delay: 0.6s; }
.preview-spinner-grid-pulse-blocks div:nth-child(9) { animation-delay: 0.8s; }
@keyframes pulse-grid-pb {
0%, 100% { transform: scale(0.3); opacity: 0.5; }
50% { transform: scale(1); opacity: 1; }
}
.preview-spinner-corner-pulse-dots {
width: 100%;
height: 100%;
position: relative;
}
.preview-spinner-corner-pulse-dots div {
position: absolute;
width: 24%;
height: 24%;
background-color: currentColor;
border-radius: 50%;
animation: corner-pulse 1.2s linear infinite;
}
.preview-spinner-corner-pulse-dots div:nth-child(1) {
top: 12%;
left: 12%;
animation-delay: 0s;
}
.preview-spinner-corner-pulse-dots div:nth-child(2) {
top: 12%;
right: 12%;
animation-delay: -0.4s;
}
.preview-spinner-corner-pulse-dots div:nth-child(3) {
bottom: 12%;
left: 12%;
animation-delay: -0.4s;
}
.preview-spinner-corner-pulse-dots div:nth-child(4) {
bottom: 12%;
right: 12%;
animation-delay: -0.8s;
}
@keyframes corner-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(0.5); }
}
.preview-spinner-bouncing-dots {
display: flex;
justify-content: center;
align-items: center;
gap: 0; /* не використовуємо */
width: 100%;
height: 100%;
}
.preview-spinner-bouncing-dots div {
width: 20%;
aspect-ratio: 1 / 1;
margin: 0 5%;
border-radius: 50%;
background-color: currentColor;
animation: bounce-bdots 0.6s infinite alternate;
}
.preview-spinner-bouncing-dots div:nth-child(1) { animation-delay: 0s; }
.preview-spinner-bouncing-dots div:nth-child(2) { animation-delay: 0.1s; }
.preview-spinner-bouncing-dots div:nth-child(3) { animation-delay: 0.2s; }
@keyframes bounce-bdots {
from { transform: translateY(0); }
to { transform: translateY(-30%); }
}
.preview-spinner-square-pulse-morph {
width: 100%;
height: 100%;
background-color: currentColor;
animation: morph-square-pulse 0.7s ease-in-out infinite alternate;
}
@keyframes morph-square-pulse {
from { transform: scale(1); border-radius: 0; }
to { transform: scale(1.5); border-radius: 50%; }
}
.preview-spinner-grid-scale-squares {
display: grid;
grid-template-columns: repeat(2, 48%);
gap: 4%;
width: 100%;
height: 100%;
}
.preview-spinner-grid-scale-squares div {
width: 100%;
aspect-ratio: 1 / 1;
background-color: currentColor;
animation: scale-grid-ssq 1s ease-in-out infinite;
}
.preview-spinner-grid-scale-squares div:nth-child(1) { animation-delay: 0.2s; }
.preview-spinner-grid-scale-squares div:nth-child(2) { animation-delay: 0.4s; }
.preview-spinner-grid-scale-squares div:nth-child(3) { animation-delay: 0.6s; }
.preview-spinner-grid-scale-squares div:nth-child(4) { animation-delay: 0.8s; }
@keyframes scale-grid-ssq {
0%, 100% { transform: scale(1); }
50% { transform: scale(0.5); }
}
.preview-spinner-card-flip {
width: 100%;
height: 100%;
perspective: 200px;
position: relative;
}
.preview-spinner-card-flip .front,
.preview-spinner-card-flip .back {
width: 100%;
height: 100%;
background-color: currentColor;
backface-visibility: hidden;
position: absolute;
animation: flip-card-anim 1.5s ease-in-out infinite;
}
.preview-spinner-card-flip .back {
transform: rotateY(180deg);
}
@keyframes flip-card-anim {
0%, 100% { transform: rotateY(0deg); }
50% { transform: rotateY(180deg); }
}
.preview-spinner-bars-equalizer {
display: flex;
justify-content: center;
align-items: center;
gap: 8%;
width: 100%;
height: 100%;
}
.preview-spinner-bars-equalizer div {
width: 15%;
height: 30%;
background-color: currentColor;
animation: bars-eq-grow 1s ease-in-out infinite;
}
.preview-spinner-bars-equalizer div:nth-child(2) { animation-delay: 0.1s; }
.preview-spinner-bars-equalizer div:nth-child(3) { animation-delay: 0.2s; }
.preview-spinner-bars-equalizer div:nth-child(4) { animation-delay: 0.3s; }
@keyframes bars-eq-grow {
0%, 100% { height: 20%; }
50% { height: 80%; }
}
.preview-spinner-matrix-pulse-dots {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10%;
width: 100%;
height: 100%;
}
.preview-spinner-matrix-pulse-dots div {
width: 100%;
aspect-ratio: 1 / 1;
background-color: currentColor;
border-radius: 50%;
animation: matrix-pulse 1.2s ease-in-out infinite;
}
.preview-spinner-matrix-pulse-dots div:nth-child(odd) { animation-delay: 0s; }
.preview-spinner-matrix-pulse-dots div:nth-child(even) { animation-delay: 0.6s; }
@keyframes matrix-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(0.5); opacity: 0.5; }
}
.preview-spinner-dots-fade-trail {
display: flex;
justify-content: center;
align-items: center;
gap: 12%;
width: 100%;
height: 100%;
}
.preview-spinner-dots-fade-trail div {
width: 20%;
aspect-ratio: 1 / 1;
background-color: currentColor;
border-radius: 50%;
animation: fade-trail 1s ease-in-out infinite;
}
.preview-spinner-dots-fade-trail div:nth-child(2) { animation-delay: 0.2s; }
.preview-spinner-dots-fade-trail div:nth-child(3) { animation-delay: 0.4s; }
@keyframes fade-trail {
0%, 100% { opacity: 0.3; }
50% { opacity: 1; }
}
.preview-spinner-double-ring-rotate {
position: relative;
width: 100%;
height: 100%;
box-sizing: border-box;
}
.preview-spinner-double-ring-rotate .one,
.preview-spinner-double-ring-rotate .two {
position: absolute;
border: 0.25em solid transparent;
border-radius: 50%;
box-sizing: border-box;
}
.preview-spinner-double-ring-rotate .one {
width: 100%;
height: 100%;
border-top-color: currentColor;
animation: spin-double-ring-one 1s linear infinite;
}
.preview-spinner-double-ring-rotate .two {
width: 60%;
height: 60%;
top: 20%;
left: 20%;
border-bottom-color: currentColor;
animation: spin-double-ring-two 1.2s linear infinite reverse;
}
@keyframes spin-double-ring-one {
to { transform: rotate(360deg); }
}
@keyframes spin-double-ring-two {
to { transform: rotate(360deg); }
}
.preview-spinner-dots-circle-fade {
width: 100%;
height: 100%;
position: relative;
}
.preview-spinner-dots-circle-fade div {
position: absolute;
width: 16%;
height: 16%;
background: currentColor;
border-radius: 50%;
top: 50%;
left: 50%;
margin-top: -8%; /* Половина висоти */
margin-left: -8%; /* Половина ширини */
transform-origin: center;
animation: fade-dot-circle 1.2s ease-in-out infinite;
}
.preview-spinner-dots-circle-fade div:nth-child(1) {
transform: rotate(0deg) translate(0, -240%);
animation-delay: 0s;
}
.preview-spinner-dots-circle-fade div:nth-child(2) {
transform: rotate(60deg) translate(0, -240%);
animation-delay: 0.2s;
}
.preview-spinner-dots-circle-fade div:nth-child(3) {
transform: rotate(120deg) translate(0, -240%);
animation-delay: 0.4s;
}
.preview-spinner-dots-circle-fade div:nth-child(4) {
transform: rotate(180deg) translate(0, -240%);
animation-delay: 0.6s;
}
.preview-spinner-dots-circle-fade div:nth-child(5) {
transform: rotate(240deg) translate(0, -240%);
animation-delay: 0.8s;
}
.preview-spinner-dots-circle-fade div:nth-child(6) {
transform: rotate(300deg) translate(0, -240%);
animation-delay: 1s;
}
@keyframes fade-dot-circle {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
.preview-spinner-double-dot-rotate {
position: relative;
width: 100%;
height: 100%;
animation: rotate-double-dot 1s linear infinite;
}
.preview-spinner-double-dot-rotate::before,
.preview-spinner-double-dot-rotate::after {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 25%;
height: 25%;
background: currentColor;
border-radius: 50%;
}
.preview-spinner-double-dot-rotate::after {
top: 50%;
}
@keyframes rotate-double-dot {
to { transform: rotate(360deg); }
}
.preview-spinner-grid-expand-blocks {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10%;
width: 100%;
height: 100%;
}
.preview-spinner-grid-expand-blocks div {
background-color: currentColor;
width: 100%;
height: 100%;
animation: expand-grid-block 1s ease-in-out infinite;
}
.preview-spinner-grid-expand-blocks div:nth-child(odd) {
animation-delay: 0s;
}
.preview-spinner-grid-expand-blocks div:nth-child(even) {
animation-delay: 0.5s;
}
@keyframes expand-grid-block {
0%, 100% { transform: scale(1); }
50% { transform: scale(0.5); }
}
.preview-spinner-sliding-bar {
width: 100%;
height: 20%;
background: rgba(255, 255, 255, 0.3);
position: relative;
overflow: hidden;
border-radius: 999px;
}
.preview-spinner-sliding-bar::before {
content: '';
position: absolute;
left: -25%;
width: 25%;
height: 100%;
background-color: currentColor;
animation: move-sliding-bar 1s linear infinite;
}
@keyframes move-sliding-bar {
to { left: 100%; }
}
.preview-spinner-ellipsis-dots {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.preview-spinner-ellipsis-dots div {
width: 20%;
aspect-ratio: 1 / 1;
margin: 0 5%;
border-radius: 50%;
background-color: currentColor;
animation: ellipsis-fade 1.2s infinite ease-in-out;
opacity: 0;
}
.preview-spinner-ellipsis-dots div:nth-child(2) { animation-delay: 0.2s; }
.preview-spinner-ellipsis-dots div:nth-child(3) { animation-delay: 0.4s; }
@keyframes ellipsis-fade {
0%, 80%, 100% { opacity: 0; }
40% { opacity: 1; }
}
.preview-spinner-border-pulse-ring {
width: 100%;
height: 100%;
border: 12.5%;
border-style: solid;
border-color: currentColor;
border-radius: 50%;
animation: border-pulse-ring 1s ease-in-out infinite;
box-sizing: border-box;
}
@keyframes border-pulse-ring {
0% {transform: scale(1); }
50% {transform: scale(0.8); }
100% {transform: scale(1); }
}
.preview-spinner-radial-pulse-expand {
border-radius: 50%;
background-color: currentColor;
animation: radial-expand 1.5s ease-out infinite;
opacity: 0;
}
@keyframes radial-expand {
0% {
width: 0%;
height: 0%;
opacity: 1;
}
100% {
width: 100%;
height: 100%;
opacity: 0;
}
}
.preview-spinner-bouncing-dot-box {
position: relative;
width: 100%;
height: 100%;
border: 0.15em solid currentColor;
box-sizing: border-box;
}
.preview-spinner-bouncing-dot-box div {
position: absolute;
width: 25%;
height: 25%;
background-color: currentColor;
border-radius: 50%;
animation: bounce-dot-box 1s ease-in-out infinite;
}
@keyframes bounce-dot-box {
0%, 100% { top: 0%; left: 0%; }
25% { top: 0%; left: 75%; }
50% { top: 75%; left: 75%; }
75% { top: 75%; left: 0%; }
}
.preview-spinner-morph-rotate-shape {
width: 100%;
height: 100%;
background-color: currentColor;
border-radius: 0%;
animation: morph-rotate 1.2s ease-in-out infinite alternate;
}
@keyframes morph-rotate {
0% {
border-radius: 0%;
transform: rotate(0deg);
}
100% {
border-radius: 50%;
transform: rotate(180deg);
}
}
.preview-spinner-cube-3d-rotate {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
animation: rotate-cube-3d 2s infinite linear;
}
.preview-spinner-cube-3d-rotate div {
position: absolute;
width: 90%;
height: 90%;
background-color: currentColor;
border: 0.1em solid #fff;
}
.preview-spinner-cube-3d-rotate .front { transform: translateZ(45%); }
.preview-spinner-cube-3d-rotate .back { transform: rotateY(180deg) translateZ(45%); }
.preview-spinner-cube-3d-rotate .right { transform: rotateY(90deg) translateZ(45%); }
.preview-spinner-cube-3d-rotate .left { transform: rotateY(-90deg) translateZ(45%); }
.preview-spinner-cube-3d-rotate .top { transform: rotateX(90deg) translateZ(45%); }
.preview-spinner-cube-3d-rotate .bottom { transform: rotateX(-90deg) translateZ(45%); }
@keyframes rotate-cube-3d {
from { transform: rotateX(0deg) rotateY(0deg); }
to { transform: rotateX(360deg) rotateY(360deg); }
}
@keyframes ripple-wave {
0% {
width: 0%;
height: 0%;
opacity: 1;
transform: translate(-50%, -50%);
}
100% {
width: 100%;
height: 100%;
opacity: 0;
transform: translate(-50%, -50%);
}
}
.preview-spinner-ripple-dual-waves {
position: relative;
width: 100%;
height: 100%;
aspect-ratio: 1 / 1;
}
.preview-spinner-ripple-dual-waves div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0%;
height: 0%;
border: 0.8vmin solid currentColor;
background: transparent;
border-radius: 50%;
opacity: 0;
animation: ripple-wave 1.5s infinite;
box-sizing: border-box; /* ✅ ДОДАЙ ЦЕ */
}
.preview-spinner-ripple-dual-waves div:nth-child(2) {
animation-delay: 0.75s;
}
.preview-spinner-bars-folding {
display: flex;
justify-content: center;
align-items: center;
gap: 10%;
width: 100%;
height: 100%;
}
.preview-spinner-bars-folding div {
width: 20%;
height: 100%;
background-color: currentColor;
transform-origin: bottom center;
animation: fold-bars 1s ease-in-out infinite;
}
.preview-spinner-bars-folding div:nth-child(2) {
animation-delay: 0.2s;
}
.preview-spinner-bars-folding div:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes fold-bars {
0%, 100% { transform: scaleY(1); }
50% { transform: scaleY(0.2); }
}
.preview-spinner-orbit-square {
position: relative;
width: 100%;
height: 100%;
}
.preview-spinner-orbit-square div {
position: absolute;
width: 20%;
height: 20%;
border-radius: 50%;
background: currentColor;
animation: orbit-square-move 1.2s linear infinite;
}
.preview-spinner-orbit-square div:nth-child(2) {
animation-delay: 0.6s;
}
@keyframes orbit-square-move {
0% { top: 0%; left: 0%; }
25% { top: 0%; left: 80%; }
50% { top: 80%; left: 80%; }
75% { top: 80%; left: 0%; }
100% { top: 0%; left: 0%; }
}
.preview-spinner-cube-bounce-2 {
position: relative;
width: 100%;
height: 100%;
}
.preview-spinner-cube-bounce-2 div {
position: absolute;
width: 50%;
height: 50%;
background-color: currentColor;
animation: cube-move-2 1.8s ease-in-out infinite;
}
.preview-spinner-cube-bounce-2 div:nth-child(2) {
animation-delay: -0.9s;
}
@keyframes cube-move-2 {
25% { transform: translateX(100%); }
50% { transform: translateX(100%) translateY(100%); }
75% { transform: translateY(100%); }
100% { transform: translateX(0%) translateY(0%); }
}
/* Progress bar spinner */
.preview-spinner-progress-bar {
width: 100%;
height: 100%;
background-color: rgba(255,255,255,0.2);
border-radius:2vmin;
overflow: hidden;
position: relative;
}
.preview-spinner-progress-bar-fill {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 30%; /* Початкове значення для прев'ю */
background-color: currentColor;
transition: width 0.3s ease;
}
.bg-color-control, .gradient-control {
transition: all 0.3s ease;
}
.gradient-colors-container {
display: flex;
gap: 10px;
margin-top: 8px;
}
.color-picker-group {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
}
.color-picker-group label {
font-size: 12px;
color: #495057;
}
.toast-close {
background: none;
border: none;
color: white;
cursor: pointer;
font-size: 16px;
opacity: 0.8;
transition: opacity 0.2s;
flex-shrink: 0;
padding: 0;
margin-left: 8px;
}
.toast-close:hover {
opacity: 1;
}
/* Стилі для тоста */
.toast-content {
display: flex;
align-items: center;
gap: 12px;
margin-right: 12px;
overflow: hidden;
}
.toast-icon {
font-size: 18px;
flex-shrink: 0;
}
.toast-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.progress-text {
font-size: ${textSize}vmin;
text-align:center;
}
.preloader-group {
display: flex;
gap: 4vmin;
align-items: center;
width: auto;
}
.preloader-with-logo {
display: flex;
flex-direction: column;
align-items: center;
gap: ${logoGap}vmin;
}
.google-font-control, .custom-font-control {
transition: all 0.3s ease;
}
.header {
display: flex;
flex-wrap: wrap; /* Дозволяє переносити елементи на малих екранах */
gap: 15px; /* Відступи між елементами при переносі */
justify-content: space-between;
align-items: center;
padding: 15px 20px;
background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
margin-bottom: 15px;
}
.header-brand {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0; /* Забороняє стискання */
min-width: max-content; /* Мінімальна ширина по вмісту */
}
.header-icon {
font-size: 24px;
width: 40px;
height: 40px;
background: var(--primary);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
flex-shrink: 0; /* Забороняє стискання */
/*animation: spin 1.5s linear infinite;*/
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.header-title {
font-size: 1.5rem;
font-weight: bold;
color: var(--dark);
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap; /* Забороняє переніс тексту */
}
.header-version {
font-size: 0.9rem;
color: #666;
font-weight: normal;
}
/* Responsive */
@media (max-width: 768px) {
.app-container {
grid-template-columns: 1fr;
}
.position-option {
padding: 6px;
}
.preview-header h2,
.settings-header h2 {
font-size: 1.1rem;
}
.header {
justify-content: center; /* Центруємо елементи на малих екранах */
}
.header-title {font-size:1.3rem}
.preview-area {
min-height:640px;
}
}
@media (max-width: 480px) {
.toast-message {
width: calc(100% - 32px) !important;
max-width: none !important;
padding: 12px !important;
}
.toast-text {
white-space: normal;
font-size: 14px;
}
.toast-icon {
font-size: 16px;
}
.toast-close {
font-size: 14px;
}
.preview-area {
min-height:480px;
}
}
@media (max-width: 320px) {
.preview-area {
min-height:320px;
}
}
#email-link {text-decoration:none; white-space:normal}