/* ========================================================================== OMEGA HAVLÍKOVI - PORTÁL VLASTNÍKA (style_portal.css) VERZE 10.33: OMEGA-PROTOKOL (Systémová hlavička a patička portálu) ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800;900&display=swap'); /* ========================================================================== SEKCE 01: ZÁKLADNÍ NASTAVENÍ A FIREMNÍ SCROLLBAR ========================================================================== */ * { box-sizing: border-box; margin: 0; padding: 0; } :root { --om-gold-primary: #ffc107; --om-text-light: #e0e0e0; --om-text-gray: #aaaaaa; } body.om-portal-body { font-family: 'Inter', sans-serif !important; background: radial-gradient(circle at top left, #8c6b42 0%, #3a2918 50%, #251a0f 100%) fixed !important; color: #ffffff; min-height: 100dvh; display: flex; flex-direction: column; overflow-x: hidden; } h1, .om-hero-title, .hero-title, h3.modal-title, h4.modal-title { color: var(--om-gold-primary) !important; font-weight: 900 !important; letter-spacing: 1.5px; text-transform: uppercase; text-shadow: 0 0 15px rgba(255, 193, 7, 0.2) !important; text-align: center; } .om-hero-subtitle { font-size: 1.15rem; color: #e2e8f0; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.6); } ::-webkit-scrollbar-thumb { background: rgba(255, 193, 7, 0.5); border-radius: 5px; border: 1px solid rgba(0,0,0,0.8); } ::-webkit-scrollbar-thumb:hover { background: var(--om-gold-primary); } /* ========================================================================== SEKCE 02: HLAVIČKA A NAVIGACE ========================================================================== */ nav.om-navbar, nav.om-portal-navbar { min-height: 55px !important; height: auto !important; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border-bottom: 1px solid var(--om-gold-primary) !important; position: fixed !important; top: 0; left: 0; width: 100%; z-index: 10000; display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 10px 30px !important; flex-wrap: wrap; } .om-brand-gold { color: var(--om-gold-primary) !important; font-weight: 900; text-decoration: none; font-size: 1.1rem; display: flex; align-items: center; margin-right: 20px; flex-shrink: 0; text-transform: uppercase; } .om-nav-links { display: flex; gap: 10px; align-items: center; flex-grow: 1; justify-content: flex-start; flex-wrap: wrap; } .om-nav-link, .om-btn-client-zone { color: #ffffff !important; border: 1px solid var(--om-gold-primary) !important; background: rgba(0, 0, 0, 0.5) !important; padding: 6px 14px; border-radius: 4px; font-size: 0.75rem; text-transform: uppercase; text-decoration: none !important; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); white-space: nowrap; } .om-btn-logout { color: #ffffff !important; border: 1px solid #dc3545 !important; background: rgba(0, 0, 0, 0.5) !important; padding: 6px 14px; border-radius: 4px; font-size: 0.75rem; text-transform: uppercase; text-decoration: none !important; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); white-space: nowrap; margin-left: auto; } .om-nav-link:hover, .om-btn-client-zone:hover { background: rgba(255, 193, 7, 0.15) !important; color: var(--om-gold-primary) !important; box-shadow: 0 4px 10px rgba(0,0,0,0.5) !important; transform: translateY(-4px); } .om-btn-logout:hover { background: rgba(220, 53, 69, 0.15) !important; color: #ff6b6b !important; box-shadow: 0 4px 10px rgba(0,0,0,0.5) !important; transform: translateY(-4px); } .om-navbar-center-pill { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: rgba(255, 193, 7, 0.1) !important; border: 1px solid rgba(255, 193, 7, 0.2) !important; color: var(--om-gold-primary) !important; padding: 5px 15px; border-radius: 20px; font-weight: 600; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; } .om-dropdown { position: relative; display: inline-block; } .om-dropdown::after { content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: 10px; background: transparent; } .om-dropdown-content { display: none; position: absolute; background-color: rgba(0, 0, 0, 0.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); min-width: 250px; box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.7); z-index: 10005; border: 1px solid var(--om-gold-primary); border-radius: 6px; top: calc(100% + 5px); left: 0; flex-direction: column; overflow: hidden; } .om-dropdown:hover .om-dropdown-content { display: flex; animation: dropFade 0.2s ease-in-out; } .om-dropdown-content a { color: #ffffff !important; padding: 12px 18px; text-decoration: none !important; display: flex; align-items: center; gap: 10px; font-size: 0.85rem; border-bottom: 1px solid rgba(255,255,255,0.05); transition: all 0.3s ease; white-space: nowrap; font-weight: 600; text-transform: uppercase; } .om-dropdown-content a:hover { background: rgba(255, 193, 7, 0.15); color: var(--om-gold-primary) !important; padding-left: 25px; } /* ========================================================================== SEKCE 03: HLAVNÍ STRANA (MŘÍŽKA A DLAŽDICE) ========================================================================== */ .om-scrollable-main, .scrollable-main { flex: 1; padding: 85px 20px 130px !important; display: flex; flex-direction: column; align-items: center; width: 100%; } .om-index-header { text-align: center; margin-bottom: 25px; width: 100%; padding-top: 0; } .om-menu-card, .service-card { background: rgba(15, 20, 30, 0.4) !important; backdrop-filter: blur(12px) !important; border-radius: 12px !important; text-decoration: none !important; border: 2px solid rgba(255, 255, 255, 0.45) !important; transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease !important; } .om-menu-card { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; min-height: 250px; height: 100% !important; padding: 30px !important; } .service-card { padding: 30px !important; height: 100% !important; display: flex !important; flex-direction: column !important; } /* ========================================================================== SEKCE 04: PODSTRÁNKY A OBSAH ========================================================================== */ .om-card-icon { font-size: 3.5rem !important; margin-bottom: 20px; transition: 0.3s; } .om-menu-card:hover .om-card-icon { transform: scale(1.1); } .om-card-title { font-size: 1.2rem; font-weight: 900; margin-bottom: 20px; text-transform: uppercase; text-align: center; letter-spacing: 1px; transition: color 0.3s ease; } .om-nested-desc-box { background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; padding: 15px; width: 100%; text-align: center; margin-top: auto; transition: 0.3s; } .om-card-desc { font-size: 0.9rem; color: var(--om-text-gray); line-height: 1.4; margin: 0; } /* ========================================================================== SEKCE 05: TLAČÍTKA (SJEDNOCENÍ VIZUÁLU) ========================================================================== */ .om-btn-submit, .om-btn-login-admin, .btn-primary-action { background: var(--om-gold-primary) !important; color: #111 !important; border: 2px solid var(--om-gold-primary) !important; padding: 12px 30px; font-weight: 800; text-transform: uppercase; border-radius: 50px !important; cursor: pointer; transition: all 0.3s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; text-decoration: none !important; } .om-btn-submit:hover, .om-btn-login-admin:hover, .btn-primary-action:hover { filter: brightness(1.2); box-shadow: 0 5px 15px rgba(255, 193, 7, 0.4) !important; transform: translateY(-3px); } .om-login-back-link, .login-back-link, .btn-back, .btn-secondary-action { background: rgba(0, 0, 0, 0.5) !important; color: rgba(255,255,255,0.7) !important; border: 2px solid rgba(255, 255, 255, 0.15) !important; padding: 12px 30px; font-weight: 800; text-transform: uppercase; border-radius: 50px !important; cursor: pointer; transition: all 0.3s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none !important; width: auto; } .om-login-back-link:hover, .login-back-link:hover, .btn-back:hover, .btn-secondary-action:hover { background: rgba(255, 193, 7, 0.15) !important; color: var(--om-gold-primary) !important; border-color: rgba(255, 193, 7, 0.6) !important; box-shadow: 0 5px 15px rgba(255, 193, 7, 0.3) !important; transform: translateY(-3px); } .om-btn-action { color: var(--om-gold-primary); text-decoration: none; font-weight: 700; font-size: 0.9rem; padding: 8px 16px; border-radius: 6px; border: 1px solid rgba(197, 160, 89, 0.3); background: rgba(0,0,0,0.4); display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: 0.2s; cursor: pointer; } .om-btn-action:hover { color: #111 !important; background: var(--om-gold-primary) !important; box-shadow: 0 0 15px rgba(255, 193, 7, 0.4); } /* ========================================================================== SEKCE 06: OMEGA BAREVNÁ PALETA ========================================================================== */ .om-color-gold, .om-card-gold { border-color: rgba(255, 193, 7, 0.5) !important; } .om-color-gold i, .om-color-gold svg, .om-color-gold .fas, .om-color-gold h5, .om-card-gold .om-card-icon, .om-card-gold .om-card-title { color: #ffc107 !important; } .om-color-gold:hover, .om-card-gold:hover { transform: translateY(-8px) !important; border-color: #ffc107 !important; box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 20px rgba(255, 193, 7, 0.3) !important; } .om-text-gold { color: #ffc107 !important; } .om-cat-gold { border-left: 4px solid #ffc107 !important; } .om-color-cyan, .om-card-cyan { border-color: rgba(13, 202, 240, 0.5) !important; } .om-color-cyan i, .om-color-cyan svg, .om-color-cyan .fas, .om-color-cyan h5, .om-card-cyan .om-card-icon, .om-card-cyan .om-card-title { color: #0dcaf0 !important; } .om-color-cyan:hover, .om-card-cyan:hover { transform: translateY(-8px) !important; border-color: #0dcaf0 !important; box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 20px rgba(13, 202, 240, 0.3) !important; } .om-text-cyan { color: #0dcaf0 !important; } .om-cat-cyan { border-left: 4px solid #0dcaf0 !important; } .om-color-green, .om-card-green { border-color: rgba(46, 204, 113, 0.5) !important; } .om-color-green i, .om-color-green svg, .om-color-green .fas, .om-color-green h5, .om-card-green .om-card-icon, .om-card-green .om-card-title { color: #2ecc71 !important; } .om-color-green:hover, .om-card-green:hover { transform: translateY(-8px) !important; border-color: #2ecc71 !important; box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 20px rgba(46, 204, 113, 0.3) !important; } .om-text-green { color: #2ecc71 !important; } .om-cat-green { border-left: 4px solid #2ecc71 !important; } .om-color-red, .om-card-red { border-color: rgba(220, 53, 69, 0.5) !important; } .om-color-red i, .om-color-red svg, .om-color-red .fas, .om-color-red h5, .om-card-red .om-card-icon, .om-card-red .om-card-title { color: #dc3545 !important; } .om-color-red:hover, .om-card-red:hover { transform: translateY(-8px) !important; border-color: #dc3545 !important; box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 20px rgba(220, 53, 69, 0.3) !important; } .om-text-red { color: #dc3545 !important; } .om-cat-red { border-left: 4px solid #dc3545 !important; } .om-color-blue, .om-card-blue { border-color: rgba(13, 110, 253, 0.5) !important; } .om-color-blue i, .om-color-blue svg, .om-color-blue .fas, .om-color-blue h5, .om-card-blue .om-card-icon, .om-card-blue .om-card-title { color: #0d6efd !important; } .om-color-blue:hover, .om-card-blue:hover { transform: translateY(-8px) !important; border-color: #0d6efd !important; box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 20px rgba(13, 110, 253, 0.3) !important; } .om-text-blue { color: #0d6efd !important; } .om-cat-blue { border-left: 4px solid #0d6efd !important; } .om-color-purple, .om-card-purple { border-color: rgba(165, 94, 234, 0.5) !important; } .om-color-purple i, .om-color-purple svg, .om-color-purple .fas, .om-color-purple h5, .om-card-purple .om-card-icon, .om-card-purple .om-card-title { color: #a55eea !important; } .om-color-purple:hover, .om-card-purple:hover { transform: translateY(-8px) !important; border-color: #a55eea !important; box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 20px rgba(165, 94, 234, 0.3) !important; } .om-text-purple { color: #a55eea !important; } .om-cat-purple { border-left: 4px solid #a55eea !important; } .om-color-orange, .om-card-orange { border-color: rgba(253, 126, 20, 0.5) !important; } .om-color-orange i, .om-color-orange svg, .om-color-orange .fas, .om-color-orange h5, .om-card-orange .om-card-icon, .om-card-orange .om-card-title { color: #fd7e14 !important; } .om-color-orange:hover, .om-card-orange:hover { transform: translateY(-8px) !important; border-color: #fd7e14 !important; box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 20px rgba(253, 126, 20, 0.3) !important; } .om-text-orange { color: #fd7e14 !important; } .om-cat-orange { border-left: 4px solid #fd7e14 !important; } .om-color-gdpr { border-color: rgba(32, 201, 151, 0.5) !important; } .om-color-gdpr i, .om-color-gdpr svg, .om-color-gdpr .fas, .om-color-gdpr h5 { color: #20c997 !important; } .om-color-gdpr:hover { transform: translateY(-8px); border-color: #20c997 !important; box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 20px rgba(32, 201, 151, 0.3) !important; } .om-text-gdpr { color: #20c997 !important; } /* ========================================================================== SEKCE 07: PATIČKA ========================================================================== */ .om-footer, .om-portal-footer { min-height: 45px !important; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border-top: 1px solid rgba(255, 193, 7, 0.5) !important; position: fixed !important; bottom: 0; left: 0; width: 100%; z-index: 1000; display: flex; justify-content: center; align-items: center; padding: 5px 0 !important; } .om-footer-container { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 15px; font-size: 0.85rem; width: 100%; padding: 0 15px; } .om-footer-text { color: var(--om-gold-primary) !important; font-weight: 800 !important; } .om-small-dot { font-size: 0.4rem; color: #555; align-self: center; } .om-footer-trigger { display: flex; align-items: center; color: #aaaaaa; cursor: pointer; transition: color 0.3s ease; text-decoration: none !important; } .om-footer-trigger:hover { color: var(--om-gold-primary); text-decoration: none !important; } .om-footer-dropup { position: relative; display: inline-block; } .om-footer-dropdown-menu { display: none; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background-color: rgba(0, 0, 0, 0.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid #ffc107; padding: 12px; z-index: 10002; border-radius: 4px; box-shadow: 0px -4px 10px rgba(0,0,0,0.8); text-align: left; margin-bottom: 10px; width: max-content; color: #ffffff; line-height: 1.5; } .om-footer-dropup:hover .om-footer-dropdown-menu { display: block; } .om-footer-dropdown-menu::after { content: ''; position: absolute; top: 100%; left: -15%; width: 130%; height: 30px; background: transparent; z-index: 10005; pointer-events: auto; } .om-footer-dropdown-menu a { color: #ffffff !important; text-decoration: none !important; display: block; padding: 4px 0; transition: color 0.3s ease; font-weight: normal; position: relative; z-index: 10006; } .om-footer-dropdown-menu a:hover { color: #ffc107 !important; } /* ========================================================================== SEKCE 09: PORTÁL - TROMBÓNY A VNITŘNÍ ŘÁDKY (CENTRÁLNÍ EFEKTY) ========================================================================== */ .om-inner-data-box { background: rgba(0, 0, 0, 0.4) !important; border: 1px solid rgba(255, 255, 255, 0.35) !important; border-radius: 8px !important; padding: 15px 20px; font-size: 0.9rem; font-weight: 600; color: #fff; transition: all 0.3s ease !important; margin-bottom: 10px; border-left-width: 0px !important; } .om-inner-data-box:hover { transform: translateY(-4px) !important; box-shadow: 0 6px 15px rgba(0,0,0,0.5) !important; border-color: var(--om-gold-primary) !important; background: rgba(15, 20, 30, 0.6) !important; } /* Zlaté a barevné trombóny POUZE pro hlavní zobrazení (mimo modál) */ .om-modal-trombony-rotate .om-inner-data-box { border-left-width: 4px !important; } .om-modal-trombony-rotate .om-inner-data-box:nth-child(5n+1) { border-left-color: #ffc107 !important; } .om-modal-trombony-rotate .om-inner-data-box:nth-child(5n+2) { border-left-color: #0dcaf0 !important; } .om-modal-trombony-rotate .om-inner-data-box:nth-child(5n+3) { border-left-color: #dc3545 !important; } .om-modal-trombony-rotate .om-inner-data-box:nth-child(5n+4) { border-left-color: #2ecc71 !important; } .om-modal-trombony-rotate .om-inner-data-box:nth-child(5n+5) { border-left-color: #a55eea !important; } .om-list-row, .doc-row-item, .pro-table tbody tr.doc-row { background: rgba(15, 20, 30, 0.4) !important; border: 1px solid rgba(255, 255, 255, 0.05) !important; border-radius: 8px !important; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; } .om-list-row:hover, .doc-row-item:hover, .pro-table tbody tr.doc-row:hover { transform: translateY(-4px) !important; box-shadow: 0 8px 20px rgba(0,0,0,0.6) !important; border-color: var(--om-gold-primary) !important; background: rgba(15, 20, 30, 0.8) !important; } .om-badge-count { position: absolute; top: -15px; right: -15px; background: #dc3545; color: white; min-width: 40px; height: 40px; padding: 0 10px; border-radius: 20px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; box-shadow: 0 5px 15px rgba(220,53,69,0.6); z-index: 10; border: 2px solid #1a1a1a; } .category-filter-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 50px; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.25); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; transition: all 0.25s; cursor: pointer; color: #fff; text-decoration: none; } .category-filter-btn:hover, .category-filter-btn.active-filter { background: #ffc107 !important; color: #000 !important; border-color: #ffc107 !important; box-shadow: 0 0 10px rgba(255, 193, 7, 0.4); transform: translateY(-2px); } /* ========================================================================== SEKCE 10: VYHLEDÁVAČE ========================================================================== */ .om-search-box { position: relative; width: 100%; display: flex; align-items: center; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50px; background: rgba(0,0,0,0.5); box-shadow: inset 0 0 10px rgba(0,0,0,0.5); padding: 0 20px; transition: 0.3s ease; } .om-search-box:focus-within { border-color: var(--om-gold-primary); background: rgba(0,0,0,0.7); box-shadow: 0 0 15px rgba(255, 193, 7, 0.3), inset 0 0 10px rgba(0,0,0,0.8); } .om-search-box i { color: var(--om-gold-primary); font-size: 1.2rem; margin-right: 10px; } .om-search-box input { background: transparent; border: none; color: #fff; width: 100%; padding: 12px 0; outline: none; box-shadow: none; font-size: 0.95rem; } .om-search-box input::placeholder { color: rgba(255,255,255,0.4); font-style: italic; } /* ========================================================================== SEKCE 11: PORTÁL - AKORDEON ========================================================================== */ .om-accordion { --bs-accordion-bg: transparent; --bs-accordion-border-width: 0; } .om-accordion .accordion-item { background: rgba(15, 20, 30, 0.6) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 8px !important; margin-bottom: 15px; overflow: hidden; transition: all 0.3s ease !important; } .om-accordion .accordion-item:hover { box-shadow: 0 4px 15px rgba(0,0,0,0.6) !important; border-color: rgba(255, 255, 255, 0.3) !important; transform: translateY(-2px); } .om-accordion .accordion-button { background: rgba(15, 20, 30, 0.8) !important; color: #ffffff !important; font-weight: 800; font-size: 1.1rem; box-shadow: none !important; border-bottom: 1px solid rgba(255,255,255,0.05); padding: 15px 25px; transition: 0.3s; } .om-accordion .accordion-button:not(.collapsed) { background: rgba(0, 0, 0, 0.9) !important; color: #ffffff !important; } .om-accordion .accordion-button::after { filter: invert(1) grayscale(100%) brightness(200%); } .om-accordion .accordion-body { padding: 15px; background: rgba(0, 0, 0, 0.3); border-top: 1px solid rgba(255, 255, 255, 0.05); } /* ========================================================================== SEKCE 12: PORTÁL - FORMULÁŘE A ZÁKLADNÍ MODALY ========================================================================== */ .om-profile-box { border: 2px solid var(--om-gold-primary) !important; border-radius: 12px; background: rgba(15, 20, 30, 0.4); backdrop-filter: blur(12px); box-shadow: 0 20px 50px rgba(0,0,0,0.8); } .om-pwd-wrap { position: relative !important; width: 100% !important; display: block !important; margin-bottom: 15px; } .om-pwd-wrap input { padding-right: 45px !important; width: 100% !important; } .om-pwd-eye { position: absolute !important; right: 15px !important; top: 50% !important; transform: translateY(-50%) !important; color: var(--om-gold-primary) !important; cursor: pointer !important; z-index: 10 !important; font-size: 1.2rem !important; transition: filter 0.2s; } .om-pwd-eye:hover { filter: brightness(1.3); } .om-modal-system .modal-content { background: rgba(40, 30, 20, 0.98) !important; border: 2px solid var(--om-gold-primary) !important; border-radius: 16px !important; box-shadow: 0 20px 50px rgba(0,0,0,0.8) !important; color: #fff; overflow: hidden; } .om-modal-system .modal-header { border-bottom: 1px solid rgba(255,255,255,0.1) !important; padding: 20px !important; } .om-modal-system .modal-footer { border-top: 1px solid rgba(255,255,255,0.1) !important; padding: 20px !important; } .om-modal-system.modal-blue .modal-content, .om-modal-system.modal-red .modal-content { border-color: var(--om-gold-primary) !important; } .om-modal-system.modal-blue .modal-title, .om-modal-system.modal-red .modal-title, .om-modal-system.modal-blue .modal-header i, .om-modal-system.modal-red .modal-header i { color: var(--om-gold-primary) !important; } .om-form-control, textarea.om-form-control, select.om-form-control { background-color: rgba(0, 0, 0, 0.6) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; color: #fff !important; border-radius: 10px !important; padding: 12px 18px !important; font-weight: 600 !important; transition: 0.3s ease; width: 100% !important; outline: none !important; } textarea.om-form-control { resize: vertical; min-height: 100px; } select.om-form-control { cursor: pointer; } select.om-form-control option { background-color: #1a1a1a; color: #fff; } .om-form-control:focus, textarea.om-form-control:focus, select.om-form-control:focus { border-color: var(--om-gold-primary) !important; background-color: rgba(0, 0, 0, 0.8) !important; box-shadow: 0 0 15px rgba(255, 193, 7, 0.2) !important; } .om-custom-input { color: #e9ecef !important; } .om-custom-input::placeholder { color: rgba(255, 255, 255, 0.6) !important; font-style: italic; } /* ========================================================================== SEKCE 13: LOGIN ========================================================================== */ .om-login-wrapper, .login-wrapper { display: flex; align-items: center; justify-content: center; min-height: 100vh; width: 100%; } .om-login-card, .login-card, .om-login-card-dark { background: rgba(15, 20, 30, 0.4) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; border-radius: 12px; padding: 50px 40px; width: 100%; max-width: 450px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,0.8); transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; margin: 0 auto; } .om-login-card:hover, .login-card:hover, .om-login-card-dark:hover { transform: translateY(-8px); border-color: var(--om-gold-primary) !important; box-shadow: 0 20px 60px rgba(255, 193, 7, 0.2); } .om-login-input-wrapper, .login-input-wrapper { position: relative !important; width: 100% !important; margin-bottom: 20px !important; display: block !important; } .om-login-input-white, .login-input-white { display: block !important; width: 100% !important; padding: 14px 45px !important; background-color: #ffffff !important; color: #000000 !important; border: 2px solid transparent !important; border-radius: 6px !important; outline: none !important; font-weight: 600 !important; transition: 0.2s !important; } .om-login-input-white:focus, .login-input-white:focus { border-color: var(--om-gold-primary) !important; } .om-login-input-white::placeholder, .login-input-white::placeholder { color: rgba(0, 0, 0, 0.5) !important; font-style: italic; } .om-login-icon-inside, .login-icon-inside { position: absolute !important; left: 15px !important; top: 50% !important; transform: translateY(-50%) !important; color: var(--om-gold-primary) !important; z-index: 10 !important; font-size: 1.1rem !important; pointer-events: none !important; } /* ========================================================================== SEKCE 14: PORTÁL - MOBILNÍ SPECIFIKA ========================================================================== */ @media (min-width: 992px) { .om-menu-card { aspect-ratio: 1 / 1; } .om-card-icon { font-size: 4.5rem !important; } .om-card-title { font-size: 1.35rem; } .om-card-desc { font-size: 1rem; } } @media (max-width: 1150px) { .om-nav-links { gap: 6px; } .om-nav-link { padding: 6px 10px; font-size: 0.7rem; } } @media (max-width: 991px) { body.om-portal-body { overflow-x: hidden !important; width: 100% !important; max-width: 100vw !important; } nav.om-navbar, nav.om-portal-navbar { position: relative !important; padding: 15px !important; flex-direction: column; gap: 12px; } .om-footer, .om-portal-footer { position: relative !important; margin-top: auto !important; width: 100%; max-width: 100vw; z-index: 10005 !important; } .om-nav-links { flex-wrap: wrap; justify-content: center; width: 100%; overflow: visible; padding: 0; } .om-brand-gold { margin: 0 auto; justify-content: center; width: 100%; text-align: center; margin-bottom: 10px; } .om-btn-logout { margin: 0 auto; width: 100%; justify-content: center; } .om-navbar-center-pill { display: none !important; } .om-scrollable-main, .scrollable-main { padding-top: 40px !important; } .om-menu-card, .service-card { min-height: 250px; } .om-menu-card { aspect-ratio: auto; } .om-scrollable-main .container, .om-scrollable-main .container-fluid { padding-left: 6px !important; padding-right: 6px !important; width: 100% !important; max-width: 100% !important; } h1, h2, h3, h4, h5 { word-wrap: break-word; overflow-wrap: break-word; } .service-card, .table-container-box { width: 100% !important; max-width: 100% !important; padding: 15px 8px !important; margin-left: 0 !important; margin-right: 0 !important; } .table-responsive { border: none !important; overflow-x: visible !important; } .pro-table, .pro-table thead, .pro-table tbody, .pro-table th, .pro-table td, .pro-table tr, .om-accordion .accordion-body, .doc-row-item { display: block !important; width: 100% !important; } .pro-table_thead { display: none !important; } .pro-table tbody tr.doc-row, .doc-row-item { background: rgba(0, 0, 0, 0.4) !important; border: 1px solid rgba(255, 255, 255, 0.05) !important; border-radius: 8px !important; margin-bottom: 15px !important; padding: 10px !important; transform: none !important; } .pro-table tbody td, .doc-row-item > div { display: block !important; width: 100% !important; padding: 4px 0 !important; border: none !important; text-align: center !important; } .om-mobile-text-fix, .search-target { white-space: normal !important; word-break: break-word !important; text-overflow: clip !important; overflow: visible !important; display: block !important; text-align: center !important; line-height: 1.4 !important; padding: 5px !important; } .pro-table tbody td .content-box, .doc-row-item .search-target { align-items: center !important; justify-content: center !important; text-align: center !important; } .om-mobile-actions-wrapper, .doc-row-item .flex-shrink-0 { display: flex !important; flex-direction: row !important; justify-content: space-around !important; background: rgba(255, 255, 255, 0.03) !important; border-radius: 6px !important; padding: 8px !important; margin-top: 5px !important; width: 100% !important; } .btn-action-mini, .om-btn-action { font-size: 1.4rem !important; padding: 10px 35px !important; flex: 1 !important; text-align: center !important; display: inline-flex !important; justify-content: center !important; align-items: center !important; background: transparent !important; box-shadow: none !important; transform: none !important; } .om-modal-system .modal-dialog { margin: 15px; } .om-modal-system .btn-primary-action { width: 100%; display: block; } .om-btn-submit { max-width: 100% !important; white-space: normal !important; word-wrap: break-word !important; } .modal-backdrop { z-index: 10400 !important; } .om-modal-system { z-index: 10500 !important; } } /* ========================================================================== SEKCE 15: AKČNÍ IKONY ========================================================================== */ .action-icon { transition: transform 0.2s, filter 0.2s; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; padding: 4px; } .action-icon:hover { transform: scale(1.2); filter: brightness(1.3); } /* ========================================================================== SEKCE 16: PORTÁL MODÁLY A VNITŘNÍ BOXY (UX DESIGN, JEMNÉ RÁMEČKY A TEXTY) ========================================================================== */ /* 1. ZABETONOVANÉ ODSTRANĚNÍ TROMBÓNŮ: Matematické přebití rotace ze Sekce 09 */ .om-modal-system .om-inner-data-box, .om-modal-system .om-inner-data-box:nth-child(n), .om-modal-system.om-modal-trombony-rotate .om-inner-data-box:nth-child(n) { border-width: 1px !important; border-style: solid !important; border-color: rgba(255, 255, 255, 0.15) !important; transition: all 0.3s ease !important; } /* 2. Celoobvodový zlatý hover efekt (Včetně efektu vznášení) */ .om-modal-system .om-inner-data-box:hover, .om-modal-system .om-inner-data-box:nth-child(n):hover { border-color: var(--om-gold-primary) !important; box-shadow: 0 5px 15px rgba(255, 193, 7, 0.15) !important; transform: translateY(-2px) !important; } /* 3. Systémové ztlumení textů (Ochrana zraku proti vysokému kontrastu) */ .om-modal-system .modal-body { color: rgba(255, 255, 255, 0.75) !important; } .om-modal-system .modal-body label, .om-modal-system .modal-body .om-input-label { color: rgba(255, 255, 255, 0.5) !important; } .om-modal-system .modal-body input.om-form-control, .om-modal-system .modal-body select.om-form-control, .om-modal-system .modal-body textarea.om-form-control { color: rgba(255, 255, 255, 0.85) !important; } .om-modal-system .table td { color: rgba(255, 255, 255, 0.75) !important; } /* ========================================================================== SEKCE 17: PORTÁL - SYSTÉMOVÉ SCROLLY, ŠÍŘKY A MODÁLNÍ OKNA ========================================================================== */ body.om-portal-body { --om-portal-modal-bg: rgba(40, 30, 20, 0.98); --om-portal-modal-bg-soft: rgba(56, 40, 24, 0.94); --om-portal-panel-bg: rgba(28, 20, 13, 0.72); --om-portal-panel-bg-hover: rgba(46, 33, 19, 0.82); --om-portal-text-soft: rgba(245, 238, 229, 0.88); --om-portal-text-muted-soft: rgba(232, 218, 200, 0.62); --om-portal-text-faint: rgba(232, 218, 200, 0.44); --om-portal-modal-size: 807px; } /* 17.01 - Firemní jemný scrollbar pro vnitřní scrollované bloky */ body.om-portal-body .custom-scroll { overflow-y: auto !important; padding-right: 10px !important; } body.om-portal-body .custom-scroll::-webkit-scrollbar { width: 6px !important; } body.om-portal-body .custom-scroll::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05) !important; border-radius: 4px !important; } body.om-portal-body .custom-scroll::-webkit-scrollbar-thumb { background: var(--om-gold-primary) !important; border-radius: 4px !important; } body.om-portal-body .custom-scroll::-webkit-scrollbar-thumb:hover { background: #d6a806 !important; } /* 17.02 - Systémové maximální šířky, sjednocené s admin logikou */ body.om-portal-body .om-max-1200 { max-width: 1200px !important; margin: 0 auto !important; } body.om-portal-body .om-max-1300 { max-width: 1300px !important; margin: 0 auto !important; } body.om-portal-body .om-max-1400 { max-width: 1400px !important; margin: 0 auto !important; } /* 17.03 - Vrstva modálů nad pevnou navigací a patičkou */ body.om-portal-body .modal-backdrop { z-index: 104000 !important; } body.om-portal-body .om-modal-system { z-index: 105000 !important; } /* 17.04 - Portálový reportovací modal: logika z adminu, ale kávově-hnědý vzhled */ body.om-portal-body .om-modal-system.om-portal-report-modal .modal-dialog { width: min(var(--om-portal-modal-size), calc(100vw - 32px)) !important; max-width: min(var(--om-portal-modal-size), calc(100vw - 32px)) !important; margin: 72px auto 16px auto !important; } body.om-portal-body .om-modal-system.om-portal-report-modal .modal-content { width: 100% !important; max-height: calc(100dvh - 96px) !important; background: linear-gradient(180deg, rgba(64, 45, 27, 0.98) 0%, var(--om-portal-modal-bg) 100%) !important; border: 2px solid var(--om-gold-primary) !important; border-radius: 18px !important; color: var(--om-portal-text-soft) !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; box-shadow: 0 26px 70px rgba(0, 0, 0, 0.74), 0 0 0 1px rgba(255, 193, 7, 0.12), 0 0 26px rgba(255, 193, 7, 0.14) !important; } body.om-portal-body .om-modal-system.om-portal-report-modal .modal-content > form { min-height: 0 !important; display: flex !important; flex-direction: column !important; width: 100% !important; } body.om-portal-body .om-modal-system.om-portal-report-modal .modal-header, body.om-portal-body .om-modal-system.om-portal-report-modal .modal-footer { flex: 0 0 auto !important; background: rgba(20, 13, 8, 0.32) !important; border-color: rgba(255, 193, 7, 0.22) !important; } body.om-portal-body .om-modal-system.om-portal-report-modal .modal-body { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; scrollbar-gutter: stable !important; color: var(--om-portal-text-soft) !important; padding: 1.1rem 1.45rem !important; } body.om-portal-body .om-modal-system.om-portal-report-modal .modal-title, body.om-portal-body .om-modal-system.om-portal-report-modal .modal-header h1, body.om-portal-body .om-modal-system.om-portal-report-modal .modal-header h2, body.om-portal-body .om-modal-system.om-portal-report-modal .modal-header h3, body.om-portal-body .om-modal-system.om-portal-report-modal .modal-header h4, body.om-portal-body .om-modal-system.om-portal-report-modal .modal-header h5 { color: var(--om-gold-primary) !important; text-shadow: 0 0 14px rgba(255, 193, 7, 0.20) !important; } body.om-portal-body .om-modal-system.om-portal-report-modal .om-inner-data-box { background: var(--om-portal-panel-bg) !important; border: 1px solid rgba(255, 193, 7, 0.22) !important; border-left-width: 1px !important; color: var(--om-portal-text-soft) !important; box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.20) !important; padding: 12px 18px !important; margin-bottom: 12px !important; } body.om-portal-body .om-modal-system.om-portal-report-modal .om-inner-data-box:hover { background: var(--om-portal-panel-bg-hover) !important; border-color: rgba(255, 193, 7, 0.54) !important; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.38), 0 0 14px rgba(255, 193, 7, 0.12) !important; transform: translateY(-2px) !important; } body.om-portal-body .om-modal-system.om-portal-report-modal label, body.om-portal-body .om-modal-system.om-portal-report-modal small, body.om-portal-body .om-modal-system.om-portal-report-modal .text-white-50, body.om-portal-body .om-modal-system.om-portal-report-modal .text-muted { color: var(--om-portal-text-muted-soft) !important; } body.om-portal-body .om-modal-system.om-portal-report-modal input, body.om-portal-body .om-modal-system.om-portal-report-modal select, body.om-portal-body .om-modal-system.om-portal-report-modal textarea, body.om-portal-body .om-modal-system.om-portal-report-modal .form-control, body.om-portal-body .om-modal-system.om-portal-report-modal .om-form-control { background: rgba(0, 0, 0, 0.56) !important; border: 1px solid rgba(255, 193, 7, 0.18) !important; color: var(--om-portal-text-soft) !important; border-radius: 10px !important; } body.om-portal-body .om-modal-system.om-portal-report-modal input:focus, body.om-portal-body .om-modal-system.om-portal-report-modal select:focus, body.om-portal-body .om-modal-system.om-portal-report-modal textarea:focus, body.om-portal-body .om-modal-system.om-portal-report-modal .form-control:focus, body.om-portal-body .om-modal-system.om-portal-report-modal .om-form-control:focus { border-color: rgba(255, 193, 7, 0.78) !important; box-shadow: 0 0 0 1px rgba(255, 193, 7, 0.20), 0 0 14px rgba(255, 193, 7, 0.16) !important; color: #ffffff !important; } /* 17.05 - Zónované přílohy v modálu: vlastní scroll, aby nikdy nevytlačily tlačítko Odeslat */ body.om-portal-body .om-portal-file-zone { border-color: rgba(13, 202, 240, 0.52) !important; background: rgba(0, 0, 0, 0.24) !important; } body.om-portal-body .om-portal-file-list-box { max-height: 148px !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; border-radius: 8px !important; scrollbar-gutter: stable !important; } body.om-portal-body .om-portal-file-list-box .list-group { margin-bottom: 0 !important; } body.om-portal-body .om-portal-file-list-box .list-group-item { background: rgba(15, 20, 30, 0.72) !important; color: var(--om-portal-text-soft) !important; border-color: rgba(255, 255, 255, 0.12) !important; } /* 17.06 - Kompaktní formulářové modály v portálu */ body.om-portal-body .om-modal-system.om-portal-report-modal .om-form-control, body.om-portal-body .om-modal-system.om-portal-report-modal .form-control { padding: 9px 13px !important; } body.om-portal-body .om-modal-system.om-portal-report-modal textarea.om-form-control { min-height: 96px !important; } body.om-portal-body .om-modal-system.om-portal-report-modal .modal-footer .om-btn-submit, body.om-portal-body .om-modal-system.om-portal-report-modal .modal-footer .btn-secondary-action { margin: 0 !important; } /* 17.07 - Systémové akční ikony v portálu, stejné významy jako v adminu */ body.om-portal-body .om-action-view, body.om-portal-body .om-action-view i, body.om-portal-body .om-action-view .fas, body.om-portal-body .om-action-view-btn, body.om-portal-body .om-action-view-btn i, body.om-portal-body .om-action-view-btn .fas, body.om-portal-body .om-action-edit, body.om-portal-body .om-action-edit i, body.om-portal-body .om-action-edit .fas, body.om-portal-body .om-action-edit-btn, body.om-portal-body .om-action-edit-btn i, body.om-portal-body .om-action-edit-btn .fas { color: #0dcaf0 !important; } body.om-portal-body .om-action-restore, body.om-portal-body .om-action-restore i, body.om-portal-body .om-action-restore .fas, body.om-portal-body .om-action-restore-btn, body.om-portal-body .om-action-restore-btn i, body.om-portal-body .om-action-restore-btn .fas { color: #2ecc71 !important; } body.om-portal-body .om-action-archive, body.om-portal-body .om-action-archive i, body.om-portal-body .om-action-archive .fas, body.om-portal-body .om-action-archive-btn, body.om-portal-body .om-action-archive-btn i, body.om-portal-body .om-action-archive-btn .fas { color: #ffc107 !important; } body.om-portal-body .om-action-delete, body.om-portal-body .om-action-delete i, body.om-portal-body .om-action-delete .fas, body.om-portal-body .om-action-delete-btn, body.om-portal-body .om-action-delete-btn i, body.om-portal-body .om-action-delete-btn .fas { color: #ff4d5f !important; } body.om-portal-body .om-action-view, body.om-portal-body .om-action-edit, body.om-portal-body .om-action-restore, body.om-portal-body .om-action-archive, body.om-portal-body .om-action-delete { width: 34px !important; min-width: 34px !important; height: 34px !important; border-radius: 999px !important; background: rgba(0, 0, 0, 0.42) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; text-decoration: none !important; cursor: pointer !important; box-shadow: 0 7px 18px rgba(0, 0, 0, 0.32) !important; transition: transform 280ms cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 220ms ease, border-color 220ms ease, background 220ms ease, filter 220ms ease, opacity 220ms ease !important; } body.om-portal-body .om-action-view, body.om-portal-body .om-action-edit { border-color: rgba(13, 202, 240, 0.48) !important; } body.om-portal-body .om-action-restore { border-color: rgba(46, 204, 113, 0.58) !important; } body.om-portal-body .om-action-archive { border-color: rgba(255, 193, 7, 0.58) !important; } body.om-portal-body .om-action-delete { border-color: rgba(255, 77, 95, 0.62) !important; } body.om-portal-body .om-action-view:hover, body.om-portal-body .om-action-edit:hover, body.om-portal-body .om-action-restore:hover, body.om-portal-body .om-action-archive:hover, body.om-portal-body .om-action-delete:hover { transform: translateY(-2px) scale(1.08) !important; filter: brightness(1.18) !important; box-shadow: 0 11px 22px rgba(0, 0, 0, 0.42), 0 0 12px rgba(255, 255, 255, 0.08) !important; } /* 17.08 - Mobilní pojistky portálových modálů */ @media (max-width: 575.98px) { body.om-portal-body .om-modal-system.om-portal-report-modal .modal-dialog { width: calc(100vw - 20px) !important; max-width: calc(100vw - 20px) !important; margin: 10px auto !important; } body.om-portal-body .om-modal-system.om-portal-report-modal .modal-content { max-height: calc(100dvh - 20px) !important; border-radius: 14px !important; } body.om-portal-body .om-modal-system.om-portal-report-modal .modal-header, body.om-portal-body .om-modal-system.om-portal-report-modal .modal-footer { padding: 14px !important; } body.om-portal-body .om-modal-system.om-portal-report-modal .modal-body { padding: 0.85rem !important; } body.om-portal-body .om-modal-system.om-portal-report-modal .modal-footer { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; } body.om-portal-body .om-modal-system.om-portal-report-modal .modal-footer .om-btn-submit, body.om-portal-body .om-modal-system.om-portal-report-modal .modal-footer .btn-secondary-action { width: 100% !important; } body.om-portal-body .om-portal-file-list-box { max-height: 118px !important; } } /* ========================================================================== SEKCE 18: PORTÁL - SYSTÉMOVÉ ŠÍŘKY, KARTY, OVLÁDACÍ PANELY A HELPERy ========================================================================== Účel: - převést logiku administračních layout helperů do portálu, - řídit šířky, toolbar, search row, pill row a souhrny centrálně přes CSS, - PHP pouze určuje typ prvku a význam, vzhled řídí style_portal.css. ========================================================================== */ body.om-portal-body { --om-portal-page-card-width: 1200px; --om-portal-page-card-wide-width: 1400px; --om-portal-page-card-narrow-width: 1000px; --om-portal-control-bg: rgba(16, 12, 10, 0.46); --om-portal-control-border: rgba(255, 193, 7, 0.30); --om-portal-control-border-hover: rgba(255, 193, 7, 0.72); --om-portal-card-shadow: 0 22px 55px rgba(0, 0, 0, 0.55); --om-portal-transition-pop: 280ms cubic-bezier(0.175, 0.885, 0.32, 1.275); --om-portal-transition-soft: 220ms ease; } body.om-portal-body .om-portal-page-card, body.om-portal-body .om-portal-doc-card { width: 100% !important; max-width: min(var(--om-portal-page-card-width), calc(100vw - 40px)) !important; margin-left: auto !important; margin-right: auto !important; } body.om-portal-body .om-portal-page-card-wide, body.om-portal-body .om-portal-doc-shell { width: 100% !important; max-width: min(var(--om-portal-page-card-wide-width), calc(100vw - 40px)) !important; margin-left: auto !important; margin-right: auto !important; } body.om-portal-body .om-portal-page-card-narrow { width: 100% !important; max-width: min(var(--om-portal-page-card-narrow-width), calc(100vw - 40px)) !important; margin-left: auto !important; margin-right: auto !important; } body.om-portal-body .om-portal-control-panel, body.om-portal-body .om-portal-doc-panel { width: 100% !important; margin-left: auto !important; margin-right: auto !important; background: var(--om-portal-control-bg) !important; border: 1px solid var(--om-portal-control-border) !important; box-shadow: none !important; } body.om-portal-body .om-portal-toolbar, body.om-portal-body .om-portal-doc-actions { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 12px !important; } body.om-portal-body .om-portal-search-row, body.om-portal-body .om-portal-doc-search { width: 100% !important; max-width: 800px !important; margin-left: auto !important; margin-right: auto !important; } body.om-portal-body .om-portal-pill-row, body.om-portal-body .om-portal-doc-filter-row { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 10px !important; } body.om-portal-body .om-portal-summary-row { display: inline-flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 16px !important; margin-top: 10px !important; } body.om-portal-body .om-card-white, body.om-portal-body .om-color-white { border-color: rgba(206, 212, 218, 0.55) !important; } body.om-portal-body .om-card-white:hover, body.om-portal-body .om-color-white:hover { transform: translateY(-8px) !important; border-color: #ced4da !important; box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 20px rgba(206, 212, 218, 0.20) !important; } body.om-portal-body .om-text-white { color: #ced4da !important; } body.om-portal-body .om-cat-white { border-left: 4px solid #ced4da !important; } body.om-portal-body .om-card-gray, body.om-portal-body .om-color-gray { border-color: rgba(173, 181, 189, 0.55) !important; } body.om-portal-body .om-card-gray:hover, body.om-portal-body .om-color-gray:hover { transform: translateY(-8px) !important; border-color: #adb5bd !important; box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 20px rgba(173, 181, 189, 0.20) !important; } body.om-portal-body .om-text-gray { color: #adb5bd !important; } body.om-portal-body .om-cat-gray { border-left: 4px solid #adb5bd !important; } body.om-portal-body .count-badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 24px !important; height: 22px !important; padding: 0 7px !important; margin-left: 4px !important; border-radius: 999px !important; background: rgba(0, 0, 0, 0.56) !important; border: 1px solid rgba(255, 255, 255, 0.22) !important; color: #ffffff !important; font-size: 0.72rem !important; font-weight: 900 !important; line-height: 1 !important; } /* ========================================================================== SEKCE 19: PORTÁL - SYSTÉMOVÉ ROZDĚLOVNÍKY A CENTRÁLNÍ NADPISY ========================================================================== Účel: - portálová obdoba administračních rozdělovníků a centrálních H1, - jednotná karta, nadpis, ikona, select a hover poskočení. ========================================================================== */ body.om-portal-body .om-portal-selector-main { min-height: calc(100dvh - 145px) !important; display: flex !important; align-items: flex-start !important; justify-content: center !important; padding-top: 55px !important; padding-bottom: 120px !important; } body.om-portal-body .om-portal-selector-header { width: 100% !important; text-align: center !important; margin-bottom: 34px !important; } body.om-portal-body .om-portal-selector-heading { display: flex !important; align-items: center !important; justify-content: center !important; gap: 16px !important; width: 100% !important; margin: 0 !important; color: var(--om-gold-primary) !important; font-size: clamp(2.1rem, 4vw, 3.15rem) !important; line-height: 1.08 !important; font-weight: 900 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; text-align: center !important; text-shadow: 0 0 15px rgba(255, 193, 7, 0.20) !important; } body.om-portal-body .om-portal-selector-heading-icon { color: var(--om-gold-primary) !important; filter: drop-shadow(0 0 14px rgba(255, 193, 7, 0.18)) !important; } body.om-portal-body .om-portal-selector-card { width: 100% !important; max-width: 520px !important; min-height: 330px !important; margin-left: auto !important; margin-right: auto !important; padding: 42px 42px 40px !important; background: rgba(16, 12, 10, 0.44) !important; border: 1px solid rgba(255, 193, 7, 0.42) !important; border-radius: 18px !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; box-shadow: var(--om-portal-card-shadow) !important; color: var(--om-portal-text-soft, rgba(245, 238, 229, 0.88)) !important; text-align: center !important; transition: transform var(--om-portal-transition-pop), border-color var(--om-portal-transition-soft), box-shadow var(--om-portal-transition-soft), background var(--om-portal-transition-soft) !important; } body.om-portal-body .om-portal-selector-card:hover { transform: translateY(-6px) !important; border-color: rgba(255, 193, 7, 0.86) !important; background: rgba(16, 12, 10, 0.58) !important; box-shadow: 0 28px 68px rgba(0, 0, 0, 0.68), 0 0 24px rgba(255, 193, 7, 0.18) !important; } body.om-portal-body .om-portal-selector-icon { color: var(--om-gold-primary) !important; font-size: 4.2rem !important; line-height: 1 !important; margin-bottom: 22px !important; filter: drop-shadow(0 0 14px rgba(255, 193, 7, 0.20)) !important; } body.om-portal-body .om-portal-selector-title { color: var(--om-gold-primary) !important; font-size: 1.32rem !important; font-weight: 900 !important; letter-spacing: 0.8px !important; text-transform: uppercase !important; text-align: center !important; margin: 0 0 26px !important; text-shadow: 0 0 14px rgba(255, 193, 7, 0.18) !important; } body.om-portal-body .om-portal-selector-form { width: 100% !important; text-align: left !important; } body.om-portal-body .om-portal-selector-label { display: block !important; margin-bottom: 8px !important; color: var(--om-portal-text-muted-soft, rgba(232, 218, 200, 0.62)) !important; font-size: 0.80rem !important; font-weight: 900 !important; letter-spacing: 0.35px !important; text-transform: uppercase !important; } body.om-portal-body .om-portal-selector-select, body.om-portal-body select.om-portal-selector-select { min-height: 52px !important; width: 100% !important; background: rgba(0, 0, 0, 0.58) !important; border: 1px solid rgba(255, 193, 7, 0.66) !important; border-radius: 10px !important; color: #ffffff !important; font-size: 1rem !important; font-weight: 900 !important; padding: 12px 18px !important; outline: none !important; box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.62), 0 6px 18px rgba(0, 0, 0, 0.22) !important; transition: border-color var(--om-portal-transition-soft), box-shadow var(--om-portal-transition-soft), background var(--om-portal-transition-soft) !important; } body.om-portal-body .om-portal-selector-select:focus, body.om-portal-body select.om-portal-selector-select:focus { border-color: var(--om-gold-primary) !important; background: rgba(0, 0, 0, 0.72) !important; box-shadow: 0 0 0 1px rgba(255, 193, 7, 0.32), 0 0 18px rgba(255, 193, 7, 0.20), inset 0 0 14px rgba(0, 0, 0, 0.78) !important; } body.om-portal-body .om-portal-selector-select option { background: #2a1b10 !important; color: #ffffff !important; } /* ========================================================================== SEKCE 20: PORTÁL - DOKUMENTY VLASTNÍKA / DOMU ========================================================================== Účel: - trvalá systémová sekce pro klient_dokumenty.php, - nahrazuje ruční doplňky v10.22/v10.23, - řeší šířky, panel, vyhledávač, filtrační pilulky, počítadla, barevné kategorie, levý pruh řádku, štítky a mobilní pojistky. ========================================================================== */ body.om-portal-body .om-portal-doc-page .hero-title { max-width: min(1400px, calc(100vw - 40px)) !important; margin-left: auto !important; margin-right: auto !important; } body.om-portal-body .om-portal-doc-panel.om-portal-doc-color-gold, body.om-portal-body .om-portal-doc-search.om-portal-doc-color-gold { border-color: rgba(255, 193, 7, 0.35) !important; } body.om-portal-body .om-portal-doc-panel.om-portal-doc-color-cyan, body.om-portal-body .om-portal-doc-search.om-portal-doc-color-cyan { border-color: rgba(13, 202, 240, 0.35) !important; } body.om-portal-body .om-portal-doc-actions .btn-secondary-action { padding: 10px 25px !important; } body.om-portal-body .om-portal-doc-title-wrap { min-width: 0 !important; } body.om-portal-body .om-portal-doc-name { font-size: 0.95rem !important; } body.om-portal-body .om-portal-doc-row { border-left: 4px solid var(--om-portal-doc-color, rgba(255, 193, 7, 0.85)) !important; } body.om-portal-body .om-portal-doc-category-badge { background-color: var(--om-portal-doc-color, #ffc107) !important; color: var(--om-portal-doc-contrast, #111111) !important; max-width: 120px !important; font-size: 0.75rem !important; } body.om-portal-body .category-filter-btn.om-portal-doc-filter { color: var(--om-portal-doc-color, #ffffff) !important; border-color: var(--om-portal-doc-color, rgba(255, 255, 255, 0.55)) !important; background: rgba(0, 0, 0, 0.50) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; } body.om-portal-body .category-filter-btn.om-portal-doc-filter:hover { color: var(--om-portal-doc-color, #ffffff) !important; border-color: var(--om-portal-doc-color, #ffffff) !important; filter: brightness(1.08) !important; } body.om-portal-body .category-filter-btn.om-portal-doc-filter.active-filter { background: var(--om-portal-doc-color, #ffc107) !important; color: var(--om-portal-doc-contrast, #111111) !important; border-color: var(--om-portal-doc-color, #ffc107) !important; } body.om-portal-body .category-filter-btn.om-portal-doc-filter.active-filter .count-badge { background: rgba(0, 0, 0, 0.72) !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.30) !important; } body.om-portal-body .om-portal-doc-color-gold { --om-portal-doc-color: #ffc107; --om-portal-doc-contrast: #111111; } body.om-portal-body .om-portal-doc-color-cyan { --om-portal-doc-color: #0dcaf0; --om-portal-doc-contrast: #111111; } body.om-portal-body .om-portal-doc-color-blue { --om-portal-doc-color: #0d6efd; --om-portal-doc-contrast: #ffffff; } body.om-portal-body .om-portal-doc-color-red { --om-portal-doc-color: #dc3545; --om-portal-doc-contrast: #ffffff; } body.om-portal-body .om-portal-doc-color-green { --om-portal-doc-color: #198754; --om-portal-doc-contrast: #ffffff; } body.om-portal-body .om-portal-doc-color-purple { --om-portal-doc-color: #a55eea; --om-portal-doc-contrast: #ffffff; } body.om-portal-body .om-portal-doc-color-white { --om-portal-doc-color: #ced4da; --om-portal-doc-contrast: #111111; } body.om-portal-body .om-portal-doc-color-gray { --om-portal-doc-color: #adb5bd; --om-portal-doc-contrast: #111111; } /* 20.01 - Portálová ikona oka se drží významově stejně jako admin akce view */ body.om-portal-body .js-doc-read-link, body.om-portal-body .js-doc-read-link i, body.om-portal-body .js-doc-read-link .fas { color: #0dcaf0 !important; } body.om-portal-body .js-doc-read-link:hover { color: #0dcaf0 !important; transform: translateY(-2px) scale(1.08) !important; filter: brightness(1.18) !important; } /* 20.03 - Doplňkové systémové třídy používané dokumenty a trombóny */ body.om-portal-body .om-empty-state { max-width: 900px !important; padding: 42px 24px !important; text-align: center !important; border: 1px dashed rgba(255, 193, 7, 0.28) !important; border-radius: 14px !important; background: rgba(0, 0, 0, 0.20) !important; color: rgba(255, 255, 255, 0.72) !important; } body.om-portal-body .om-accordion-toggler { cursor: pointer !important; } /* 20.02 - Mobilní pojistky dokumentů */ @media (max-width: 991.98px) { body.om-portal-body .om-portal-page-card, body.om-portal-body .om-portal-page-card-wide, body.om-portal-body .om-portal-page-card-narrow, body.om-portal-body .om-portal-doc-card, body.om-portal-body .om-portal-doc-shell { max-width: 100% !important; } body.om-portal-body .om-portal-toolbar, body.om-portal-body .om-portal-doc-actions, body.om-portal-body .om-portal-pill-row, body.om-portal-body .om-portal-doc-filter-row, body.om-portal-body .om-portal-summary-row { gap: 8px !important; } body.om-portal-body .om-portal-doc-panel { padding-left: 12px !important; padding-right: 12px !important; } } @media (max-width: 767.98px) { body.om-portal-body .om-portal-doc-actions .btn-secondary-action { width: 100% !important; justify-content: center !important; } body.om-portal-body .om-portal-doc-category-badge { max-width: 100px !important; } } @media (max-width: 575.98px) { body.om-portal-body .om-portal-selector-main { align-items: flex-start !important; padding: 32px 14px 100px !important; } body.om-portal-body .om-portal-selector-header { margin-bottom: 24px !important; } body.om-portal-body .om-portal-selector-heading { gap: 10px !important; font-size: clamp(1.65rem, 8vw, 2.15rem) !important; overflow-wrap: anywhere !important; } body.om-portal-body .om-portal-selector-card { max-width: 100% !important; min-height: auto !important; padding: 34px 24px 32px !important; border-radius: 16px !important; } body.om-portal-body .om-portal-selector-icon { font-size: 3.5rem !important; } body.om-portal-body .om-portal-selector-title { font-size: 1.12rem !important; } } /* ========================================================================== SEKCE 21: PORTÁL - LOGIN VLASTNÍKA ========================================================================== Účel: - centrálně řídit vzhled klient_login.php, - odstranit inline styly z login formuláře, - držet login ve stejné firemní kultuře jako portálové dokumenty. ========================================================================== */ body.om-portal-body .om-client-login-card { border-color: rgba(255, 193, 7, 0.42) !important; } body.om-portal-body .om-client-login-title { color: var(--om-gold-primary) !important; font-weight: 900 !important; text-transform: uppercase !important; letter-spacing: 1px !important; font-size: clamp(1.55rem, 5vw, 2rem) !important; margin-bottom: 0.65rem !important; } body.om-portal-body .om-client-login-subtitle { color: rgba(255, 255, 255, 0.52) !important; font-size: 0.95rem !important; margin-bottom: 1.5rem !important; } body.om-portal-body .om-client-login-alert { background: rgba(220, 53, 69, 0.20) !important; border: 1px solid #dc3545 !important; color: #ff6b6b !important; border-radius: 8px !important; padding: 12px !important; font-weight: 600 !important; } body.om-portal-body .om-client-login-label { display: inline-flex !important; align-items: center !important; color: rgba(255, 255, 255, 0.55) !important; font-size: 0.78rem !important; font-weight: 900 !important; text-transform: uppercase !important; margin-bottom: 0.5rem !important; } body.om-portal-body .om-client-login-eye { border: 0 !important; background: transparent !important; padding: 0 !important; } /* ========================================================================== SEKCE 22: PORTÁL - NÁSTĚNKA VLASTNÍKA ========================================================================== Účel: - centrálně řídit hlavní rozcestník portálu vlastníka, - odstranit inline šířky z klient_nastenka.php, - sjednotit hlavičku, dlaždice a notifikační terčíky s portálovým systémem. ========================================================================== */ body.om-portal-body .om-portal-dashboard-page { width: 100% !important; } body.om-portal-body .om-portal-dashboard-shell { width: 100% !important; max-width: 1000px !important; margin-left: auto !important; margin-right: auto !important; } body.om-portal-body .om-portal-dashboard-header { text-align: center !important; margin-bottom: 18px !important; } body.om-portal-body .om-portal-dashboard-title { color: var(--om-gold-primary) !important; font-size: clamp(1.9rem, 4vw, 2.65rem) !important; font-weight: 900 !important; text-transform: uppercase !important; letter-spacing: 1.4px !important; text-shadow: 0 0 15px rgba(255, 193, 7, 0.20) !important; margin: 0 !important; } body.om-portal-body .om-portal-dashboard-subtitle { color: rgba(255, 255, 255, 0.62) !important; font-size: 0.95rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.7px !important; margin: 10px 0 0 !important; } body.om-portal-body .om-portal-dashboard-tile { position: relative !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; gap: 12px !important; } body.om-portal-body .om-portal-dashboard-tile .om-nested-desc-box { min-height: 76px !important; display: flex !important; align-items: center !important; justify-content: center !important; width: min(100%, 305px) !important; } /* 22.01 - Kompaktní výška nástěnky, aby dlaždice zbytečně nezajížděly pod pevnou patičku */ body.om-portal-body .om-portal-dashboard-page { padding-top: 62px !important; padding-bottom: 92px !important; } body.om-portal-body .om-portal-dashboard-shell.py-4 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } body.om-portal-body .om-portal-dashboard-tile { min-height: 215px !important; padding: 22px !important; } body.om-portal-body .om-portal-dashboard-tile .om-card-icon { font-size: 3.35rem !important; margin-bottom: 0 !important; } body.om-portal-body .om-portal-dashboard-tile .om-card-title { margin-bottom: 0 !important; } body.om-portal-body .om-portal-dashboard-tile .om-nested-desc-box { min-height: 62px !important; padding: 12px 14px !important; margin-top: 0 !important; } body.om-portal-body .om-portal-dashboard-tile .om-card-desc { margin: 0 !important; } /* 22.02 - Vycentrování obsahu dlaždic nástěnky */ body.om-portal-body .om-portal-dashboard-tile .om-card-title, body.om-portal-body .om-portal-dashboard-tile .om-card-desc { text-align: center !important; } @media (max-width: 575.98px) { body.om-portal-body .om-portal-dashboard-header { margin-bottom: 14px !important; } body.om-portal-body .om-portal-dashboard-title { font-size: clamp(1.55rem, 8vw, 2.05rem) !important; } body.om-portal-body .om-portal-dashboard-subtitle { font-size: 0.82rem !important; } } /* ========================================================================== SEKCE 23: PORTÁL - MŮJ PROFIL ========================================================================== Účel: - centrálně řídit klient_profil.php, - odstranit inline styly profilu, - sjednotit karty, hlášky, labely, footer a tlačítka hesel. ========================================================================== */ body.om-portal-body .om-portal-profile-page { width: 100% !important; } body.om-portal-body .om-portal-profile-alert- { border-left: 4px solid var(--om-gold-primary) !important; } body.om-portal-body .om-portal-profile-shell { max-width: 650px !important; margin-left: auto !important; margin-right: auto !important; } body.om-portal-body .om-portal-profile-card { width: 100% !important; } body.om-portal-body .om-portal-profile-card-header, body.om-portal-body .om-portal-profile-card-footer { border-color: rgba(255, 255, 255, 0.10) !important; } body.om-portal-body .om-portal-profile-card-header { border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important; } body.om-portal-body .om-portal-profile-card-footer { border-top: 1px solid rgba(255, 255, 255, 0.10) !important; } body.om-portal-body .om-portal-profile-alert { background: rgba(0, 0, 0, 0.60) !important; color: #ffffff !important; border-radius: 8px !important; padding: 12px !important; font-weight: 600 !important; } body.om-portal-body .om-portal-profile-alert-success { border: 1px solid rgba(46, 204, 113, 0.45) !important; border-left: 4px solid #2ecc71 !important; } body.om-portal-body .om-portal-profile-alert-warning { border: 1px solid rgba(255, 193, 7, 0.45) !important; border-left: 4px solid var(--om-gold-primary) !important; } body.om-portal-body .om-portal-profile-alert-danger { border: 1px solid rgba(220, 53, 69, 0.45) !important; border-left: 4px solid #dc3545 !important; } body.om-portal-body .om-portal-profile-inner-box { border-width: 1px !important; } body.om-portal-body .om-portal-profile-label { display: inline-flex !important; align-items: center !important; color: rgba(255, 255, 255, 0.55) !important; font-size: 0.78rem !important; font-weight: 900 !important; text-transform: uppercase !important; margin-bottom: 0.5rem !important; } body.om-portal-body .om-portal-profile-password-toggle { border: 0 !important; background: transparent !important; padding: 0 !important; } @media (max-width: 575.98px) { body.om-portal-body .om-portal-profile-card-footer { flex-direction: column !important; align-items: stretch !important; } body.om-portal-body .om-portal-profile-card-footer .btn-secondary-action, body.om-portal-body .om-portal-profile-card-footer .om-btn-submit { width: 100% !important; justify-content: center !important; } } /* ========================================================================== SEKCE 24: PORTÁL - SYSTÉMOVÁ 11BAREVNÁ PALETA VNITŘNÍCH BOXŮ ========================================================================== Účel: - sjednotit chování vnitřních boxů/trombónů s principem admin sekce, - místo levého barevného proužku používat celé barevné orámování, - každému dalšímu boxu automaticky přiřadit barvu z 11barevné palety, - při hoveru zesílit orámování, zvednout box a přidat barevný glow efekt. ========================================================================== */ body.om-portal-body .om-modal-trombony-rotate > .om-inner-data-box { --om-portal-rotating-box-color: var(--om-gold-primary); border-width: 1px !important; border-style: solid !important; border-color: color-mix(in srgb, var(--om-portal-rotating-box-color) 58%, transparent) !important; border-left-width: 1px !important; border-left-color: color-mix(in srgb, var(--om-portal-rotating-box-color) 58%, transparent) !important; background: rgba(0, 0, 0, 0.28) !important; box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.20), 0 0 0 1px rgba(0, 0, 0, 0.10) !important; transition: transform var(--om-portal-transition-pop, 280ms cubic-bezier(0.175, 0.885, 0.32, 1.275)), border-color var(--om-portal-transition-soft, 220ms ease), box-shadow var(--om-portal-transition-soft, 220ms ease), background var(--om-portal-transition-soft, 220ms ease), filter var(--om-portal-transition-soft, 220ms ease) !important; } body.om-portal-body .om-modal-trombony-rotate > .om-inner-data-box:hover { border-color: var(--om-portal-rotating-box-color) !important; border-left-color: var(--om-portal-rotating-box-color) !important; background: rgba(0, 0, 0, 0.36) !important; transform: translateY(-3px) !important; filter: brightness(1.04) !important; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.46), 0 0 18px color-mix(in srgb, var(--om-portal-rotating-box-color) 28%, transparent), inset 0 0 12px rgba(0, 0, 0, 0.26) !important; } /* 24.01 - 11barevná rotační paleta */ body.om-portal-body .om-modal-trombony-rotate > .om-inner-data-box:nth-of-type(11n+1) { --om-portal-rotating-box-color: #ffc107; } body.om-portal-body .om-modal-trombony-rotate > .om-inner-data-box:nth-of-type(11n+2) { --om-portal-rotating-box-color: #0dcaf0; } body.om-portal-body .om-modal-trombony-rotate > .om-inner-data-box:nth-of-type(11n+3) { --om-portal-rotating-box-color: #dc3545; } body.om-portal-body .om-modal-trombony-rotate > .om-inner-data-box:nth-of-type(11n+4) { --om-portal-rotating-box-color: #2ecc71; } body.om-portal-body .om-modal-trombony-rotate > .om-inner-data-box:nth-of-type(11n+5) { --om-portal-rotating-box-color: #a55eea; } body.om-portal-body .om-modal-trombony-rotate > .om-inner-data-box:nth-of-type(11n+6) { --om-portal-rotating-box-color: #fd7e14; } body.om-portal-body .om-modal-trombony-rotate > .om-inner-data-box:nth-of-type(11n+7) { --om-portal-rotating-box-color: #20c997; } body.om-portal-body .om-modal-trombony-rotate > .om-inner-data-box:nth-of-type(11n+8) { --om-portal-rotating-box-color: #0d6efd; } body.om-portal-body .om-modal-trombony-rotate > .om-inner-data-box:nth-of-type(11n+9) { --om-portal-rotating-box-color: #e83e8c; } body.om-portal-body .om-modal-trombony-rotate > .om-inner-data-box:nth-of-type(11n+10) { --om-portal-rotating-box-color: #adb5bd; } body.om-portal-body .om-modal-trombony-rotate > .om-inner-data-box:nth-of-type(11n+11) { --om-portal-rotating-box-color: #6f42c1; } /* 24.02 - Pojistka pro starší prohlížeče bez color-mix() */ @supports not (color: color-mix(in srgb, #ffc107 50%, transparent)) { body.om-portal-body .om-modal-trombony-rotate > .om-inner-data-box { border-color: var(--om-portal-rotating-box-color) !important; border-left-color: var(--om-portal-rotating-box-color) !important; } body.om-portal-body .om-modal-trombony-rotate > .om-inner-data-box:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.46), 0 0 14px rgba(255, 193, 7, 0.18), inset 0 0 12px rgba(0, 0, 0, 0.26) !important; } } /* ========================================================================== SEKCE 25: PORTÁL - REPORTOVACÍ STRÁNKY VLASTNÍKA ========================================================================== Účel: - centrálně řídit klient_hlaseni.php a klient_zmeny.php, - sjednotit kartu, ovládací panel, vyhledávání, stavové pilulky a prázdné stavy, - držet stejné chování jako Dokumenty: bez pilulky VŠE, filtr se ruší druhým klikem. ========================================================================== */ body.om-portal-body .om-portal-report-page { width: 100% !important; } body.om-portal-body .om-portal-report-card { width: 100% !important; } body.om-portal-body .om-portal-report-panel { border-color: rgba(253, 126, 20, 0.35) !important; } body.om-portal-body .om-portal-report-search { max-width: 800px !important; } body.om-portal-body .om-portal-report-filter-row { gap: 10px !important; } body.om-portal-body .category-filter-btn.om-portal-report-filter { color: var(--om-portal-report-color, #ffffff) !important; border-color: var(--om-portal-report-color, rgba(255, 255, 255, 0.55)) !important; background: rgba(0, 0, 0, 0.50) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; } body.om-portal-body .category-filter-btn.om-portal-report-filter:hover { color: var(--om-portal-report-color, #ffffff) !important; border-color: var(--om-portal-report-color, #ffffff) !important; filter: brightness(1.08) !important; } body.om-portal-body .category-filter-btn.om-portal-report-filter.active-filter { background: var(--om-portal-report-color, #ffc107) !important; color: var(--om-portal-report-contrast, #111111) !important; border-color: var(--om-portal-report-color, #ffc107) !important; } body.om-portal-body .category-filter-btn.om-portal-report-filter.active-filter .count-badge { background: rgba(0, 0, 0, 0.72) !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.30) !important; } body.om-portal-body .om-portal-report-color-white { --om-portal-report-color: #ced4da; --om-portal-report-contrast: #111111; } body.om-portal-body .om-portal-report-color-red { --om-portal-report-color: #dc3545; --om-portal-report-contrast: #ffffff; } body.om-portal-body .om-portal-report-color-gold { --om-portal-report-color: #ffc107; --om-portal-report-contrast: #111111; } body.om-portal-body .om-portal-report-color-green { --om-portal-report-color: #2ecc71; --om-portal-report-contrast: #111111; } body.om-portal-body .om-portal-report-color-cyan { --om-portal-report-color: #0dcaf0; --om-portal-report-contrast: #111111; } body.om-portal-body .om-portal-report-color-orange { --om-portal-report-color: #fd7e14; --om-portal-report-contrast: #111111; } @media (max-width: 767.98px) { body.om-portal-body .om-portal-report-panel { padding-left: 12px !important; padding-right: 12px !important; } body.om-portal-body .om-portal-report-filter-row { gap: 8px !important; } } /* ========================================================================== SEKCE 26: PORTÁL - SYSTÉMOVÁ HLAVIČKA A PATIČKA ========================================================================== Účel: - odstranit inline styly z includes/klient_header.php a includes/klient_footer.php, - sjednotit symbol Omega, středovou pilulku, ikony patičky a scroll efekt navbaru, - odstranit JS nastavování style.backgroundColor/style.boxShadow. ========================================================================== */ body.om-portal-body .om-brand-symbol { font-size: 1.4rem !important; line-height: 1 !important; margin-right: 8px !important; display: inline-flex !important; align-items: center !important; } body.om-portal-body .om-navbar-pill-separator { margin: 0 10px !important; opacity: 0.40 !important; } body.om-portal-body .om-navbar { transition: background-color var(--om-portal-transition-soft, 220ms ease), box-shadow var(--om-portal-transition-soft, 220ms ease), border-color var(--om-portal-transition-soft, 220ms ease) !important; } body.om-portal-body .om-navbar.om-navbar-scrolled { background-color: rgba(0, 0, 0, 0.65) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.50) !important; } body.om-portal-body .om-footer-icon { margin-right: 5px !important; } body.om-portal-body .om-footer-status-open { color: #2ecc71 !important; } body.om-portal-body .om-footer-status-closed { color: #dc3545 !important; } body.om-portal-body .om-footer-icon-gold { color: #ffc107 !important; } body.om-portal-body .om-footer-icon-blue { color: #0d6efd !important; } body.om-portal-body .om-footer-note { font-size: 0.85em !important; opacity: 0.75 !important; } body.om-portal-body .om-footer-nowrap { white-space: nowrap !important; }