/* ========================================================================== ДОКУМЕНЕНТАЦИЯ НА ОСНОВНИТЕ ПРОМЕНЛИВИ И КОНСТАНТИ ВЪВ ФАЙЛА ========================================================================== ЦВЕТОВЕ: #101e5a -> Основен тъмносин цвят (връзки, бутони, заглавия) #B3DCF4 -> Основен светлосин цвят (фон на сайта, footer, hover ефекти) #B3DCF5 -> Вариант на светлосиния цвят за декоративни елементи #AFEEEE -> Светъл акцентен цвят за бутони #191970 -> Тъмносин акцент за текст и заглавия ОСНОВНИ ПРОМЕНЛИВИ: --footer-bg -> Главен фонов цвят на сайта. Използва се за footer, body и header. --site-unified-bg -> Унифициран фон на сайта. По подразбиране наследява --footer-bg. --submit-btn-* -> Всички настройки за бутона „Подаване на материал“. --menu-* -> Настройки на главното меню и подменютата. --sidebar-* -> Настройки на страничните блокове (Sidebar). --footer-* -> Настройки на footer секцията. --brand-* -> Настройки на логото и заглавието на сайта. --journal-title-text -> Текст на заглавието до логото. ПРЕПОРЪКА: За промяна на общата цветова схема първо променяй: 1. --footer-bg 2. --menu-* 3. --sidebar-* 4. --submit-btn-* ========================================================================== */ a { color:#101e5a; text-decoration:none; } a:hover { color:#B3DCF4; /*#3366cc*/ text-decoration:underline; } body{ /* Основен фон на целия сайт: същият като footer */ background-color: var(--footer-bg, #B3DCF4); background-image: none; } .pkp_structure_page { margin:0 auto; box-shadow:none; } .carousel-inner{ position:absolute; } /***************************************************************************/ .aimcolumn { float: left; } .aimleft { width: 25%; padding-top:10px; padding-left:10px; padding-right: 20px; padding-top: 30px; background: #dee2e6; } .aimright { width: 74%; height:auto; padding: 10px 20px 10px 35px; background-color: #e9ecef; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } .row{ margin-right:0; margin-left:0; } @media screen and (max-width: 600px) { .aimcolumn { width: 100%; } .aimleft { padding-top: 10px; } } /**************************cover image*************************************/ .obj_issue_toc .cover { display:none; } /**************************Submission block*************************************/ .cmp_manuscript_button, .block_make_submission a, .obj_galley_link{ background-color:#101e5a; color:#191970; width:100%; text-align:center; text-decoration: none; } /**************************MENU HEADER*************************************/ #navigationPrimary>li>a{ color:#101e5a; } .pkp_head_wrapper .pkp_search .search_controls .search_prompt{ color:#101e5a; } .pkp_nav_list li.profile { padding: 0px 8px 2px 5px; border: 1px solid #e6dfdf; border-right: 1px solid #dadada; border-bottom: 1px solid #dadada; border-radius: 8px; font-size: 16px; box-shadow: 3px 2px 5px -2px rgba(0,0,0,.2); margin-left: 8px; margin-right:5px; } .pkp_navigation_user>li>a{ color:whitesmoke; } .pkp_navigation_primary_row{ background-color:#191970; -webkit-box-shadow: -2px 4px 15px 2px #CBCBCB; -webkit-box-shadow: 0px 0px 5px 0.5px rgba(179, 220, 244,0.34); -moz-box-shadow: 0px 0px 5px 0.5px rgba(179, 220, 244,0.34); box-shadow: 0px 0px 5px 0.5px rgba(179, 220, 244, 0.34); padding-top:5px; padding-bottom:5px; } #navigationPrimary ul a{ color:#101e5a; } #navigationPrimary ul a:hover{ background-color:whitesmoke; color:#B3DCF4;/*#3e82da*/ } #navigationPrimary > li > a:hover { color: #B3DCF4; /*#40a8e5*/ } /**************************HEADER*************************************************/ /* HEADER: същият фон като footer-а и основния фон на сайта */ .pkp_structure_head { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; background: var(--footer-bg) !important; background-image: none !important; margin-bottom:.25em; } .pkp_site_name .is_img img{ margin-top:30px; margin-bottom:20px; max-height:150px; } .pkp_site_name_wrapper{ background:none; } /**************************MAIN SITE**********************************************/ .pkp_page_index .homepage_image img { display:block; width:100%; height:auto; border-top-left-radius:20px; border-top-right-radius:20px; } .pkp_page_index .additional_content { border-top:0px solid #ddd; padding: 10px 0px 0px 3px; } .pkp_structure_content { font-size:15px; margin-bottom:.3em; -webkit-box-shadow: 0px 0px 5px 0.5px rgba(179, 220, 244,0.34); -moz-box-shadow: 0px 0px 5px 0.5px rgba(179, 220, 244,0.34); box-shadow: 0px 0px 5px 0.5px rgba(179, 220, 244,0.34); } /**************************ISSUES ARCHIVE*****************************************/ .obj_issue_summary { margin:0em 3em 0em 1.6em; padding-left:1em; border-left:1px solid #101e5a; } .page_issue_archive .issues_archive > li { margin:0em 0em 0em 0em; padding:2em 0em 0em 0.7em; } /**************************ARTICLES SUMMARY***************************************/ .obj_issue_toc .sections:not(:first-child) { margin-top:0em; } .obj_issue_toc .section > h2 { border-bottom:0px; border-left:0px; font-family:'Source Sans Pro', sans-serif; font-weight:300; text-transform:uppercase; padding:0.15em 1em; background-color:#fafbfb; width:100%; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } ul.galleys_links { list-style:none; } .obj_article_summary { padding:0em 1.5em; } .obj_article_summary .cover { display:block; float:left; width:70px; height:auto; margin-right:15px; } .obj_article_summary > .title { font-family:'Source Sans Pro', sans-serif; font-weight:400; font-size:15px; text-transform:uppercase; } .obj_article_summary > .title a { display:block; text-decoration:none; font-size:16px; color:#333 } .doi_summary { padding:0.4em 0.7em; margin-top:0.3em; } .doi_summary a { text-decoration:none !important; } .doi_summary a:hover { text-decoration:underline !important; } .obj_article_summary > .galleys_links { list-style:none; margin-bottom:0.5em; } .obj_article_summary > .galleys_links a { color:#fff; background-color:#101e5a; } .obj_article_summary > .galleys_links a:hover { background-color:#B3DCF4;/*#3366cc*/ text-decoration:none; } /**************************ARTICLES DETAILS***************************************/ .obj_article_details > .page_title { font-weight:600; } .obj_article_details .doi a { color:#101e5a; font-family:'Source Sans Pro', sans-serif; } .obj_article_details .doi a:hover { color:#B3DCF4;/*#3366cc*/ font-family:'Source Sans Pro', sans-serif; } .obj_article_details .entry_details .item.galleys .galleys_links { padding:0; background-color:#fff; } .obj_article_details .entry_details .item.galleys .galleys_links a { color:#fff; background-color:#101e5a; } .obj_article_details .entry_details .item.galleys .galleys_links a:hover { background-color:#B3DCF4;/*#3366cc*/ } .obj_article_details .entry_details .sub_item:not(:first-child) .label { display:inline-block; padding:.5em 0; margin:0 20px; width:83%; border-bottom:1px solid #101e5a; } .obj_article_details .entry_details .item > .value ul { list-style:none; padding:0; margin:0; } .obj_article_details .entry_details .item > .value ul li { padding:5px 0; } .obj_article_details .main_entry .label { border-bottom:0px; border-left:0px; font-weight:300; text-transform:uppercase; width:100%; border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; } .obj_article_details .item { padding:1em 0em 2em 2.5em; } .obj_article_details .main_entry .item .label { font-size:16px; } .obj_article_details .galleys_links a:hover { background-color:#B3DCF4;/*#3366cc*/ text-decoration:none; } .obj_article_details .entry_details .cover_image img { width:200px } /**************************SIDER BAR**********************************************/ .pkp_structure_sidebar:before { border-left:1px solid #ddd; } .pkp_block { padding: 0px 3px 5px 5px; font-size:14px; line-height:20px; } .block_make_submission{ padding: 15px 3px 5px 5px; } .pkp_block .title { width:100%; background-color:#101e5a; height:30px; font-size:13px; color:#ecececec; padding-top:0.4em; margin-bottom:0px; border:0px; text-align:center; font-family:'Source Sans Pro', sans-serif; } .pkp_block .content { background-color:#B3DCF4; /*#40a8e5*/ } .pkp_block .content ul li { padding:0px 0; background-color:#B3DCF4; /*#40a8e5*/ } .pkp_block li { border-radius:0; position:relative; background-color:#f1f1f1; display:block; } .pkp_block ul>li { border-bottom:1px solid rgba(0,0,0,.125); } .pkp_block ul>li a { color:#191970; padding:.75rem 1rem; display:flex; } .pkp_block ul>li a:hover { text-decoration:none; background-color:#B3DCF4;/*#3e82da*/ } /**************************Announcement block*************************************************/ .block_announcements_article{ padding:1em 1em 1em; background-color:#B3DCF4;/*#3e82da*/ color:whitesmoke; } /**************************MEDIA*************************************************/ /* Tablet in modalità verticale */ @media all and (min-width:376px) and (max-width:990px) { .pkp_structure_main { padding:0px 10px 10px 10px; overflow:auto; margin-bottom:1.5em; } .obj_article_details .item { padding:2em 0.5em 0em 1.5em; } .pkp_block { padding:0px 0px 20px 0px; font-size:14px; line-height:20px; } .pkp_site_nav_toggle { position: absolute; right: 0; top: 25%; width: 4em; margin-top: -5em; } .pkp_site_name .is_img img{ max-height:90px; margin-top:-5px } .has_site_logo .pkp_site_name, .has_site_logo .pkp_navigation_primary_wrapper{ text-align:center; left:0; padding-left:0px; } .pkp_navigation_user>li>a{ color:#101e5a; } .pkp_site_nav_menu{ top:-65%; } .pkp_site_nav_menu a{ color:#101e5a; } .pkp_nav_list li.profile { margin-left: 8px; margin-right:25px; text-align:center; margin-bottom:5px; } .pkp_structure_head { height:25vh; } } /* Smartphone o piccoli Tablet */ @media all and (max-width:376px) { .pkp_structure_main { padding:0px 10px 10px 10px; overflow:auto; margin-bottom:1.5em; } .pkp_block { padding:0px 0px 20px 0px; font-size:14px; line-height:20px; } .pkp_footer_content { width:100%; float:none; } .pkp_site_nav_toggle { position: absolute; right: 0; top: 60%; width: 4em; margin-top: -5em; } .pkp_structure_main { padding:0px 10px 10px 10px; overflow:auto; margin-bottom:1.5em; } .obj_article_details .item { padding:2em 0.5em 0em 0.5em; } .carousel-inner{ position:relative; } .pkp_site_name .is_img img{ max-height:60px; margin-top:-5px } .has_site_logo .pkp_site_name, .has_site_logo .pkp_navigation_primary_wrapper{ text-align:center; left:5px; } .has_site_logo .pkp_site_name, .has_site_logo .pkp_navigation_primary_wrapper{ text-align:center; padding:0px; } .pkp_navigation_user>li>a{ color:#101e5a; } .pkp_site_nav_menu{ top:-65%; } .pkp_site_nav_menu a{ color:#101e5a; } .pkp_structure_head { height:25vh; } } /********************** /***** Services ******* /*********************/ @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); section{ padding: 20px 0; } section .section-title{ text-align:center; color:#101e5a; margin-bottom:50px; text-transform:uppercase; } #what-we-do{ background:#B3DCF5; } #what-we-do .card{ padding: 1rem!important; border: none; margin-bottom:1rem; -webkit-transition: .5s all ease; -moz-transition: .5s all ease; transition: .5s all ease; background-image: radial-gradient(circle at 28% 29%, rgba(237, 237, 237,0.04) 0%, rgba(237, 237, 237,0.04) 50%,rgba(136, 136, 136,0.04) 50%, rgba(136, 136, 136,0.04) 100%),radial-gradient(circle at 8% 78%, rgba(156, 156, 156,0.04) 0%, rgba(156, 156, 156,0.04) 50%,rgba(37, 37, 37,0.04) 50%, rgba(37, 37, 37,0.04) 100%),radial-gradient(circle at 29% 46%, rgba(251, 251, 251,0.04) 0%, rgba(251, 251, 251,0.04) 50%,rgb(244,249,254) 50%, rgb(244,249,254) 100%),linear-gradient(90deg, rgb(216,225,243),rgb(216,225,243)); box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } #what-we-do .card:hover{ -webkit-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158); -moz-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158); box-shadow: 5px 7px 9px -4px rgb(158, 158, 158); } #what-we-do .card .card-block{ padding-left: 50px; position: relative; } #what-we-do .card .card-block a{ color: #101e5a !important; font-weight:700; text-decoration:none; } #what-we-do .card .card-block a i{ display:none; } #what-we-do .card:hover .card-block a i{ display:inline-block; font-weight:700; } #what-we-do .card .card-block:before{ font-family: FontAwesome; position: absolute; font-size: 39px; color: #101e5a; left: 0; -webkit-transition: -webkit-transform .2s ease-in-out; transition:transform .2s ease-in-out; } #what-we-do .card .block-1:before{ content: "\f25e"; } #what-we-do .card .block-2:before{ content: "\f0eb"; } #what-we-do .card .block-3:before{ content: "\f00c"; } #what-we-do .card .block-4:before{ content: "\f155"; } #what-we-do .card:hover .card-block:before{ -webkit-transform: rotate(360deg); transform: rotate(360deg); -webkit-transition: .5s all ease; -moz-transition: .5s all ease; transition: .5s all ease; } #what-we-do .card-title{ margin: auto; } .container-fluid{ padding-left:0px; padding-right:0px; } .carousel-indicators { bottom:-15px; } /********************** /***** Brand footer ******* /*********************/ .pkp_brand_footer {display:none; } /************************************ /***** Article detail page ******* /***********************************/ .obj_article_details .page_title { text-align: center; } .obj_article_details>.subtitle { text-align: center; } .obj_article_details .item.doi { text-align: center; text-decoration: none; } .obj_article_details .item.keywords { text-transform: capitalize; } .item.abstract{ text-align: justify; padding-top: 0px; } /************************************ /***** inexinglogos ******* /***********************************/ img.indexings { width: 170px; } /* ==== PATCH 2025-10-26: OJS 3.5 Bootstrap3 (Cerulean) fixes ==== */ /* 1) Force styling for "Make a Submission" button against Bootstrap .btn */ .block_make_submission a.btn, .cmp_manuscript_button.btn { background-color: #101e5a !important; border-color: #101e5a !important; color: #191970 !important; width: 100%; text-align: center; text-decoration: none; } .block_make_submission a.btn:hover, .cmp_manuscript_button.btn:hover { background-color: #B3DCF4 !important;/*#3366cc*/ border-color: #B3DCF4 !important;/*#3366cc*/ color: #191970 !important; text-decoration: none; } /* 2) Hide brand footer used by Bootstrap 3 theme */ /*#developedBy { display: none; }*/ /* 3) Optional: tune top navbar link colors in Cerulean (uncomment if you want to override Cerulean defaults) */ /* .navbar-default .navbar-nav>li>a { color: #101e5a; } .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus { color: #3366cc; } */ /* ==== PATCH 2025-10-26 (integrated): Bootstrap3 navbar — journal name ABOVE primary menu ==== */ /* Keep default behaviour on small screens; change layout on ≥768px */ @media (min-width: 768px){ /* Center the brand on its own row */ .navbar.navbar-default .navbar-header, .navbar.navbar-default .navbar-brand{ float:none; } .navbar.navbar-default .navbar-brand{ display:block; text-align:center; margin:8px 0; padding:15px 0; } /* Make the menu start on a new line and center it */ .navbar.navbar-default .navbar-collapse{ text-align:center; } .navbar.navbar-default .navbar-nav{ float:none; display:inline-block; margin:0; } } /* ============================================================= OJS 3.5 — Bootstrap3 (Cerulean) КОНТРОЛ САМО ЗА БУТОНА „Подаване на материал“ (Make a Submission) ------------------------------------------------------------- ▶ Какво променя: визията на бутона в блока за подаване (.block_make_submission a[.btn]) и/или глобалния submission бутон (.cmp_manuscript_button[.btn]). ▶ НЕ засяга други бутони/менюта. ▶ Настройките се управляват изцяло през променливи по‑долу. ============================================================= */ /* === ПРОМЕНЛИВИ ЗА БУТОНА „Подаване на материал“ === ▼ Обяснение на всяка променлива: --submit-btn-font-family → Шрифт на текста в бутона. --submit-btn-font-weight → Дебелина (400 нормален, 600/700 по‑плътен). --submit-btn-font-size → Размер на шрифта. --submit-btn-text-transform → Трансформация: uppercase | capitalize | none. --submit-btn-letter-spacing → Разстояние между буквите (напр. 0.2px). --submit-btn-text-color → Цвят на текста. --submit-btn-bg → Фон (може да е цвят или gradient). --submit-btn-border-color → Цвят на рамката. --submit-btn-border-width → Дебелина на рамката (напр. 1px). --submit-btn-radius → Закръгляне на ъглите (напр. 6px). --submit-btn-padding → Вътрешни отстояния (напр. .6rem 1rem). --submit-btn-shadow → Сянка (напр. 0 2px 6px rgba(0,0,0,.15)). --submit-btn-width → Ширина: 100% за пълен, auto за по съдържание. --submit-btn-align → Подравняване на текста: left|center|right. --submit-btn-transition → Анимация при hover/focus. --submit-btn-text-hover → Текст при hover. --submit-btn-bg-hover → Фон при hover (цвят или gradient). --submit-btn-border-hover → Рамка при hover. --submit-btn-focus-ring → Outline при фокус (напр. 0 0 0 3px rgba(...)). --submit-btn-disabled-bg → Фон, когато е disabled. --submit-btn-disabled-text → Текст, когато е disabled. */ :root{ /* --submit-btn-font-family: Шрифт на текста в бутона „Подаване на материал“. */ --submit-btn-font-family: "Noto Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* --submit-btn-font-weight: Дебелина на текста в бутона. По-голяма стойност означава по-плътен текст. */ --submit-btn-font-weight: 700; /* --submit-btn-font-size: Размер на текста в бутона. */ --submit-btn-font-size: 2rem; /* --submit-btn-text-transform: Контролира главни/малки букви: none, uppercase или capitalize. */ --submit-btn-text-transform: none; /* --submit-btn-letter-spacing: Разстояние между буквите в текста на бутона. */ --submit-btn-letter-spacing: 0.2px; /* --submit-btn-text-color: Основен цвят на текста в бутона. */ --submit-btn-text-color: #191970; /* --submit-btn-bg: Основен фон на бутона. */ --submit-btn-bg: #AFEEEE; /* --submit-btn-border-color: Цвят на рамката на бутона. */ --submit-btn-border-color: #FF7F50; /* --submit-btn-border-width: Дебелина на рамката на бутона. */ --submit-btn-border-width: 3px; /* --submit-btn-radius: Закръгляне на ъглите на бутона. */ --submit-btn-radius: 6px; /* --submit-btn-padding: Вътрешни отстояния в бутона: вертикално и хоризонтално. */ --submit-btn-padding: .6rem 1rem; /* --submit-btn-shadow: Сянка на бутона. none означава без сянка. */ --submit-btn-shadow: none; /* --submit-btn-width: Ширина на бутона. 100% означава да заема цялата налична ширина. */ --submit-btn-width: 100%; /* --submit-btn-align: Подравняване на текста в бутона. */ --submit-btn-align: center; /* --submit-btn-transition: Плавност на визуалната промяна при hover/focus. */ --submit-btn-transition: all .18s ease-in-out; /* --submit-btn-text-hover: Цвят на текста при посочване с мишка върху бутона. */ --submit-btn-text-hover: #191970; /* --submit-btn-bg-hover: Фон на бутона при посочване с мишка. */ --submit-btn-bg-hover: #B3DCF4; /*#3366cc*/ /* --submit-btn-border-hover: Цвят на рамката при посочване с мишка. */ --submit-btn-border-hover: #FF6060; /* --submit-btn-focus-ring: Външен контур/ореол при фокусиране на бутона с клавиатура. */ --submit-btn-focus-ring: 0 0 0 3px rgba(16,30,90,.35); /* --submit-btn-disabled-bg: Фон на бутона, когато е неактивен. */ --submit-btn-disabled-bg: #9aa3b2; /* --submit-btn-disabled-text: Цвят на текста, когато бутонът е неактивен. */ --submit-btn-disabled-text: #191970; } /* === ПРИЛОЖЕНИЕ НА ПРОМЕНЛИВИТЕ — само върху submission бутона === */ .block_make_submission a, .block_make_submission a.btn, .cmp_manuscript_button, .cmp_manuscript_button.btn{ /* Типография */ font-family: var(--submit-btn-font-family) !important; font-weight: var(--submit-btn-font-weight) !important; font-size: var(--submit-btn-font-size) !important; text-transform: var(--submit-btn-text-transform) !important; letter-spacing: var(--submit-btn-letter-spacing) !important; /* Цветове и фон */ color: var(--submit-btn-text-color) !important; background: var(--submit-btn-bg) !important; /* Рамка и форма */ border-color: var(--submit-btn-border-color) !important; border-width: var(--submit-btn-border-width) !important; border-style: solid !important; border-radius: var(--submit-btn-radius) !important; /* Размер и подравняване */ padding: var(--submit-btn-padding) !important; width: var(--submit-btn-width) !important; text-align: var(--submit-btn-align) !important; display: inline-block; /* Ефекти */ box-shadow: var(--submit-btn-shadow) !important; transition: var(--submit-btn-transition) !important; text-decoration: none !important; } .block_make_submission a:hover, .block_make_submission a.btn:hover, .cmp_manuscript_button:hover, .cmp_manuscript_button.btn:hover{ color: var(--submit-btn-text-hover) !important; background: var(--submit-btn-bg-hover) !important; border-color: var(--submit-btn-border-hover) !important; text-decoration: none !important; } .block_make_submission a:focus, .block_make_submission a.btn:focus, .cmp_manuscript_button:focus, .cmp_manuscript_button.btn:focus{ outline: none !important; box-shadow: var(--submit-btn-focus-ring) !important; } .block_make_submission a[disabled], .block_make_submission a.btn[disabled], .cmp_manuscript_button[disabled], .cmp_manuscript_button.btn[disabled]{ background: var(--submit-btn-disabled-bg) !important; color: var(--submit-btn-disabled-text) !important; cursor: not-allowed !important; opacity: .85; } /* ============================================================= OJS 3.5 — Bootstrap3 (Cerulean) ДОКУМЕНТАЦИЯ: Променливи за БУТОНИТЕ В МЕНЮТАТА (Primary/Nav & Dropdown) ------------------------------------------------------------------------ Този раздел е САМО ИНФОРМАЦИОНЕН и НЕ променя текущия стил. Ако искаш да ги използваш: 1) Разкоментирай блока :root{...} по-долу (или го копирай в края на файла). 2) Разкоментирай "примерните правила", за да вържеш променливите към менюто. 3) Смени стойностите на променливите по желание. ------------------------------------------------------------------------ ── Типография (шрифт и формат) --menu-font-family → Шрифт на елементите в менюто. --menu-font-size → Размер на шрифта. --menu-font-weight → Дебелина (400, 500, 600…). --menu-text-transform → none | uppercase | capitalize. --menu-letter-spacing → Междубуквено разстояние (напр. 0.2px). ── Нормално състояние --menu-text → Цвят на текста. --menu-bg → Фон (остави #B3DCF5, ако не искаш „табове“). --menu-border-color → Рамка (цвят). --menu-border-width → Рамка (дебелина; 0 за без рамка). --menu-radius → Закръгляне на ъглите (0 или 6px/999px). --menu-padding → Вътрешни отстояния (увеличават „плочката“). --menu-gap-x → Хоризонтален отстъп между елементите. --menu-focus-ring → „Halo“ при фокус (box-shadow). ── Hover/Focus --menu-hover-text → Текст при hover/focus. --menu-hover-bg → Фон при hover/focus (#B3DCF5 за „само текст“). --menu-hover-border → Рамка при hover/focus. ── Активно/отворено --menu-active-text → Текст за активен/отворен елемент. --menu-active-bg → Фон за активен/отворен елемент. --menu-active-border → Рамка за активен/отворен елемент. ── Dropdown меню --dropdown-bg → Фон на падащото меню. --dropdown-border → Рамка на падащото меню. --dropdown-item-text → Текст в елементите. --dropdown-item-hover-text → Текст при hover вътре. --dropdown-item-hover-bg → Фон при hover вътре. ------------------------------------------------------------------------ ▼ СКЕЛЕТ НА ПРОМЕНЛИВИ (ПРИМЕРНИ СТОЙНОСТИ) – РАЗКОМЕНТИРАЙ, ЗА ДА АКТИВИРАШ ------------------------------------------------------------------------ */ :root{ /* --menu-font-family: Шрифт на елементите в главното меню. */ --menu-font-family: "Noto Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* --menu-font-size: Размер на текста в главното меню. */ --menu-font-size: 1.5rem; /* --menu-font-weight: Дебелина на текста в главното меню. */ --menu-font-weight: 600; /* --menu-text-transform: Контролира главни/малки букви в менюто. */ --menu-text-transform: none; /* --menu-letter-spacing: Разстояние между буквите в менюто. */ --menu-letter-spacing: 0.2px; /* --menu-text: Основен цвят на текста в менюто. */ --menu-text: #ffffff; /* --menu-bg: Основен фон на елементите в менюто. */ --menu-bg: #0b7890; /* --menu-border-color: Цвят на рамката около елементите в менюто. */ --menu-border-color: #0b7890; /* --menu-border-width: Дебелина на рамката около елементите в менюто. */ --menu-border-width: 1px; /* --menu-radius: Закръгляне на ъглите на елементите в менюто. */ --menu-radius: 6px; /* --menu-padding: Вътрешни отстояния на елементите в менюто. */ --menu-padding: 10px 15px; /* --menu-gap-x: Хоризонтално разстояние между елементите в менюто. */ --menu-gap-x: 0; /* --menu-focus-ring: Контур/ореол при фокус върху елемент от менюто. */ --menu-focus-ring: 0 0 0 3px rgba(16,30,90,.20); /* --menu-hover-text: Цвят на текста в менюто при hover/focus. */ --menu-hover-text: #ffffff; /* --menu-hover-bg: Фон на елемент от менюто при hover/focus. */ --menu-hover-bg: #095f73; /* --menu-hover-border: Цвят на рамката на елемент от менюто при hover/focus. */ --menu-hover-border: #095f73; /* --menu-active-text: Цвят на текста на активен или отворен елемент от менюто. */ --menu-active-text:#ffffff; /* --menu-active-bg: Фон на активен или отворен елемент от менюто. */ --menu-active-bg: #095f73; /* --menu-active-border: Цвят на рамката на активен или отворен елемент от менюто. */ --menu-active-border: #095f73; /* --dropdown-bg: Фон на падащото меню. */ --dropdown-bg: #e7f7fb; /* --dropdown-border: Цвят на рамката на падащото меню. */ --dropdown-border: #0b7890; /* --dropdown-item-text: Цвят на текста в елементите на падащото меню. */ --dropdown-item-text: #0b4f60; /* --dropdown-item-hover-text: Цвят на текста в падащото меню при hover/focus. */ --dropdown-item-hover-text: #ffffff; /* --dropdown-item-hover-bg: Фон на елемент от падащото меню при hover/focus. */ --dropdown-item-hover-bg: #0b7890; } /* ------------------------------------------------------------------------ ▼ ПРИМЕРНИ ПРАВИЛА (ВРЪЗКА МЕЖДУ СЕЛЕКТОРИТЕ И ПРОМЕНЛИВИТЕ) Разкоментирай, ако искаш менюто да използва горните променливи. ------------------------------------------------------------------------ */ .navbar-default .navbar-nav>li>a, #navigationPrimary>li>a, #navigationPrimary ul a{ font-family: var(--menu-font-family); font-size: var(--menu-font-size); font-weight: var(--menu-font-weight); text-transform: var(--menu-text-transform); letter-spacing: var(--menu-letter-spacing); color: var(--menu-text); background: var(--menu-bg); border: var(--menu-border-width) solid var(--menu-border-color); border-radius: var(--menu-radius); padding: var(--menu-padding); text-decoration: none; margin-right: var(--menu-gap-x); } .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus, #navigationPrimary>li>a:hover, #navigationPrimary ul a:hover{ color: var(--menu-hover-text); background: var(--menu-hover-bg); border-color: var(--menu-hover-border); text-decoration: none; outline: none; box-shadow: var(--menu-focus-ring); } .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus{ color: var(--menu-active-text); background: var(--menu-active-bg); border-color: var(--menu-active-border); text-decoration: none; box-shadow: none; } .navbar-default .dropdown-menu{ background: var(--dropdown-bg); border-color: var(--dropdown-border); } .navbar-default .dropdown-menu>li>a{ color: var(--dropdown-item-text); } .navbar-default .dropdown-menu>li>a:hover, .navbar-default .dropdown-menu>li>a:focus{ color: var(--dropdown-item-hover-text); background: var(--dropdown-item-hover-bg); text-decoration: none; } /* ============================================================= OJS 3.5 — Bootstrap3 (Cerulean) ДОКУМЕНТАЦИЯ: Странични блокове / меню (SIDEBAR) ------------------------------------------------------------------------ Този раздел е САМО ИНФОРМАЦИОНЕН и НЕ променя текущия стил. Ако искаш да го използваш: 1) Разкоментирай блока :root{...} (или го копирай в края на файла). 2) Разкоментирай „примерните правила“ по-долу, за да вържеш променливите. 3) Важно: изключваме блока за „Подаване на материал“ чрез :not(.block_make_submission) и НЕ засягаме бутона за подаване. ------------------------------------------------------------------------ ── Контейнер на блока (картичка) --sidebar-block-bg → Фон на всеки страничен блок. --sidebar-block-border → Рамка на блока. --sidebar-block-radius → Закръгляне на ъглите. --sidebar-block-shadow → Сянка на блока. --sidebar-block-padding → Вътрешни отстояния в блока. --sidebar-gap-y → Вертикален отстъп между блоковете. ── Заглавие на блока (.title) --sidebar-title-font-family → Шрифт на заглавието. --sidebar-title-font-size → Размер на заглавието. --sidebar-title-font-weight → Дебелина на шрифта. --sidebar-title-transform → none | uppercase | capitalize. --sidebar-title-letter-sp → Междубуквено разстояние. --sidebar-title-color → Цвят на текста на заглавието. --sidebar-title-bg → Фон зад заглавието. --sidebar-title-align → Подравняване (left|center|right). --sidebar-title-padding → Вътрешни отстояния на заглавието. --sidebar-title-border-btm → Долна линия (например 1px solid rgba(...)). ── Съдържание (връзки в списъка) --sidebar-link-font-family → Шрифт на линковете. --sidebar-link-font-size → Размер на линковете. --sidebar-link-font-weight → Дебелина на линковете. --sidebar-link-color → Цвят на текста (нормално). --sidebar-link-bg → Фон на реда (нормално). --sidebar-link-padding → Отстояния на реда. --sidebar-link-radius → Закръгляне на реда. --sidebar-link-border-btm → Разделител между редовете (напр. 1px solid #...). --sidebar-link-hover-color → Цвят при hover/focus. --sidebar-link-hover-bg → Фон при hover/focus. --sidebar-link-active-color → Цвят за активен елемент. --sidebar-link-active-bg → Фон за активен елемент. --sidebar-link-focus-ring → "Halo" при фокус (box-shadow). ── Малък текст/бележки вътре --sidebar-muted → Цвят за вторичен текст. ------------------------------------------------------------------------ ▼ СКЕЛЕТ НА ПРОМЕНЛИВИ (ПРИМЕРНИ СТОЙНОСТИ) – РАЗКОМЕНТИРАЙ, ЗА ДА АКТИВИРАШ ------------------------------------------------------------------------ */ :root{ /* Контейнер */ /* --sidebar-block-bg: Фон на страничните блокове. */ --sidebar-block-bg: #F0F0F0;/*#ff00dc ;*/ /* --sidebar-block-border: Цвят на рамката на страничните блокове. */ --sidebar-block-border: #0b7890; /* --sidebar-block-radius: Закръгляне на ъглите на страничните блокове. */ --sidebar-block-radius: 6px; /* --sidebar-block-shadow: Сянка на страничните блокове. */ --sidebar-block-shadow: none; /* --sidebar-block-padding: Вътрешно отстояние в тялото на страничния блок. */ --sidebar-block-padding: 0; /* темата често си управлява padding-а */ /* --sidebar-gap-y: Вертикално разстояние между страничните блокове. */ --sidebar-gap-y: 14px; /* Заглавие */ /* --sidebar-title-font-family: Шрифт на заглавията в страничните блокове. */ --sidebar-title-font-family: "Lora", Georgia, "Times New Roman", serif; /* --sidebar-title-font-size: Размер на текста в заглавията на страничните блокове. */ --sidebar-title-font-size: 1.5rem; /* --sidebar-title-font-weight: Дебелина на текста в заглавията на страничните блокове. */ --sidebar-title-font-weight: 700; /* --sidebar-title-transform: Контролира главни/малки букви в заглавията на страничните блокове. */ --sidebar-title-transform: none; /* --sidebar-title-letter-sp: Разстояние между буквите в заглавията на страничните блокове. */ --sidebar-title-letter-sp: 0.2px; /* --sidebar-title-color: Цвят на текста в заглавията на страничните блокове. */ --sidebar-title-color: #ececec; /* --sidebar-title-bg: Фон зад заглавията на страничните блокове. */ --sidebar-title-bg: #0b7890; /* --sidebar-title-align: Подравняване на заглавията в страничните блокове. */ --sidebar-title-align: center; /* --sidebar-title-padding: Вътрешни отстояния на заглавията в страничните блокове. */ --sidebar-title-padding: 6px 10px; /* --sidebar-title-border-btm: Долна линия под заглавието на страничния блок. */ --sidebar-title-border-btm: none; /* Линкове */ /* --sidebar-link-font-family: Шрифт на връзките в страничните блокове. */ --sidebar-link-font-family: "Noto Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* --sidebar-link-font-size: Размер на текста на връзките в страничните блокове. */ --sidebar-link-font-size: 1.5rem; /* --sidebar-link-font-weight: Дебелина на текста на връзките в страничните блокове. */ --sidebar-link-font-weight: 500; /* --sidebar-link-color: Основен цвят на текста на връзките в страничните блокове. */ --sidebar-link-color: #0b4f60; /* --sidebar-link-bg: Основен фон на връзките в страничните блокове. */ --sidebar-link-bg:#B3DCF4;/*#3e82da #B3DCF5;*/ /* --sidebar-link-padding: Вътрешни отстояния на връзките в страничните блокове. */ --sidebar-link-padding: 10px 12px; /* --sidebar-link-radius: Закръгляне на ъглите на връзките в страничните блокове. */ --sidebar-link-radius: 0; /* --sidebar-link-border-btm: Долен разделител между връзките в страничните блокове. */ --sidebar-link-border-btm: none; /* --sidebar-link-hover-color: Цвят на връзките в страничните блокове при hover/focus. */ --sidebar-link-hover-color:#ffffff; /*#ffffff;*/ /* --sidebar-link-hover-bg: Фон на връзките в страничните блокове при hover/focus. */ --sidebar-link-hover-bg: #095f73; /*#40a8e5*/ /* --sidebar-link-active-color: Цвят на активна връзка в страничен блок. */ --sidebar-link-active-color: #ffffff; /* --sidebar-link-active-bg: Фон на активна връзка в страничен блок. */ --sidebar-link-active-bg: #095f73; /*#40a8e5*/ /* --sidebar-link-focus-ring: Контур/ореол при фокус върху връзка в страничен блок. */ --sidebar-link-focus-ring: 0 0 0 0 rgba(0,0,0,0); /* Малък текст */ /* --sidebar-muted: Цвят за вторичен или по-слабо важен текст в страничните блокове. */ --sidebar-muted: rgba(255,255,255,.85); } /* ------------------------------------------------------------------------ ▼ ПРИМЕРНИ ПРАВИЛА (ВРЪЗКА НА ПРОМЕНЛИВИТЕ с .pkp_block) Разкоментирай, ако искаш страничните блокове да използват променливите. ВНИМАНИЕ: изключваме блока за подаване чрез :not(.block_make_submission) ------------------------------------------------------------------------ */ /* Контейнер на блока */ .pkp_structure_sidebar .panel.pkp_block:not(.block_make_submission){ background: var(--sidebar-block-bg) !important; /* тема често задава фон на .panel */ border-color: var(--sidebar-block-border) !important; border-width: 1px; border-style: solid; border-radius: var(--sidebar-block-radius); box-shadow: var(--sidebar-block-shadow); /* Ако темата добавя вътрешни отстояния в .panel-body, контролирай ги по-долу */ } /* Заглавие на блока */ .pkp_block:not(.block_make_submission) .title{ font-family: var(--sidebar-title-font-family); font-size: var(--sidebar-title-font-size); font-weight: var(--sidebar-title-font-weight); text-transform: var(--sidebar-title-transform); letter-spacing: var(--sidebar-title-letter-sp); color: var(--sidebar-title-color); background: var(--sidebar-title-bg); text-align: var(--sidebar-title-align); padding: var(--sidebar-title-padding); border-bottom: var(--sidebar-title-border-btm); } /* Съдържание (тялото на панела) */ .pkp_structure_sidebar .panel.pkp_block:not(.block_make_submission) > .panel-body{ background: var(--sidebar-block-bg) !important; padding: var(--sidebar-block-padding); /* ако искаш да го контролираш от променлива */ } /* Връзки в съдържанието */ .pkp_block:not(.block_make_submission) .content li a{ font-family: var(--sidebar-link-font-family); font-size: var(--sidebar-link-font-size); font-weight: var(--sidebar-link-font-weight); color: var(--sidebar-link-color); background: var(--sidebar-link-bg); padding: var(--sidebar-link-padding); border-radius: var(--sidebar-link-radius); display: block; text-decoration: none; border-bottom: var(--sidebar-link-border-btm); } .pkp_block:not(.block_make_submission) .content li a:hover, .pkp_block:not(.block_make_submission) .content li a:focus{ color: var(--sidebar-link-hover-color); background: var(--sidebar-link-hover-bg); text-decoration: none; outline: none; box-shadow: var(--sidebar-link-focus-ring); } .pkp_block:not(.block_make_submission) .content li.active > a{ color: var(--sidebar-link-active-color); background: var(--sidebar-link-active-bg); } /* Малък/вторичен текст */ .pkp_block:not(.block_make_submission) .content .muted, .pkp_block:not(.block_make_submission) .content small{ color: var(--sidebar-muted); } /* ============================================================= OJS 3.5 — Bootstrap3 (Cerulean) АКТИВЕН ФУТЪР — СВЕТЛО СИН (съвместими селектори) ------------------------------------------------------------- Този блок покрива различните маркъпи на футъра в темата: footer.footer, .footer, #footer, #pageFooter, .pkp_structure_footer, .pkp_footer ============================================================= */ :root{ /* --footer-bg: Главен фонов цвят на footer-а и общата цветова схема на сайта. */ --footer-bg: #B3DCF4;/*Фон за ffoter Marti 29.05.2026*/ /* --footer-text: Основен цвят на текста във footer-а. */ --footer-text: #1f2937; /* --footer-muted: Цвят за вторичен текст във footer-а. */ --footer-muted: #6b7280; /* --footer-link: Цвят на връзките във footer-а. */ --footer-link: #101e5a; /* --footer-link-hover: Цвят на връзките във footer-а при hover/focus. */ --footer-link-hover: #B3DCF4; /*#3366cc*/ /* --footer-heading-color: Цвят на заглавията във footer-а. */ --footer-heading-color: #101e5a; /* --footer-border-top: Горна рамка на footer-а. */ --footer-border-top: 1px solid rgba(16,30,90,.18); /* --footer-padding-y: Вертикално вътрешно отстояние на footer-а. */ --footer-padding-y: 20px; /* --footer-padding-x: Хоризонтално вътрешно отстояние на footer-а. */ --footer-padding-x: 0; /* --footer-align: Подравняване на съдържанието във footer-а. */ --footer-align: left; /* --footer-max-width: Максимална ширина на вътрешното съдържание на footer-а. */ --footer-max-width: 1200px; /* --footer-font-family: Основен шрифт във footer-а. */ --footer-font-family: "Noto Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* --footer-font-size: Основен размер на текста във footer-а. */ --footer-font-size: 0.98rem; /* --footer-line-height: Междуредово разстояние във footer-а. */ --footer-line-height: 1.65; /* --footer-heading-family: Шрифт на заглавията във footer-а. */ --footer-heading-family: "Lora", Georgia, "Times New Roman", serif; /* --footer-heading-size: Размер на заглавията във footer-а. */ --footer-heading-size: 1.06rem; /* --footer-heading-weight: Дебелина на заглавията във footer-а. */ --footer-heading-weight: 700; /* --footer-col-gap-x: Хоризонтално разстояние между колоните във footer-а. */ --footer-col-gap-x: 18px; /* --footer-col-gap-y: Вертикално разстояние между редовете/елементите във footer-а. */ --footer-col-gap-y: 6px; /* --footer-link-padding: Вътрешни отстояния на връзките във footer-а. */ --footer-link-padding: 4px 0; /* --footer-link-underline: Подчертаване на връзките във footer-а. */ --footer-link-underline: none; /* --footer-brand-display: Показване или скриване на бранд реда на PKP/OJS. */ --footer-brand-display: none; /* --footer-brand-bg: Фон на бранд реда на PKP/OJS. */ --footer-brand-bg: #EAF3FF; /* --footer-brand-text: Цвят на текста в бранд реда на PKP/OJS. */ --footer-brand-text: #6b7280; /* --footer-brand-link: Цвят на връзките в бранд реда на PKP/OJS. */ --footer-brand-link: #101e5a; /* --footer-brand-link-hover: Цвят на връзките в бранд реда при hover/focus. */ --footer-brand-link-hover: #B3DCF4; /*#3366cc*/ } /* === Основен контейнер на футъра === */ footer.footer, .footer, #footer, #pageFooter, .pkp_structure_footer, .pkp_footer{ background: var(--footer-bg) !important; color: var(--footer-text) !important; border-top: var(--footer-border-top) !important; padding: var(--footer-padding-y) var(--footer-padding-x) !important; font-family: var(--footer-font-family); font-size: var(--footer-font-size); line-height: var(--footer-line-height); text-align: var(--footer-align); } /* Вътрешно съдържание и ширина */ footer.footer .container, .footer .container, #footer .container, #pageFooter .container, .pkp_structure_footer .pkp_footer_content, .pkp_footer .pkp_footer_content{ max-width: var(--footer-max-width); margin: 0 auto; padding: 0 var(--footer-padding-x); } /* Заглавия */ footer.footer h4, footer.footer h5, .footer h4, .footer h5, #footer h4, #footer h5, #pageFooter h4, #pageFooter h5, .pkp_structure_footer h4, .pkp_structure_footer h5, .pkp_footer h4, .pkp_footer h5{ color: var(--footer-heading-color); font-family: var(--footer-heading-family); font-size: var(--footer-heading-size); font-weight: var(--footer-heading-weight); margin: 0 0 8px 0; } /* Линкове */ footer.footer a, .footer a, #footer a, #pageFooter a, .pkp_structure_footer a, .pkp_footer a{ color: var(--footer-link); text-decoration: var(--footer-link-underline); padding: var(--footer-link-padding); display: inline-block; } footer.footer a:hover, footer.footer a:focus, .footer a:hover, .footer a:focus, #footer a:hover, #footer a:focus, #pageFooter a:hover, #pageFooter a:focus, .pkp_structure_footer a:hover, .pkp_structure_footer a:focus, .pkp_footer a:hover, .pkp_footer a:focus{ color: var(--footer-link-hover); text-decoration: none; } /* Списъци и колони */ footer.footer ul, .footer ul, #footer ul, #pageFooter ul, .pkp_structure_footer ul, .pkp_footer ul{ margin: 0; padding: 0; list-style: none; } footer.footer li, .footer li, #footer li, #pageFooter li, .pkp_structure_footer li, .pkp_footer li{ margin: var(--footer-col-gap-y) 0; } footer.footer .row > [class*="col-"], .footer .row > [class*="col-"], #footer .row > [class*="col-"], #pageFooter .row > [class*="col-"], .pkp_structure_footer .row > [class*="col-"], .pkp_footer .row > [class*="col-"]{ padding-right: calc(var(--footer-col-gap-x) / 2); padding-left: calc(var(--footer-col-gap-x) / 2); } /* Бранд ред (PKP / #developedBy) */ .pkp_brand_footer, #developedBy{ display: var(--footer-brand-display) !important; background: var(--footer-brand-bg) !important; color: var(--footer-brand-text) !important; padding: 8px 0; text-align: var(--footer-align); } .pkp_brand_footer a, #developedBy a{ color: var(--footer-brand-link) !important; text-decoration: none; } .pkp_brand_footer a:hover, #developedBy a:hover{ color: var(--footer-brand-link-hover) !important; text-decoration: underline; } /* ============================================================= OJS 3.5 — Bootstrap3 (Cerulean) MERGED PATCH — LOGO LEFT + SYNTHETIC TITLE + LOGO SIZE CONTROLS ------------------------------------------------------------- ✅ Не променя меню/сайдбар/футър. Работи с DOM-а:

✅ Пази ВСИЧКИ твои досегашни правила (този блок е най-отдолу). ============================================================= */ /* === ПРЕМЕНЛИВИ (редактирай само тези стойности) === */ :root{ /* ТЕКСТ НА ЗАГЛАВИЕТО (точно както трябва да се изпише, в единични кавички) */ /* --journal-title-text: Текстът, който се показва като заглавие до логото. */ --journal-title-text: 'Факултет "Комуникации и електрообзавеждане в транспорта" към ВТУ "Тодор Каблешков"'; /* Разстояние между лого и заглавие */ /* --brand-gap: Разстояние между логото и заглавието. */ --brand-gap: 10px; /* РАЗМЕРИ НА ЛОГОТО */ /* --brand-logo-height: Височина на логото при десктоп изглед. */ --brand-logo-height: 128px; /* десктоп височина */ /* --brand-logo-height-sm: Височина на логото при мобилен изглед. */ --brand-logo-height-sm: 44px; /* мобилна височина */ /* --brand-logo-max-width: Максимална ширина на логото при десктоп изглед. */ --brand-logo-max-width: 260px; /* напр. 260px или none */ /* --brand-logo-max-width-sm: Максимална ширина на логото при мобилен изглед. */ --brand-logo-max-width-sm: none; /* --brand-logo-radius: Закръгляне на ъглите на логото. */ --brand-logo-radius: 8; /* напр. 8px или 9999px */ /* --brand-logo-border: Рамка около логото. */ --brand-logo-border: none; /* напр. 1px solid rgba(0,0,0,.06) */ /* ТИПОГРАФИЯ НА ЗАГЛАВИЕТО */ /* --brand-title-family: Шрифт на синтетичното заглавие до логото. */ --brand-title-family: "Lora", Georgia, "Times New Roman", serif; /* --brand-title-weight: Дебелина на текста на синтетичното заглавие. */ --brand-title-weight: 400; /* --brand-title-size: Размер на синтетичното заглавие при десктоп изглед. */ --brand-title-size: 2.8rem; /* --brand-title-size-sm: Размер на синтетичното заглавие при мобилен изглед. */ --brand-title-size-sm: 1.25rem; /* --brand-title-color: Цвят на синтетичното заглавие. */ --brand-title-color: #191970; /* --brand-title-spacing: Разстояние между буквите в синтетичното заглавие. */ --brand-title-spacing: 0.2px; /* --brand-title-transform: Контролира главни/малки букви в синтетичното заглавие. */ --brand-title-transform: none; } /* === LAYOUT: лого вляво + синтетично заглавие вдясно === */ body.has_site_logo .navbar-header .site-name{ display: inline-flex; align-items: center; justify-content: center; width: 100%; margin: 8px 0; gap: var(--brand-gap); } /* Логото (само IMG) */ body.has_site_logo .navbar-header .site-name .navbar-brand-logo{ float: none; display: inline-flex; align-items: center; margin: 0; padding: 0; } body.has_site_logo .navbar-header .site-name .navbar-brand-logo img{ display: block; height: var(--brand-logo-height); width: auto; max-width: var(--brand-logo-max-width); border-radius: var(--brand-logo-radius); border: var(--brand-logo-border); vertical-align: middle; margin: 0; } /* Синтезирано заглавие след логото */ body.has_site_logo .navbar-header .site-name::after{ content: var(--journal-title-text); font-family: var(--brand-title-family); font-weight: var(--brand-title-weight); font-size: var(--brand-title-size); letter-spacing: var(--brand-title-spacing); text-transform: var(--brand-title-transform); line-height: 1.2; color: var(--brand-title-color); text-align: center; white-space: normal; } /* Mobile tweaks */ @media (max-width: 767px){ body.has_site_logo .navbar-header .site-name{ margin: 6px 0; padding: 0 8px; } body.has_site_logo .navbar-header .site-name .navbar-brand-logo img{ height: var(--brand-logo-height-sm); max-width: var(--brand-logo-max-width-sm); } body.has_site_logo .navbar-header .site-name::after{ font-size: var(--brand-title-size-sm); } } /* ───────────────────────────────────────────────────────────────────────── СЪВЕТИ: • Ако искаш по-ниско лого: намали --brand-logo-height (и SM варианта). • Ако логото е „твърде дълго“, лимитирай ширината с --brand-logo-max-width. • Ако предпочиташ текстът да е в отделен ред: увеличи line-height или намали --brand-title-size/--brand-gap. ───────────────────────────────────────────────────────────────────────── */ /* ============================================================= PATCH — CONTROL LOGO SIZE ONLY (Bootstrap3 Cerulean, OJS 3.5) ------------------------------------------------------------- This block ONLY changes the rendered size of the HEADER LOGO . It does NOT alter menus, title, sidebar, footer or colors. Edit the variables below; keep this block LAST in the file. ============================================================= */ /* Variables — change these values only */ :root{ /* --brand-logo-height: Височина на логото при десктоп изглед. */ --brand-logo-height: 220px; /* desktop logo height */ /* --brand-logo-height-sm: Височина на логото при мобилен изглед. */ --brand-logo-height-sm: 48px; /* mobile logo height */ /* Optional width caps (use a value like 260px or leave as none) */ /* --brand-logo-max-width: Максимална ширина на логото при десктоп изглед. */ --brand-logo-max-width: none; /* --brand-logo-max-width-sm: Максимална ширина на логото при мобилен изглед. */ --brand-logo-max-width-sm: none; } /* Strong override against Cerulean defaults like `.navbar-brand img{max-height:40px}` */ body.has_site_logo .navbar-header .site-name .navbar-brand-logo img, .navbar-header .site-name .navbar-brand img, .navbar-brand.navbar-brand-logo > img, .navbar-brand > img{ height: var(--brand-logo-height) !important; max-height: none !important; width: auto !important; max-width: var(--brand-logo-max-width) !important; margin: 0; vertical-align: middle; } /* Mobile */ @media (max-width: 767px){ body.has_site_logo .navbar-header .site-name .navbar-brand-logo img, .navbar-header .site-name .navbar-brand img, .navbar-brand.navbar-brand-logo > img, .navbar-brand > img{ height: var(--brand-logo-height-sm) !important; max-width: var(--brand-logo-max-width-sm) !important; } } /* If the header looks too tight vertically, you can optionally add: .navbar-header .site-name{ margin: 8px 0 !important; } */ /* === Вариант A: ляво подравнен ред "лого + заглавие" (без промяна) === */ @media (min-width: 768px){ .has_site_logo .navbar-header .site-name{ display: inline-flex; align-items: center; justify-content: flex-start; gap: var(--brand-gap); padding: var(--brand-area-padding); width: 100%; margin: 8px 0; } .navbar.navbar-default .navbar-brand{ float: none; display: inline-block; text-align: center; margin: 0; padding: 0; } .has_site_logo .navbar-header .site-name::after{ text-align: var(--brand-title-align); max-width: var(--brand-title-max-width); white-space: normal; } } /* === Localized journal title for BG/EN === */ /* Общата (fallback) стойност – остави я на български или по избор */ :root{ /* --journal-title-text: Текстът, който се показва като заглавие до логото. */ --journal-title-text: 'ОСМА НАУЧНА КОНФЕРЕНЦИЯ С МЕЖДУНАРОДНО УЧАСТИЕ „КОМУНИКАЦИИ, ЕЛЕКТРООБЗАВЕЖДАНЕ И ИНФОРМАТИКА В ТРАНСПОРТА – КЕИТ 2026”'; } /* Когато страницата е на английски (html[lang="en"]) */ :root:lang(en){ /* --journal-title-text: Текстът, който се показва като заглавие до логото. */ --journal-title-text: 'THE EIGHT SCIENTIFIC CONFERENCE WITH INTERNATIONAL PARTICIPATION „TELECOMMUNICATIONS, ELECTRICAL EQUIPMENT AND INFORMATICS IN TRANSPORT – TEIT 2026”'; } /* Когато страницата е на български (html[lang="bg"]) – по желание, за яснота */ :root:lang(bg){ /* --journal-title-text: Текстът, който се показва като заглавие до логото. */ --journal-title-text: 'ОСМА НАУЧНА КОНФЕРЕНЦИЯ С МЕЖДУНАРОДНО УЧАСТИЕ „КОМУНИКАЦИИ, ЕЛЕКТРООБЗАВЕЖДАНЕ И ИНФОРМАТИКА В ТРАНСПОРТА – КЕИТ 2026”'; } /* Мобилен изглед: всичко обратно „в потока“ */ @media (max-width: 767px){ #navigationUser{ position: static !important; margin: 6px 0 !important; transform: none !important; } #nav-menu .navbar-form.navbar-left{ position: static !important; width: 100%; margin: 10px 0 !important; padding-left: 0; padding-right: 0; transform: none !important; } } /* ========================================================= FIX (CSS-only): Logo/Title stay as-is + Menu bounded by Search/User Zoom-stable across browsers ========================================================= */ /* Настройки – тук пипаш само тези стойности */ :root{ /* --nav-max-width: Максимална ширина на зоната с меню, търсене и потребителски връзки. */ --nav-max-width: 1200px; /* общата ширина на зоната меню+search+user */ /* --nav-side-pad: Ляво и дясно вътрешно отстояние на навигационната зона. */ --nav-side-pad: 80px; /* вътрешни отстояния (да съвпадат с визията ти) */ /* --nav-gap: Разстояние между менюто и търсачката. */ --nav-gap: 16px; /* разстояние между менюто и търсенето */ /* --nav-row-gap: Вертикално разстояние между редовете на менюто при пренасяне. */ --nav-row-gap: 10px; /* разстояние между 1-ви и 2-ри ред на менюто */ } @media (min-width: 768px){ /* 1) НЕ ПИПАМЕ logo/title: махаме grid/flex върху header контейнера */ #headerNavigationContainer{ display: block !important; } /* 2) Забраняваме absolute “местене” на search/login (ако още е активно) */ #navigationUser, #nav-menu .navbar-form.navbar-left{ position: static !important; top: auto !important; left: auto !important; transform: none !important; float: none !important; } /* 3) ЕДНА И СЪЩА “рамка” за NAV зоните, за да не стърчат при zoom */ #nav-menu{ max-width: var(--nav-max-width) !important; margin: 0 auto !important; padding-left: var(--nav-side-pad) !important; padding-right: var(--nav-side-pad) !important; /* меню вляво + търсене вдясно */ display: flex !important; align-items: flex-end; gap: var(--nav-gap); } /* 4) Менюто заема наличното място и се прехвърля автоматично на 2 реда */ #nav-menu > ul#main-navigation.nav.navbar-nav, #main-navigation.nav.navbar-nav, #nav-menu > ul.navbar-nav{ flex: 1 1 auto; width: auto !important; display: flex !important; flex-wrap: wrap !important; justify-content: flex-start !important; row-gap: var(--nav-row-gap) !important; white-space: normal !important; /* критично за wrap */ transform: none !important; /* маха “primary-shift” */ margin: 0 !important; float: none !important; } /* Bootstrap float off за LI */ #main-navigation > li, #nav-menu > ul.navbar-nav > li{ float: none !important; } /* 5) Търсене винаги вдясно, без да “пресича” менюто */ #nav-menu .navbar-form.navbar-left{ flex: 0 0 auto; margin-left: auto !important; white-space: nowrap; } } /* ========================================================= HARD FIX: центрира ЦЕЛИЯ БЛОК лого + заглавие спрямо същата рамка като менюто отдолу ========================================================= */ @media (min-width: 768px){ /* 1) Центрираме navbar-header като блок */ .has_site_logo .navbar-header{ max-width: var(--nav-max-width) !important; margin-left: auto !important; margin-right: auto !important; padding-left: var(--nav-side-pad) !important; padding-right: var(--nav-side-pad) !important; float: none !important; text-align: center !important; } /* 2) Вътрешно: лого + заглавие си остават както са */ .has_site_logo .navbar-header .site-name{ justify-content: center !important; width: 100% !important; } /* 3) Заглавието да е центрирано визуално */ .has_site_logo .navbar-header .site-name::after{ text-align: center !important; } } /* ============================================================= HARD FIX: ЕДНАКЪВ ФОН ЗА BODY + HEADER + FOOTER ------------------------------------------------------------- Причина: При Bootstrap3/Cerulean реалният горен фон често не е само .pkp_structure_head, а идва от .navbar-default, #headerNavigationContainer, #nav-menu или други header контейнери. Какво прави: - премахва gradient/background-image от header зоната; - задава същия фон като footer-а; - оставя текста, логото и подредбата без промяна. За смяна на цвета промени само: --footer-bg ============================================================= */ :root{ /* --site-unified-bg: Унифициран фон за body, header и footer. Наследява --footer-bg. */ --site-unified-bg: var(--footer-bg, #B3DCF4); } /* Основен фон */ html, body, .pkp_structure_page{ background: var(--site-unified-bg) !important; background-color: var(--site-unified-bg) !important; background-image: none !important; } /* Header зона - OJS + Bootstrap3/Cerulean */ .pkp_structure_head, #header, #headerNavigationContainer, .navbar, .navbar-default, .navbar-header, .navbar-collapse, .navbar-default .navbar-collapse, .navbar-default .navbar-form, .navbar-default .container, .navbar-default .container-fluid, #nav-menu, .pkp_site_name_wrapper, .pkp_navigation_primary_row{ background: var(--site-unified-bg) !important; background-color: var(--site-unified-bg) !important; background-image: none !important; } /* Премахване на типичните Bootstrap/Cerulean линии и сенки в header-а */ .navbar, .navbar-default, .pkp_navigation_primary_row{ border-color: transparent !important; box-shadow: none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; } /* Footer остава със същия управляващ цвят */ footer.footer, .footer, #footer, #pageFooter, .pkp_structure_footer, .pkp_footer{ background: var(--site-unified-bg) !important; background-color: var(--site-unified-bg) !important; background-image: none !important; } /* ============================================================= HARD FIX: ТЪМНОСИН ТЕКСТ В БУТОНИТЕ ------------------------------------------------------------- Цел: Текстът в основните бутони да не бъде бял, а #191970. Това покрива както стандартните OJS бутони, така и Bootstrap .btn. ============================================================= */ .cmp_manuscript_button, .cmp_manuscript_button.btn, .block_make_submission a, .block_make_submission a.btn, .obj_galley_link, .obj_galley_link.btn, .btn-primary, .btn-success, .btn-info{ color: #191970 !important; } .cmp_manuscript_button:hover, .cmp_manuscript_button.btn:hover, .block_make_submission a:hover, .block_make_submission a.btn:hover, .obj_galley_link:hover, .obj_galley_link.btn:hover, .btn-primary:hover, .btn-success:hover, .btn-info:hover, .cmp_manuscript_button:focus, .cmp_manuscript_button.btn:focus, .block_make_submission a:focus, .block_make_submission a.btn:focus, .obj_galley_link:focus, .obj_galley_link.btn:focus, .btn-primary:focus, .btn-success:focus, .btn-info:focus{ color: #191970 !important; } /* ============================================================= DESIGN PATCH — ВАРИАНТ B: МОРСКО СИНЬО (TEAL) ЗА MENU HEADER ------------------------------------------------------------- Фонът на сайта НЕ се променя. Този блок управлява: - текста в бутоните на главното меню; - фона на бутоните на главното меню; - рамката на бутоните; - hover/focus/active състоянията; - падащото меню; - бутона за търсене; - заглавните ленти на страничните панели, например „Език“. Основни цветове: --menu-teal-bg -> морско син фон на бутоните; --menu-teal-bg-hover -> по-тъмен фон при hover/focus; --menu-teal-text -> бял текст върху морско син фон; --menu-teal-border -> рамка на бутоните. ============================================================= */ :root{ /* --menu-teal-bg: Основен морско син цвят за бутоните в MENU HEADER. */ --menu-teal-bg: #0b7890; /* --menu-teal-bg-hover: По-тъмен морско син цвят при hover/focus/active. */ --menu-teal-bg-hover: #095f73; /* --menu-teal-text: Цвят на текста в бутоните на менюто. */ --menu-teal-text: #ffffff; /* --menu-teal-border: Цвят на рамката на бутоните в менюто. */ --menu-teal-border: #0b7890; /* --menu-teal-dropdown-bg: Светъл фон на падащото меню. */ --menu-teal-dropdown-bg: #e7f7fb; /* --menu-teal-dropdown-text: Текст в падащото меню. */ --menu-teal-dropdown-text: #0b4f60; } /* Главно меню — нормално състояние */ .navbar-default .navbar-nav > li > a, #navigationPrimary > li > a, #navigationPrimary ul a, #main-navigation > li > a, #nav-menu > ul.navbar-nav > li > a{ color: var(--menu-teal-text) !important; -webkit-text-fill-color: var(--menu-teal-text) !important; background: var(--menu-teal-bg) !important; border: 1px solid var(--menu-teal-border) !important; border-radius: 6px !important; text-shadow: none !important; text-decoration: none !important; } /* Главно меню — hover/focus/active/open */ .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus, #navigationPrimary > li > a:hover, #navigationPrimary > li > a:focus, #navigationPrimary ul a:hover, #navigationPrimary ul a:focus, #main-navigation > li > a:hover, #main-navigation > li > a:focus, #nav-menu > ul.navbar-nav > li > a:hover, #nav-menu > ul.navbar-nav > li > a:focus{ color: var(--menu-teal-text) !important; -webkit-text-fill-color: var(--menu-teal-text) !important; background: var(--menu-teal-bg-hover) !important; border-color: var(--menu-teal-bg-hover) !important; box-shadow: 0 0 0 3px rgba(11,120,144,.18) !important; text-shadow: none !important; text-decoration: none !important; } /* Падащо меню */ .navbar-default .dropdown-menu, #navigationPrimary ul{ background: var(--menu-teal-dropdown-bg) !important; border: 1px solid var(--menu-teal-border) !important; } .navbar-default .dropdown-menu > li > a, #navigationPrimary ul a{ color: var(--menu-teal-dropdown-text) !important; -webkit-text-fill-color: var(--menu-teal-dropdown-text) !important; background: var(--menu-teal-dropdown-bg) !important; text-shadow: none !important; } .navbar-default .dropdown-menu > li > a:hover, .navbar-default .dropdown-menu > li > a:focus, #navigationPrimary ul a:hover, #navigationPrimary ul a:focus{ color: var(--menu-teal-text) !important; -webkit-text-fill-color: var(--menu-teal-text) !important; background: var(--menu-teal-bg) !important; } /* Поле за търсене и бутон за търсене */ #nav-menu .navbar-form .form-control, .navbar-form .form-control, .pkp_search input[type="text"], input[type="search"]{ border: 1px solid var(--menu-teal-border) !important; box-shadow: none !important; } #nav-menu .navbar-form .btn, .navbar-form .btn, .pkp_search button, .pkp_search .search_prompt{ color: var(--menu-teal-text) !important; -webkit-text-fill-color: var(--menu-teal-text) !important; background: var(--menu-teal-bg) !important; border-color: var(--menu-teal-border) !important; text-shadow: none !important; } #nav-menu .navbar-form .btn:hover, #nav-menu .navbar-form .btn:focus, .navbar-form .btn:hover, .navbar-form .btn:focus, .pkp_search button:hover, .pkp_search button:focus, .pkp_search .search_prompt:hover, .pkp_search .search_prompt:focus{ color: var(--menu-teal-text) !important; -webkit-text-fill-color: var(--menu-teal-text) !important; background: var(--menu-teal-bg-hover) !important; border-color: var(--menu-teal-bg-hover) !important; } /* Заглавни ленти на страничните панели, например „Език“ */ .pkp_block .title, .panel-heading, .pkp_structure_sidebar .panel-heading{ color: var(--menu-teal-text) !important; background: var(--menu-teal-bg) !important; border-color: var(--menu-teal-border) !important; text-shadow: none !important; } /* Рамка на страничните панели */ .pkp_structure_sidebar .panel, .pkp_block.panel{ border-color: var(--menu-teal-border) !important; } /* ============================================================= ВАРИАНТ B2 — ИЗЧИСТЕНО АКАДЕМИЧНО МЕНЮ ------------------------------------------------------------- Светъл фон, тъмносин текст, без видими рамки и дискретен hover. ============================================================= */ :root{ /* --menu-font-family: Шрифт на менюто. */ --menu-font-family: "Noto Sans", sans-serif; /* --menu-font-size: Размер на текста в менюто. */ --menu-font-size: 1.25rem; /* --menu-font-weight: Дебелина на текста. */ --menu-font-weight: 600; /* --menu-text: Основен цвят на текста. */ --menu-text: #191970; /* --menu-hover-text: Цвят на текста при hover. */ --menu-hover-text: #0d47a1; /* --menu-hover-bg: Фон при hover. */ --menu-hover-bg: rgba(65,169,229,.12); /* --menu-active-text: Цвят на активния елемент. */ --menu-active-text: #0d47a1; /* --menu-active-bg: Фон на активния елемент. */ --menu-active-bg: rgba(65,169,229,.18); /* --menu-radius: Закръгляне на елементите. */ --menu-radius: 6px; /* --menu-padding: Вътрешни отстояния. */ --menu-padding: 10px 14px; } .navbar-default .navbar-nav>li>a, #navigationPrimary>li>a{ font-family: var(--menu-font-family) !important; font-size: var(--menu-font-size) !important; font-weight: var(--menu-font-weight) !important; color: var(--menu-text) !important; background: transparent !important; border: none !important; border-radius: var(--menu-radius) !important; padding: var(--menu-padding) !important; transition: all .2s ease; } .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus, #navigationPrimary>li>a:hover, #navigationPrimary>li>a:focus{ color: var(--menu-hover-text) !important; background: var(--menu-hover-bg) !important; text-decoration: none !important; box-shadow: none !important; } .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus{ color: var(--menu-active-text) !important; background: var(--menu-active-bg) !important; border: none !important; box-shadow: none !important; } .navbar-default .dropdown-menu{ background: #ffffff !important; border: 1px solid #d7e7f3 !important; border-radius: 8px !important; box-shadow: 0 4px 12px rgba(0,0,0,.08) !important; } .navbar-default .dropdown-menu>li>a{ color: #191970 !important; } .navbar-default .dropdown-menu>li>a:hover, .navbar-default .dropdown-menu>li>a:focus{ color: #0d47a1 !important; background: rgba(65,169,229,.12) !important; } /* ============================================================= РАСТЪР B2 — ДИАГОНАЛЕН РАСТЪР САМО В РАБОТНОТО ПОЛЕ ------------------------------------------------------------- Цел: Добавя нежен диагонален растър само върху работната зона на страницата, без да променя фона на header-а, footer-а и общия фон на сайта. Къде се прилага: - .pkp_structure_content - .pkp_structure_main - .pkp_page_index .additional_content - .page - .obj_issue_toc - .obj_article_details Основни настройки: --content-raster-base Основен светъл фон на работното поле. --content-raster-line Цвят на диагоналните линии. Използва teal оттенък, съобразен с менюто. --content-raster-size Разстояние между диагоналните линии. По-голяма стойност = по-рядък растър. Забележка: Този блок е поставен най-отдолу и използва !important, за да презапише по-старите background правила. ============================================================= */ :root{ /* --content-raster-base: Основен фон на работното поле. */ --content-raster-base: rgba(255,255,255,0.58); /* --content-raster-line: Нежен teal цвят на диагоналните линии. */ --content-raster-line: rgba(11,120,144,0.045); /* --content-raster-size: Разстояние между диагоналните линии. */ --content-raster-size: 18px; /* --content-raster-border: Дискретна рамка около работното поле. */ --content-raster-border: rgba(11,120,144,0.18); } /* Основният работен контейнер */ .pkp_structure_content{ background-color: var(--content-raster-base) !important; background-image: repeating-linear-gradient( 45deg, var(--content-raster-line) 0px, var(--content-raster-line) 1px, transparent 1px, transparent var(--content-raster-size) ) !important; background-repeat: repeat !important; background-size: auto !important; border: 1px solid var(--content-raster-border) !important; border-radius: 8px !important; } /* Вътрешната основна зона, където е текстът на страницата */ .pkp_structure_main, .pkp_page_index .additional_content, .page, .obj_issue_toc, .obj_article_details{ background-color: transparent !important; background-image: repeating-linear-gradient( 45deg, var(--content-raster-line) 0px, var(--content-raster-line) 1px, transparent 1px, transparent var(--content-raster-size) ) !important; background-repeat: repeat !important; background-size: auto !important; } /* Карти/секции в работното поле – леко бял воал за четимост */ .pkp_structure_main .page, .pkp_structure_main .obj_issue_toc, .pkp_structure_main .obj_article_details, .pkp_page_index .additional_content{ background-color: rgba(255,255,255,0.42) !important; } /* Sidebar НЕ получава растър, за да остане чист и четим */ .pkp_structure_sidebar, .pkp_structure_sidebar .pkp_block, .pkp_structure_sidebar .panel, .pkp_structure_sidebar .panel-body, .pkp_block .content{ background-image: none !important; } /* Header, меню и footer остават без растър */ .pkp_structure_head, #header, #headerNavigationContainer, .navbar, .navbar-default, #nav-menu, footer.footer, .footer, #footer, #pageFooter, .pkp_structure_footer, .pkp_footer{ background-image: none !important; } /* ============================================================= VARIANT A - BALANCED TWO-ROW MENU ============================================================= */ @media (min-width:768px){ #main-navigation.nav.navbar-nav, #nav-menu > ul.navbar-nav, #navigationPrimary{ display:flex !important; flex-wrap:wrap !important; justify-content:center !important; row-gap:12px !important; } #main-navigation > li, #navigationPrimary > li{ float:none !important; } #main-navigation > li > a, #navigationPrimary > li > a, .navbar-default .navbar-nav > li > a{ font-size:1.35rem !important; padding:10px 20px !important; } } /* ============================================================= VARIANT A - FIX 2: MENU EXACTLY TWO ROWS + SEARCH ON RIGHT ------------------------------------------------------------- Поправка: Предишният вариант оставяше търсачката да заема място от менюто и затова менюто се разпределяше на три реда. Какво прави този блок: - менюто получава собствена пълна ширина; - търсачката се отделя вдясно и не "изяжда" ширината на менюто; - бутоните са малко по-компактни; - първите 7 елемента са на първи ред; - останалите елементи са на втори ред; - премахва третия ред при десктоп изглед. ============================================================= */ @media (min-width: 768px){ /* Контейнерът на навигацията вече не е flex ред меню + търсене */ #nav-menu{ position: relative !important; display: block !important; max-width: var(--nav-max-width, 1200px) !important; margin: 0 auto !important; padding-left: var(--nav-side-pad, 80px) !important; padding-right: var(--nav-side-pad, 80px) !important; padding-bottom: 74px !important; } /* Менюто заема пълната си зона и се подрежда на два реда */ #main-navigation.nav.navbar-nav, #nav-menu > ul#main-navigation.nav.navbar-nav, #nav-menu > ul.navbar-nav, #navigationPrimary{ float: none !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; max-width: 760px !important; margin: 0 !important; padding: 0 !important; column-gap: 0 !important; row-gap: 10px !important; white-space: normal !important; transform: none !important; } #main-navigation > li, #nav-menu > ul.navbar-nav > li, #navigationPrimary > li{ float: none !important; flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; } /* Компактни бутони за точно две редици */ #main-navigation > li > a, #navigationPrimary > li > a, #nav-menu > ul.navbar-nav > li > a, .navbar-default .navbar-nav > li > a{ font-size: 1.22rem !important; line-height: 1.25 !important; padding: 10px 17px !important; white-space: nowrap !important; } /* Принудително прекъсване след 7-ия елемент: ред 1: Начало, Информация, Направления, За авторите, Важни дати, Програма, Такси ред 2: Комитети, Декларация..., Място..., Контакт, Вход, Регистрация */ #main-navigation > li:nth-child(7), #navigationPrimary > li:nth-child(7){ margin-right: 100% !important; } /* Търсачката е отделена вдясно и не влияе върху редовете на менюто */ #nav-menu .navbar-form.navbar-left, .navbar-default #nav-menu .navbar-form.navbar-left{ position: absolute !important; right: var(--nav-side-pad, 80px) !important; bottom: 9px !important; float: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; gap: 8px !important; white-space: nowrap !important; transform: none !important; } #nav-menu .navbar-form .form-control{ width: 250px !important; height: 44px !important; } #nav-menu .navbar-form .btn{ height: 44px !important; padding-left: 18px !important; padding-right: 18px !important; } } /* ============================================================= VARIANT A - SEARCH ON FIRST MENU ROW RIGHT ------------------------------------------------------------- Цел: Менюто остава на два реда, а търсачката се подравнява вдясно на първия ред, без да създава трети ред. Какво прави: - запазва първия ред на менюто; - позиционира търсачката вдясно срещу първия ред; - премахва допълнителното долно място, което правеше трети ред; - оставя втория ред на менюто под първия. ============================================================= */ @media (min-width: 768px){ #nav-menu{ position: relative !important; display: block !important; max-width: var(--nav-max-width, 1200px) !important; margin: 0 auto !important; padding-left: var(--nav-side-pad, 80px) !important; padding-right: var(--nav-side-pad, 80px) !important; padding-bottom: 0 !important; } #main-navigation.nav.navbar-nav, #nav-menu > ul#main-navigation.nav.navbar-nav, #nav-menu > ul.navbar-nav, #navigationPrimary{ float: none !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; max-width: 760px !important; margin: 0 !important; padding: 0 !important; row-gap: 10px !important; white-space: normal !important; transform: none !important; } #main-navigation > li, #nav-menu > ul.navbar-nav > li, #navigationPrimary > li{ float: none !important; flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; } #main-navigation > li > a, #navigationPrimary > li > a, #nav-menu > ul.navbar-nav > li > a, .navbar-default .navbar-nav > li > a{ font-size: 1.22rem !important; line-height: 1.25 !important; padding: 10px 17px !important; white-space: nowrap !important; } /* Прекъсване след 7-ия елемент: първи ред завършва с "Такси". */ #main-navigation > li:nth-child(7), #navigationPrimary > li:nth-child(7){ margin-right: 100% !important; } /* Търсачката вдясно на първия ред */ #nav-menu .navbar-form.navbar-left, .navbar-default #nav-menu .navbar-form.navbar-left{ position: absolute !important; right: var(--nav-side-pad, 80px) !important; top: 0 !important; bottom: auto !important; float: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; gap: 8px !important; white-space: nowrap !important; transform: none !important; } #nav-menu .navbar-form .form-control{ width: 250px !important; height: 44px !important; } #nav-menu .navbar-form .btn{ height: 44px !important; padding-left: 18px !important; padding-right: 18px !important; } } /* ============================================================= SEARCH ALIGN FIX 2 — МЕНЮ НА 2 РЕДА + ТЪРСЕНЕ ВДЯСНО ------------------------------------------------------------- Цел: - Премахва ефекта, при който менюто се свива и става на 3 реда. - Оставя менюто на 2 реда. - Търсачката е вдясно на първия ред. - Полето и бутонът за търсене са със същата височина като бутоните. - Има ясен интервал между последния бутон от менюто и търсачката. Настройки: --nav-menu-width -> ширина на зоната за менюто --search-box-width -> ширина на полето за търсене --search-button-width -> ширина на бутона "Търсене" --menu-control-height -> височина на менюто, полето и бутона ============================================================= */ @media (min-width: 768px){ :root{ /* --nav-menu-width: Зона за бутоните от менюто. Увеличи при нужда. */ --nav-menu-width: 760px; /* --search-box-width: Ширина на бялото поле за търсене. */ --search-box-width: 260px; /* --search-button-width: Ширина на бутона "Търсене". */ --search-button-width: 125px; /* --menu-control-height: Еднаква височина за меню бутони, поле и бутон за търсене. */ --menu-control-height: 52px; /* --search-gap: Разстояние между полето и бутона "Търсене". */ --search-gap: 10px; } /* Общ контейнер на менюто */ #nav-menu{ position: relative !important; display: block !important; max-width: var(--nav-max-width, 1200px) !important; margin: 0 auto !important; padding-left: var(--nav-side-pad, 80px) !important; padding-right: var(--nav-side-pad, 80px) !important; padding-bottom: 0 !important; } /* Менюто запазва достатъчна ширина, за да остане на 2 реда */ #main-navigation.nav.navbar-nav, #nav-menu > ul#main-navigation.nav.navbar-nav, #nav-menu > ul.navbar-nav, #navigationPrimary{ float: none !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; width: var(--nav-menu-width) !important; max-width: var(--nav-menu-width) !important; margin: 0 !important; padding: 0 !important; row-gap: 10px !important; white-space: normal !important; transform: none !important; } #main-navigation > li, #nav-menu > ul.navbar-nav > li, #navigationPrimary > li{ float: none !important; flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; } /* Меню бутони — височина като търсачката */ #main-navigation > li > a, #navigationPrimary > li > a, #nav-menu > ul.navbar-nav > li > a, .navbar-default .navbar-nav > li > a{ height: var(--menu-control-height) !important; min-height: var(--menu-control-height) !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 1.22rem !important; line-height: 1.2 !important; padding: 0 17px !important; white-space: nowrap !important; box-sizing: border-box !important; } /* Прекъсване след 7-ия елемент: ред 1: Начало, Информация, Направления, За авторите, Важни дати, Програма, Такси ред 2: останалите бутони */ #main-navigation > li:nth-child(7), #navigationPrimary > li:nth-child(7){ margin-right: 100% !important; } /* Търсачката е вдясно, без да отнема ширина от менюто */ #nav-menu .navbar-form.navbar-left, .navbar-default #nav-menu .navbar-form.navbar-left{ position: absolute !important; right: var(--nav-side-pad, 80px) !important; top: 0 !important; bottom: auto !important; float: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: var(--search-gap) !important; white-space: nowrap !important; transform: none !important; box-sizing: border-box !important; } /* Поле за търсене — същата височина */ #nav-menu .navbar-form .form-control, .navbar-form .form-control, #nav-menu input[type="search"], #nav-menu input[type="text"]{ width: var(--search-box-width) !important; height: var(--menu-control-height) !important; min-height: var(--menu-control-height) !important; padding: 0 16px !important; font-size: 1.15rem !important; line-height: var(--menu-control-height) !important; border-radius: 8px !important; box-sizing: border-box !important; } /* Бутон "Търсене" — същата височина */ #nav-menu .navbar-form .btn, .navbar-form .btn, #nav-menu button, #nav-menu input[type="submit"]{ width: var(--search-button-width) !important; height: var(--menu-control-height) !important; min-height: var(--menu-control-height) !important; padding: 0 18px !important; font-size: 1.15rem !important; line-height: var(--menu-control-height) !important; border-radius: 8px !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } } /* ============================================================= FINAL NAV LAYOUT FIX — МЕНЮ 70% + ТЪРСАЧКА 30% ------------------------------------------------------------- Цел: - Менюто и търсачката да бъдат в един общ flex ред. - Менюто да заема приблизително 70% от ширината. - Търсачката да заема приблизително 30% и да стои вдясно. - Да няма застъпване между бутоните и търсачката. - Бутоните да са по-компактни. - Менюто да може естествено да се пренася на втори ред. Основни настройки: --final-nav-menu-flex Относителна ширина на зоната за менюто. --final-nav-search-flex Относителна ширина на зоната за търсачката. --final-nav-control-height Еднаква височина на меню бутони, поле и бутон за търсене. --final-nav-menu-font-size Размер на текста в менюто. --final-nav-menu-padding-x Хоризонтално вътрешно отстояние на меню бутоните. ============================================================= */ @media (min-width: 768px){ :root{ /* --final-nav-menu-flex: Дял от ширината за бутоните на менюто. */ --final-nav-menu-flex: 0 1 70%; /* --final-nav-search-flex: Дял от ширината за търсачката вдясно. */ --final-nav-search-flex: 0 0 30%; /* --final-nav-control-height: Еднаква височина за меню, поле и бутон. */ --final-nav-control-height: 42px; /* --final-nav-menu-font-size: Размер на текста в меню бутоните. */ --final-nav-menu-font-size: 1.25rem; /* --final-nav-menu-padding-x: Хоризонтално отстояние вътре в меню бутоните. */ --final-nav-menu-padding-x: 12px; /* --final-nav-search-gap: Разстояние между полето и бутона за търсене. */ --final-nav-search-gap: 10px; /* --final-nav-search-input-width: Ширина на полето за търсене. */ --final-nav-search-input-width: 230px; /* --final-nav-search-button-width: Ширина на бутона „Търсене“. */ --final-nav-search-button-width: 110px; } /* Общ контейнер: меню вляво + търсачка вдясно */ #nav-menu{ position: relative !important; display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: var(--nav-gap, 16px) !important; max-width: var(--nav-max-width, 1200px) !important; margin-left: auto !important; margin-right: auto !important; padding-left: var(--nav-side-pad, 80px) !important; padding-right: var(--nav-side-pad, 80px) !important; padding-bottom: 0 !important; box-sizing: border-box !important; } /* Менюто има собствена зона и може да се пренася на втори ред */ #main-navigation.nav.navbar-nav, #nav-menu > ul#main-navigation.nav.navbar-nav, #nav-menu > ul.navbar-nav, #navigationPrimary{ position: static !important; float: none !important; flex: var(--final-nav-menu-flex) !important; width: auto !important; max-width: none !important; display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; justify-content: flex-start !important; margin: 0 !important; padding: 0 !important; row-gap: 10px !important; column-gap: 0 !important; white-space: normal !important; transform: none !important; box-sizing: border-box !important; } #main-navigation > li, #nav-menu > ul.navbar-nav > li, #navigationPrimary > li{ float: none !important; flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; } /* Премахване на старите принудителни прекъсвания */ #main-navigation > li:nth-child(7), #navigationPrimary > li:nth-child(7){ margin-right: 0 !important; } /* Компактни меню бутони */ #main-navigation > li > a, #navigationPrimary > li > a, #nav-menu > ul.navbar-nav > li > a, .navbar-default .navbar-nav > li > a{ height: var(--final-nav-control-height) !important; min-height: var(--final-nav-control-height) !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: var(--final-nav-menu-font-size) !important; line-height: 1.2 !important; padding: 0 var(--final-nav-menu-padding-x) !important; white-space: nowrap !important; box-sizing: border-box !important; } /* Търсачката е нормален flex елемент вдясно, не absolute */ #nav-menu .navbar-form.navbar-left, .navbar-default #nav-menu .navbar-form.navbar-left{ position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; float: none !important; flex: var(--final-nav-search-flex) !important; display: flex !important; align-items: flex-start !important; justify-content: flex-end !important; gap: var(--final-nav-search-gap) !important; margin: 0 !important; padding: 0 !important; white-space: nowrap !important; transform: none !important; box-sizing: border-box !important; } /* Поле за търсене */ #nav-menu .navbar-form .form-control, .navbar-form .form-control, #nav-menu input[type="search"], #nav-menu input[type="text"]{ width: var(--final-nav-search-input-width) !important; height: var(--final-nav-control-height) !important; min-height: var(--final-nav-control-height) !important; padding: 0 14px !important; font-size: 1.08rem !important; line-height: var(--final-nav-control-height) !important; border-radius: 8px !important; box-sizing: border-box !important; } /* Бутон „Търсене“ */ #nav-menu .navbar-form .btn, .navbar-form .btn, #nav-menu button, #nav-menu input[type="submit"]{ width: var(--final-nav-search-button-width) !important; height: var(--final-nav-control-height) !important; min-height: var(--final-nav-control-height) !important; padding: 0 16px !important; font-size: 1.08rem !important; line-height: var(--final-nav-control-height) !important; border-radius: 8px !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } } /* ============================================================= USER MENU FIX — ВХОД / РЕГИСТРАЦИЯ / ПРОФИЛ / ИЗХОД ------------------------------------------------------------- Цел: - Премества потребителското меню (#navigationUser) в горния десен ъгъл на header зоната, вместо да излиза вляво извън страницата. - Падащото меню се отваря навътре към страницата и остава четимо. - Не променя основното меню (#main-navigation) и търсачката. ============================================================= */ @media (min-width: 768px){ /* Header контейнерът трябва да бъде база за позициониране */ #headerNavigationContainer, #headerNavigationContainer > .container-fluid:first-child{ position: relative !important; } /* Потребителско меню: Register / Login / Profile / Logout */ #navigationUser{ position: absolute !important; top: 10px !important; right: var(--nav-side-pad, 80px) !important; left: auto !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 6px !important; float: none !important; margin: 0 !important; padding: 0 !important; max-width: calc(100vw - 2 * var(--nav-side-pad, 80px)) !important; z-index: 2000 !important; transform: none !important; } #navigationUser > li{ position: relative !important; float: none !important; margin: 0 !important; padding: 0 !important; } #navigationUser > li > a{ display: flex !important; align-items: center !important; justify-content: center !important; min-height: 34px !important; padding: 6px 12px !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background: var(--menu-teal-bg, #0b7890) !important; border: 1px solid var(--menu-teal-border, #0b7890) !important; border-radius: 6px !important; font-size: 1rem !important; font-weight: 600 !important; text-decoration: none !important; text-shadow: none !important; white-space: nowrap !important; } #navigationUser > li > a:hover, #navigationUser > li > a:focus, #navigationUser > li.open > a{ color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background: var(--menu-teal-bg-hover, #095f73) !important; border-color: var(--menu-teal-bg-hover, #095f73) !important; text-decoration: none !important; } /* Dropdown на потребителското меню — отваря се наляво, за да не излиза извън екрана */ #navigationUser .dropdown-menu, #navigationUser ul{ left: auto !important; right: 0 !important; min-width: 190px !important; max-width: 280px !important; margin-top: 6px !important; padding: 6px 0 !important; background: #e7f7fb !important; border: 1px solid var(--menu-teal-border, #0b7890) !important; border-radius: 8px !important; box-shadow: 0 4px 12px rgba(0,0,0,.12) !important; z-index: 3000 !important; } #navigationUser .dropdown-menu > li > a, #navigationUser ul > li > a{ display: block !important; padding: 9px 14px !important; color: #0b4f60 !important; -webkit-text-fill-color: #0b4f60 !important; background: transparent !important; font-size: 1rem !important; font-weight: 500 !important; line-height: 1.3 !important; white-space: normal !important; text-decoration: none !important; } #navigationUser .dropdown-menu > li > a:hover, #navigationUser .dropdown-menu > li > a:focus, #navigationUser ul > li > a:hover, #navigationUser ul > li > a:focus{ color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background: var(--menu-teal-bg, #0b7890) !important; text-decoration: none !important; } } /* Мобилен изглед: потребителското меню остава в потока и не излиза извън екрана */ @media (max-width: 767px){ #navigationUser{ position: static !important; display: flex !important; flex-wrap: wrap !important; justify-content: flex-start !important; gap: 6px !important; float: none !important; margin: 8px 0 !important; padding: 0 8px !important; max-width: 100% !important; transform: none !important; } #navigationUser > li{ position: relative !important; float: none !important; } #navigationUser > li > a{ display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 34px !important; padding: 6px 12px !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background: var(--menu-teal-bg, #0b7890) !important; border: 1px solid var(--menu-teal-border, #0b7890) !important; border-radius: 6px !important; white-space: nowrap !important; text-decoration: none !important; } #navigationUser .dropdown-menu, #navigationUser ul{ left: 0 !important; right: auto !important; max-width: calc(100vw - 20px) !important; min-width: 190px !important; z-index: 3000 !important; } } /* LANGUAGE BLOCK FIX */ .pkp_block.block_language .content li a{ text-transform: capitalize !important; } /* ============================================================= УВЕЛИЧЕН ШРИФТ НА ОСНОВНОТО МЕНЮ ------------------------------------------------------------- Десктоп: +1 стъпка Мобилни устройства: +2 стъпки спрямо първоначалния размер ============================================================= */ @media (max-width: 767px){ .navbar-default .navbar-nav > li > a, #navigationPrimary > li > a, #main-navigation > li > a{ font-size: 1.35rem !important; } } /* ============================================================= FORCE DESKTOP MENU FONT SIZE ------------------------------------------------------------- Някои OJS правила презаписват променливата --menu-font-size. Този блок принудително увеличава шрифта на основното меню за настолна версия. ============================================================= */ @media (min-width: 768px){ #main-navigation > li > a, #navigationPrimary > li > a, .navbar-default .navbar-nav > li > a, .pkp_navigation_primary_row .nav > li > a{ font-size: 1.25rem !important; } } /* ============================================================= ULTIMATE DESKTOP MENU FONT FIX ------------------------------------------------------------- Работеща принудителна корекция за основното меню на десктоп. Причина: В този CSS файл реалният десктоп размер се управлява най-късно от --final-nav-menu-font-size и от няколко по-специфични правила. Затова тук презаписваме едновременно: - променливите; - директните селектори на главното меню; - линковете само в #main-navigation. Не засяга: - търсачката; - потребителското меню Вход/Регистрация; - страничните блокове. ============================================================= */ @media (min-width: 768px){ :root{ /* Размер на текста в основното меню за настолна версия. */ --menu-font-size: 1.25rem; --final-nav-menu-font-size: 1.25rem; } nav#nav-menu ul#main-navigation.nav.navbar-nav > li > a, #nav-menu #main-navigation > li > a, #main-navigation.navbar-nav > li > a, #main-navigation > li > a{ font-size: 1.25rem !important; line-height: 1.2 !important; } } /* ============================================================= SEARCH FONT SIZE = MAIN MENU FONT SIZE ------------------------------------------------------------- Полето за търсене и бутонът "Търсене" използват същия размер на шрифта като основното меню. ============================================================= */ @media (min-width: 768px){ #nav-menu .navbar-form .form-control, .navbar-form .form-control, #nav-menu input[type="search"], #nav-menu input[type="text"], #nav-menu .navbar-form .btn, .navbar-form .btn, #nav-menu button, #nav-menu input[type="submit"]{ font-size: 1.25rem !important; } } @media (max-width: 767px){ #nav-menu .navbar-form .form-control, .navbar-form .form-control, #nav-menu input[type="search"], #nav-menu input[type="text"], #nav-menu .navbar-form .btn, .navbar-form .btn, #nav-menu button, #nav-menu input[type="submit"]{ font-size: 1.35rem !important; } } /* ============================================================= TEXT OVERRIDE — Бутон "Подаване на материал" Показва "Изпращане на доклад" вместо системния текст. ============================================================= */ .block_make_submission a{ font-size:0 !important; } .block_make_submission a::after{ content:"Изпращане на доклад"; font-size:2rem; } html:lang(en) .block_make_submission a::after{ content:"Paper Submission"; } /* ============================================================= FINAL FIX — МЕНЮТО ОСТАВА НА 2 РЕДА ПРИ УВЕЛИЧЕН ШРИФТ ------------------------------------------------------------- Запазва шрифта 1.25rem, събира менюто на два реда и оставя търсачката вдясно на първия ред. ============================================================= */ @media (min-width: 768px){ :root{ --nav-max-width: 1280px; --nav-side-pad: 40px; --final-nav-menu-font-size: 1.25rem; --final-nav-menu-padding-x: 10px; --final-nav-control-height: 42px; --final-nav-search-input-width: 230px; --final-nav-search-button-width: 110px; --final-nav-search-gap: 10px; } #nav-menu{ position: relative !important; display: block !important; max-width: var(--nav-max-width) !important; margin-left: auto !important; margin-right: auto !important; padding-left: var(--nav-side-pad) !important; padding-right: var(--nav-side-pad) !important; padding-bottom: 0 !important; box-sizing: border-box !important; } #main-navigation.nav.navbar-nav, #nav-menu > ul#main-navigation.nav.navbar-nav, #nav-menu > ul.navbar-nav, #navigationPrimary{ position: static !important; float: none !important; display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; justify-content: flex-start !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; row-gap: 10px !important; column-gap: 0 !important; white-space: normal !important; transform: none !important; box-sizing: border-box !important; } #main-navigation > li, #nav-menu > ul.navbar-nav > li, #navigationPrimary > li{ float: none !important; flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; } /* Първи ред: до "Програма"; втори ред: от "Такси" нататък. */ #main-navigation > li:nth-child(6), #navigationPrimary > li:nth-child(6){ margin-right: 100% !important; } /* Премахва старото прекъсване след 7-ия елемент. */ #main-navigation > li:nth-child(7), #navigationPrimary > li:nth-child(7){ margin-right: 0 !important; } #main-navigation > li > a, #navigationPrimary > li > a, #nav-menu > ul.navbar-nav > li > a, .navbar-default .navbar-nav > li > a{ height: var(--final-nav-control-height) !important; min-height: var(--final-nav-control-height) !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: var(--final-nav-menu-font-size) !important; line-height: 1.2 !important; padding: 0 var(--final-nav-menu-padding-x) !important; white-space: nowrap !important; box-sizing: border-box !important; } #nav-menu .navbar-form.navbar-left, .navbar-default #nav-menu .navbar-form.navbar-left{ position: absolute !important; top: 0 !important; right: var(--nav-side-pad) !important; bottom: auto !important; left: auto !important; float: none !important; display: flex !important; align-items: flex-start !important; justify-content: flex-end !important; gap: var(--final-nav-search-gap) !important; margin: 0 !important; padding: 0 !important; white-space: nowrap !important; transform: none !important; box-sizing: border-box !important; } #nav-menu .navbar-form .form-control, .navbar-form .form-control, #nav-menu input[type="search"], #nav-menu input[type="text"]{ width: var(--final-nav-search-input-width) !important; height: var(--final-nav-control-height) !important; min-height: var(--final-nav-control-height) !important; padding: 0 14px !important; font-size: 1.25rem !important; line-height: var(--final-nav-control-height) !important; border-radius: 8px !important; box-sizing: border-box !important; } #nav-menu .navbar-form .btn, .navbar-form .btn, #nav-menu button, #nav-menu input[type="submit"]{ width: var(--final-nav-search-button-width) !important; height: var(--final-nav-control-height) !important; min-height: var(--final-nav-control-height) !important; padding: 0 16px !important; font-size: 1.25rem !important; line-height: var(--final-nav-control-height) !important; border-radius: 8px !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } } /* ============================================================= FINAL FIX v2 — 2 РЕДА МЕНЮ + ТЪРСАЧКА ВДЯСНО, БЕЗ СКРИВАНЕ ------------------------------------------------------------- Поправя предишния вариант, при който менюто се сви на един ред и част от бутоните попаднаха под търсачката. Какво прави: - Запазва размера на шрифта 1.25rem. - Менюто е в лява зона, търсачката е отделна дясна зона. - Първият ред завършва с "Такси". - Вторият ред съдържа останалите бутони. - Няма absolute позициониране на търсачката, затова бутоните не се губят и не попадат под полето за търсене. ============================================================= */ @media (min-width: 768px){ :root{ --nav-max-width: 1280px; --nav-side-pad: 40px; --nav-gap: 18px; --final-nav-menu-font-size: 1.25rem; --final-nav-menu-padding-x: 8px; --final-nav-control-height: 42px; --final-nav-search-input-width: 230px; --final-nav-search-button-width: 110px; --final-nav-search-gap: 10px; } #nav-menu{ position: relative !important; display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: var(--nav-gap) !important; max-width: var(--nav-max-width) !important; margin-left: auto !important; margin-right: auto !important; padding-left: var(--nav-side-pad) !important; padding-right: var(--nav-side-pad) !important; padding-bottom: 0 !important; overflow: visible !important; box-sizing: border-box !important; } #main-navigation.nav.navbar-nav, #nav-menu > ul#main-navigation.nav.navbar-nav, #nav-menu > ul.navbar-nav, #navigationPrimary{ position: static !important; float: none !important; flex: 1 1 auto !important; width: auto !important; max-width: none !important; display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; justify-content: flex-start !important; margin: 0 !important; padding: 0 !important; row-gap: 10px !important; column-gap: 0 !important; white-space: normal !important; overflow: visible !important; transform: none !important; box-sizing: border-box !important; } #main-navigation > li, #nav-menu > ul.navbar-nav > li, #navigationPrimary > li{ float: none !important; flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; } /* Първи ред: Начало ... Такси. Втори ред: останалите бутони. */ #main-navigation > li:nth-child(6), #navigationPrimary > li:nth-child(6){ margin-right: 0 !important; } #main-navigation > li:nth-child(7), #navigationPrimary > li:nth-child(7){ margin-right: 100% !important; } #main-navigation > li > a, #navigationPrimary > li > a, #nav-menu > ul.navbar-nav > li > a, .navbar-default .navbar-nav > li > a{ height: var(--final-nav-control-height) !important; min-height: var(--final-nav-control-height) !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: var(--final-nav-menu-font-size) !important; line-height: 1.2 !important; padding: 0 var(--final-nav-menu-padding-x) !important; white-space: nowrap !important; box-sizing: border-box !important; } #nav-menu .pull-md-right{ flex: 0 0 auto !important; margin-left: auto !important; padding: 0 !important; float: none !important; display: flex !important; justify-content: flex-end !important; align-items: flex-start !important; } #nav-menu .navbar-form.navbar-left, .navbar-default #nav-menu .navbar-form.navbar-left{ position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; float: none !important; flex: 0 0 auto !important; display: flex !important; align-items: flex-start !important; justify-content: flex-end !important; gap: var(--final-nav-search-gap) !important; margin: 0 !important; padding: 0 !important; white-space: nowrap !important; transform: none !important; box-sizing: border-box !important; } #nav-menu .navbar-form .form-control, .navbar-form .form-control, #nav-menu input[type="search"], #nav-menu input[type="text"]{ width: var(--final-nav-search-input-width) !important; height: var(--final-nav-control-height) !important; min-height: var(--final-nav-control-height) !important; padding: 0 14px !important; font-size: 1.25rem !important; line-height: var(--final-nav-control-height) !important; border-radius: 8px !important; box-sizing: border-box !important; } #nav-menu .navbar-form .btn, .navbar-form .btn, #nav-menu button, #nav-menu input[type="submit"]{ width: var(--final-nav-search-button-width) !important; height: var(--final-nav-control-height) !important; min-height: var(--final-nav-control-height) !important; padding: 0 16px !important; font-size: 1.25rem !important; line-height: var(--final-nav-control-height) !important; border-radius: 8px !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } } /* ============================================================= HEADER VISIBILITY FIX — ЛОГОТО И ЗАГЛАВИЕТО ДА НЕ СЕ СКРИВАТ ------------------------------------------------------------- Проблем: При различен zoom горната част на логото излиза извън видимата част на екрана. Какво прави: - добавя безопасно горно отстояние в header зоната; - връща логото и заглавието нормално в потока на страницата; - премахва евентуални отрицателни/скриващи ефекти; - не променя менюто, търсачката, страничните блокове и цветовете. ============================================================= */ @media (min-width: 768px){ #headerNavigationContainer, .navbar.navbar-default, .navbar-default .container-fluid{ overflow: visible !important; } .has_site_logo .navbar-header{ padding-top: 28px !important; overflow: visible !important; } body.has_site_logo .navbar-header .site-name, .has_site_logo .navbar-header .site-name{ margin-top: 0 !important; margin-bottom: 18px !important; padding-top: 0 !important; transform: none !important; overflow: visible !important; } body.has_site_logo .navbar-header .site-name .navbar-brand-logo, .has_site_logo .navbar-header .site-name .navbar-brand-logo, .navbar.navbar-default .navbar-brand{ margin-top: 0 !important; padding-top: 0 !important; transform: none !important; overflow: visible !important; } body.has_site_logo .navbar-header .site-name .navbar-brand-logo img, .navbar-header .site-name .navbar-brand img, .navbar-brand.navbar-brand-logo > img, .navbar-brand > img{ margin-top: 0 !important; transform: none !important; object-fit: contain !important; } } @media (max-width: 767px){ #headerNavigationContainer, .navbar.navbar-default, .navbar-default .container-fluid{ overflow: visible !important; } .has_site_logo .navbar-header{ padding-top: 14px !important; overflow: visible !important; } body.has_site_logo .navbar-header .site-name, .has_site_logo .navbar-header .site-name{ margin-top: 0 !important; margin-bottom: 10px !important; transform: none !important; overflow: visible !important; } } /* ============================================================= HEADER VISIBILITY FIX v2 — СМЪКВАНЕ НА ЛОГОТО И ЗАГЛАВИЕТО ------------------------------------------------------------- Корекция върху последната версия: - смъква целия блок "лого + заглавие" още надолу; - оставя менюто, търсачката, цветовете и страничните блокове без промяна; - използва по-силен селектор и е поставена най-отдолу, за да презапише предишното padding-top: 28px. ============================================================= */ @media (min-width: 768px){ #headerNavigationContainer, .navbar.navbar-default, .navbar-default .container-fluid, .has_site_logo .navbar-header{ overflow: visible !important; } body.has_site_logo .navbar-header, .has_site_logo .navbar-header, .navbar.navbar-default .navbar-header{ padding-top: 55px !important; } body.has_site_logo .navbar-header .site-name, .has_site_logo .navbar-header .site-name{ margin-top: 0 !important; margin-bottom: 20px !important; transform: none !important; overflow: visible !important; } body.has_site_logo .navbar-header .site-name .navbar-brand-logo, .has_site_logo .navbar-header .site-name .navbar-brand-logo, body.has_site_logo .navbar-header .site-name .navbar-brand-logo img, .navbar-header .site-name .navbar-brand img, .navbar-brand.navbar-brand-logo > img, .navbar-brand > img{ transform: none !important; margin-top: 0 !important; overflow: visible !important; } } /* ============================================================= NAV MENU CENTER FIX — ЦЕНТРИРАНЕ САМО НА ДВАТА РЕДА БУТОНИ ------------------------------------------------------------- Цел: - центрира само бутоните от главното меню над работното поле; - търсачката остава вдясно; - не променя логото, заглавието, цветовете, шрифтовете, размерите на бутоните, страничните блокове и съдържанието. ============================================================= */ @media (min-width: 768px){ #main-navigation.nav.navbar-nav, #nav-menu > ul#main-navigation.nav.navbar-nav, #nav-menu > ul.navbar-nav, #navigationPrimary{ justify-content: center !important; } }