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-content .estimatedTime {
  77     margin-bottom: 10px;
  78   }
  79
  80   .card-action {
  81     padding: 10px 5px 10px 15px;
  82
  83     ul.links {
  84       margin: 0;
  85       font-size: 24px;
  86       line-height: 24px;
  87     }
  88
  89     a {
  90       color: #fff;
  91       margin: 0;
  92     }
  93
  94     a:hover {
  95       color: #fff;
  96     }
  97
  98     ul.tools li a.tool {
  99       margin-right: 5px !important;
 100     }
 101
 102     .reading-time {
 103       display: inline-flex;
 104       vertical-align: middle;
 105
 106       span {
 107         margin-right: 5px;
 108       }
 109     }
 110   }
 111
 112   .card-image {
 113     height: 10em;
 114   }
 115
 116   .card-fullimage {
 117     height: 13.5em;
 118   }
 119
 120   .card-image .preview,
 121   .card-fullimage .preview {
 122     height: 14em;
 123     background: no-repeat 50%/cover;
 124     display: block;
 125   }
 126
 127   &.sw {
 128     max-width: 370px;
 129     margin-left: auto;
 130     margin-right: auto;
 131   }
 132 }
 133
 134 a.original:not(.waves-effect) {
 135   text-overflow: ellipsis;
 136   white-space: nowrap;
 137   overflow: hidden;
 138   display: block;
 139 }
 140
 141 .card-entry-labels li,
 142 .card-tag-labels li {
 143   margin: 10px 10px 10px auto;
 144   padding: 5px 12px 5px 16px !important;
 145   background-color: $blueAccentColor;
 146   border-radius: 3px;
 147   color: #fff;
 148   cursor: default;
 149 }
 150
 151 .card-entry-labels li {
 152   text-overflow: ellipsis;
 153   white-space: nowrap;
 154   border-radius: 0 3px 3px 0;
 155   overflow: hidden;
 156 }
 157
 158 .card-tag-labels li {
 159   display: flex;
 160   justify-content: space-between;
 161 }
 162
 163 .card-entry-tags a,
 164 .card-entry-labels a,
 165 .card-tag-labels a,
 166 .card-entry-labels-hidden a,
 167 #list .chip a {
 168   text-decoration: none;
 169   font-weight: normal;
 170   color: #fff;
 171 }
 172
 173 .card-tag-labels a {
 174   height: 100%;
 175   align-items: center;
 176 }
 177
 178 .card-tag-link {
 179   display: flex;
 180   min-width: 100px;
 181   flex-grow: 1;
 182 }
 183
 184 .card-tag-rss {
 185   display: flex;
 186 }
 187
 188 .card-tag-labels {
 189   display: flex;
 190   flex-wrap: wrap;
 191 }
 192
 193 .card-tag-labels li {
 194   margin: 10px;
 195   flex-basis: 19%;
 196   flex-grow: 1;
 197   align-items: center;
 198 }
 199
 200 .card-stacked {
 201   display: flex;
 202   flex-flow: row wrap;
 203
 204   &:hover ul.tools-list {
 205     display: inline;
 206     text-align: right;
 207   }
 208
 209   .preview {
 210     max-width: 100px;
 211     height: auto;
 212     margin-right: 10px;
 213     flex: 1;
 214
 215     img {
 216       max-width: 100%;
 217       max-height: 100%;
 218     }
 219   }
 220
 221   div.metadata {
 222     .chip {
 223       background-color: $blueAccentColor;
 224       padding: 0 15px 0 10px;
 225       margin: auto 2px;
 226       border-radius: 6px;
 227
 228       a,
 229       i {
 230         color: #fff;
 231       }
 232
 233       i.material-icons {
 234         float: right;
 235         font-size: 20px;
 236         line-height: 32px;
 237         padding-left: 8px;
 238       }
 239     }
 240   }
 241
 242   div.card-content {
 243     flex: 4;
 244   }
 245
 246   ul.tools-list {
 247     flex: 1;
 248     display: none;
 249     flex-basis: 5em;
 250     align-self: flex-end;
 251     float: right;
 252     max-width: 6em;
 253   }
 254 }
 255
 256 #content .collection .collection-item {
 257   min-height: 65px;
 258   height: auto;
 259 }
 260
 261 .quickstart .card .card-action a,
 262 .quickstart .card .card-action a:hover {
 263   color: #fff !important;
 264 }
 265
 266 .settings .div_tabs {
 267   padding-bottom: 15px;
 268 }
 269
 270 @media only screen and (min-width: 992px) {
 271   .card-tag-labels li {
 272     max-width: 50%;
 273   }
 274 }