flashii/misuzu
flashii/misuzu
1
1
Fork 0
Code Issues Pull requests Releases 158 Wiki Activity Actions
misuzu/assets/misuzu.css/embed.css

379 lines
8 KiB
CSS
Raw Normal View History

Complete revamp of the forum video bbcode. Rather than blindly embedding everything, video metadata is first requested through the URL metadata lookup service. This slightly protects you from automatically connecting to third party servers and also vastly improves page loading performance in tandem with caching on the server. A similar implementation will eventually make its way to the audio bbcode and will also be worked in the img bbcode somehow. This will then eventually make it possible to embed audio and video in markdown the same way you'd embed an image.
2023-01-25 22:33:59 +00:00
.embed {
display: inline-block;
overflow: hidden;
Improved video embed handling.
2023-01-29 01:51:54 +00:00
text-shadow: initial;
Complete revamp of the forum video bbcode. Rather than blindly embedding everything, video metadata is first requested through the URL metadata lookup service. This slightly protects you from automatically connecting to third party servers and also vastly improves page loading performance in tandem with caching on the server. A similar implementation will eventually make its way to the audio bbcode and will also be worked in the img bbcode somehow. This will then eventually make it possible to embed audio and video in markdown the same way you'd embed an image.
2023-01-25 22:33:59 +00:00
}
.embed iframe {
width: 100%;
height: 100%;
display: block;
}
.embedph {
display: inline-block;
overflow: hidden;
cursor: pointer;
color: var(--text-colour);
text-decoration: none;
Improved video embed handling.
2023-01-29 01:51:54 +00:00
text-shadow: initial;
Complete revamp of the forum video bbcode. Rather than blindly embedding everything, video metadata is first requested through the URL metadata lookup service. This slightly protects you from automatically connecting to third party servers and also vastly improves page loading performance in tandem with caching on the server. A similar implementation will eventually make its way to the audio bbcode and will also be worked in the img bbcode somehow. This will then eventually make it possible to embed audio and video in markdown the same way you'd embed an image.
2023-01-25 22:33:59 +00:00
}
.embedph:hover .embedph-bg img,
.embedph:active .embedph-bg img,
.embedph:focus .embedph-bg img,
.embedph:focus-within .embedph-bg img {
transform: scale(1.1);
filter: blur(10px) brightness(80%);
}
.embedph:hover .embedph-info,
.embedph:active .embedph-info,
.embedph:focus .embedph-info,
.embedph:focus-within .embedph-info {
opacity: 0;
}
.embedph:hover .embedph-play,
.embedph:active .embedph-play,
.embedph:focus .embedph-play,
.embedph:focus-within .embedph-play {
opacity: 1;
}
.embedph-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.embedph-bg img {
object-fit: cover;
width: 100%;
height: 100%;
display: inline-block;
transition: transform .2s, filter .2s;
Enabled video and audio embeds in markdown.
2023-01-29 21:06:03 +00:00
box-sizing: border-box !important;
max-width: initial !important;
max-height: initial !important;
Complete revamp of the forum video bbcode. Rather than blindly embedding everything, video metadata is first requested through the URL metadata lookup service. This slightly protects you from automatically connecting to third party servers and also vastly improves page loading performance in tandem with caching on the server. A similar implementation will eventually make its way to the audio bbcode and will also be worked in the img bbcode somehow. This will then eventually make it possible to embed audio and video in markdown the same way you'd embed an image.
2023-01-25 22:33:59 +00:00
}
.embedph-fg {
width: 100%;
height: 100%;
}
.embedph-info {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: flex-end;
transition: opacity .2s;
}
.embedph-info-wrap {
margin: 5px;
background-color: var(--background-colour-translucent-8);
border-radius: 5px;
display: flex;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.embedph-info-bar {
width: 5px;
margin: 5px;
border-radius: 5px;
flex: 0 0 auto;
background-color: var(--embedph-colour, var(--accent-colour));
}
.embedph-info-body {
margin: 10px;
margin-left: 5px;
}
.embedph-info-title {
Enabled video and audio embeds in markdown.
2023-01-29 21:06:03 +00:00
font-size: 2em !important;
font-weight: 400 !important;
line-height: 1.2em !important;
Complete revamp of the forum video bbcode. Rather than blindly embedding everything, video metadata is first requested through the URL metadata lookup service. This slightly protects you from automatically connecting to third party servers and also vastly improves page loading performance in tandem with caching on the server. A similar implementation will eventually make its way to the audio bbcode and will also be worked in the img bbcode somehow. This will then eventually make it possible to embed audio and video in markdown the same way you'd embed an image.
2023-01-25 22:33:59 +00:00
margin-bottom: 5px;
Fixed various video embedding bugs.
2023-01-26 22:51:33 +00:00
word-break: break-word;
Enabled video and audio embeds in markdown.
2023-01-29 21:06:03 +00:00
margin: 0 !important;
padding: 0 !important;
border-width: 0 !important;
Complete revamp of the forum video bbcode. Rather than blindly embedding everything, video metadata is first requested through the URL metadata lookup service. This slightly protects you from automatically connecting to third party servers and also vastly improves page loading performance in tandem with caching on the server. A similar implementation will eventually make its way to the audio bbcode and will also be worked in the img bbcode somehow. This will then eventually make it possible to embed audio and video in markdown the same way you'd embed an image.
2023-01-25 22:33:59 +00:00
}
.embedph-info-desc {
line-height: 1.4em;
margin: .5em 0;
Fixed various video embedding bugs.
2023-01-26 22:51:33 +00:00
word-break: break-word;
Complete revamp of the forum video bbcode. Rather than blindly embedding everything, video metadata is first requested through the URL metadata lookup service. This slightly protects you from automatically connecting to third party servers and also vastly improves page loading performance in tandem with caching on the server. A similar implementation will eventually make its way to the audio bbcode and will also be worked in the img bbcode somehow. This will then eventually make it possible to embed audio and video in markdown the same way you'd embed an image.
2023-01-25 22:33:59 +00:00
}
.embedph-info-site {
font-size: .9em;
line-height: 1.2em;
}
@media (max-width: 640px) {
.embedph-info-title {
font-size: 1.5em;
line-height: 1.2em;
}
.embedph-info-desc {
display: none;
}
}
.embedph-play {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity .2s;
}
.embedph-play-internal {
margin-top: 40px;
margin-bottom: 20px;
}
.embedph-play-external {
padding: 5px 10px;
font-size: 1.2em;
line-height: 1.5em;
Enabled video and audio embeds in markdown.
2023-01-29 21:06:03 +00:00
text-decoration: none !important;
color: var(--text-colour) !important;
Complete revamp of the forum video bbcode. Rather than blindly embedding everything, video metadata is first requested through the URL metadata lookup service. This slightly protects you from automatically connecting to third party servers and also vastly improves page loading performance in tandem with caching on the server. A similar implementation will eventually make its way to the audio bbcode and will also be worked in the img bbcode somehow. This will then eventually make it possible to embed audio and video in markdown the same way you'd embed an image.
2023-01-25 22:33:59 +00:00
background-color: var(--background-colour-translucent-6);
border-radius: 5px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: background-color .2s, transform .2s;
}
.embedph-play-external:hover,
.embedph-play-external:focus {
background-color: var(--background-colour-translucent-8);
transform: scale(1.2);
}
.embed-youtube,
.embedph-youtube {
aspect-ratio: 16 / 9;
width: 100%;
height: 100%;
max-width: 560px;
max-height: 315px;
}
.embed-nicovideo,
.embedph-nicovideo {
aspect-ratio: 16 / 9;
width: 100%;
height: 100%;
max-width: 640px;
max-height: 360px;
}
Improved video embed handling.
2023-01-29 01:51:54 +00:00
.embedvf {
display: inline-block;
overflow: hidden;
}
.embedvf:hover .embedvf-controls,
.embedvf:focus .embedvf-controls,
.embedvf:active .embedvf-controls,
.embedvf:focus-within .embedvf-controls {
opacity: 1;
transform: scale(1);
}
.embedvf-player {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.embedvf-overlay {
width: 100%;
height: 100%;
pointer-events: none;
}
.embedvf-controls {
pointer-events: initial;
position: absolute;
bottom: 5px;
left: 5px;
right: 5px;
padding: 5px;
background-color: var(--background-colour-translucent-7);
border-radius: 5px;
opacity: 0;
transform: scale(.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: opacity .2s, transform .2s;
}
Audio embed previews (no player yet).
2023-01-29 20:29:20 +00:00
.aembed {
display: inline-block;
overflow: hidden;
text-shadow: initial;
}
.aembedph {
display: inline-block;
overflow: hidden;
cursor: pointer;
color: var(--text-colour);
text-decoration: none;
text-shadow: initial;
max-width: 500px;
min-width: 300px;
height: 70px;
border-radius: 5px;
margin: 5px;
}
.aembedph:hover .aembedph-play,
.aembedph:active .aembedph-play,
.aembedph:focus .aembedph-play,
.aembedph:focus-within .aembedph-play {
opacity: 1;
}
.aembedph-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.aembedph-bg-none {
background: var(--background-pattern);
background-color: var(--aembedph-colour, var(--accent-colour));
background-blend-mode: multiply;
}
.aembedph-bg img {
object-fit: cover;
width: 100%;
height: 100%;
display: inline-block;
transform: scale(1.1);
filter: blur(10px) brightness(80%);
Enabled video and audio embeds in markdown.
2023-01-29 21:06:03 +00:00
box-sizing: border-box !important;
max-width: initial !important;
max-height: initial !important;
Audio embed previews (no player yet).
2023-01-29 20:29:20 +00:00
}
.aembedph-fg {
width: 100%;
height: 100%;
}
.aembedph-info {
display: flex;
background-color: var(--background-colour-translucent-5);
align-items: center;
width: 100%;
height: 100%;
padding: 5px;
}
.aembedph-info-cover {
flex: 0 0 auto;
overflow: hidden;
border-radius: 5px;
}
.aembedph-info-cover-none {
background-color: var(--aembedph-colour, var(--accent-colour));
width: 5px;
height: 100%;
}
.aembedph-info-cover img {
Enabled video and audio embeds in markdown.
2023-01-29 21:06:03 +00:00
max-width: 60px !important;
max-height: 60px !important;
Audio embed previews (no player yet).
2023-01-29 20:29:20 +00:00
display: inline-block;
vertical-align: middle;
Enabled video and audio embeds in markdown.
2023-01-29 21:06:03 +00:00
box-sizing: border-box !important;
Audio embed previews (no player yet).
2023-01-29 20:29:20 +00:00
}
.aembedph-info-cover-none img {
display: none;
}
.aembedph-info-body {
padding: 0 5px;
}
.aembedph-info-title {
Enabled video and audio embeds in markdown.
2023-01-29 21:06:03 +00:00
font-size: 1.4em !important;
font-weight: 400 !important;
line-height: 1.2em !important;
Audio embed previews (no player yet).
2023-01-29 20:29:20 +00:00
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 430px;
Enabled video and audio embeds in markdown.
2023-01-29 21:06:03 +00:00
margin: 0 !important;
padding: 0 !important;
border-width: 0 !important;
Audio embed previews (no player yet).
2023-01-29 20:29:20 +00:00
}
.aembedph-info-title-artist {
max-width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 700;
}
.aembedph-info-album {
line-height: 1.4em;
word-break: break-word;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 430px;
}
.aembedph-info-site {
font-size: .9em;
line-height: 1.2em;
}
.aembedph-play {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity .2s;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
.aembedph-play-internal {
width: 70px;
height: 70px;
text-align: center;
flex: 0 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.aembedph-play-external {
flex: 1 1 auto;
display: flex;
justify-content: flex-end;
align-items: center;
padding: 5px;
}
.aembedph-play-external-link {
padding: 2px 5px;
line-height: 1.5em;
Enabled video and audio embeds in markdown.
2023-01-29 21:06:03 +00:00
text-decoration: none !important;
color: var(--text-colour) !important;
Audio embed previews (no player yet).
2023-01-29 20:29:20 +00:00
background-color: var(--background-colour-translucent-6);
border-radius: 5px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: background-color .2s;
}
.aembedph-play-external-link:hover,
.aembedph-play-external-link:focus {
background-color: var(--background-colour-translucent-8);
}
.aembedph-play-external-link:active {
background-color: var(--background-colour-translucent-5);
}
Reference in a new issue Copy permalink