css/style.css - master - CEPBEP/OPS

css/style.css
175 строк9 KB
George Kwa
Update style.css
17 июл 2025, 14:14
17 июл 2025, 14:14c051ffb
    ::-webkit-scrollbar {width: 0;} ::-webkit-scrollbar-thumb {background: transparent;}
    :root {--bg: #151b23;--fg: #fff;--accent: #3498db;--card: #1f2937;--input-bg: #0f131a;--border: #333;}
    *, *::before, *::after {box-sizing: border-box;}
    body { margin: 0; padding: 20px; background: var(--bg); color: var(--fg); font-family: 'Roboto Mono', monospace; line-height: 1.4;font-weight:900; }
    header h1 { margin: 0 0 20px; color: var(--accent); font-size: 1.8rem; } .controls { margin-bottom: 20px; } .table-wrapper { overflow-x: auto; } img {width: 100%;border-radius: 10px;}
    .controls input { width: 100%; padding: 8px; background: var(--input-bg); border: 1px solid var(--border); border-radius: 4px; color: var(--fg); font-family: inherit; font-size: 1rem;}
    section { margin-bottom: 40px; padding: 20px; background: var(--card); border-radius: 8px; }
    table { width: 100%; border-collapse: collapse; margin-top: 10px;font-size: 1.5em; }
    th, td { padding: 12px 8px; text-align: left; border-bottom: 1px solid var(--border); }
    th { background: var(--bg); color: var(--accent); position: sticky; top: 0; }

    .constellation {font-family: monospace;white-space: pre;}
    .holo-frame {/*border: 4px solid rgb(205 108 23 / 62%);border: 4px solid rgba(0, 255, 255, 0.4);padding: 40px;background: rgba(0, 30, 40, 0.25);color: #00f4ff;text-shadow: 0 0 5px #00ffff, 0 0 0px #00ffff;text-align: center;position: relative;border-radius: 12px;backdrop-filter: blur(10px);}
    .holo-frame1 {border: 4px solid rgba(0, 255, 255, 0.4);padding: 40px;background: rgba(0, 30, 40, 0.25);color: #00f4ff;text-align: center;position: relative;border-radius: 12px;backdrop-filter: blur(10px);text-shadow: 0 0 5px #00ffff, 0 0 0px #00ffff;}
    .holo-frame::before {content: "";position: absolute;top: -2px;left: -2px;right: -2px;bottom: -2px;border-radius: 14px;background: linear-gradient(45deg, rgba(0,255,255,0.2), rgba(255,255,255,0.1), rgba(0,255,255,0.2));z-index: -1;filter: blur(10px);background: radial-gradient(rgba(0, 255, 255, 0.2),rgb(179 81 0 / 95%));background: url(https://cryptq.github.io/css/edmod.png);}
    .holo-frame1::before {content: "";position: absolute;top: -2px;left: -2px;right: -2px;bottom: -2px;border-radius: 14px;background: radial-gradient(rgb(244 67 54 / 48%),rgba(0, 255, 255, 0.2));z-index: -1;filter: blur(10px);background: url(https://cryptq.github.io/css/edmod.png);}
    .holo-warning {color:#bbfcff;font-size: 1.1em;line-height: 1.6em;background: rgba(0, 30, 40, 0.25);padding: 20px;border: 1px solid rgba(0, 255, 255, 0.2);border-radius: 10px;}
    .holo-warning::before {content: "";text-align: center;position: absolute;top: -2px;left: -2px;right: -2px;bottom: -2px;border-radius: 14px;background: linear-gradient(45deg, rgba(0,255,255,0.2), rgba(255,255,255,0.1), rgba(0,255,255,0.2));z-index: -1;filter: blur(8px);}
    .holo-warning strong {font-size: 1.2em;display: block;margin-bottom: 10px;color: #00ffff;} 
    .holo-text {font-size: 1.3em;line-height: 1.8em;}li {display: block;*/}
    @keyframes pulse {0%, 100% {box-shadow: 0 0 20px rgba(0, 255, 255, 0.3), inset 0 0 10px rgba(0, 255, 255, 0.1);} 50% {box-shadow: 0 0 40px rgba(0, 255, 255, 0.5), inset 0 0 20px rgba(0, 255, 255, 0.2);}}
    @media (max-width: 600px) { th, td { padding: 8px 4px; font-size: 0.8rem;}}
    @media (max-width: 767px) {section { width: 100% !important; margin: 0 !important; padding: 12px 0 !important; box-sizing: border-box;}
    .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch;width: 100%; text-align:center!important;}table { min-width: 100%;white-space: nowrap; text-align:center!important;}th, td {white-space: normal;word-break: break-word;padding: 8px !important;min-width: 73px; text-align:center!important;}
   input#filterInput {text-align:center !important;}body {margin: 0; padding: 0px; text-align:center;}img {max-width: 100% !important;height: auto !important;display: block;margin: 0 auto; }}
   .iii::after {color: white;font-size: 2em;z-index: 234;position: relative;top: -45px;position: absolute;top: -20px;right: -20px;width: 80px;height: 80px;background: yellow;}



  /* Общие стили для заголовков */
.diagram-title, .effects-title {
  text-align: center;
  margin-bottom: 18px;
  font-size: 1.5rem;
}
 
.effects-title, .diagram-title { color: #ffcc00; }

/* Базовые стили для блоков/карточек */
.diagram-block, 
.effect-card, 
.infographic-item {
  background: rgba(255,255,255,0.10);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  text-align: center;
  transition: transform 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 20px;
  margin-bottom: 12px;

}
.diagram-block {
  cursor:pointer;
  background: rgba(255,255,255,0.08);
  min-width: 180px;
  max-width: 220px;
  max-height: 240px;
  min-height: 240px;
  overflow: auto;
}
.effect-card {
  cursor:pointer;
  min-width: 220px;
  max-width: 320px;
  margin-bottom: 8px;
  max-height: 275px;
  overflow: auto;
}
.infographic-item {
  cursor:pointer;
  border-radius: 12px;
  min-width: 180px;
  max-width: 220px;
  padding: 18px 14px 14px;
  margin: 0 0.5rem;
  max-height: 235px;
  min-height: 235px;
  overflow: auto;
}

/* Ховер-эффекты */
.diagram-block:hover { transform: translateY(-4px) scale(1.04); }
.effect-card:hover, .infographic-item:hover { transform: scale(1.03); }
.diagram-block:hover { z-index: 2; } /* Только для diagram-block */

/* Контейнеры */
.diagram-container, .effects-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.diagram-container { 
  align-items: flex-start;
  gap: 24px; 
}
.phased-array-infographic {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  margin: 32px 0 0;
  overflow-x: auto;
}

/* Иконки */
.diagram-block i, 
.effect-card i, 
.infographic-item i { font-size: 4rem;margin-bottom: 8px;color: #ffffff; }
.diagram-block i { font-size: 4rem; }
.infographic-item i { font-size: 4rem;margin-bottom: 10px; }

/* Заголовки внутри блоков */
.effect-title, .infographic-title {
  color: #ffcc00;
  margin-bottom: 6px;
  text-align: center;
}
.effect-title { font-size: 1.5rem; }
.infographic-title { font-weight: bold;font-size: 1.5rem; }

/* Описания */
.effect-desc, .infographic-desc { font-size: 0.98rem; text-align: center; }
.infographic-desc { color: #e0e0e0; }

/* Стрелки */
.arrow-diagram, 
.infographic-arrow { display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #ffffff; }
.arrow-diagram { flex-direction: column; }
.infographic-arrow { margin: 0 0.2rem; }

        .timers {display: flex;flex-wrap: wrap;gap: 30px;justify-content: center;}
        .timer-card {border-radius: 12px;padding: 25px;width: 100%;max-width: 380px;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);position: relative;overflow: hidden;transition: transform 0.3s ease;}
        
        .timer-card:hover {transform: translateY(-5px);}
        .timer-card::before {content: '';position: absolute;top: 0;left: 0; width: 100%;height: 5px;}
        .fsb-card::before {background: linear-gradient(90deg, #b22222, #ff4d4d);}
        .sk-card::before {background: linear-gradient(90deg, #1e90ff, #4da6ff);}
        .agency {margin-bottom: 20px;}
        
        .agency-icon {width: 50px;height: 50px;background: rgba(30, 60, 110, 0.8);border-radius: 50%;display: flex;align-items: center;justify-content: center;margin-right: 15px;font-size: 1.5rem;font-weight: bold;border: 2px solid;}
        .fsb-icon {color: #ff4d4d;border-color: #ff4d4d;}
        .sk-icon {color: #4da6ff;border-color: #4da6ff;}
        .agency-name {font-size: 1.5rem;font-weight: bold;/*color: yellow;*/}
        .start-date {font-size: 0.95rem;color: #adb5bd;margin-bottom: 15px;font-style: italic;}
        
        .timer-display {/*background: rgba(10, 20, 40, 0.6);*//*border: 1px solid rgba(100, 150, 255, 0.1);*/
            border-radius: 8px;padding: 20px;font-family: 'Courier New', monospace;
            font-size: 1.3rem;line-height: 1.8;margin-top: 10px;}
        
        .time-unit {display: flex;justify-content: space-between;
            margin-bottom: 10px;padding-bottom: 10px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);}
        
        .time-unit:last-child {border-bottom: none;margin-bottom: 0;padding-bottom: 0;} 
        .time-label {color: #dee2e6;}
        .time-value {color: #ffcc00;font-weight: bold;min-width: 100px;text-align: right;} 
        .fsb-card .time-value {color: #ff6b6b;}
        .sk-card .time-value {color: #6bcaff;}
        
        .current-time {text-align: center;padding: 15px;border-radius: 8px;
            font-size: 1.1rem;color: #adb5bd;/*background: rgba(20, 40, 70, 0.5);*//*border: 1px solid rgba(100, 150, 255, 0.1);*/}
        
        .current-time-value {color: #ffcc00;font-weight: bold;margin-left: 10px;}
        
        .footer {text-align: center;margin-top: 30px;color: #6c757d;font-size: 0.9rem;padding-top: 15px;border-top: 1px solid rgba(100, 150, 255, 0.1);}
        
        @media (max-width: 768px) {
            .timers {flex-direction: column;align-items: center;}   
            .header h1 {font-size: 2rem;}
            .timer-card {max-width: 100%;}}