/* Modern theme overrides (safe CSS-only). Scope: */ /* 1) Palette via CSS variables (fallback to existing where possible) */ html, body { overflow-x: hidden; } :root { /* Bulma Variables Bridge */ --bulma-primary: var(--color-primary); --color-background-body: #0d0f14; --color-background-card: #161b22; --color-background-search: #0d1117; --color-background-menu: #161b22; --color-text: #f0f6fc; --color-text-muted: #8b949e; --color-primary: #2dd4bf; --color-primary-hover: #5eead4; --color-border: #30363d; --color-border-subtle: rgba(255, 255, 255, 0.05); --color-danger: #f85149; --color-success: #3fb950; --color-icons-default: #7dd87d; /* Surface colors for modern theme */ --surface-1: #161b22; --surface-2: #21262d; --surface-3: #30363d; /* Accent Variants */ --theme-teal: #2dd4bf; --theme-violet: #a78bfa; --theme-rose: #fb7185; --theme-amber: #fbbf24; --theme-blue: #60a5fa; --theme-sky: #38bdf8; --theme-emerald: #34d399; --theme-red: #f87171; --theme-indigo: #6366f1; --theme-cyan: #22d3ee; --theme-lime: #a3e635; --theme-yellow: #facc15; --theme-orange: #fb923c; --theme-pink: #f472b6; --theme-purple: #c084fc; --theme-fuchsia: #e879f9; --theme-green: #22c55e; --theme-mint: #5eead4; --theme-gold: #eab308; --theme-copper: #d97706; --theme-magenta: #d946ef; --theme-slate: #94a3b8; --theme-zinc: #a1a1aa; --accent: var(--theme-teal); --accent-2: var(--theme-violet); --card-radius: var(--video-card-rounded, 16px); --container-max-width: 1680px; --cards-cols-xxl: 6; --cards-cols-xl: 4; --cards-cols-lg: 3; --cards-cols-md: 2; --cards-cols-sm: 2; /* Compatibility with old variable names used in this file */ --border-subtle: rgba(255, 255, 255, 0.05); --danger: #f85149; --ok: #3fb950; /* Bulma Bridge */ --bulma-card-background-color: #161b22; --bulma-card-color: #f0f6fc; /* Tabler/Style bridge */ --tblr-primary: var(--accent); --tblr-primary-rgb: 45, 212, 191; --tblr-body-bg: #0d0f14; --tblr-bg-surface: #161b22; --tblr-border-color: #30363d; --url-view: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-eye' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0' /%3E%3Cpath d='M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6' /%3E%3C/svg%3E"); --url-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-clock' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0' /%3E%3Cpath d='M12 7l0 5l3 3' /%3E%3C/svg%3E"); --url-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-calendar' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z' /%3E%3Cpath d='M16 3v4' /%3E%3Cpath d='M8 3v4' /%3E%3Cpath d='M4 11h16' /%3E%3Cpath d='M11 15h1' /%3E%3Cpath d='M12 15v3' /%3E%3C/svg%3E"); --url-screens: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-photo' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M15 8h.01' /%3E%3Cpath d='M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12z' /%3E%3Cpath d='M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5' /%3E%3Cpath d='M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3' /%3E%3C/svg%3E"); --url-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-download' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2' /%3E%3Cpath d='M7 11l5 5l5 -5' /%3E%3Cpath d='M12 4l0 12' /%3E%3C/svg%3E"); --card-gap: 0.5rem; --section-gap: 1rem; .icon-logo { background-image: var(--url-logo); background-repeat: no-repeat; background-size: contain; background-position: center; display: inline-block; width: 22px; height: 22px; vertical-align: text-top; margin: 0 1px 0 0; } --url-logo: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' width='512px' height='512px' style='shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='opacity:1' fill='%23ffffff' d='M0 467.5,74.5 C 478.506,75.1275 489.506,75.9609 500.5,77C 502.98,80.3947 504.48,84.228 505,88.5C 508.71,109.725 502.043,126.725 485,139.5C 485.555,143.183 486.555,146.85 488,150.5C 489.768,162.802 485.602,172.635 475.5,180C 472.751,181.123 470.251,182.623 468,184.5C 473.337,205.647 465.504,218.98 444.5,224.5C 451.024,238.658 448.024,250.158 435.5,259C 430.311,261.396 424.977,263.396 419.5,265C 412.169,279.024 400.836,288.357 385.5,293C 378.306,294.943 370.973,295.943 363.5,296C 359.61,306.4 352.276,312.567 341.5,314.5C 336.943,314.32 332.776,312.987 329,310.5C 324.901,317.698 320.068,324.364 314.5,330.5C 308.649,336.567 302.315,337.067 295.5,332C 291.944,327.941 287.944,324.441 283.5,321.5C 281.428,325.564 280.095,329.897 279.5,334.5C 297.513,348.929 298.013,363.929 281,379.5C 280.899,400.848 273.732,419.348 259.5,435C 258.128,435.402 256.795,435.902 255.5,436.5C 249.553,433.72 245.053,429.387 242,423.5C 234.258,409.867 230.258,395.2 230,379.5C 212.987,363.929 213.487,348.929 231.5,334.5C 230.906,329.935 229.573,325.601 227.5,321.5C 222.31,325.858 216.977,330.024 211.5,334C 207.833,336 204.167,336 200.5,334C 193.03,327.244 186.863,319.411 182,310.5C 170.316,317.203 160.316,315.203 152,304.5C 150.627,301.588 149.127,298.754 147.5,296C 127.015,296.005 109.848,288.505 96,273.5C 94.1031,270.873 92.6031,268.039 91.5,265C 81.8342,263.12 73.6676,258.62 67,251.5C 62.534,242.632 62.3673,233.632 66.5,224.5C 45.4959,218.98 37.6626,205.647 43,184.5C 33.5232,179.691 26.8566,172.358 23,162.5C 22.3333,158.5 22.3333,154.5 23,150.5C 24.445,146.85 25.445,143.183 26,139.5C 6.56688,124.135 0.566876,104.468 8,80.5C 8.5,78.6667 9.66667,77.5 11.5,77C 47.6308,75.0126 82.9642,79.3459 117.5,90C 137.635,96.8467 155.135,107.68 170,122.5C 170.667,124.833 170.667,127.167 170,129.5C 163.192,145.155 160.859,161.489 163,178.5C 164.424,192.846 170.257,205.012 180.5,215C 189.621,221.592 198.621,221.592 207.5,215C 208.878,213.287 210.545,211.953 212.5,211C 214.293,208.205 216.46,205.705 219,203.5C 220.141,200.938 220.974,198.272 221.5,195.5C 218.305,187.248 215.305,178.915 212.5,170.5C 209.378,168.986 206.045,168.32 202.5,168.5C 198.656,168.715 194.823,169.048 191,169.5C 186.371,169.874 183.871,167.708 183.5,163C 186.569,146.764 196.235,136.931 212.5,133.5C 224.859,108.757 244.526,99.9241 271.5,107C 293.595,117.011 303.428,134.177 301,158.5C 299.219,170.293 295.885,181.626 291,192.5C 290.262,196.261 290.595,199.928 292,203.5C 298.052,211.88 306.052,217.547 316,220.5C 329.952,217.558 339.285,209.225 344,195.5C 350.83,171.916 349.663,148.749 340.5,126C 340.542,124.033 341.042,122.199 342,120.5C 366.305,94.9326 396.138,80.4326 431.5,77C 443.647,76.0551 455.647,75.2218 467.5,74.5 Z'/%3e%3c/g%3e%3cg%3e%3cpath style='opacity:1' fill='%234a8deb' d='M 441.5,87.5 C 455.504,87.3334 469.504,87.5001 483.5,88C 486.553,88.1786 489.553,88.6786 492.5,89.5C 496.02,107.452 490.02,121.119 474.5,130.5C 452.618,125.176 431.784,127.842 412,138.5C 410.31,143.801 412.143,146.801 417.5,147.5C 425.727,144.703 434.06,142.203 442.5,140C 450.167,139.333 457.833,139.333 465.5,140C 471.243,142.606 474.743,147.106 476,153.5C 476.805,157.909 475.805,161.909 473,165.5C 468.344,169.329 463.344,172.663 458,175.5C 445.052,168.858 431.552,167.691 417.5,172C 408.777,173.953 400.611,177.119 393,181.5C 391.128,186.692 392.795,189.692 398,190.5C 407.59,186.859 417.423,184.026 427.5,182C 437.482,180.102 446.648,181.935 455,187.5C 456.942,193.515 456.942,199.515 455,205.5C 449.838,209.799 443.838,212.132 437,212.5C 424.562,207.414 411.729,206.248 398.5,209C 389.067,211.055 380.067,214.222 371.5,218.5C 369.296,223.376 370.629,226.709 375.5,228.5C 384.632,224.955 393.966,222.122 403.5,220C 412.01,218.886 420.344,219.552 428.5,222C 435.078,229.014 436.578,236.847 433,245.5C 426.049,249.707 418.549,252.54 410.5,254C 405.932,266.568 397.265,275.235 384.5,280C 379.481,281.933 374.314,283.099 369,283.5C 364.698,283.353 360.531,282.853 356.5,282C 355.667,282.833 354.833,283.667 354,284.5C 352.39,289.331 350.39,293.997 348,298.5C 345.005,301.265 341.505,302.098 337.5,301C 334.833,299 332.167,297 329.5,295C 327.029,294.294 324.695,294.627 322.5,296C 317.836,305.815 311.836,314.648 304.5,322.5C 298.977,317.81 293.311,313.31 287.5,309C 279.459,306.937 273.959,309.77 271,317.5C 267.829,325.224 266.829,333.224 268,341.5C 272.652,344.486 276.652,348.153 280,352.5C 280.667,355.5 280.667,358.5 280,361.5C 276.667,366.167 272.667,370.167 268,373.5C 269.29,390.678 265.123,406.345 255.5,420.5C 245.877,406.345 241.71,390.678 243,373.5C 238.333,370.167 234.333,366.167 231,361.5C 229.347,355.622 230.847,350.788 235.5,347C 238.266,345.533 240.766,343.7 243,341.5C 244.635,331.046 242.635,321.379 237,312.5C 233.257,308.741 228.757,307.574 223.5,309C 217.689,313.31 212.023,317.81 206.5,322.5C 199.164,314.648 193.164,305.815 188.5,296C 186.305,294.627 183.971,294.294 181.5,295C 178.833,297 176.167,299 173.5,301C 169.495,302.098 165.995,301.265 163,298.5C 160.443,294.055 158.443,289.389 157,284.5C 156.167,283.667 155.333,282.833 154.5,282C 135.262,285.809 119.095,280.309 106,265.5C 103.968,261.724 102.135,257.89 100.5,254C 92.5588,252.909 85.2255,250.243 78.5,246C 75.6819,242.662 74.8485,238.829 76,234.5C 77.4743,229.031 80.3076,224.531 84.5,221C 91.7527,219.443 99.086,219.11 106.5,220C 116.187,222.229 125.687,225.063 135,228.5C 140.023,227.458 141.69,224.458 140,219.5C 138.011,217.268 135.511,215.768 132.5,215C 117.643,209.428 102.31,207.095 86.5,208C 76.6046,214.11 66.9379,213.776 57.5,207C 56.1068,205.829 55.2735,204.329 55,202.5C 51.7363,190.897 55.9029,184.064 67.5,182C 72.8333,181.333 78.1667,181.333 83.5,182C 93.4549,184.393 103.288,187.226 113,190.5C 118.205,189.692 119.872,186.692 118,181.5C 102.195,173.341 85.3619,169.508 67.5,170C 62.465,170.901 57.6316,172.401 53,174.5C 45.94,172.435 40.2733,168.435 36,162.5C 33.8158,154.537 35.6492,147.537 41.5,141.5C 49.0252,139.481 56.6918,138.981 64.5,140C 74.3564,141.786 84.0231,144.286 93.5,147.5C 98.8571,146.801 100.69,143.801 99,138.5C 78.4969,127.833 56.9969,125 34.5,130C 20.4384,119.987 15.1051,106.487 18.5,89.5C 56.5546,87.5646 93.2213,93.7313 128.5,108C 136.836,112.499 144.836,117.499 152.5,123C 154.448,124.439 155.781,126.272 156.5,128.5C 144.781,159.664 147.614,189.331 165,217.5C 180.272,234.621 197.438,236.787 216.5,224C 221.367,219.468 225.867,214.634 230,209.5C 233.195,203.175 234.195,196.509 233,189.5C 229.382,180.599 226.049,171.599 223,162.5C 220.125,159.537 216.625,157.704 212.5,157C 207.833,156.667 203.167,156.333 198.5,156C 204.118,149.191 211.451,145.524 220.5,145C 223.825,135.026 229.825,127.026 238.5,121C 255.725,113.045 270.558,116.211 283,130.5C 289.523,140.384 291.19,151.051 288,162.5C 285.599,171.37 282.599,180.036 279,188.5C 277.431,197.027 278.765,205.027 283,212.5C 289.07,220.244 296.57,226.077 305.5,230C 324.886,234.978 339.719,228.811 350,211.5C 363.976,183.866 365.142,155.699 353.5,127C 368.789,111.069 387.122,100.069 408.5,94C 419.542,91.3155 430.542,89.1489 441.5,87.5 Z'/%3e%3c/g%3e%3cg%3e%3cpath style='opacity:1' fill='%23010204' d='M 246.5,139.5 C 252.176,139.334 257.843,139.501 263.5,140C 267,143.004 267.333,146.337 264.5,150C 258.5,150.667 252.5,150.667 246.5,150C 243.978,146.573 243.978,143.073 246.5,139.5 Z'/%3e%3c/g%3e%3c/svg%3e"); } body.theme-accent-teal { --accent: var(--theme-teal); --accent-2: var(--theme-violet); --tblr-primary-rgb: 45, 212, 191; --color-primary: var(--accent); --color-primary-hover: color-mix(in srgb, var(--accent) 85%, #fff); } body.theme-accent-violet { --accent: var(--theme-violet); --accent-2: var(--theme-teal); --tblr-primary-rgb: 167, 139, 250; --color-primary: var(--accent); --color-primary-hover: color-mix(in srgb, var(--accent) 85%, #fff); } body.theme-accent-rose { --accent: var(--theme-rose); --accent-2: var(--theme-amber); --tblr-primary-rgb: 251, 113, 133; --color-primary: var(--accent); --color-primary-hover: color-mix(in srgb, var(--accent) 85%, #fff); } body.theme-accent-amber { --accent: var(--theme-amber); --accent-2: var(--theme-rose); --tblr-primary-rgb: 251, 191, 36; --color-primary: var(--accent); --color-primary-hover: color-mix(in srgb, var(--accent) 85%, #fff); } body.theme-accent-blue { --accent: var(--theme-blue); --accent-2: var(--theme-sky); --tblr-primary-rgb: 96, 165, 250; --color-primary: var(--accent); --color-primary-hover: color-mix(in srgb, var(--accent) 85%, #fff); } body.theme-accent-sky { --accent: var(--theme-sky); --accent-2: var(--theme-blue); --tblr-primary-rgb: 56, 189, 248; --color-primary: var(--accent); --color-primary-hover: color-mix(in srgb, var(--accent) 85%, #fff); } body.theme-accent-emerald { --accent: var(--theme-emerald); --accent-2: var(--theme-teal); --tblr-primary-rgb: 52, 211, 153; --color-primary: var(--accent); --color-primary-hover: color-mix(in srgb, var(--accent) 85%, #fff); } body.theme-accent-red { --accent: var(--theme-red); --accent-2: var(--theme-rose); --tblr-primary-rgb: 248, 113, 113; --color-primary: var(--accent); --color-primary-hover: color-mix(in srgb, var(--accent) 85%, #fff); } body.theme-accent-indigo { --accent: var(--theme-indigo); --accent-2: var(--theme-violet); --tblr-primary-rgb: 99, 102, 241; --color-primary: var(--accent); --color-primary-hover: color-mix(in srgb, var(--accent) 85%, #fff); } body.theme-accent-cyan { --accent: var(--theme-cyan); --accent-2: var(--theme-blue); --tblr-primary-rgb: 34, 211, 238; --color-primary: var(--accent); --color-primary-hover: color-mix(in srgb, var(--accent) 85%, #fff); } body.theme-accent-lime { --accent: var(--theme-lime); --accent-2: var(--theme-emerald); --tblr-primary-rgb: 163, 230, 53; --color-primary: var(--accent); --color-primary-hover: color-mix(in srgb, var(--accent) 85%, #fff); } body.theme-accent-yellow { --accent: var(--theme-yellow); --accent-2: var(--theme-amber); --tblr-primary-rgb: 250, 204, 21; --color-primary: var(--accent); --color-primary-hover: color-mix(in srgb, var(--accent) 85%, #fff); } body.theme-accent-orange { --accent: var(--theme-orange); --accent-2: var(--theme-red); --tblr-primary-rgb: 251, 146, 60; --color-primary: var(--accent); --color-primary-hover: color-mix(in srgb, var(--accent) 85%, #fff); } body.theme-accent-pink { --accent: var(--theme-pink); --accent-2: var(--theme-rose); --tblr-primary-rgb: 244, 114, 182; --color-primary: var(--accent); --color-primary-hover: color-mix(in srgb, var(--accent) 85%, #fff); } body.theme-accent-purple { --accent: var(--theme-purple); --accent-2: var(--theme-fuchsia); --tblr-primary-rgb: 192, 132, 252; --color-primary: var(--accent); --color-primary-hover: color-mix(in srgb, var(--accent) 85%, #fff); } body.theme-accent-fuchsia { --accent: var(--theme-fuchsia); --accent-2: var(--theme-purple); --tblr-primary-rgb: 232, 121, 249; --color-primary: var(--accent); --color-primary-hover: color-mix(in srgb, var(--accent) 85%, #fff); } body.theme-accent-green { --accent: var(--theme-green); --accent-2: var(--theme-emerald); --tblr-primary-rgb: 34, 197, 94; --color-primary: var(--accent); --color-primary-hover: color-mix(in srgb, var(--accent) 85%, #fff); } body.theme-accent-mint { --accent: var(--theme-mint); --accent-2: var(--theme-teal); --tblr-primary-rgb: 94, 234, 212; --color-primary: var(--accent); --color-primary-hover: color-mix(in srgb, var(--accent) 85%, #fff); } body.theme-accent-gold { --accent: var(--theme-gold); --accent-2: var(--theme-amber); --tblr-primary-rgb: 234, 179, 8; --color-primary: var(--accent); --color-primary-hover: color-mix(in srgb, var(--accent) 85%, #fff); } body.theme-accent-copper { --accent: var(--theme-copper); --accent-2: var(--theme-orange); --tblr-primary-rgb: 217, 119, 6; --color-primary: var(--accent); --color-primary-hover: color-mix(in srgb, var(--accent) 85%, #fff); } body.theme-accent-magenta { --accent: var(--theme-magenta); --accent-2: var(--theme-fuchsia); --tblr-primary-rgb: 217, 70, 239; --color-primary: var(--accent); --color-primary-hover: color-mix(in srgb, var(--accent) 85%, #fff); } body.theme-accent-slate { --accent: var(--theme-slate); --accent-2: var(--theme-sky); --tblr-primary-rgb: 148, 163, 184; --color-primary: var(--accent); --color-primary-hover: color-mix(in srgb, var(--accent) 85%, #fff); } body.theme-accent-zinc { --accent: var(--theme-zinc); --accent-2: var(--theme-blue); --tblr-primary-rgb: 161, 161, 170; --color-primary: var(--accent); --color-primary-hover: color-mix(in srgb, var(--accent) 85%, #fff); } body { background-color: var(--color-background-body); background-image: linear-gradient(180deg, rgba(13, 15, 20, 0) 0%, #0d0f14 100%); /* прозрачность декоративного фона (может переопределяться из JS) */ --bg-opacity: 0.18; /* акцентные цвета для декоративного фона (JS может переопределить) */ --bg-accent-1: var(--accent); --bg-accent-2: var(--accent-2); /* Макет: чтобы футер прижимался к низу экрана */ min-height: 100vh; display: flex; flex-direction: column; /* прозрачность градиента фона карточек */ --card-bg-opacity: 0.08; color: var(--color-text); padding-top: 70px; /* Отступ под шапку */ } .container-xl { max-width: var(--container-max-width) !important; } @media (max-width: 768px) { body { padding-top: 60px; } } /* Шрифты для body */ body, input, textarea, select, button { font-family: var(--site-font, 'Inter', sans-serif); } .card__video { background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100% ); border: 1px solid rgba(255, 255, 255, 0.05) !important; border-radius: var(--card-radius, 16px) !important; overflow: hidden; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); width: 100% !important; margin: 0 !important; margin-bottom: 0.8rem !important; display: block; } .container { padding: 0 0.5rem; } /* 14) Video Hero Section (Full width player) */ .video-hero-section { margin-bottom: 2rem; padding: 0.5rem 0; position: relative; overflow: hidden; border-bottom: 1px solid var(--color-border); } h1 { font-size: 1.5rem; margin-bottom: 0.5rem; } a { color: #ffffff; } a:hover { color: #cbcbcb; } /* 3) Header bar */ header.navbar { background: rgba(22, 27, 34, 0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-border); padding: .5rem 0 !important; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3); /* position and top are set via body classes or default below */ } /* Default non-sticky navbar for modern */ body:not(.theme-modern--sticky-header) header.navbar { position: absolute; top: 0; left: 0; right: 0; z-index: 1000; } .navbar-brand { font-weight: 800; letter-spacing: -0.5px; } .navbar-brand a { text-decoration: none !important; text-transform: uppercase; } .navbar-brand .text-primary { color: var(--accent) !important; text-shadow: 0 0 15px color-mix(in srgb, var(--accent) 40%, transparent); text-decoration: none !important; } .navbar-toggler { border: none !important; padding: 0 !important; background: transparent !important; outline: none !important; box-shadow: none !important; } .navbar-toggler i { color: var(--accent) !important; font-size: 1.8rem !important; transition: transform 0.3s ease; } .navbar-toggler:not(.collapsed) i { transform: rotate(90deg); } .nav-link { font-weight: 500; transition: all 0.2s; } .nav-link:hover { color: var(--accent) !important; } .navbar-nav .nav-link i { color: var(--accent); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 30%, transparent)); } .header-action__text { display: none; } .header-row { justify-content: space-between; align-items: center; row-gap: 0.5rem; } .header-row .navbar-brand { flex: 0 0 auto; margin-right: auto; margin-left: 4px; } .header-search { order: 3; flex: 0 0 100%; width: 100%; margin-top: 0.5rem; } .header-actions { order: 2; margin-left: auto; flex: 0 0 auto; } @media (min-width: 900px) { .header-row { flex-wrap: nowrap; } .header-search { order: 2; flex: 1 1 auto; margin: 0 1.25rem; min-width: 320px; max-width: calc(100% / 2); } .header-search { width: auto; margin-top: 0; } .header-search .form-control { width: 100%; } .header-actions { order: 3; } } @media (min-width: 580px) and (max-width: 1000px) { .header-actions .nav-link.header-action { display: inline-flex; align-items: center; gap: 0.5rem; padding: 4px 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); color: #e5e7eb !important; } .header-actions .nav-link.header-action i { font-size: 1.1rem !important; } .header-action__text { display: inline; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.2px; } } @media (min-width: 1000px) { .header-action__text { display: inline; } #toggle-categories { display: none; } .categories-collapse, .categories-collapse.collapse { position: static; opacity: 1; visibility: visible; transform: none; max-height: none; overflow: visible; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: none !important; box-shadow: none; display: block !important; height: auto !important; } .categories-section-wrapper { z-index: 900 !important; } .playlist-item-card { width: 130px !important; } } @media (max-width: 900px) { main { padding-top: 84px; } } .playlist-item-card { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); height: 110px !important; width: 100% !important; background: linear-gradient(145deg, rgba(22, 27, 34, 0.4), rgba(22, 27, 34, 0.8)) !important; border: 1px solid rgba(255, 255, 255, 0.05) !important; overflow: hidden; margin: 0 auto; border-radius: 12px !important; max-width: 100%; } .playlist-item-card:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important; border-color: color-mix(in srgb, var(--accent) 40%, transparent) !important; background: linear-gradient(145deg, rgba(22, 27, 34, 0.6), rgba(22, 27, 34, 0.9)) !important; } .playlist-item-card .avatar { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 6px !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); transition: all 0.3s ease; } .playlist-item-card:hover .avatar { background: var(--accent); color: #000 !important; transform: scale(1.1); } .playlist-item-card .card-title { font-size: 0.85rem; font-weight: 500; transition: color 0.2s; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; height: 2.4em; margin-top: 0; margin-bottom: 0; } .playlist-item-card:hover .card-title { color: var(--accent); } .playlist-item-card .btn-action { color: var(--color-text-muted); padding: 0.25rem; border-radius: 4px; transition: all 0.2s; z-index: 10; position: relative; } .playlist-item-card .btn-action:hover { background: rgba(255, 255, 255, 0.1); color: var(--color-text); } /* Scrollable tags (category playlists) */ .scrollable-tags { display: flex; overflow-x: auto; overflow-y: hidden; white-space: nowrap; gap: 0.75rem; padding: 8px 0 12px; -webkit-overflow-scrolling: touch; user-select: none; scrollbar-width: thin; scrollbar-color: rgba(var(--tblr-primary-rgb), 0.55) rgba(255, 255, 255, 0.06); } .scrollable-tags-static { flex-wrap: wrap; overflow-x: visible; white-space: normal; } .scrollable-tags-static .badge { flex: 0 0 auto; } .scrollable-tags::-webkit-scrollbar { height: 6px; } .scrollable-tags::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.06); border-radius: 999px; } .scrollable-tags::-webkit-scrollbar-thumb { background: linear-gradient(90deg, rgba(var(--tblr-primary-rgb), 0.75), rgba(var(--tblr-primary-rgb), 0.35)); border-radius: 999px; box-shadow: 0 0 0 1px rgba(0,0,0,0.25) inset; } .scrollable-tags::-webkit-scrollbar-thumb:hover { background: linear-gradient(90deg, rgba(var(--tblr-primary-rgb), 0.9), rgba(var(--tblr-primary-rgb), 0.5)); } .scrollable-tags:active { cursor: grabbing; } .scrollable-tags .badge { flex: 0 0 auto; } .scrollable-tags--hint { position: relative; } /* 4) Search */ .input-icon .form-control { background: rgba(255, 255, 255, 0.05) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--color-text); border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 12px !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); padding-top: 0.6rem; padding-bottom: 0.6rem; padding-left: 3rem; padding-right: 2.5rem; } .input-icon { position: relative; } .input-icon .form-control:focus { background: rgba(255, 255, 255, 0.08) !important; border-color: var(--accent) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent) !important; } .input-icon-addon { color: var(--accent); opacity: 0.8; position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 6; pointer-events: none; display: inline-flex; align-items: center; } .input-icon-action { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); z-index: 6; width: 32px; height: 32px; border: 0; border-radius: 999px; background: transparent; color: var(--accent); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .input-icon-action:hover { background: color-mix(in srgb, var(--accent) 25%, transparent); color: #fff; } /* Включаем "липкую" шапку, когда флаг активен */ body.theme-modern--sticky-header header.navbar { position: fixed; /* Для Modern темы фиксируем навсегда при включении опции */ top: 0; left: 0 !important; right: 0 !important; z-index: 1000; } /* Основной контент растягивается, футер уходит вниз */ main { flex: 1 0 auto; } /* Опциональный полупрозрачный декоративный фон для modern‑темы */ /* Включается классом theme-modern--bg на body */ body.theme-modern--bg { /* несколько слоёв создают лёгкий цветной мэш позади контента */ background-image: radial-gradient(1200px 600px at 20% 0%, color-mix(in srgb, var(--bg-accent-1) calc(var(--bg-opacity) * 100%), transparent) 0%, rgba(0, 0, 0, 0) 60%), radial-gradient(1000px 500px at 80% 100%, color-mix(in srgb, var(--bg-accent-2) calc(var(--bg-opacity) * 100%), transparent) 0%, rgba(0, 0, 0, 0) 60%), linear-gradient(180deg, var(--color-background-body) 0%, #000000 100%); background-attachment: fixed, fixed, fixed; background-repeat: no-repeat; } /* 5) Video Cards */ .card.card-link { background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: var(--card-radius) !important; overflow: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); } .card.card-link::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit; background: radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%); pointer-events: none; z-index: 1; } .card.card-link:hover { transform: translateY(-8px) scale(1.02); border-color: color-mix(in srgb, var(--accent) 40%, transparent) !important; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 20px color-mix(in srgb, var(--accent) 15%, transparent) !important; } .card.card-link:hover::after { background: radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%); } .video-card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; color: var(--color-text); font-size: 0.85rem; line-height: 1.35; margin-bottom: 0px; transition: color 0.3s; text-decoration: none !important; } .card.card-link .card-body { display: flex !important; flex-direction: column !important; min-height: 100px; padding: 0.5rem !important; position: relative; z-index: 2; } .playlist-item-card .card-body { padding: 0.5rem !important; min-height: 0 !important; } .card.card-link:hover .video-card-title { color: var(--accent); } .video-card-meta { font-size: 0.75rem !important; color: var(--color-text-muted) !important; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; text-decoration: none !important; } .video-card-meta-footer { margin-top: auto !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; padding-top: 0.5rem !important; } .video-card-meta-footer i { color: var(--accent); } .col-lg-3 .card__video, .sidebar-scrollable .d-flex.flex-column { border-radius: var(--card-radius) !important; } span.d-flex.align-items-center.gap-1 { border: 1px solid #313131; padding: 4px 6px; margin: 0px; border-radius: 4px; color: #ddd; font-size: 13px; } /* Aspect ratio 16:9 fix for modern theme */ .ratio-16x9 { position: relative; width: 100%; padding-bottom: 56.25%; height: 0 !important; overflow: hidden; background: #000; } .video-container.ratio-16x9 { padding-bottom: 56.25%; height: 0 !important; overflow: hidden; background: #000; } video#player {object-fit: contain;} .ratio-16x9 > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } /* Blocks styling */ .card { background: rgba(22, 27, 34, 0.6) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: var(--card-radius); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2); } .card:hover { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4); border-color: rgba(255, 255, 255, 0.12) !important; } .card-header { background: linear-gradient(90deg, rgba(255, 255, 255, 0.03), transparent) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; padding: 0.75rem 1rem !important; } .card-title { color: var(--color-text); font-weight: 700; letter-spacing: 0.5px; text-decoration: none !important; } .card-body { color: var(--color-text); } /* Categories Collapse */ .categories-section-wrapper { position: relative; z-index: 1040; } .categories-collapse { background: rgba(13, 15, 20, 0.85) !important; backdrop-filter: blur(15px) !important; -webkit-backdrop-filter: blur(15px) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; position: fixed; top: 56px; left: 0; right: 0; z-index: 1040; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); opacity: 0; visibility: hidden; transform: translateY(-10px); max-height: 80vh; overflow-y: auto; } .categories-collapse::-webkit-scrollbar { width: 4px; } .categories-collapse::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 10px; } .categories-collapse.show, .categories-collapse.collapsing { opacity: 1; visibility: visible; } .categories-collapse.show { transform: translateY(0); } /* При фиксированной шапке */ body.theme-modern--sticky-header .categories-collapse { top: 56px; } @media (max-width: 768px) { .categories-collapse { top: 56px; } } .categories-collapse .btn-category { background: rgba(255, 255, 255, 0.05) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 12px; padding: 8px 14px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); color: var(--color-text) !important; text-decoration: none !important; box-shadow: 0 4px 6px rgba(0,0,0,0.1); font-size: 0.85rem; font-weight: 500; display: inline-flex; align-items: center; gap: 10px; } .categories-collapse .btn-category:hover { background: color-mix(in srgb, var(--accent) 20%, transparent) !important; border-color: color-mix(in srgb, var(--accent) 50%, transparent) !important; transform: translateY(-3px) scale(1.03); box-shadow: 0 12px 24px rgba(0,0,0,0.4), 0 0 15px color-mix(in srgb, var(--accent) 15%, transparent); color: #fff !important; } @media all and (min-width:0px) {.jc-around{justify-content:space-around!important}} @media all and (min-width:0px) and (max-width: 520px) {.categories-collapse .btn-category {width: 48%; margin: 2px 2px !important;}} @media all and (min-width:520px) and (max-width: 670px) {.categories-collapse .btn-category {width: 32.5%; margin: 2px 2px !important;}} @media all and (min-width:670px) and (max-width: 1010px) {.categories-collapse .btn-category {width: 24%; margin: 2px 1px !important;}} @media all and (min-width:1010px) and (max-width: 1220px) {.categories-collapse .btn-category {width: 16%; margin: 3px 2px !important}} @media all and (min-width:1220px) { .categories-collapse .btn-category{margin: 3px !important;} .jc-around{justify-content:center!important}} /* Контейнер внутри коллапса для отступов */ .categories-collapse .container-xl { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } /* Исправление для обертки изображения внутри .categories-collapse .btn-category */ .categories-collapse .btn-category .cat-img-wrapper { width: 50px !important; height: 50px !important; min-width: 50px !important; min-height: 50px !important; border-radius: 0% !important; overflow: hidden !important; display: inline-block !important; vertical-align: middle !important; margin-right: 10px !important; } /* Исправление для самого изображения */ .categories-collapse .btn-category .cat-img-wrapper .btn-category__cover, .categories-collapse .btn-category img.btn-category__cover { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; transform: scale(1.4) !important; transition: transform 0.2s ease !important; display: block !important; border-radius: 0 !important; } /* Эффект при наведении */ .categories-collapse .btn-category .cat-img-wrapper:hover .btn-category__cover { transform: scale(1.5) !important; } /* Выравнивание всей строки категории */ .categories-collapse .btn-category { display: inline-flex !important; align-items: center !important; gap: 0px !important; text-decoration: none !important; } /* Текст категории — выравниваем по центру */ .categories-collapse .btn-category span { display: inline-block !important; vertical-align: middle !important; line-height: 1.2 !important; } .btn-category { background: rgba(255, 255, 255, 0.03) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 12px; padding: 10px 18px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); color: var(--color-text) !important; text-decoration: none !important; box-shadow: 0 4px 6px rgba(0,0,0,0.1); display: inline-flex; align-items: center; gap: 10px; } .btn-category:hover { background: color-mix(in srgb, var(--accent) 15%, transparent) !important; border-color: color-mix(in srgb, var(--accent) 40%, transparent) !important; transform: translateY(-4px) scale(1.02); box-shadow: 0 12px 20px rgba(0,0,0,0.3), 0 0 15px color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent) !important; } .category-cover-tooltip { position: fixed; width: 180px; height: 180px; border-radius: 12px; overflow: hidden; background: #0d0f14; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 18px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.4) inset; opacity: 0; transform: scale(0.96); transition: opacity 0.12s ease, transform 0.12s ease; pointer-events: none; z-index: 2100; } .category-cover-tooltip.is-visible { opacity: 1; transform: scale(1); } .category-cover-tooltip img { width: 100%; height: 100%; object-fit: cover; display: block; } .btn-category__cover img { float: left; display: block; border-top-left-radius: 4px; border-bottom-left-radius: 4px; height: 38px; } .hr-text { color: var(--accent); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; font-size: 0.7rem; } .hr-text::before, .hr-text::after { border-top-color: var(--color-border) !important; } .badge.bg-secondary-lt, .badge.badge-outline, .btn-xs.btn-outline-secondary, .btn-icon.btn-outline-secondary, .btn-outline-info, .btn-outline-success, .btn-outline-warning, .btn-outline-danger { background: rgba(255, 255, 255, 0.05) !important; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); color: var(--color-text) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 8px; padding: 8px 12px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-weight: 500; cursor: pointer; text-decoration: none !important; } .badge.bg-secondary-lt:hover, .badge.badge-outline:hover, .btn-xs.btn-outline-secondary:hover, .btn-icon.btn-outline-secondary:hover, .btn-outline-info:hover, .btn-outline-success:hover, .btn-outline-warning:hover, .btn-outline-danger:hover { background: color-mix(in srgb, var(--accent) 15%, transparent) !important; border-color: color-mix(in srgb, var(--accent) 40%, transparent) !important; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); color: var(--accent) !important; } .btn-outline-info:hover { color: #0ea5e9 !important; border-color: #0ea5e9 !important; background: rgba(14, 165, 233, 0.15) !important; } .btn-outline-success:hover { color: var(--color-success) !important; border-color: var(--color-success) !important; background: rgba(63, 185, 80, 0.15) !important; } .btn-outline-warning:hover { color: #f59e0b !important; border-color: #f59e0b !important; background: rgba(245, 158, 11, 0.15) !important; } .btn-outline-danger:hover { color: var(--color-danger) !important; border-color: var(--color-danger) !important; background: rgba(248, 81, 73, 0.15) !important; } .badge.bg-secondary-lt i, .badge.badge-outline i, .btn-xs.btn-outline-secondary i, .btn-icon.btn-outline-secondary i, .btn-outline-info i, .btn-outline-success i, .btn-outline-warning i, .btn-outline-danger i { color: var(--accent); opacity: 0.8; } .btn-outline-info i { color: #0ea5e9; } .btn-outline-success i { color: var(--color-success); } .btn-outline-warning i { color: #f59e0b; } .btn-outline-danger i { color: var(--color-danger); } /* Sidebar scrollable */ .sidebar-scrollable { max-height: none; overflow-y: visible; padding-right: 0; } .alert-info { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 15%, transparent), transparent); border-left: 4px solid var(--accent); border-color: var(--color-border); color: var(--color-text); } .alert-danger { background: linear-gradient(90deg, color-mix(in srgb, var(--color-danger) 15%, transparent), transparent); border-left: 4px solid var(--color-danger); border-color: var(--color-border); color: var(--color-text); } .alert-warning { background: linear-gradient(90deg, color-mix(in srgb, #f59e0b 15%, transparent), transparent); border-left: 4px solid #f59e0b; border-color: var(--color-border); color: var(--color-text); } /* 6) Pagination */ .form-control, .form-select { background: rgba(255, 255, 255, 0.03) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.1) !important; color: var(--color-text) !important; border-radius: 10px !important; transition: all 0.3s ease; } .form-control:focus, .form-select:focus { background: rgba(255, 255, 255, 0.06) !important; border-color: var(--accent) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent) !important; outline: none !important; } .pagination-amber .page-item.active .page-link { background: var(--accent) !important; border-color: var(--accent) !important; color: #000 !important; box-shadow: 0 4px 15px color-mix(in srgb, var(--accent) 40%, transparent); } .pagination-amber .page-link { background: rgba(255, 255, 255, 0.03) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.1) !important; color: var(--color-text) !important; border-radius: 10px !important; margin: 0 3px; transition: all 0.3s ease; } .pagination-amber .page-link:hover { background: rgba(255, 255, 255, 0.08) !important; border-color: var(--accent) !important; transform: translateY(-2px); } .pagination-amber .page-item.disabled .page-link { background: rgba(255, 255, 255, 0.01) !important; opacity: 0.3; border-color: transparent !important; } /* Plyr Customization */ .plyr { overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.8); background: #000 !important; } .plyr--full-ui.plyr--video .plyr__control--overlaid { background: color-mix(in srgb, var(--accent) 80%, transparent) !important; padding: 14px !important; } .plyr--video { --plyr-color-main: var(--accent); } .plyr__video-wrapper { background: #000 !important; } /* 8) Buttons */ .btn-primary { background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 80%, black)) !important; border: none !important; box-shadow: 0 4px 15px color-mix(in srgb, var(--accent) 30%, transparent) !important; font-weight: 600 !important; text-decoration: none !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 8px 25px color-mix(in srgb, var(--accent) 40%, transparent) !important; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 110%, white), var(--accent)) !important; } .btn-outline-primary { border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent) !important; color: var(--accent) !important; background: rgba(255, 255, 255, 0.03) !important; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border-radius: 10px; padding: 0.5rem 1.2rem; font-weight: 600; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); text-decoration: none !important; } .btn-outline-primary:hover { background: var(--accent) !important; color: #000 !important; transform: translateY(-3px); box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 30%, transparent); } .btn-outline-secondary { border: 1px solid rgba(255, 255, 255, 0.1) !important; color: var(--color-text) !important; background: rgba(255, 255, 255, 0.02) !important; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border-radius: 10px; padding: 0.5rem 1.2rem; font-weight: 500; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); text-decoration: none !important; } .btn-outline-secondary:hover, .btn-outline-secondary.active { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.3) !important; color: var(--color-text) !important; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); } .btn-outline-secondary.active { background: rgba(255, 255, 255, 0.12) !important; border-color: var(--accent) !important; color: var(--accent) !important; transform: none; } .footer { background-color: #0d0f14 !important; border-top: 1px solid var(--color-border) !important; padding: 0 !important; } .footer h4 { color: var(--accent) !important; } .footer a.text-muted:hover { color: #fff !important; } .card-header .card-title { margin-bottom: 0; } .similar__videos span { color: var(--color-text); font-weight: 700; } .similar__videos.mb-2 { padding: 0px 0px 20px 4px; } .card-body.p-0 .alert.m-3 { margin: 1.5rem !important; } .spinner-border.text-primary, .spinner-border { color: var(--accent) !important; } /* 9) Unused unified classes (cleaning up) */ .statistics__video, .video-hero-grid, .video-tabs { display: none; /* or remove if absolutely sure */ } .tab-pane.active { display: block; animation: fadeIn 0.3s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 768px) { .video-tabs { display: flex; flex-wrap: wrap; gap: 8px; overflow: visible; padding: 0; margin-left: 0; margin-right: 0; } .video-tab-item { flex: 1 1 calc(50% - 8px); justify-content: center; padding: 10px 12px; font-size: 13px; white-space: normal; text-align: center; } .video-tab-item.js-scroll-to-comments { flex-basis: 100%; } .py-footer{padding-top:1rem!important;padding-bottom:4rem!important} } @media (max-width: 480px) { .video-tab-item { flex-basis: 100%; } } /* Tab Content Styling */ .video-tabs-content { margin-top: 24px; background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: 16px; padding: 24px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); } .statistics__video { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border-subtle); } .statistics__video span { width: auto !important; padding: 0 !important; border: none !important; font-size: 14px; color: #94a3b8; display: flex; align-items: center; gap: 6px; } .statistics__video span i { color: var(--accent); font-size: 16px; width: 1.2rem; height: 1.2rem; display: inline-block; vertical-align: text-top; background-size: contain; background-repeat: no-repeat; background-position: center; } .statistics__video span i.icons\:view { background-image: var(--url-view); filter: brightness(0) saturate(100%) invert(85%) sepia(33%) saturate(645%) hue-rotate(121deg) brightness(92%) contrast(93%); } .statistics__video span i.icons\:time { background-image: var(--url-time); filter: brightness(0) saturate(100%) invert(85%) sepia(33%) saturate(645%) hue-rotate(121deg) brightness(92%) contrast(93%); } .statistics__video span i.icons\:data { background-image: var(--url-data); filter: brightness(0) saturate(100%) invert(85%) sepia(33%) saturate(645%) hue-rotate(121deg) brightness(92%) contrast(93%); } .statistics__video span i.icons\:screens { background-image: var(--url-screens); filter: brightness(0) saturate(100%) invert(85%) sepia(33%) saturate(645%) hue-rotate(121deg) brightness(92%) contrast(93%); } .statistics__video span i.icons\:down { background-image: var(--url-down); filter: brightness(0) saturate(100%) invert(85%) sepia(33%) saturate(645%) hue-rotate(121deg) brightness(92%) contrast(93%); } .statistics__video.tech-stats { margin-top: -10px; border-bottom: none; margin-bottom: 10px; } .description__video { line-height: 1.7; color: #cbd5e1; font-size: 15px; margin-bottom: 24px; } /* Screenshots Grid */ .screenshots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; } .screenshot-item { position: relative; aspect-ratio: 16/9; background: #000; border-radius: 12px; overflow: hidden; border: 1px solid var(--border-subtle); transition: all 0.3s ease; } .screenshot-item:hover { transform: scale(1.02); border-color: var(--accent); box-shadow: 0 8px 24px rgba(0,0,0,0.4); } .screenshot-item img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 480px) { .screenshots-grid { grid-template-columns: 1fr; } } /* 6) Comments Section Styling */ .comments-section { padding-top: 40px; margin-bottom: 60px; border-top: 1px solid var(--border-subtle); } .comments-title { font-size: 26px; font-weight: 700; color: var(--color-text); letter-spacing: -0.025em; } .comments-hot-icon { font-size: 24px; color: var(--accent); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 55%, transparent)); } .comments-section .alert { border-radius: 12px; padding: 14px 20px; margin-bottom: 24px; border: 1px solid transparent; } .comments-controls { display: flex; gap: 12px; margin-bottom: 24px; border-bottom: 1px solid var(--border-subtle); padding-bottom: 12px; } .btn-sort { background: none; border: none; color: var(--color-text-muted); font-size: 14px; font-weight: 600; cursor: pointer; padding: 8px 16px; border-radius: 8px; transition: all 0.2s; } .btn-sort:hover { color: var(--color-text); background: color-mix(in srgb, var(--accent) 10%, transparent); } .btn-sort.is-active { color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent); } .comment-item { margin-bottom: 24px; position: relative; padding: 20px; background: var(--surface-1); border-radius: 16px; border: 1px solid var(--border-subtle); transition: all 0.2s ease; } .comment-main { display: flex; gap: 20px; } .comment-avatar { width: 48px; height: 48px; flex-shrink: 0; background: var(--surface-3); border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-subtle); } .comment-avatar.is-admin { border: 2px solid var(--danger); box-shadow: 0 0 15px color-mix(in srgb, var(--danger) 25%, transparent); } .comment-avatar i { width: 26px; height: 26px; margin: 0; opacity: 0.8; } .comment-content { flex-grow: 1; } .comment-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .comment-author { font-weight: 700; font-size: 16px; color: var(--color-text); } .badge { display: inline-block; padding: 0.35em 0.8em; font-size: 0.75rem; font-weight: 600; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 6px; transition: all 0.2s ease; text-decoration: none !important; } .badge-danger { color: #fff; background-color: var(--danger); } .comment-date { font-size: 13px; color: var(--color-text-muted); } .comment-message { font-size: 15px; color: var(--color-text); line-height: 1.6; word-break: break-word; } .comment-message a { color: var(--accent); text-decoration: none; font-weight: 600; } .comment-message a:hover { text-decoration: underline; color: var(--accent); } .comment-side { display: flex; align-items: flex-start; } .comment-voting { display: flex; align-items: center; gap: 10px; background: var(--surface-2); padding: 6px 14px; border-radius: 24px; border: 1px solid var(--border-subtle); } .btn-vote-inline { background: none; border: none; cursor: pointer; padding: 4px; font-size: 16px; opacity: 0.7; transition: all 0.2s; border-radius: 50%; } .btn-vote-inline:hover { opacity: 1; background: rgba(255,255,255,0.1); } .btn-vote-inline:active { transform: scale(1.25); } .vote-count { font-size: 14px; font-weight: 700; min-width: 20px; text-align: center; color: var(--color-text); } .comment-actions { display: flex; gap: 24px; margin-top: 16px; border-top: 1px solid var(--color-border-subtle); padding-top: 12px; } .btn-action { background: none; border: none; cursor: pointer; font-size: 13px; color: var(--color-text-muted); font-weight: 600; padding: 4px 8px; border-radius: 6px; transition: all 0.2s; } .btn-action:hover { color: var(--color-text); background: color-mix(in srgb, var(--accent) 12%, transparent); } .btn-action.text-danger:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 15%, transparent); } .comment-replies { margin-left: 54px; margin-top: 20px; border-left: 2px solid var(--surface-3); padding-left: 24px; } .comment-replies .comment-item { background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,0.05); border-radius: 0; padding: 16px 0; margin-bottom: 0; } .comment-replies .comment-item:last-child { border-bottom: none; } /* Forms in Modern Theme */ .comments-form, .reply-form, .reply-form-wrap, .edit-form-wrap { background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: 20px; padding: 30px; margin-bottom: 48px; box-shadow: 0 20px 40px rgba(0,0,0,0.4); } .reply-form-wrap, .edit-form-wrap { margin-top: 20px; margin-bottom: 20px; padding: 20px; border-radius: 16px; } .comments-form .form-control, .reply-form .form-control, .reply-form-wrap .form-control, .edit-form-wrap .form-control { background: var(--surface-2); border: 1px solid var(--border-subtle); color: #fff; border-radius: 12px; margin-bottom: 12px; box-shadow: none; padding: 14px 18px; font-size: 15px; width: 100%; transition: all 0.2s; } .form-control-sm { padding: 10px 14px !important; font-size: 14px !important; } .comments-form .form-control:focus, .reply-form .form-control:focus, .reply-form-wrap .form-control:focus, .edit-form-wrap .form-control:focus { border-color: var(--accent); background: var(--surface-3); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); } .comments-form .btn-primary, .reply-form .btn-primary, .reply-form-wrap .btn-primary, .edit-form-wrap .btn-primary { background: var(--accent); border: none; padding: 14px 36px; border-radius: 12px; font-weight: 700; color: #000; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; } .btn-primary.btn-sm { padding: 10px 24px !important; } .comments-form .btn-primary:hover, .reply-form .btn-primary:hover, .reply-form-wrap .btn-primary:hover, .edit-form-wrap .btn-primary:hover { background: color-mix(in srgb, var(--accent) 80%, #fff); transform: translateY(-2px); box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 30%, transparent); } .btn-primary:active, .reply-form .btn-primary:active { transform: translateY(0); } .js-load-more-comments { display: block; background: var(--surface-2); border: 1px solid var(--border-subtle); color: var(--color-text); padding: 14px 24px; border-radius: 12px; width: 100%; margin: 24px 0; font-weight: 600; font-size: 15px; cursor: pointer; text-align: center; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .js-load-more-comments:hover { background: var(--surface-3); border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .js-load-more-comments:active { transform: translateY(0); } .js-load-more-comments:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } /* Show more replies button styling */ .show-more-replies-wrap { margin-top: 12px; margin-bottom: 8px; } .btn-show-more-replies { background: var(--surface-2); border: 1px solid var(--border-subtle); color: var(--color-text); padding: 8px 20px; border-radius: 24px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); display: inline-flex; align-items: center; gap: 10px; opacity: 0.9; } .btn-show-more-replies:hover { background: var(--surface-3); border-color: var(--accent); color: var(--accent); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); opacity: 1; } .btn-show-more-replies:active { transform: translateY(0); } .btn-show-more-replies::before { content: '⤵'; font-size: 16px; opacity: 0.8; } @media (max-width: 768px) { .comment-replies { margin-left: 16px; padding-left: 16px; } .comment-main { flex-wrap: wrap; gap: 12px; } .comment-side { width: 100%; justify-content: flex-end; margin-top: 0; } .comment-avatar { width: 40px; height: 40px; } .comment-item { padding: 16px; } .comment-actions { gap: 12px; flex-wrap: wrap; } .comment-meta { margin-top: 8px; font-size: 12px; opacity: 0.6; } } .comment-meta { margin-top: 12px; font-size: 13px; color: #94a3b8; } .header__search button { border-left: 1px solid var(--border-subtle); border-radius: 0 .6rem .6rem 0; background: transparent; } .header__search button:hover { background: var(--surface-2); } .btn-vote { background: rgba(255, 255, 255, 0.02) !important; color: var(--color-text-muted) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border-radius: 12px; padding: 10px 18px; font-weight: 700; font-size: 15px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: inline-flex; align-items: center; gap: 8px; } .btn-vote:hover { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.3) !important; color: var(--color-text) !important; transform: translateY(-2px); box-shadow: 0 4px 15px color-mix(in srgb, var(--accent) 15%, transparent); } .btn-vote.is-active { background: var(--accent) !important; border-color: var(--accent) !important; color: #000 !important; box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 30%, transparent); } /* 8) Categories & Trends Links */ .categories-link li a, .trands-link li a, .playlist-link li a { border-radius: 8px; transition: all 0.2s; } .categories-link li a { background: #064e3b; color: #ccfbf1; } .categories-link li a:hover { background: #0f766e; } .trands-link li a { background: #4c1d95; color: #ede9fe; } .trands-link li a:hover { background: #6d28d9; } .playlist-link li a { background: #1e293b; color: #f1f5f9; } .playlist-link li a:hover { background: #334155; } /* 9) Pagination */ .pagination-modern { margin: 2rem 0; display: flex; justify-content: center; } .pagination-modern__list { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; } .pagination-modern__item { border-radius: 12px; min-width: 44px; height: 44px; padding: 0 16px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); color: #94a3b8; font-weight: 700; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); text-decoration: none; cursor: pointer; } .pagination-modern__item:hover { background: rgba(255, 255, 255, 0.06); border-color: var(--accent); color: #fff; transform: translateY(-2px); } .pagination-modern__item--active { background: var(--accent) !important; border-color: var(--accent) !important; color: #000 !important; box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 30%, transparent); } .pagination-modern__dots { color: #475569; font-weight: 700; padding: 0 4px; } .pagination-modern__prev, .pagination-modern__next { padding: 0; width: 44px; } .pagination-modern__info { color: #94a3b8; font-weight: 700; padding: 0 12px; } .pagination a, .pagination .active, ul.pagination li a, ul.pagination li.active, ul.pagination li span { border-radius: 12px; font-weight: 700; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); color: #94a3b8; text-decoration: none; min-width: 44px; display: flex; align-items: center; justify-content: center; height: 44px; } .pagination a:hover, ul.pagination li a:hover { background: rgba(255, 255, 255, 0.06); border-color: var(--accent); color: #fff; transform: translateY(-2px); } .pagination .active, ul.pagination li.active { background: var(--accent) !important; border-color: var(--accent) !important; color: #000 !important; box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 30%, transparent); } .card__video-duration, .card__video-rating { position: absolute; background: rgba(0, 0, 0, 0.7); color: #fff; padding: 3px 10px; border-radius: 12px; font-size: 13px; font-weight: 600; z-index: 10; transition: all 0.3s ease; backdrop-filter: blur(4px); pointer-events: none; } .card__video-duration { top: 10px; right: 10px; } .card__video-rating { bottom: 10px; right: 10px; display: flex; align-items: center; gap: 4px; color: rgba(255, 255, 255, 0.9); } .card__video-rating .icons { width: 14px; height: 14px; fill: rgba(255, 255, 255, 0.7); transition: all 0.3s ease; } .card__video-rating.is-high { color: #fff; font-weight: 700; } .card__video-rating.is-high .icons { fill: var(--ok); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--ok) 40%, transparent)); } .card__video:hover .card__video-duration, .card__video:hover .card__video-rating { opacity: 0; transform: translateY(5px); } .card__video:hover { border-color: var(--accent) !important; box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.6); background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100% ); } .card__video-screnshot { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; overflow: hidden; } .card__video-screnshot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .card__video-title { padding: 0; font-size: 0.85rem; line-height: 1.35; color: #e2e8f0; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; height: 2.7rem; margin-bottom: 0; } /* Sidebar (Additional videos) */ .video-hero-grid .video__additional { display: flex; flex-direction: column; gap: 16px; width: 420px; flex-shrink: 0; } .video-hero-grid .video__additional .card__video { width: 100% !important; margin: 0 !important; } .video-hero-grid .video__additional .card__video-title { height: 2.6em !important; -webkit-line-clamp: 2; font-size: 0.85rem; line-height: 1.3; text-align: center; padding: 0.4rem 0 0; } .video-hero-grid .video__additional .card__video-time { font-size: 10px; padding: 2px 4px; bottom: 4px; right: 4px; } .video-hero-grid .video__additional .card__video-top { font-size: 9px; padding: 2px 4px; top: 4px; left: 4px; } /* Список категорий (Сетка в столбик) */ .categories-list ul { display: grid !important; grid-template-columns: repeat(6, 1fr) !important; gap: 8px !important; padding: 0 !important; list-style: none !important; } .categories-list li { width: 100% !important; margin: 0 !important; padding: 0 !important; } .categories-list a { background: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; color: #94a3b8 !important; border-radius: 10px !important; padding: 8px 12px !important; font-size: 13px !important; font-weight: 500 !important; transition: all 0.25s ease !important; display: block !important; text-align: center !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; margin: 0 !important; } .categories-list a:hover { background: rgba(255, 255, 255, 0.06) !important; border-color: var(--accent) !important; color: #fff !important; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } /* Адаптивность сетки категорий */ @media (max-width: 1200px) { .categories-list ul { grid-template-columns: repeat(4, 1fr) !important; } } @media (max-width: 900px) { .categories-list ul { grid-template-columns: repeat(3, 1fr) !important; } } @media (max-width: 600px) { .categories-list ul { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 400px) { .categories-list ul { grid-template-columns: 1fr !important; } } @media (max-width: 1090px) { .video__additional { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 20px; } } .card__video-time { background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 4px 8px; font-size: 12px; font-weight: 700; bottom: 10px; right: 10px; } .card__video-top { background: var(--accent); color: #000; border-radius: 8px; padding: 4px 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; top: 10px; left: 10px; bottom: auto !important; right: auto !important; } /* === Сетка карточек: крупнее карточки (меньше колонок) === */ .grid.card__video-clear { display: grid; gap: 0; grid-auto-rows: auto; grid-template-columns: repeat(var(--cards-cols, var(--cards-cols-xxl)), 1fr); } .row.row-cards { display: grid; grid-auto-rows: auto; gap: 0; margin-left: 0; margin-right: 0; grid-template-columns: repeat(var(--cards-cols, var(--cards-cols-xxl)), 1fr); } .row.row-cards > * { width: 100%; max-width: 100%; } /* ≥ 1440px — 5 колонок (было 6, сделаем крупнее) @media (min-width: 1440px) { .grid.card__video-clear { --cards-cols: var(--cards-cols-xl); } .row.row-cards { --cards-cols: var(--cards-cols-xl); } }*/ /* 1050–1439 — 4 колонки */ @media (min-width: 1050px) { .grid.card__video-clear { --cards-cols: var(--cards-cols-xl); } .row.row-cards { --cards-cols: var(--cards-cols-xl); } } /* 810–1049 — 3 колонки */ @media (min-width: 810px) and (max-width: 1050px) { .grid.card__video-clear { --cards-cols: var(--cards-cols-lg); gap: 0; } .row.row-cards { --cards-cols: var(--cards-cols-lg); gap: 0; } } /* 520–809 — 2 колонки */ @media (min-width: 520px) and (max-width: 810px) { .grid.card__video-clear { --cards-cols: var(--cards-cols-md); gap: 0; } .row.row-cards { --cards-cols: var(--cards-cols-md); gap: 0; } } /* ≤ 519 — 1 колонка */ @media (max-width: 520px) { .grid.card__video-clear { --cards-cols: var(--cards-cols-sm); gap: 0; } .row.row-cards { --cards-cols: var(--cards-cols-sm); gap: 0; } } /* 11) Navigation Overrides */ .header__navigation ul li a, .header__navigation ul li span { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 10px 18px !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-weight: 600; display: flex; align-items: center; gap: 8px; } .header__navigation ul li a:hover, .header__navigation ul li span:hover { border-color: var(--accent); background: rgba(255, 255, 255, 0.06); transform: translateY(-1px); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } .header__navigation ul li a i, .header__navigation ul li span i { margin: 0; } /* 6) Category grid (columnar layout) */ .playlist-link a, .categories-link a, .categories-list a, .trands-link a, .playlists a { background: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; color: #94a3b8 !important; border-radius: 4px !important; display: block !important; padding: 0px 4px 0px 0px !important; line-height: 1.4 !important; font-size: 13px !important; font-weight: 500 !important; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; text-align: left !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .playlist-link a:hover, .categories-link a:hover, .categories-list a:hover, .trands-link a:hover, .playlists a:hover { background: rgba(255, 255, 255, 0.06) !important; border-color: var(--accent) !important; color: #fff !important; transform: translateY(-1px); } .playlist-link a:focus-visible, .categories-link a:focus-visible, .categories-list a:focus-visible, .trands-link a:focus-visible, .playlists a:focus-visible { outline: 2px solid rgba(255, 255, 255, .25); outline-offset: 2px; } /* Компоновка списков: сетка */ .categories-list ul, .playlist-link ul, .trands-link, .playlists { display: grid !important; grid-template-columns: repeat(6, 1fr) !important; gap: 8px !important; list-style: none !important; padding: 0 !important; } @media (max-width: 1200px) { .categories-list ul, .playlist-link ul, .trands-link, .playlists { grid-template-columns: repeat(4, 1fr) !important; } } @media (max-width: 900px) { .categories-list ul, .playlist-link ul, .trands-link, .playlists { grid-template-columns: repeat(3, 1fr) !important; } } @media (max-width: 600px) { .categories-list ul, .playlist-link ul, .trands-link, .playlists { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 400px) { .categories-list ul, .playlist-link ul, .trands-link, .playlists { grid-template-columns: 1fr !important; } } /* — Специально для списка категорий на странице видео — */ /* Выравниваем надпись «Категории:» и чипы по одной линии, не затрагивая другие места. */ .video-page-categories { display: flex !important; flex-wrap: wrap; align-items: center; /* ключ к вертикальному выравниванию метки и чипов */ gap: 8px !important; } .video-page-categories > li { display: flex; /* чтобы содержимое каждого li также центрировалось */ align-items: center; } /* Легкая настройка первой метки «Категории:» */ .video-page-categories > li:first-child { margin-right: 2px; line-height: 1.4; /* синхронизируем с чипами */ font-weight: 600; /* можно убрать, если не нужно выделение */ } /* — Специально для списка плейлистов на странице видео — */ /* Выравниваем надпись «Плейлисты:» и чипы по одной линии, только для этого блока. */ .video-page-playlists { display: flex !important; flex-wrap: wrap; align-items: center; /* вертикальное выравнивание */ gap: 8px !important; } .video-page-playlists > li { display: flex; align-items: center; } .video-page-playlists > li:first-child { margin-right: 2px; line-height: 1.4; /* синхронизируем с чипами */ font-weight: 600; /* можно ослабить по желанию */ } /* Верхняя прокручиваемая лента playLists — без громоздкой анимации из базовой темы */ .playlists { animation: none !important; padding: 4px 0 8px; white-space: normal; overflow: visible; } /* 2) На страницах категорий вернуть «старый» компактный вид плейлистов (одна строка, скролл) */ .container > .playlists { display: block !important; white-space: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 2px 0 6px !important; } .container > .playlists a { display: inline-block !important; font-size: 14px !important; padding: .28rem .5rem !important; margin: 0 4px 0 0 !important; } /* === Компактные «пилюли» в верхней полосе категорий (как раньше, но в стиле modern) === */ /* Контейнер в шапке:
*/ /* Убираем любые внешние отступы/внутренние поля, которые создают ложные «красные» поля слева/справа */ .playlist-link.container__header.categories-list { padding-left: 0 !important; padding-right: 0 !important; /* компенсируем крайние внешние отступы у ссылок, чтобы не было «пустых» полей по краям */ } .playlist-link.container__header.categories-list ul { padding: 0 !important; justify-content: start !important; /* чтобы чипы не растягивались */ } .container__header.categories-list a { padding: .28rem .55rem !important; /* компактнее */ font-size: 14px !important; /* чуть меньше шрифт */ background: var(--surface-2) !important; display: block !important; border-color: #334155 !important; /* более выразительный контур в стиле темы */ margin: 0 2px 2px 0 !important; /* плотная укладка как раньше */ } /* лёгкое выделение при hover, под стиль modern (тонкая подсветка рамки) */ .container__header.categories-list a:hover { background: var(--surface-2) !important; border-color: var(--accent) !important; } /* активная «пилюля», если нужно подсвечивать текущую */ .container__header.categories-list a.is-active { background: var(--accent) !important; color: #0b0c10 !important; border-color: var(--accent) !important; } /* компактнее интервалы между чипами в шапке */ .container__header.categories-list ul { gap: 0 !important; } /* убираем внешние отступы у li, чтобы не добавлялись лишние зазоры */ .categories-list li, .playlist-link li, .trands-link li { margin: 0 !important; padding: 0 !important; } /* Внешние интервалы оставляем как в базовой теме для всех, кроме верхнего блока */ /* 7) Video cards (Removed duplicate, settings moved to section 10) */ .card__video-time { background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 4px 8px; font-size: 12px; font-weight: 700; bottom: 10px; right: 10px; } .card__video-top { background: var(--accent); color: #000; border-radius: 8px; padding: 4px 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; top: 10px; left: 10px; bottom: auto !important; right: auto !important; } /* 8) Buttons small */ .button__small { background: var(--surface-1); color: var(--color-text); border-color: var(--border-subtle); } .button__small:hover { border-color: var(--accent); } /* 10) Preview indicators */ .preview-indicator { position: relative; left: 0; right: 0; z-index: 10; pointer-events: none; display: flex; align-items: center; justify-content: center; padding: 4px 8px; } .preview-indicator.indicator--bottom { bottom: 0; } .preview-indicator.indicator--top { top: 0; } .preview-indicator.indicator--center { top: 50%; transform: translateY(-50%); padding: 4px 12px; } .preview-indicator.indicator--overlay-center { top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.2); padding: 0; } .preview-indicator.indicator--overlay-center .preview-progress { width: 60%; height: 4px; } .preview-indicator.indicator--overlay-center .preview-indicator--dots { justify-content: center; width: 60%; } .preview-indicator.indicator--top, .preview-indicator.indicator--bottom { padding: 0; } .preview-indicator.indicator--top.preview-indicator--dots, .preview-indicator.indicator--bottom.preview-indicator--dots { padding: 4px 8px; height: 14px; background: rgba(0,0,0,0.1); } .preview-indicator.indicator--top .preview-progress, .preview-indicator.indicator--bottom .preview-progress { border-radius: 0; } .preview-indicator .preview-progress { width: 100%; height: 3px; background: rgba(255, 255, 255, 0.2); border-radius: 2px; overflow: hidden; position: relative; } .preview-indicator .preview-progress > i { position: absolute; top: 0; left: 0; height: 100%; width: 0; background: var(--accent); transition: width 0.15s linear; } .preview-indicator.preview-indicator--dots { gap: 4px; } .preview-indicator .preview-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); transition: all 0.2s; } .preview-indicator .preview-dot.is-active { background: var(--accent); transform: scale(1.2); opacity: 1; } .preview-indicator.theme--dark .preview-progress { background: rgba(0, 0, 0, 0.4); } .preview-indicator.theme--light .preview-progress { background: rgba(255, 255, 255, 0.4); } .preview-indicator.theme--dark .preview-dot { background: rgba(0, 0, 0, 0.3); } .preview-indicator.theme--light .preview-dot { background: rgba(255, 255, 255, 0.3); } /* 11) Similar videos header */ .similar__videos span { border-color: var(--border-subtle); } /* 12) Pagination (str function outputs ) */ a.str, .str a { background: var(--surface-1); color: var(--color-text); border: 1px solid var(--border-subtle); border-radius: .4rem; padding: .35rem .6rem; } a.str:hover, .str a:hover { background: var(--surface-2); } /* 12.1) Пагинация старого генератора (