humhub/static/less/oembed.less
s-tyshchenko d1a387137c
oEmbed for Facebook, Instagram and Twitter (#5510)
* oEmbed for FB, Inst and Twitter

- Support of oEmbed for Twitter, Facebook and Instagram
- Redesigned of oEmbed settings pages
- Added dynamic endpoint parameters inputs

* Migration and tests

- Migration: keep oEmbed providers already defined by users
- Adapted unit tests

* Access token required

- If an Access Token param is used in the Endpoint URL and is empty, we indicate that the configuration is incomplete
- Adapted Unit Tests
2022-01-31 17:32:00 +01:00

97 lines
2.0 KiB
Plaintext

.oembed_snippet[data-oembed-provider="youtube.com"],
.oembed_snippet {
margin-top: 10px;
position: relative;
padding-bottom: 55%;
padding-top: 15px;
overflow: hidden;
}
.oembed_snippet[data-oembed-provider="twitter.com"] {
padding-bottom: 0 !important;
padding-top: 0;
margin-top: 0;
}
.oembed_snippet iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.oembed_confirmation {
background: #feebb4;
border-radius: 4px;
padding: 15px;
line-height: 30px;
i.fa {
float: left;
color: #02a0b0;
background: #FFF;
border-radius: 50%;
font-size: 30px;
line-height: 25px;
margin-right: 15px;
}
> div:not(.clearfix) {
float: left;
}
.regular-checkbox-box {
top: 6px;
}
.regular-checkbox {
&:not(:checked) + .regular-checkbox-box {
background: #FFF;
}
&:checked + .regular-checkbox-box:after {
top: -8px;
}
}
}
#oembed-providers {
width: 100%;
display: flex;
flex-direction: row;
justify-content: left;
align-items: center;
flex-wrap: wrap;
margin: 0 -0.5rem;
.oembed-provider-container {
padding: 0;
.oembed-provider {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
border: 1px solid #ddd;
border-radius: 2px;
padding: 0.75rem;
margin: 0 0.5rem 0.5rem 0.5rem;
.oembed-provider-name {
display: flex;
justify-content: center;
align-items: center;
.label.label-error {
margin-left: 2px;
}
}
}
}
}
#endpoint-parameters {
display: flex;
flex-direction: row;
justify-content: left;
align-items: center;
flex-wrap: wrap;
margin: 0 -15px;
}