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