Page tree

European Commission Digital


Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Content Layer
id699401031
Content Column
background-color$whiteColor
id699401033
Content Block
overflowauto
id699401032
Html-bobswift
<a class="cef-branding" href="https://ec.europa.eu/digital-building-blocks/sites/x/TiivGg">
<img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/447686734/logo-european-commission.svg" alt="European Commission Digital">
</a>
Div
classcef-search-header

Targeted Search Field
add-wildcardtrue
space-search-scopeDIGITAL
max-live-results10
quicksearch-in-titletrue
search-pagestrue


CSS Stylesheet
/*--- REBOOT BRIKIT / CONFLUENCE ---*/
/* ------------------------------- */
#likes-and-labels-container, #comments-section { display: none;}
.brikit-menu .aui-navgroup-horizontal::before { display: none;}
/*hack double footer*/
#brikit-footer > div:nth-child(2) {display: none;}


/*--- CONTAINER CONTENT BACKDROP---*/
/* ------------------------------ */
.brikit-content-layers .brikit-content-layer-container, 
.brikit-container.brikit-title-container, 
.brikit-header-backdrop .brikit-container { width:100%;}

@media screen and (min-width: 1200px) {
.brikit-content-layers .brikit-content-layer-container, 
.brikit-container.brikit-title-container, 
.brikit-header-backdrop .brikit-container { width: 1170px;}
}

.brikit-container.brikit-title-container {}
.brikit-container-content.brikit-title { padding:0;}

/* --- MOBILE HEADER --- */
/* -------------------- */
.mobile #main-header.brikit-header { height:75px;}

/*LOGO*/
.mobile a.cef-branding { margin-left:15px;}
.mobile #main-content { margin-top:75px;}
.mobile-aui-header { padding-top:20px !important; padding-left:15px !important; background-color: white;}

/*BURGER*/ 
.mobile #mobile-menu-toggle-button.aui-button { z-index: 5000 !important; position: fixed; top:25px; right:15px !important; background-color: #003764;} 
.mobile #mobile-menu-toggle-button.aui-button span { color: white;} 
.mobile #mobile-menu-toggle-button.aui-button span:before { font-size:18px; }

/*SEARCH*/
#brikit-mobile-search #quick-search-query { width: 250px;}
#brikit-mobile-search .aui-icon:before { margin-top: 5px;}
.aui-header .aui-quicksearch input[type="text"], 
.aui-header .aui-quicksearch input[type="text"][type="text"]:focus { background: #003764;}

/*SEARCH RESULT*/
#brikit-quick-search-mobile-results { left: -15px; width:103%; border: 1px solid white !important;}
#brikit-quick-search-mobile-results li { padding:5px 0;}
#brikit-quick-search-mobile-results li a { padding: 2px 10px; background: none;}
#brikit-quick-search-mobile-results li a.space-name { display: none;}

/*SEARCH HACK TO DISPLAY NONE THE AUTOMATIC SECOND SEARCH ON MOBILE*/ 
.mobile .mobile-search-toggle-button { display: none;}

/*MENU*/
.mobile-menu-active .mobile-menu { background-color: #f0f4f5;}

.mobile-menu li .mobile-submenu a span { display: block; font-weight: bold;}
.mobile-menu li a { color: #003764;}
.mobile-menu li a:focus { color: #003764; outline: 2px dashed black; outline-offset: 2px;}

.aui-navgroup-vertical .aui-nav+.aui-nav { border-top: 1px solid #dbdbdb; }

/* --- BREADCRUMP --- */
/* ----------------- */
#brikit-breadcrumbs-relocated { position:relative !important;}
.brikit-breadcrumbs ol { margin-left:15px !important;}
.brikit-breadcrumbs li, .brikit-breadcrumbs li:before, .brikit-breadcrumbs a, .brikit-breadcrumbs a:hover { padding: 5px 5px 5px 0; color:white !important;}
.brikit-breadcrumbs a { text-decoration: underline;}
.brikit-breadcrumbs a:hover { text-decoration: none;}
.brikit-breadcrumbs a:focus { outline: 2px dashed #FFCF00 !important; outline-offset: 2px !important;}

.brikit-title-backdrop {padding: 4px 0 36px 0; background: #003764;}

/* --- BACKDROP SECTION --- */
/* ------------------------ */
.section.backdrop { padding-top: 0; padding-bottom: 0;}
.backdrop { background: #003764;}
.backdrop h1 { font-size: 1.80rem !important; }
.backdrop h1, .backdrop p { color:white;}
.backdrop .brikit-content-block h1:first-child, 
.backdrop .brikit-content-layers h1:first-child { margin: 15px 0 15px 0;}
.section.backdrop .aui-button.action-button { margin: 10px 20px 40px 0;}
.backdrop .lead {margin-top: -25px;}

@media screen and (min-width: 1200px) {
.backdrop h1 { font-size: 2.50rem !important; }
}

/* --- MAIN HEADER --- */ 
/* ------------------ */
.brikit-header-backdrop {}
.brikit-header-container {} 
body #main-header.brikit-header {}
body #main-header.brikit-header .brikit-header-content { position:relative; height: 70px;}

/*MAIN HEADER > 1 - LOGO*/
a.cef-branding { display:inline-block; margin-top:10px; margin-left:15px; line-height: 0;} 
a.cef-branding:focus{ outline: 2px dashed black; outline-offset: 2px;}
a.cef-branding img { height:50px;}

/*MAIN HEADER > 2 - MENU*/
.brikit-menu { top: auto; bottom:-5px !important; left:240px;}
body #main-header.brikit-header .brikit-menu-top-level.brikit-menu { display:inline-block; }

/*MAIN HEADER > 3 -SEARCH*/
#brikit-search { position:absolute; top:10px; right:5px; width:200px;}
#brikit-search #quick-search-query { padding: 5px 30px 5px 10px; width: 100%; height: 35px; color: #003764; border-color: #003764; border-radius:7px;} 
#brikit-search #quick-search-query::placeholder {  color: #003764;  opacity: 1;}
#brikit-search #quick-search-query:-ms-input-placeholder { color: #003764;}
#brikit-search #quick-search-query::-ms-input-placeholder { color: #003764;}
#brikit-search #quick-search-query:focus { outline: 2px dashed black; outline-offset: 2px;}
#brikit-search #quick-search-query:focus::placeholder { font-size: initial; opacity: 0;}

/*SEARCH ADD LOUPE*/

/*---SEARCH LEVEL 2 RESULT---*/
#brikit-search .targeted-search-results-list { border:1px solid white !important; border-radius:0 !important;}
#brikit-search .targeted-search-results-list ol li { border-bottom: 1px solid #dbdbdb;}
#brikit-search .targeted-search-results-list ol li a { color: #003764 !important;}
#brikit-search .targeted-search-results-list ol li:hover { background-color: #003764;}
#brikit-search .targeted-search-results-list ol li:hover a { color: #fff! important;}
#brikit-search .targeted-search-results-list.aui-dropdown li a span.aui-icon { display: none;}

#brikit-search .targeted-search-results-list ol li a.space-name { display:none;}

/*SEARCH TARGETED SEARCH*/
@media screen and (max-width: 600px) { .cef-search-header {display: none;}}
@media screen and (min-width: 601px) { .cef-search-header {position: absolute; top: 15px; right:60px;}}
@media screen and (min-width: 1200px) { .cef-search-header {right:10px;}}

.cef-search-header .targeted-search-field form.aui .text { padding:20px;}
.cef-search-header .targeted-search-field form.aui .text:focus { outline: 2px dashed #003764; outline-offset: 2px;}
.cef-search-header .targeted-search-results-list.aui-dropdown {  width: 100%;}
.cef-search-header .targeted-search-results-list.aui-dropdown ol li.with-space-name a.space-name { display: none;}
.cef-search-header .targeted-search-results-list.aui-dropdown ol li { border-bottom:1px solid #F0F4F5;}
.cef-search-header .targeted-search-results-list.aui-dropdown ol li a { padding: 10px !important;}
.cef-search-header .targeted-search-results-list.aui-dropdown ol li a:hover { background-color: #F0F4F5 !important; border-color: #F0F4F5 !important;}
.cef-search-header .targeted-search-results-list.aui-dropdown ol li a:focus { outline: 2px dashed #003764 !important;}
.cef-search-header .targeted-search-results-list.aui-dropdown ol li a span { color: #003764 !important; border-bottom:2px solid transparent;}
.cef-search-header .targeted-search-results-list.aui-dropdown ol li a:hover span { color: #003764 !important; border-bottom:2px solid #003764;}

/*---MEGA MENU LEVEL 1---*/
.brikit-menu .aui-navgroup-horizontal .aui-nav > li {}
.brikit-menu .aui-navgroup-horizontal .aui-nav > li a { margin-left:15px; padding-bottom:5px; font-size:18px; font-weight: bold; line-height:1; color: #003764; border-bottom:5px solid transparent;}
.brikit-menu .aui-navgroup-horizontal .aui-nav > li a:hover, 
.brikit-menu .aui-navgroup-horizontal .aui-nav > li a.active { border-bottom:5px solid #003764;}
.brikit-menu .aui-navgroup-horizontal .aui-nav > li a:focus { border-bottom:5px solid transparent; outline: 2px dashed black; outline-offset: 2px;}
.brikit-menu .aui-navgroup-horizontal .aui-nav > li a.brikit-menu-panel-trigger::after { margin-top:-1px; opacity:1; border-top-color: #003764; border-width: 5px; transition: 0.2s;}
.brikit-menu .aui-navgroup-horizontal .aui-nav > li a.brikit-menu-panel-trigger.active::after { margin-top:-6px; transform: rotate(180deg);}

/*---MEGA MENU LEVEL 2---*/
.brikit-menu-panel { top:5px !important;}
.brikit-menu-panel .cef-mega-menu-subtitle { margin-bottom:15px; font-size: 20px !important; color: #003764;}
.brikit-menu-panel ul.helper-spacing { margin-top:70px;}
.brikit-menu-panel ul li { margin-bottom:30px;}
.brikit-menu-panel ul li a { color: #003764 !important;}
.brikit-menu-panel ul li a:hover { color: #003764!important; text-decoration: underline !important;}
.brikit-menu-panel ul li a:focus { outline: 2px dashed black !important; outline-offset: 2px !important;}
.brikit-menu-panel ul li a span { display: block !important; font-weight:bold !important;}

/*---MEGA MENU LEVEL 2 BB---*/
.cef-mega-menu-bb { margin-bottom:15px; padding-left: 80px; min-height:65px;}
.cef-mega-menu-bb .title-bb { position: relative; display:inline-block; margin-top:0; margin-bottom:5px; font-size:inherit; border-bottom: 2px solid white;}
.cef-mega-menu-bb .title-bb::before {content:""; position: absolute; left:-80px; height: 65px; width: 65px; background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/82773384/ico-big-data.png"); background-repeat: no-repeat; background-size: cover;}

.cef-mega-menu-bb.cef-mega-menu-bb-big-data .title-bb::before 
{background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/82773384/ico-big-data.png");}

.cef-mega-menu-bb.cef-mega-menu-bb-blockchain .title-bb::before 
{background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/82773384/ico-blockchain.png");}

.cef-mega-menu-bb.cef-mega-menu-bb-broker .title-bb::before 
{background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/82773384/ico-context-broker.png");}

.cef-mega-menu-bb.cef-mega-menu-bb-earchiving .title-bb::before 
{background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/82773384/ico-earchiving.png");}

.cef-mega-menu-bb.cef-mega-menu-bb-edelivery .title-bb::before 
{background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/82773384/ico-edelivery.png");}

.cef-mega-menu-bb.cef-mega-menu-bb-eid .title-bb::before 
{background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/82773384/ico-eid.png");}

.cef-mega-menu-bb.cef-mega-menu-bb-einvoicing .title-bb::before 
{background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/82773384/ico-einvoicing.png");}

.cef-mega-menu-bb.cef-mega-menu-bb-esignature .title-bb::before 
{background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/82773384/ico-esignature.png");}

.cef-mega-menu-bb.cef-mega-menu-bb-etranslation .title-bb::before 
{background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/82773384/ico-etranslation.png");}

.cef-mega-menu-bb.cef-mega-menu-bb-oop .title-bb::before 
{background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/82773384/ico-oop.png");}

/*---MEGA MENU OVERLAYER---*/
body.menu-panel-open #brikit-page-content:before { content:"hello"; z-index: 9; position: absolute; top: 0; left: 0; height: 100vh; width: 100vw; background-color: #002747; opacity: 0.8;}
.brikit-header-backdrop { z-index: 10;}

/*--- HEADER MAIN BUTTON ---*/ 
.cef-header-main-btn { margin-bottom: 1.5rem; display:inline-block !important; padding:0.25rem 0.5rem 0 !important; min-width:100px !important; font-size:16px !important; font-weight: bold; line-height:1.2em; text-align:center; text-transform: uppercase; text-decoration:none !important; border: 2px solid transparent; background: #FFCF00 !important; border-color:#FFCF00 !important; border-radius:7px; box-shadow: none;} 
.cef-header-main-btn:hover { background: #FFCF00 !important; border-color:#FFCF00 !important; box-shadow: none;} 
.cef-header-main-btn:focus { outline: 2px dashed black !important; outline-offset: 2px !important;} 
.cef-header-main-btn span { padding-left:2px; padding-right:2px; color:#003764 !important; border: 2px solid transparent;} 
.cef-header-main-btn:hover span { border-top: 2px solid transparent; border-right: 2px solid transparent; border-bottom: 2px solid #003764; border-left: 2px solid transparent; border-bottom-color: #003764;}

/*--- MEGA MENU BUTTON ---*/ 
/*-----------------------*/ 
.cef-mega-menu-btn { margin-bottom: 1.5rem; display:inline-block !important; padding:0.75rem 1rem !important; min-width:100px !important; font-weight: bold !important; line-height:1.2em; text-align:center; text-transform: uppercase; text-decoration:none !important; border: 2px solid transparent; background: #FFCF00 !important; border-color:#FFCF00 !important; border-radius:7px; box-shadow: none;} 
.cef-mega-menu-btn:hover { background: #FFCF00 !important; border-color:#FFCF00 !important; box-shadow: none;} 
.cef-mega-menu-btn:focus { outline: 2px dashed black !important; outline-offset: 2px !important;} 
.cef-mega-menu-btn span { padding-left:2px; padding-right:2px; color:#003764 !important; border: 2px solid transparent;} 
.cef-mega-menu-btn:hover span { border-top: 2px solid transparent; border-right: 2px solid transparent; border-bottom: 2px solid #003764; border-left: 2px solid transparent; border-bottom-color: #003764;}

...