[CSS for the twitter card preview]

package.manifest

{
  "css": [
    "/App_Plugins/BlockListTwitterCard/twitter-card.css"
  ]
}

twitter-card.css

.twitter-card {
    border-radius:15px;
    border:1px solid rgb(204, 214, 221);
    display:flex;
    flex-direction: column;
    align-items:stretch;
    max-width:516px;
    margin-bottom:10px;
}

.twitter-card__image {
    border-bottom:inherit;
}

.twitter-card__image .umb-mediapicker-single > div {
    width:auto;
    border-radius:15px 15px 0 0;
    border:0;
}

.twitter-card__image .umb-sortable-thumbnails {
    width:100%;
}

.twitter-card__image .umb-sortable-thumbnails li {
    width:100%;
}

.twitter-card__image .umb-sortable-thumbnails .umb-sortable-thumbnails__wrapper,
.twitter-card__image .umb-sortable-thumbnails .add-wrapper {
    width:100%;
    padding:0;
    padding-top:52.356%;
    margin:0;
    position:relative;
    height:auto;
    background:none;
}

.twitter-card__image .umb-mediapicker .add-link {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.twitter-card__image .umb-sortable-thumbnails li img {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit: cover;
    border-radius:15px 15px 0 0;
}

.twitter-card__title {
    padding:5px 5px 0;
    color:black;
    font-weight:bold;
}

.twitter-card__description {
    padding:0 5px 5px;
    color:#333;
}

.twitter-card input {
    padding:5px;
    border-color:rgb(204, 214, 221, 0.1);
    width:100%;
    font-weight:inherit;
    color:inherit;
}

.twitter-card input:focus,
.twitter-card input:hover {
    border-color:rgb(204, 214, 221, 0.6)
}