/* CSS here is not pre-processed in any way */ /* It is injected right after the opening of all front-end pages */ #open-front-end-admin-bar{ position:fixed; top:8px; left:8px; z-index:1050; border:none; border-radius:50%; height:30px; width:30px; display:flex; align-items:center; justify-content: center; background-color:rgb(60,60,60); color:white; cursor:pointer; } #open-front-end-admin-bar:hover{ background-color:rgb(80,80,80); } #close-front-end-bar{ border:none; height:38px; width:38px; display:flex; align-items:center; justify-content: center; background-color:rgb(190,60,60); color:white; cursor:pointer; } #close-front-end-bar:hover{ background-color:rgb(220,80,80); } #front-end-admin-bar{ display:flex; position:fixed; width:100%; top:0; left:0; height:38px; z-index:1050; font-family:sans-serif; transition:left 300ms; } #front-end-admin-bar .admin-label{ margin-right:4px; } #front-end-admin-bar .page-label{ margin-left:4px; } #front-end-admin-bar .main-front-end-bar-bg{ display:flex; align-items:center; flex-grow:1; background-color:rgb(60,60,60); } #front-end-admin-bar .fbm-cms-admin-bar-info-container{ display:flex; align-items:center; width:100%; height:100%; } #front-end-admin-bar .fbm-cms-admin-bar-info-container > *{ flex-grow:1; height:100%; } #front-end-admin-bar .fbm-cms-admin-bar-user-info-container{ color:white; display:flex; align-items:center; justify-content: flex-end; } #front-end-admin-bar .fbm-cms-admin-bar-user-info-container .fbm-cms-admin-bar-greeting{ margin-right:4px; } #front-end-admin-bar .fbm-cms-admin-bar-user-info-container .fbm-cms-admin-bar-user-name{ margin-right:1rem; } #front-end-admin-bar .front-end-admin-bar-links > a{ background-color:rgb(80,80,80); height:100%; display:inline-flex; align-items:center; padding-left:1rem; padding-right:1rem; color:white; text-decoration:none; } #front-end-admin-bar .front-end-admin-bar-links > a:hover{ background-color:rgb(102,102,102); text-decoration:none; } #front-end-admin-bar .front-end-admin-bar-links > img{ margin:0 1rem; } @media screen and (max-width:1200px){ #front-end-admin-bar{ } #front-end-admin-bar .front-end-admin-bar-links > a{ font-size:0.8rem; padding-left:0.5rem; padding-right:0.5rem; } #front-end-admin-bar .fbm-cms-admin-bar-greeting{ display:none; } #front-end-admin-bar .fbm-cms-admin-bar-user-name{ font-size:0.8rem; display:block; max-width:100px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #front-end-admin-bar .no-small-screen{ display:none; } } #f-p{ background-color:rgb(60,60,60); padding:0.5rem 1rem; font-family:sans-serif; text-align:center; display:flex; align-items:center; justify-content: center; color:white; font-size:0.92rem; } #f-p > a > div{ display:flex; align-items:center; justify-content: center; margin:0.2rem 0; } #f-p > a{ text-decoration:none; color:white; } #f-p > a > span{ margin-right:8px; } @media screen and (max-width:768px){ #f-p{ font-size:0.83rem; } }