posterg-website/css/main.css

body {
    font-size:13px;
    /* background-color: #000; */
    color: #bbb;
}

.actif {
    font-family: 'heebobold';
}
#admin-menu {
    box-shadow: 0 0 3px #bbb;
}
.dropdown-menu {
    padding:0;
    border:0;
    border-radius:0;
    z-index:1001;
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: .25rem .5rem;
    font-size: 13px;
}

.navbar .navbar-toggler {
    border-color: transparent;
}

.navbar:hover .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,0,0,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.dropdown-menu {
    left:auto;
    right:0;
    text-align: right;
}

.nav-link {
    cursor:pointer;
}

/* menu langue */
#nav-lang input {
    color: rgba(170, 36, 36, 0.5);
    border:0;
    padding: .5rem 1rem;
    font-size: 13px;
    cursor:pointer;
    background-color:transparent;

}
#nav-lang input:hover {
    color: rgba(0,0,0,1);
}

/* titres et texte */
h1, h2, h3, h4, h5, h6, .navbar-brand {
    font-family: 'heeboregular';
}
.fat, h1.fat, h2.fat, h3.fat, h4.fat {
    font-family: 'heebobold';
}

.titre-ultra-tiny { font-size: 9px;} 
.titre-tiny {font-size:0.9em; font-family: 'heeboregular'; }
.titre-mini {font-size:1em; }
.titre-small { font-size: 1.25rem; font-family: 'heeboregular'; }
.titre-medium { font-size:2em;}
.titre { font-size:2.5em; }
.titre-big {font-size:3em;}

.texte-tiny { font-size: 0.7em; }
.texte-small {font-size: 0.9em;}
.texte { font-size: 1em; }
.texte-medium {font-size:1.1em;}
.texte-big { font-size: 1.4em; }
.texte-huge { font-size:1.8em;}
.texte-small.fat, texte-medium.fat, .texte.fat, .texte-big.fat, .texte-huge.fat, .texte-huge.fat {
    font-family: 'heeboregular';
}

.force-w { 
    width:100%;
}

.nolabel label {
    display:none !important;
}

.pointer {
    cursor:pointer;
}

/* affichage de la big grid */
/* affichage des items de la galerie */
#items-container {
    font-size:11px;   
}
#items-container .tag-titre {
    font-family: 'heebomedium';
    margin-bottom:0.3em;
    font-size:14px;
}

.item, .collection {
    cursor:pointer;  
}

.item.actuel .item-illu, .collection.actuel {
    box-shadow: 0 5px 6px #ddd;
    border: 2px solid #ccc;
} 



#items-container.show-collection .item {
    display:none;
}
#items-container.show-collection .item.selected {
    display:block;
}

#items-container.multi-select .item {
    opacity: 0.4;
}
#items-container.multi-select .item.selected {
    opacity: 1;
}

#items-container.multi-select .sortable-chosen {
    background-color:#fff;
    border:2px solid #666;
}

#items-container.multi-select .item-ghost {
    opacity:0.5;
    border:0;
}

#collection-display .px-3 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.collection-form-button {
    position:absolute;
    right:0;
}

.bigimage {
    height:80vh;
    background-position:center center;
    background-size:cover;
}

.header-icone img, figure img {
    max-width: 100%;
}

.network_icon { 
    width:20px; height:20px;
}

.form-control-usm {
    height: calc(1.8125rem + 2px);
    padding: .25rem .5rem;
    padding-left: 0.5rem;
    font-size: .7rem;
    line-height: 1.5;
    border-radius: .2rem; 
}

textarea.form-control {
    height: 10em;
}
.form-image {
    position: relative;
}
.form-image .item-tools {
    position:absolute;
    top:10px;
    right:22px;
}

.trumbowyg-editor, .trumbowyg-textarea {
    padding: 10px;
}
.trumbowyg-box, .trumbowyg-editor {
    margin-top:0;   
}

.content-scrollable {
    height:calc(100vh - 6.5rem);
    overflow-y: scroll; /* Hide vertical scrollbar */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.content-scrollable::-webkit-scrollbar {
    display: none;
}

/* viewers -------- */

.sep-virgule .viewer-item:not(:last-child):after {
    content: ", ";
    padding-right:0.2rem;
}
.sep-tiret .viewer-item:not(:last-child):after {
    content: " - ";
    padding-right:0.2rem;
}

#big-container {
    position:relative;
    display:flex;
}

#items-container, #collections-container {
    width:100%;
    transition-property: width;
    transition-timing-function: linear;
    transition-duration:0.4s;
    align-content:flex-start;
    font-size:12px;
    overflow:hidden;
    margin-left: 5px;
    margin-right: 5px;
}

[data-type-affichage="show-collections"] #collections-container  {
    display:flex;
}
[data-type-affichage="show-collections"] #items-container  {
    display:none;
}
[data-type-affichage="show-items"] #collections-container  {
    display:none;
}
[data-type-affichage="show-items"] #items-container  {
    display:flex;
}

#side-container {
    width:0;
    min-height:100%;
    background-color: #fff;
}

.container-inner {
    position:sticky;
    top:15px;
    transform:translateX(100%);
    transition-property: transform, opacity;
    transition-duration:0.3s;
    transition-delay: 0.4s;
    opacity:1;
}

#side-container .container-inner {
    max-height: 100vh;
    overflow-y: scroll;
}

#side-container .container-inner > div {
    padding-bottom:2em;
}

.wait .container-inner {
    opacity:0; 
    /*transition: all linear 0.5s;*/
}

[display-viewer='on'][display-container=side-container] #side-container {
    width:33.33333%;
    border-left: 1px solid #dee2e6 !important;

}
[display-viewer='on'] .container-inner {
    transform:translateX(0);
}

[display-viewer='on'][display-container=side-container] #items-container {
    width:66.6666%;
}

#side-container.wait, .fullframe.wait {
    background-image:url(ajax-loader.gif);
    background-position: center center;
    background-repeat:no-repeat;
    /* background-color:rgba(255,255,255,0.7);
    transition: background-color linear 0.5s; */
}

.fullframe  {
    position:fixed;
    top:0;
    left:100vw;
    width:100vw;
    height:100vh;
    background-color:rgba(255,255,255,1);
    box-sizing: border-box;
    box-shadow: 0 0 6px #ddd;
    z-index:1002;
    overflow-y:scroll;
    display:none;
    opacity:0;
    transition:opacity linear 1s;
}

[display-viewer='on'][display-container=fullpage-container] #fullpage-container, [display-viewer='on'][display-container=gal-container] #gal-container {
    opacity:1; 
    display:block;
    left:0;
}

.fullframe .container-inner {
    padding:10px;
    height:100%;
}

img.viewer-main-illu {
}

.fullframe .viewer-main-illu {
    width:100%;
    height:100%;
    object-fit: contain;
    object-position: 50% 0;
}

.viewer-main-illu-container {
    position:relative;
} 

#gal-container .item-info {
    position: absolute;
    bottom:30px;
    left:0;
    text-align: center;
    width:100%;
}

#gal-container .item-info div {
    display:inline;
    background-color:#333;
    color:#fff;
    padding:6px 12px;
    border-radius:40px;
}

[data-nav='only-close'] .button-next, [data-nav='only-close'] .button-prev, [data-nav='only-close'] .button-full, [data-nav='only-close'] .icon-viewer {
    display:none;
}
[data-nav='full'] .button-next, [data-nav='full'] .button-prev {
    display:block;
}

.container-buttons {
    display:flex;
    justify-content:space-between;
    margin-bottom:10px;
}

#gal-container .container-buttons {
    position:absolute;
    width:calc(100% - 20px);
}
.buttons-left, .buttons-right {
    display:flex;
}

.button { 
    color: #444;
    background-color: #eee;
    cursor: pointer;
    font-size: 12px;
    text-align: center;
    border-radius: 4px;
    margin-right: 3px;
    padding: 4px 6px;
    min-width: 26px;
    border:0;

}
.button.icon-viewer {
    padding: 6px;
}
.button.icon-viewer img {
    height:14px;
    display: block;
}
.button-back {
    position:absolute;
    top:10px;
    right:20px;
    display:none;
}

.button.check {
    background-color:red;
    color:#fff;
}
.button:hover {
    background-color:#ccc;
    color:#000;
}
.container-buttons .button-close {
    color: #cc0000;
}

.button-collection-edit {
    position:absolute;
    top:10px;
    left:20px;
}

.item-edit {
    position:absolute;
    right:30px;
    top:10px;
    background-color:#f5f5f5;
    padding:4px;
    border-radius:4px;
    font-size:13px;
    color:#000;
    width:28px;
    height:28px;
    text-align: center;
    display:none;
    cursor:pointer;
}

.item:hover .item-edit {
    display:block;
}
.item-edit:hover {
    background-color:greenyellow;
}

#galerie-container[data-show='full'] {
    left:10px;
    opacity:1;
}

/*  afichage en galerie  */
#gal-container .container-inner {
    padding:10px;
    height:100%;
    width: 100%;
}

#gal-container  .container-inner img {
    width:100%;
    height:100%;
    object-fit: contain;
    object-position: 50% 0;
}

[data-import='false']{
    background-color:#9f0202;
    opacity:0.6;
    color:#fff;
    text-decoration: line-through
}

[data-import='false'] .fa {
    color:#fff;
}

.viewer-grid {
    display: flex;
    flex-wrap: wrap;
    margin-left:-2px;
    margin-right:-2px;
}
.viewer-grid.grid-text {
    display:block;
}

.viewer-grid-item {
    box-sizing: border-box;
    border:2px #fff solid;   
}
.viewer-grid.grid3 .viewer-grid-item {
    width:33.3333%;
}

.viewer-grid.grid2 .viewer-grid-item {
    width:50%;
}
.viewer-grid.grid1 .viewer-grid-item {
    width:100%;
}

:fullscreen .button-full {
    display:none;
}
#fullpage-container:fullscreen .container-inner {
    padding:20px;
}

#gal-container .icon-showgal, #fullpage-container .icon-showfull, #side-container .icon-showlat {
    display:none;
}

.wait-submit {
    filter: blur(3px);
}


@media (max-width: 992px){
    #admin-menu {
        box-shadow: none;
        padding:0;
    }
    #admin-menu hr{
        display:none;
    }
    .dropdown-menu {
        text-align: left;
    }
    .dropdown-item {
        display:inline;  
        padding:0;
    }
    .dropdown-item:after {
        content: ", ";   
    } 
    .dropdown-item:last-child:after {
        content: ".";   
    }
    .bigimage {
        height:60vh;
    }

    img.viewer-main-illu {
        height:auto;
    }
    .fullframe .container-inner {
        height: auto;
    }
}

@media (max-width: 768px){
    .bigimage {
        height:45vh;
    }
}

@media (max-width: 576px){
    .bigimage {
        height:35vh;
    }
    .h-100 {
        height:auto !important;
    }
    
    .h-100vh {
    height: 100vh;
}

    #side-container {
        position:fixed;
        top:0;
        left:0;

    }
    [display-viewer="on"][display-container="side-container"] #side-container {
        width:100%;
        height: 100vh;
        border-left:0;
        overflow-y:scroll;
    }
    #gal-container .container-buttons {
        position:static;
        width:100%;
    }
}