socialnetworknews-web

A open-source Paper.li clone
git clone git://archive.git.mtrnord.blog/SocialNetworkNews/socialnetworknews-web.git
Log | Files | Refs | README | LICENSE

tweet-list.component.scss (2451B)

      1 .gridTweetList {
      2   display: flex;
      3   flex-direction: column;
      4   flex-wrap: wrap;
      5   padding: 2.500em;
      6 
      7   // Without a set height, the effect can't be achieved.
      8   height: 250%; // Percent
      9 }
     10 
     11 .gridTweetList>* {
     12   margin: .5em;
     13   position: relative;
     14 }
     15 
     16 /* Made by https://codepen.io/gschier/pen/HCoqh */
     17 
     18 .lightbox {
     19   /** Default lightbox to hidden */
     20   display: none;
     21   overflow: hidden;
     22 
     23   /** Position and style */
     24   position: fixed;
     25   z-index: 999;
     26   width: 100%;
     27   height: 100%;
     28   text-align: center;
     29   top: 0;
     30   left: 0;
     31   background: rgba(0,0,0,0.8);
     32 }
     33 
     34 .lightbox > .img-wrapper {
     35   width: 70%;
     36   height: 70%;
     37   overflow: hidden;
     38   margin: auto;
     39   position: absolute;
     40   top: 0;
     41   left: 0;
     42   bottom: 0;
     43   right: 0;
     44 }
     45 
     46 .lightbox > .img-wrapper img {
     47   /** Pad the lightbox image */
     48   overflow: hidden;
     49   max-width: 100%;
     50   max-height: 100%;
     51   //margin-top: 2%;
     52   position: relative;
     53 }
     54 
     55 .lightbox:target {
     56   /** Remove default browser outline */
     57   outline: none;
     58 
     59   /** Unhide lightbox **/
     60   display: block;
     61 }
     62 
     63 /* The ribbons by https://codepen.io/nxworld/pen/oLdoWb */
     64 /* common */
     65 .ribbon {
     66   width: 150px;
     67   height: 150px;
     68   overflow: hidden;
     69   position: absolute;
     70   z-index: 1;
     71 }
     72 .ribbon::before,
     73 .ribbon::after {
     74   position: absolute;
     75   z-index: -1;
     76   content: '';
     77   display: block;
     78   border: 5px solid #2980b9;
     79 }
     80 .ribbon span {
     81   position: absolute;
     82   display: block;
     83   width: 225px;
     84   padding: 8px 0;
     85   background-color: #1da1f2;
     86   box-shadow: 0 5px 10px rgba(0,0,0,.1);
     87   color: #fff;
     88   font: 700 18px/1 'Lato', sans-serif;
     89   text-shadow: 0 1px 1px rgba(0,0,0,.2);
     90   text-transform: uppercase;
     91   text-align: center;
     92 }
     93 
     94 /* top left*/
     95 .ribbon-top-left {
     96   top: -10px;
     97   left: -10px;
     98 }
     99 .ribbon-top-left::before,
    100 .ribbon-top-left::after {
    101   border-top-color: transparent;
    102   border-left-color: transparent;
    103 }
    104 .ribbon-top-left::before {
    105   top: 0;
    106   right: 17px;
    107 }
    108 .ribbon-top-left::after {
    109   bottom: 17px;
    110   left: 0;
    111 }
    112 .ribbon-top-left span {
    113   right: -25px;
    114   top: 30px;
    115   transform: rotate(-45deg);
    116 }
    117 
    118 /* top right*/
    119 .ribbon-top-right {
    120   top: -10px;
    121   right: -10px;
    122 }
    123 .ribbon-top-right::before,
    124 .ribbon-top-right::after {
    125   border-top-color: transparent;
    126   border-right-color: transparent;
    127 }
    128 .ribbon-top-right::before {
    129   top: 0;
    130   left: 17px;
    131 }
    132 .ribbon-top-right::after {
    133   bottom: 17px;
    134   right: 0;
    135 }
    136 .ribbon-top-right span {
    137   left: -25px;
    138   top: 30px;
    139   transform: rotate(45deg);
    140 }
    141 
    142 .mat-card-image:first-child {
    143   margin-top: 0 !important;
    144 }