php_app/app/assets/stylesheets/manager.scss

/* manager.css */
#manager_box_place{
    position:fixed;
  height:0;
  width:100%;
  z-index:1500;
  top:0px;
  margin:0px;
  padding:0px;
  display:none;

}
#manager_box{
  position:relative;
  width:98%;
  height:98%;
  overflow:auto;

  margin:auto;
  margin-top:0px;

  background:white;
  
  box-shadow:  rgba(0,0,0,0.8) 1px 1px 50px;




}

#manager_box_place.manager_box_place_active{
  height:95%;


}









#image_files .image_file .img {
  text-align:center;
  width:150px;
  height:150px;
  margin:0px;
  
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    -moz-background-size: contain;
    -webkit-background-size: contain; 


}


#image_files .image_file .name {

  padding:4px 0px 2px 0px;
  font-size:10px;
  text-align:center;

}

#image_files .image_file {
  float:left;
  padding:8px;
  margin:2px;
  border:4px solid white;

  /* webkit */
  -webkit-transition-property: background-color;
  -webkit-transition-duration: 0.5s;

  /* Firefox */
  -moz-transition-property: background-color;
  -moz-transition-duration: 0.5s;

  /* standardisé */
  transition-property: background-color;
  transition-duration: 0.5s;



}

#image_files .image_file.active {

  background-color: rgba(181,205,226,1);

}







/* Aperçu des images */

#image_files_navbar{
left:300px;
background:rgba(247,245,246,0.9);
}

#image_files_big_container{
  
  position:absolute;
  top:0px;
  left:0px;
  bottom:0px;
  right:0px;

  
  
  
  
  #image_files_container{
  
  position:absolute;
  top:0px;
  left:300px;
  bottom:0px;
  right:0px;
  overflow:auto;
  background:white;
  
  padding:20px;
  padding-bottom:60px;
  }
  #albums_navbar{
  position:absolute;
  
  width:299px;
  bottom:0px;
  left:0px;
  border-top:1px solid rgba(191,191,191,1);
  height:51px;
  background:rgba(220,220,220,1);
  a{
  color:#5e5e5e;
  font-size:1.5em;
  position:absolute;
  top:10px;
  
  }
  #add_album{
  left:10px;
  }
  
  #edit_current_album{
  
  right:10px;
  }
  
  #remove_current_album{
  
  right:50px;
  }
  }
  
  #albums{
  padding-bottom:60px;
  position:absolute;
  top:0px;
  width:300px;
  bottom:0px;
  left:0px;
  overflow:auto;
  background:rgba(230,230,230,1);
  border-right:1px solid rgba(191,191,191,1);
  
  
  
  ul{
  padding-top: 1.2em;
  li{
  border-top:1px solid rgba(191,191,191,0.5) ;
  position:static;
  
  
  a{
  position:static;
  color:rgba(0,0,0,0.8);
  &:hover, &.active{
  background:rgba(220,220,220,1);
  
  }
  }
  
  #edit_current_album{
  position:absolute;
  top:10px;
  }
  
  }


  }
  
  }
  
  
}










/* Aperçu des images */

#data_files_navbar{
left:300px;
background:rgba(247,245,246,0.9);
}

#data_files_big_container{
  
  position:absolute;
  top:0px;
  left:0px;
  bottom:0px;
  right:0px;

  
  
  
  
  #data_files_container{
    width:auto;
  position:absolute;
  top:0px;
  left:300px;
  bottom:0px;
  right:0px;
  overflow:auto;
  background:white;
  
  padding:20px;
  padding-bottom:60px;
  }
  #file_folders_navbar{
  position:absolute;
  
  width:299px;
  bottom:0px;
  left:0px;
  border-top:1px solid rgba(191,191,191,1);
  height:51px;
  background:rgba(220,220,220,1);
  a{
  color:#5e5e5e;
  font-size:1.5em;
  position:absolute;
  top:10px;
  
  }
  #add_file_folder{
  left:10px;
  }
  
  #edit_current_file_folder{
  
  right:10px;
  }
  
  #remove_current_file_folder{
  
  right:50px;
  }
  }
  
  #file_folders{
  padding-bottom:60px;
  position:absolute;
  top:0px;
  width:300px;
  bottom:0px;
  left:0px;
  overflow:auto;
  background:rgba(230,230,230,1);
  border-right:1px solid rgba(191,191,191,1);
  
  
  
  ul{
  padding-top: 1.2em;
  li{
  border-top:1px solid rgba(191,191,191,0.5) ;
  position:static;
  
  
  a{
  position:static;
  color:rgba(0,0,0,0.8);
  &:hover, &.active{
  background:rgba(220,220,220,1);
  
  }
  }
  
  #edit_current_file_folder{
  position:absolute;
  top:10px;
  }
  
  }


  }
  
  }
  
  
}