536 lines
7.8 KiB
SCSS

#default_image{
background: center center ;
height:600px;
background-size:100%;
background-size:cover;
max-width:1200px;
margin:10px auto;
position:relative;
border-radius:5px;
cursor:pointer;
}
#default_image_container{
margin-top:-10px;
position:relative;
overflow:hidden;
//background:#383F42;
}
#default_image_blur{
position:absolute;
top:-30px;
left:-30px;
right:-30px;
bottom:-30px;
-webkit-filter: blur(20px); -moz-filter: blur(20px); -o-filter: blur(20px); -ms-filter: blur(20px); filter: blur(20px);
background: #383F42 center center ;
background-size:100%;
background-size:cover;
}
.annonce_header_container{
height:50px;
.annonce_header{
padding:0 10px;
h1{
font-size:23px;
}
&.move_top{
background:white;
background:rgba(255,255,255,0.95);
box-shadow:0 0 5px rgba(0,0,0,0.5);
position:fixed;
top:0;
left:0;
right:0;
max-width:none;
z-index:10;
h1{
margin:0;
padding:10px;
}
.price{
padding:10px 10px;
padding-left:20px;
}
.localisation{
padding:15px 10px;
}
}
.localisation{
padding:5px 10px;
float:right;
}
.price{
text-align:right;
font-size:1.5em;
font-weight:600;
float:right;
padding-left:20px;
}
.fav{
float:none;
position:static;
display:inline;
cursor:pointer;
}
}
}
#annonce{
max-width:1200px;
margin:auto;
.annonce_link{
margin:10px 0;
padding:10px;
display:block;
text-align:center;
}
#corps{
background:white;
position:relative;
float:left;
width:70%;
padding:10px;
margin-left:10px;
min-height:300px;
margin-top:10px;
margin-bottom:20px;
h1{
margin-top:0;
}
.rea-gal img{
height:165px;
}
}
#infos{
.annonce_owner{
background:white;
padding:10px;
padding-top:20px;
.head{
text-align:center;
}
img{
width:60px;
border-radius:50%;
display:block;
margin:auto;
}
.security_panel{
padding:10px;
h3{
margin-top:0;
display:none;
}
ul{
list-style:none;
padding:0;
}
}
}
width:25%;
float:right;
padding:10px 0px;
}
.annonce_photos{
margin-bottom:1em;
}
}
#annonce_photos{
.annonce_photo{
float:left;
height:220px;
width:250px;
text-align:center;
margin:5px;
background:white;
img{
max-width:100%;
max-height:200px;
padding:5px;
display:block;
margin:auto;
}
}
}
.annonce_line{
color:black;
cursor:pointer;
background:rgba(247,249,250,1);
margin:10px 14px;
border:2px solid white;
position:relative;
display:block;
.price{
float:right;
}
h3{
margin-top:0px;
font-size:16px;
color:rgba(0,0,0,0.7);
}
.urgent{
position:absolute;
top:-2px;
left:-2px;
width:160px;
}
.default_image{
width:250px;
height:160px;
float:left;
background-position:center center;
background-repeat:no-repeat;
background-size:100%;
background-size:cover;
background-color:rgba(200,203,204,1);
}
.infos{
height:80px;
padding:10px;
padding-top:15px;
padding-left:260px;
color:rgba(0,0,0,0.5);
}
.specific{
font-style:italic;
font-size:13px;
}
&.highlight{
background:rgba(0,0,0,0.7);
box-shadow:0 0 15px rgba(0,0,0,0.5);
.infos{
color:white;
}
h3{
color:white;
}
}
&.big{
&.big{
.default_image{
//border-right:2px solid white;
}
}
.default_image{
width:400px;
float:left;
height:280px;
}
.infos{
padding-left:410px;
}
}
&:hover{
color:black;
border-color:rgba(64,138,199,1);
text-decoration:none;
}
}
.search_results{
padding:5px 6px;
}
.annonce_list{
color:black;
//border-radius:5px;
float:left;
width:30%;
cursor:pointer;
max-width:450px;
margin:10px 8px;
//background:white;
position:relative;
//box-shadow:0 0 20px rgba(0,0,0,0.1);
.price{
position:absolute;
bottom:100px;
right:0;
background:rgba(0,0,0,0.7);
padding:5px 10px;
color:white;
.fav{
display:inline;
position:static;
padding:0;
padding-left:5px;
}
}
.avatar img{
position:absolute;
bottom:90px;
left:10px;
border-radius:50%;
width:50px;
border:2px solid rgba(255,255,255,0.8);
}
h3{
margin-top:0px;
font-size:15px;
padding-top:0;
color:rgba(0,0,0,0.7);
}
.urgent{
position:absolute;
top:-2px;
left:-2px;
width:160px;
}
.default_image{
//border-radius:5px 5px 0 0;
height:250px;
background-position:center center;
background-repeat:no-repeat;
background-size:100%;
background-size:cover;
background-color:rgba(200,203,204,1);
}
.infos{
height:80px;
padding:0px;
padding-top:10px;
left:0;
right:0;
color:rgba(0,0,0,0.5);
}
.specific{
font-style:italic;
font-size:13px;
}
&.highlight{
background:rgba(253,121,57,1);
.default_image{
border:5px solid rgba(253,121,57,1);
border-bottom:0px;
}
box-shadow:0 0 20px rgba(0,0,0,0.5);
.price{
background:rgba(253,121,57,0.8);
}
.infos{
color:white;
padding-left:5px;
padding-right:5px;
}
h3{
color:white;
}
}
&.big{
width:100%;
max-width:100%;
margin-top:20px;
margin-bottom:40px;
&.big{
.default_image{
//border-right:2px solid white;
}
}
.default_image{
width:60%;
float:left;
height:400px;
}
.infos{
margin-left:60%;
}
}
&:hover{
color:black;
border-color:rgba(64,138,199,1);
text-decoration:none;
}
}
#annonce_form_large{
padding:20px 10px;
}
#specific_large{
padding:20px 10px;
}
#annonce_photos_large{
background:rgba(0,0,0,0.7);
padding:10px;
color:white;
}
#annonce_save{
h3{
text-align:left;
}
&.fixed{
position:fixed !important;
top:30px !important;
z-index:10;
}
}
.first_cats{
text-align:center;
background:$blue;
padding:1em 0;
h3{
color:white;
text-align:center;
padding:0;
margin:0;
margin:10px 0;
}
a{
display:inline-block;
color:white;
.icon{
font-size:3em;
background:white;
color:$blue;
width:100px;
text-align:center;
height:100px;
border-radius:50%;
margin:auto;
margin-bottom:5px;
padding-top:15px;
}
text-align:center;
width:20%;
margin:2%;
}
}
#photo_preview{
position:relative;
overflow:hidden;
cursor:pointer;
img{
position:relative;
display:block;
margin:auto;
max-width:100%;
max-height:500px;
}
.default_image_blur{
background:no-repeat center center;
background-size:100%;
background-size:cover;
position:absolute;
top:-20px;
left:-20px;
right:-20px;
bottom:-20px;
opacity:1;
-webkit-filter: blur(20px);
-moz-filter: blur(20px);
-o-filter: blur(20px);
-ms-filter: blur(20px);
filter: blur(20px);
}
margin-bottom:10px;
}