1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
|
.opengraph-area {
margin: 10px auto 5px;
max-width: 700px;
.switcher {
list-style: none;
text-align: right;
li {
border-top: thin solid @dark-gray-color-20;
display: inline-block;
padding: 5px;
&:first-child {
border-left: thin solid @dark-gray-color-20;
}
&:last-child {
border-right: thin solid @dark-gray-color-20;
}
}
.switch-left, .switch-right {
.hide-text();
.square(20px);
background-position: center;
background-repeat: no-repeat;
padding: 0;
&:not([disabled]) {
cursor: pointer;
}
}
.switch-left {
.background-icon('arr_1left', 'clickable');
&[disabled] {
.background-icon('arr_1left', 'inactive');
}
}
.switch-right {
.background-icon('arr_1right', 'clickable');
&[disabled] {
.background-icon('arr_1right', 'inactive');
}
}
}
.js & .opengraph.hidden,
.js &:not(.handled) .opengraph:not(:first-of-type) {
// The second selector prevents flash of content before everything
// is setup
display: none;
}
}
.opengraph {
@padding: 10px;
@height: 120px;
.clearfix;
font-size: 0.8em;
border: 1px solid @dark-gray-color-20;
padding: @padding;
min-height: @height;
.flash-embedder {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100px;
background-position: center center;
background-repeat: no-repeat;
background-size: 100% auto;
.play {
border-radius: 100px;
transition: background-color 300ms;
background-color: rgba(0, 0, 0, 0.7);
padding: 10px;
}
&:hover .play {
background-color: rgba(0, 0, 0, 1);
}
}
.video .flash-embedder {
height: 200px;
}
a.info {
box-sizing: border-box;
color: black;
display: block;
word-break: normal !important;
&:hover {
color: black;
}
}
.image {
.square(@height);
background-size: contain;
background-position: left center;
background-repeat: no-repeat;
display: inline-block;
float: left;
margin-right: @padding;
}
}
|
