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