unified: Phantom Protocol 2025 complete archive integration
This commit is contained in:
427
website/css/vendor-prefixes.css
Normal file
427
website/css/vendor-prefixes.css
Normal file
@@ -0,0 +1,427 @@
|
||||
/**
|
||||
* Vendor Prefixes for Cross-Browser Compatibility
|
||||
* Phantom Protocol
|
||||
*
|
||||
* Этот файл содержит vendor prefixes для поддержки старых браузеров
|
||||
* Safari, Firefox, Chrome, Edge
|
||||
*/
|
||||
|
||||
/* ========================================
|
||||
BACKDROP FILTER (Safari требует -webkit-)
|
||||
======================================== */
|
||||
|
||||
.navbar.glass-nav {
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
.glass-card,
|
||||
.card.glass-card {
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
-webkit-backdrop-filter: blur(30px);
|
||||
backdrop-filter: blur(30px);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
USER SELECT (предотвращение выделения)
|
||||
======================================== */
|
||||
|
||||
.btn,
|
||||
button {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
TRANSFORM (трансформации)
|
||||
======================================== */
|
||||
|
||||
.card:hover,
|
||||
.glass-card:hover {
|
||||
-webkit-transform: translateY(-10px);
|
||||
-moz-transform: translateY(-10px);
|
||||
-ms-transform: translateY(-10px);
|
||||
-o-transform: translateY(-10px);
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
.hover-lift:hover {
|
||||
-webkit-transform: translateY(-5px);
|
||||
-moz-transform: translateY(-5px);
|
||||
-ms-transform: translateY(-5px);
|
||||
-o-transform: translateY(-5px);
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
TRANSITION (плавные переходы)
|
||||
======================================== */
|
||||
|
||||
.navbar,
|
||||
.nav-link,
|
||||
.btn,
|
||||
.card,
|
||||
a {
|
||||
-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
-moz-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
-ms-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
-o-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
ANIMATION (анимации)
|
||||
======================================== */
|
||||
|
||||
@-webkit-keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@-moz-keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@-o-keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@-webkit-keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
|
||||
@-moz-keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
|
||||
@-o-keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
|
||||
.pulse-dot {
|
||||
-webkit-animation: pulse 2s infinite;
|
||||
-moz-animation: pulse 2s infinite;
|
||||
-o-animation: pulse 2s infinite;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
FLEXBOX (старые браузеры)
|
||||
======================================== */
|
||||
|
||||
.d-flex,
|
||||
.navbar-brand,
|
||||
.nav {
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-column {
|
||||
-webkit-flex-direction: column;
|
||||
-moz-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.justify-content-center {
|
||||
-webkit-justify-content: center;
|
||||
-moz-justify-content: center;
|
||||
-ms-justify-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.align-items-center {
|
||||
-webkit-align-items: center;
|
||||
-moz-align-items: center;
|
||||
-ms-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
BOX-SHADOW (тени с цветным свечением)
|
||||
======================================== */
|
||||
|
||||
.card:hover,
|
||||
.glass-card:hover {
|
||||
-webkit-box-shadow: 0 20px 60px rgba(0, 240, 255, 0.3);
|
||||
-moz-box-shadow: 0 20px 60px rgba(0, 240, 255, 0.3);
|
||||
box-shadow: 0 20px 60px rgba(0, 240, 255, 0.3);
|
||||
}
|
||||
|
||||
.btn-gradient {
|
||||
-webkit-box-shadow: 0 4px 15px rgba(0, 240, 255, 0.3);
|
||||
-moz-box-shadow: 0 4px 15px rgba(0, 240, 255, 0.3);
|
||||
box-shadow: 0 4px 15px rgba(0, 240, 255, 0.3);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
GRADIENT (градиенты)
|
||||
======================================== */
|
||||
|
||||
.btn-gradient {
|
||||
background: -webkit-linear-gradient(135deg, #00f0ff 0%, #7a3eff 100%);
|
||||
background: -moz-linear-gradient(135deg, #00f0ff 0%, #7a3eff 100%);
|
||||
background: -o-linear-gradient(135deg, #00f0ff 0%, #7a3eff 100%);
|
||||
background: linear-gradient(135deg, #00f0ff 0%, #7a3eff 100%);
|
||||
}
|
||||
|
||||
.text-gradient {
|
||||
background: -webkit-linear-gradient(90deg, #00f0ff, #7a3eff, #ff2a6d);
|
||||
background: -moz-linear-gradient(90deg, #00f0ff, #7a3eff, #ff2a6d);
|
||||
background: -o-linear-gradient(90deg, #00f0ff, #7a3eff, #ff2a6d);
|
||||
background: linear-gradient(90deg, #00f0ff, #7a3eff, #ff2a6d);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
BORDER-RADIUS (скругленные углы)
|
||||
======================================== */
|
||||
|
||||
.card,
|
||||
.btn,
|
||||
.form-control,
|
||||
input,
|
||||
textarea {
|
||||
-webkit-border-radius: 8px;
|
||||
-moz-border-radius: 8px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.glass-card {
|
||||
-webkit-border-radius: 16px;
|
||||
-moz-border-radius: 16px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
APPEARANCE (удаление нативных стилей)
|
||||
======================================== */
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
button {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
SCROLLBAR (кастомный скроллбар - только WebKit)
|
||||
======================================== */
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--color-accent);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--color-accent-secondary);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
PLACEHOLDER (placeholder стили)
|
||||
======================================== */
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: var(--color-text-muted);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
::-moz-placeholder {
|
||||
color: var(--color-text-muted);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
:-ms-input-placeholder {
|
||||
color: var(--color-text-muted);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
color: var(--color-text-muted);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
OBJECT-FIT (изображения)
|
||||
======================================== */
|
||||
|
||||
img {
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
FILTER (фильтры изображений)
|
||||
======================================== */
|
||||
|
||||
img:hover {
|
||||
-webkit-filter: brightness(1.1);
|
||||
-moz-filter: brightness(1.1);
|
||||
-o-filter: brightness(1.1);
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
POSITION: STICKY (липкие элементы)
|
||||
======================================== */
|
||||
|
||||
.sticky-top {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
CALC (математические вычисления)
|
||||
======================================== */
|
||||
|
||||
.full-height {
|
||||
height: -webkit-calc(100vh - 80px);
|
||||
height: -moz-calc(100vh - 80px);
|
||||
height: calc(100vh - 80px);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
POINTER-EVENTS (взаимодействие с элементами)
|
||||
======================================== */
|
||||
|
||||
.disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
BOX-SIZING (модель блока)
|
||||
======================================== */
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
WILL-CHANGE (оптимизация производительности)
|
||||
======================================== */
|
||||
|
||||
.card,
|
||||
.btn,
|
||||
.nav-link {
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
OPACITY (прозрачность с анимацией)
|
||||
======================================== */
|
||||
|
||||
.fade-in {
|
||||
-webkit-animation: fadeIn 0.5s ease-in-out;
|
||||
-moz-animation: fadeIn 0.5s ease-in-out;
|
||||
-o-animation: fadeIn 0.5s ease-in-out;
|
||||
animation: fadeIn 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
TEXT-SHADOW (тени текста для cyberpunk стиля)
|
||||
======================================== */
|
||||
|
||||
h1,
|
||||
h2,
|
||||
.display-3,
|
||||
.display-4 {
|
||||
text-shadow: 0 0 20px rgba(0, 240, 255, 0.5);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
CLIP-PATH (обрезка элементов - современные браузеры)
|
||||
======================================== */
|
||||
|
||||
.hero-background::before {
|
||||
-webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
|
||||
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
GRID LAYOUT (сетка - старые браузеры)
|
||||
======================================== */
|
||||
|
||||
.container,
|
||||
.row {
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
MEDIA QUERIES для ПОДДЕРЖКИ
|
||||
======================================== */
|
||||
|
||||
/* IE 10-11 */
|
||||
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
||||
.glass-card {
|
||||
background: rgba(15, 15, 30, 0.9);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
/* Edge 12-18 */
|
||||
@supports (-ms-ime-align:auto) {
|
||||
.glass-card {
|
||||
background: rgba(15, 15, 30, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
/* Firefox Fallback для backdrop-filter */
|
||||
@-moz-document url-prefix() {
|
||||
.glass-card,
|
||||
.navbar.glass-nav {
|
||||
background: rgba(15, 15, 30, 0.95);
|
||||
}
|
||||
}
|
||||
|
||||
/* Safari 9+ */
|
||||
@media not all and (min-resolution:.001dpcm) {
|
||||
@supports (-webkit-appearance:none) {
|
||||
.glass-card {
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user