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 @mixin mixin-reading-time {
  22   .reading-time {
  23     display: inline-flex;
  24     vertical-align: middle;
  25
  26     .card-reading-time,
  27     .card-created-at {
  28       display: inline-flex;
  29     }
  30
  31     span {
  32       margin-right: 5px;
  33     }
  34
  35     @content;
  36   }
  37 }
  38
  39 .card {
  40   .card-content .card-title,
  41   .card-reveal .card-title {
  42     line-height: 22.8px;
  43     max-height: 80px;
  44     font-size: 19px;
  45     font-family: roberto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  46   }
  47
  48   .card-stacked .card-content .card-title {
  49     display: inline-block;
  50   }
  51
  52   .card-content .activator,
  53   .card-reveal .activator {
  54     cursor: pointer;
  55     font-family: "Material Icons";
  56   }
  57
  58   .card-content i.right,
  59   .card-reveal i.right {
  60     margin-left: 0;
  61   }
  62
  63   .card-content .original {
  64     line-height: 24px;
  65     font-size: 15px;
  66   }
  67
  68   .card-entry-labels {
  69     position: absolute;
  70     top: 10px;
  71     z-index: 90;
  72     max-width: 50%;
  73   }
  74
  75   .card-entry-labels-hidden {
  76     margin: 2.5px auto;
  77   }
  78
  79   .card-entry-labels-hidden li {
  80     display: inline-block;
  81     background-color: $blueAccentColor;
  82     margin: 0 5px;
  83     padding: 5px 12px;
  84     border-radius: 3px;
  85     color: #fff;
  86     max-height: 2em;
  87     max-width: calc(100% - 15px);
  88     overflow: hidden;
  89     text-overflow: ellipsis;
  90     white-space: nowrap;
  91   }
  92
  93   .card-content .estimatedTime {
  94     margin-bottom: 10px;
  95   }
  96
  97   .card-action {
  98     padding: 10px 5px 10px 15px;
  99
 100     ul.links {
 101       margin: 0;
 102       font-size: 24px;
 103       line-height: 24px;
 104     }
 105
 106     a {
 107       color: #fff;
 108       margin: 0;
 109     }
 110
 111     a:hover {
 112       color: #fff;
 113     }
 114
 115     ul.tools li a.tool {
 116       margin-right: 5px !important;
 117     }
 118
 119     @include mixin-reading-time;
 120   }
 121
 122   .card-image {
 123     height: 10em;
 124   }
 125
 126   .card-fullimage {
 127     height: 13.5em;
 128   }
 129
 130   &.sw {
 131     max-width: 370px;
 132     margin-left: auto;
 133     margin-right: auto;
 134   }
 135 }
 136
 137 a.original:not(.waves-effect) {
 138   text-overflow: ellipsis;
 139   white-space: nowrap;
 140   overflow: hidden;
 141   display: block;
 142 }
 143
 144 .card .card-image .preview,
 145 .card .card-fullimage .preview,
 146 .card-stacked .preview {
 147   height: 100%;
 148   background: no-repeat 50%/cover;
 149   background-color: #efefef;
 150   display: block;
 151
 152   &--default {
 153     background-size: contain;
 154   }
 155 }
 156
 157 .card-entry-labels li,
 158 .card-tag-labels li {
 159   margin: 10px 10px 10px auto;
 160   padding: 5px 12px 5px 16px !important;
 161   background-color: $blueAccentColor;
 162   border-radius: 3px;
 163   color: #fff;
 164   cursor: default;
 165 }
 166
 167 .card-entry-labels li {
 168   text-overflow: ellipsis;
 169   white-space: nowrap;
 170   border-radius: 0 3px 3px 0;
 171   overflow: hidden;
 172 }
 173
 174 .card-tag-labels li {
 175   display: flex;
 176   justify-content: space-between;
 177 }
 178
 179 .card-entry-tags a,
 180 .card-entry-labels a,
 181 .card-tag-labels a,
 182 .card-entry-labels-hidden a,
 183 #list .chip a {
 184   text-decoration: none;
 185   font-weight: normal;
 186   color: #fff;
 187 }
 188
 189 .card-tag-labels a {
 190   height: 100%;
 191   align-items: center;
 192 }
 193
 194 .card-tag-link {
 195   display: flex;
 196   min-width: 100px;
 197   flex-grow: 1;
 198 }
 199
 200 .card-tag-form {
 201   display: flex;
 202   min-width: 100px;
 203   flex-grow: 1;
 204 }
 205
 206 .card-tag-form input {
 207   margin-bottom: 0;
 208   height: 2rem;
 209 }
 210
 211 .card-tag-rss {
 212   display: flex;
 213 }
 214
 215 .card-tag-labels {
 216   display: flex;
 217   flex-wrap: wrap;
 218 }
 219
 220 .card-tag-labels li {
 221   margin: 10px;
 222   flex-basis: 19%;
 223   flex-grow: 1;
 224   align-items: center;
 225 }
 226
 227 .card-stacked {
 228   display: flex;
 229   flex-flow: row wrap;
 230
 231   &:hover ul.tools-list {
 232     display: inline;
 233     text-align: right;
 234   }
 235
 236   .card-preview {
 237     max-width: 100px;
 238     max-height: 50px;
 239     margin-right: 10px;
 240     flex: 1;
 241   }
 242
 243   div.metadata {
 244     overflow: hidden;
 245     height: 1.5em;
 246     display: flex;
 247
 248     ul.tags {
 249       margin-left: 4px;
 250     }
 251
 252     .chip {
 253       background-color: $blueAccentColor;
 254       padding: 0 7px;
 255       margin: auto 1px;
 256       border-radius: 6px;
 257       line-height: 22px;
 258       height: 22px;
 259
 260       a,
 261       i {
 262         color: #fff;
 263       }
 264
 265       i.material-icons {
 266         float: right;
 267         font-size: 20px;
 268         line-height: 32px;
 269         padding-left: 8px;
 270       }
 271     }
 272
 273     @include mixin-reading-time {
 274       padding: 0 5px;
 275       flex-wrap: wrap;
 276       margin-left: auto;
 277
 278       i.material-icons {
 279         font-size: 20px;
 280       }
 281     }
 282   }
 283
 284   div.card-content {
 285     flex: 4;
 286   }
 287
 288   ul.tools-list {
 289     flex: 1;
 290     display: none;
 291     flex-basis: 5em;
 292     align-self: flex-end;
 293     float: right;
 294     max-width: 6em;
 295   }
 296
 297   .tags {
 298     display: inline-block;
 299   }
 300 }
 301
 302 #content .collection .collection-item {
 303   min-height: 65px;
 304   height: auto;
 305 }
 306
 307 .quickstart .card .card-action a,
 308 .quickstart .card .card-action a:hover {
 309   color: #fff !important;
 310 }
 311
 312 .settings .div_tabs {
 313   padding-bottom: 15px;
 314 }