Skip to content

Instantly share code, notes, and snippets.

@ile
Created January 7, 2017 11:17
Show Gist options
  • Save ile/aa0f6606a59b7b7303cba8c6d3c48310 to your computer and use it in GitHub Desktop.
Save ile/aa0f6606a59b7b7303cba8c6d3c48310 to your computer and use it in GitHub Desktop.
.vplay {
position: relative;
float: left;
overflow: hidden;
}
.vplay img {
float: none;
}
.vplay span:hover {
color: #fff;
}
.vplay span {
position: absolute;
top: 50%;
left: 50%;
margin-top: -15px;
margin-left: -15px;
width: 30px;
height: 30px;
line-height: 30px;
font-size: 36px;
cursor: pointer;
color: rgba(255,255,255,0.9);
transition: 0.3s color;
background-color: #000;
text-align: center;
border-radius: 100%;
}
.vplay span i.fa-circle {
opacity: 0.7;
color: #1da1f2;
}
.linkpv section.photos-list {
margin-left: 0;
}
.dl-container .viewer-close:hover {
color: #222;
border-color: #222;
}
.dl-container .viewer-close {
position: absolute;
top: 5px;
right: 5px;
width: 32px;
height: 32px;
color: #999;
font-size: 27px;
font-style: normal;
text-align: center;
cursor: pointer;
transition: color 0.3s, border-color 0.3s;
}
.dl-container {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255,255,255,0.95);
z-index: 10000;
display: flex;
justify-content: center;
align-items: center;
}
.dl-container .dl-button-left {
left: 10px;
}
.dl-container .dl-button-right {
right: 10px;
}
.dl-container .dl-button:hover {
color: #aaa;
}
.dl-container .dl-button {
position: absolute;
top: 50%;
font-size: 72px;
color: #ddd;
cursor: pointer;
transition: 0.3s color;
}
.dl-container figure {
display: flex;
max-width: 90%;
max-height: 90%;
animation: 1.5s light-box-appear cubic-bezier(0, 0.96, 0.44, 0.98);
}
.dl-container figure img,
.dl-container figure iframe,
.dl-container figure video {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
margin-left: auto;
margin-right: auto;
}
.card.card-big {
font-size: 16px;
}
.card.card-big .card-text {
padding-left: 0;
margin-bottom: 10px;
display: block;
}
.card.card-big h3 {
font-size: 24px;
}
.card.card-big img {
border-radius: 3px;
}
.card.card-big img.card-image {
float: none;
max-width: 100%;
max-height: none;
}
.card.card-audio audio {
width: 100%;
}
.card.card-video {
padding: 15px;
}
.card.card-video > a:hover {
background: inherit;
}
.card.card-video > a {
border: none;
}
.card {
font-size: 16px;
line-height: 1.3;
transition: 0.3s border, background;
background: #f6f7f8;
border: solid 1px #eee;
border-radius: 3px;
}
.card .card-text {
display: table-cell;
padding-left: 10px;
word-break: break-word;
word-wrap: break-word;
hyphens: auto;
min-width: 200px;
}
.card > a {
border-radius: 3px;
margin-left: -7px;
border-radius: 3px;
display: block;
}
.card > a:hover {
background: #f6f7f8;
}
.card iframe {
border: none;
width: 100%;
}
.card .favicon {
width: 12px;
height: 12px;
margin-right: 5px;
vertical-align: top;
}
.card p {
margin: 0.3em 0;
}
.card .fav {
margin-top: 8px;
text-transform: uppercase;
font-size: 12px;
line-height: 14px;
letter-spacing: 0.3px;
}
.card h3 {
margin: -1px 0 4px 0;
font-size: 16px;
}
.card .card-article {
position: absolute;
width: 300px;
height: 300px;
overflow: auto;
box-shadow: 0 0 25px #aaa;
border-radius: 3px;
background: #fff;
padding: 9px;
animation: 0.3s appear;
font-size: 88%;
z-index: 9;
}
.card .card-article img {
max-width: 100%;
}
.card .card-article::-webkit-scrollbar {
width: 7px;
}
.card .card-article::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
.card .card-article::-webkit-scrollbar-thumb {
background-color: #a9a9a9;
outline: 1px solid #708090;
}
.card .small {
max-width: 250px;
max-height: 125px;
}
.card img {
border-radius: 3px;
}
.card img.card-image {
float: left;
max-width: 250px;
min-width: 100px;
max-height: 125px;
/* height 125px
object-fit contain */;
}
.card img.card-image-full {
max-width: 100%;
}
.card video {
max-height: max-photos-height;
}
.dl-container video,
.dl-container iframe {
max-width: 90%;
max-width: 90vw;
max-height: 90%;
max-height: 90vh;
width: 90%;
width: 90vw;
height: 90%;
}
.card::after,
.card a::after {
content: "";
display: block;
clear: both;
}
.card a {
color: #333;
text-decoration: none;
transition: 0.3s background;
}
.card > a:first-child {
padding: 15px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment