app/Resources/static/themes/material/css/cards.scss

   1 /* ==========================================================================
   2    Cards
   3    ========================================================================== */
   4
   5 main {
   6   #content {
   7     padding: 0 0.5rem;
   8   }
   9
  10   ul.row {
  11     margin: 0.4rem 0 0;
  12     padding: 0 0.75rem;
  13   }
  14 }
  15
  16 .data .card .card-body {
  17   height: 19em;
  18   overflow: hidden;
  19 }
  20
  21 .card {
  22   .card-content .card-title,
  23   .card-reveal .card-title {
  24     line-height: 22.8px;
  25     max-height: 80px;
  26     font-size: 19px;
  27     font-family: roberto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  28     color: #313131;
  29   }
  30
  31   .card-stacked .card-content .card-title {
  32     display: inline-block;
  33   }
  34
  35   .card-content .activator,
  36   .card-reveal .activator {
  37     cursor: pointer;
  38     font-family: "Material Icons";
  39   }
  40
  41   .card-content i.right,
  42   .card-reveal i.right {
  43     margin-left: 0;
  44   }
  45
  46   .card-content .original {
  47     line-height: 24px;
  48     font-size: 15px;
  49   }
  50
  51   .card-entry-labels {
  52     position: absolute;
  53     top: 10px;
  54     z-index: 90;
  55     max-width: 50%;
  56   }
  57
  58   .card-entry-labels-hidden {
  59     margin: 2.5px auto;
  60   }
  61
  62   .card-entry-labels-hidden li {
  63     display: inline-block;
  64     background-color: $blueAccentColor;
  65     margin: 0 5px;
  66     padding: 5px 12px;
  67     border-radius: 3px;
  68     color: #fff;
  69     max-height: 2em;
  70     max-width: calc(100% - 15px);
  71     overflow: hidden;
  72     text-overflow: ellipsis;
  73     white-space: nowrap;
  74   }
  75
  76   .card-entry-labels-hidden li {
  77     display: inline-block;
  78     background-color: $blueAccentColor;
  79     margin: 0 5px;
  80     padding: 5px 12px;
  81     border-radius: 3px;
  82     color: #fff;
  83     max-height: 2em;
  84     max-width: calc(100% - 15px);
  85     overflow: hidden;
  86     text-overflow: ellipsis;
  87     white-space: nowrap;
  88   }
  89
  90   .card-content .estimatedTime {
  91     margin-bottom: 10px;
  92   }
  93
  94   .card-action {
  95     padding: 10px 5px 10px 15px;
  96
  97     ul.links {
  98       margin: 0;
  99       font-size: 24px;
 100       line-height: 24px;
 101     }
 102
 103     a {
 104       color: #fff;
 105       margin: 0;
 106     }
 107
 108     a:hover {
 109       color: #fff;
 110     }
 111
 112     ul.tools li a.tool {
 113       margin-right: 5px !important;
 114     }
 115
 116     .reading-time {
 117       display: inline-flex;
 118       vertical-align: middle;
 119
 120       span {
 121         margin-right: 5px;
 122       }
 123     }
 124   }
 125
 126   .card-image {
 127     height: 10em;
 128   }
 129
 130   .card-fullimage {
 131     height: 13.5em;
 132   }
 133
 134   .card-image .preview,
 135   .card-fullimage .preview {
 136     height: 14em;
 137     background: no-repeat 50%/cover;
 138     display: block;
 139   }
 140
 141   &.sw {
 142     max-width: 370px;
 143     margin-left: auto;
 144     margin-right: auto;
 145   }
 146 }
 147
 148 a.original:not(.waves-effect) {
 149   text-overflow: ellipsis;
 150   white-space: nowrap;
 151   overflow: hidden;
 152   display: block;
 153 }
 154
 155 .card-entry-labels li,
 156 .card-tag-labels li {
 157   margin: 10px 10px 10px auto;
 158   padding: 5px 12px 5px 16px !important;
 159   background-color: $blueAccentColor;
 160   border-radius: 0 3px 3px 0;
 161   color: #fff;
 162   cursor: default;
 163   max-height: 2em;
 164   overflow: hidden;
 165   text-overflow: ellipsis;
 166   white-space: nowrap;
 167 }
 168
 169 .card-entry-tags a,
 170 .card-entry-labels a,
 171 .card-tag-labels a,
 172 .card-entry-labels-hidden a,
 173 #list .chip a {
 174   text-decoration: none;
 175   font-weight: normal;
 176   color: #fff;
 177 }
 178
 179 .card-stacked {
 180   display: flex;
 181   flex-flow: row wrap;
 182
 183   &:hover ul.tools-list {
 184     display: inline;
 185     text-align: right;
 186   }
 187
 188   .preview {
 189     max-width: 100px;
 190     height: auto;
 191     margin-right: 10px;
 192     flex: 1;
 193
 194     img {
 195       max-width: 100%;
 196       max-height: 100%;
 197     }
 198   }
 199
 200   div.metadata {
 201     .chip {
 202       background-color: $blueAccentColor;
 203       padding: 0 15px 0 10px;
 204       margin: auto 2px;
 205       border-radius: 6px;
 206
 207       a,
 208       i {
 209         color: #fff;
 210       }
 211
 212       i.material-icons {
 213         float: right;
 214         font-size: 20px;
 215         line-height: 32px;
 216         padding-left: 8px;
 217       }
 218     }
 219   }
 220
 221   div.card-content {
 222     flex: 4;
 223   }
 224
 225   ul.tools-list {
 226     flex: 1;
 227     display: none;
 228     flex-basis: 5em;
 229     align-self: flex-end;
 230     float: right;
 231     max-width: 6em;
 232   }
 233 }
 234
 235 #content .collection .collection-item {
 236   min-height: 65px;
 237   height: auto;
 238 }
 239
 240 .quickstart .card .card-action a,
 241 .quickstart .card .card-action a:hover {
 242   color: #fff !important;
 243 }
 244
 245 .settings .div_tabs {
 246   padding-bottom: 15px;
 247 }