source: spip-zone/_plugins_/oembed/css/oembed.css @ 86715

Last change on this file since 86715 was 86715, checked in by cedric@…, 4 years ago

titre sur les images aussi

File size: 4.4 KB
Line 
1/* Oembed generique */
2.oe-reference {}
3.oe-cite {}
4
5figure.oe-image-block {border: 1px solid #eee;background: #fff;text-align: center;width:80%;margin: 3em auto;overflow:hidden;padding:4px;}
6figure.oe-image-block img {background: #fff;padding-bottom:4px;}
7figure.oe-image-block figcaption {background:#eee;padding: 10px;text-align: left;}
8
9.oe-link-block {overflow: hidden;}
10.oe-link-block .link_logo {float: right;margin:0;margin-bottom: 10px;margin-left: 10px;border: 5px solid #ddd;}
11
12.spip_documents .oembed {
13        display: block;background: #f8f8f8;padding: 5px;border: 1px solid #eee;
14}
15.spip_documents span.oembed {display:inline-block;}
16
17/* Photo */
18.oembed_photo .oembed-source {display: none;}
19
20/* Rich */
21.oembed_rich {max-width:100%;position:relative;}
22.oembed_rich .oe-rich {max-width:none !important;}
23.oembed_rich .rwd-rich-container {position: relative;}
24.oembed_rich .rwd-rich-container iframe {position: absolute;top:0;left: 0;width: 100%;height: 100%;z-index:2;}
25.oembed_rich .rwd-rich-container>:last-child {margin-bottom:0;}
26.oembed_rich .oembed.oe-rich {display: block;text-align: left}
27.oembed_rich .oe-rich+.spip_doc_titre {margin-top: 0.5em;}
28.oembed_rich .spip_doc_titre+.oembed-source {display: none;}
29.oe-rich.async .rwd-rich-container {
30        -webkit-transition: height .4s linear;
31     -moz-transition: height .4s linear;
32       -o-transition: height .4s linear;
33          transition: height .4s linear;
34}
35.oe-rich.async .rwd-rich-container.oe-play-button {height:80px !important;}
36@media (min-width:480px){
37        .oembed_rich .async+.spip_doc_titre {position:absolute;top:0.5em;left:90px;width:auto;right:90px;text-align:left;}
38        .oembed_rich .oe-play-button button {left:40px;}
39        .oembed_rich .oe-play-button {background-position:top right !important;background-size:contain !important;}
40}
41
42.oembed.oe-link.oe-rich .oe-html {display: block;}
43.oe-rich > .rwd-rich-container >blockquote {font-style: normal;}
44
45/* Video */
46.oembed_video {max-width: 100%;}
47.oembed_video .rwd-video-container {position: relative;}
48.oembed_video .rwd-video-container iframe {position: absolute;top:0;left: 0;width: 100%;height: 100%;}
49.oembed_video .oembed-source {display: none;}
50.oembed_video .oe-video {margin-left: auto;margin-right: auto;}
51.oembed_video .oe-video+.spip_doc_titre {margin-top: 0.5em;}
52
53/* Play button */
54.oe-play-button {position: relative;cursor: pointer;}
55.oe-play-button button {text-indent:-5000em;position: absolute;display: block;padding:0;left: 50%;top: 50%;border: none;background:#000;width: 66px;height: 66px;margin-left: -33px;margin-top: -33px;z-index:10;-moz-border-radius: 50%;-webkit-border-radius: 50%;border-radius: 50%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
56.oe-play-button button:before {content:"";position: absolute;top:-1px;left:-1px;display: block;padding:0;border:4px solid #ddd;width: 68px;height: 68px;-moz-border-radius: 50%;-webkit-border-radius: 50%;border-radius: 50%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
57.oe-play-button button:after {content:"";position: absolute;display: block;left: 50%;top: 50%;border-left:20px solid #ddd;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left: -7px;margin-top: -10px;z-index:11;}
58.oe-play-button:hover button {background-color: #DD2826;}
59.oe-play-button:hover button:before{border-color:#fff;}
60.oe-play-button:hover button:after{border-left-color:#fff;}
61
62/* Cas particuliers */
63/* Storify */
64.oembed .storify .oembed {margin: 3em auto;text-align: center;}
65.oembed .storify .oembed iframe,.oembed .storify .oembed object {margin: 0 auto;}
66.storify .oe-quote-text {margin-bottom:0;}
67
68/* Twitter */
69.oe-quote-block {padding-right: 80px;position: relative;}
70.oembed_twitter .oembed-source {display: none;}
71.oembed_twitter .oe-rich {max-width:none !important;}
72
73.oe-descriptif {font-style: italic;}
74.oe-quote-text {}
75.oe-quote-user-block img {position: absolute;top:0;right:20px;max-width: 48px;height: auto;}
76.oe-quote-meta,.oe-quote-user-block {display: inline;}
77.oe-quote-meta .via {display: none;}
78
79.oe-fb-user-block img {float:left;margin-right: 10px;margin-bottom:10px;}
80.oe-imdb-title img {float:left;margin-right: 10px;margin-bottom:10px;}
81
82/* Soundcloud */
83.oembed_audio .oe-play-button button {background:#FF4B00;}
84.oembed_audio .oe-play-button button:before {border-color:#eee;}
85.oembed_audio .oe-play-button:hover button{background-color: #DD2826;}
86.oembed_audio .oe-play-button:hover button:before{border-color:#fff;}
Note: See TracBrowser for help on using the repository browser.