xp-dev.com Git - YouAndWeb_TwoToc/blob - client/app/seguici/seguici.scss

   1 .poster-view {
   2         margin-top: 30px;
   3 }
   4 .poster {
   5         overflow: hidden;
   6         position: relative;
   7         display: flex;
   8         height: 350px;
   9         width: 33.3%;
  10         float: left;
  11         border: 10px solid #FFF;
  12         box-sizing: border-box;
  13         align-items: center;
  14         justify-content: center;
  15 }
  16 .poster_show {
  17         width: 100% !important;
  18         border: 0 !important;
  19         margin-bottom: 30px;
  20 }
  21 .poster > img {
  22         min-width: 100%;
  23         min-height: 100%;
  24         flex-shrink: 0;
  25 }
  26 .poster.poster-wide {
  27         width: 66.6%;
  28 }
  29
  30 @media all and (max-width: 768px) {
  31         .poster {
  32                 width: 100% !important;
  33         }
  34 }
  35
  36 .poster_date {
  37         position: absolute;
  38         background: #FFF;
  39         font-family: "Oswald", sans-serif;
  40         font-size: 22px;
  41         font-weight: 300;
  42         color: #000;
  43         top: 0;
  44         left: 20px;
  45         text-transform: uppercase;
  46         text-align: center;
  47         padding: 10px 15px;
  48 }
  49
  50 .poster:hover {
  51         .poster_overlay {
  52                 display: block;
  53                 opacity: 1;
  54         }
  55         .poster_date {
  56                 display: none;
  57         }
  58 }
  59
  60 .poster_overlay {
  61         background-color: rgba(255,255,255,0.8);
  62         position: absolute;
  63         top: 0;
  64         left: 0;
  65         width: 100%;
  66         height: 100%;
  67         display:none;
  68         opacity: 0;
  69
  70         .poster_content {
  71                 text-align: center;
  72                 position: absolute;
  73                 top: 20px;
  74                 width: 100%;
  75                 color: #000;
  76                 padding: 20px;
  77
  78                 .avatar {
  79                         display: block;
  80                         margin: 0 auto;
  81                 }
  82
  83                 .user {
  84                         font-size: 16px;
  85                         margin: 0 0 5px;
  86                 }
  87
  88                 h3 {
  89                         margin: 0 0 10px;
  90                         font-family: "Oswald", sans-serif;
  91                         text-transform: uppercase;
  92                         font-weight: 700;
  93                         font-size: 20px;
  94                 }
  95
  96                 .rating {
  97                         font-size: 18px;
  98                 }
  99         }
 100 }