blob: d9094d203e2594e6a70128e024fed44e840a3513 (
plain)
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
|
.opengraph-area {
margin: 10px auto 5px;
max-width: 700px;
.switcher {
list-style: none;
text-align: right;
li {
border-top: thin solid var(--dark-gray-color-20);
display: inline-block;
padding: 5px;
&:first-child {
border-left: thin solid var(--dark-gray-color-20);
}
&:last-child {
border-right: thin solid var(--dark-gray-color-20);
}
}
.switch-left,
.switch-right {
@include hide-text;
@include square(var(--icon-size-default));
padding: 0;
color: var(--color--highlight);
&:not([disabled]) {
cursor: pointer;
}
&[disabled] {
color: var(--color--font-inactive);
}
}
.switch-left {
@include icon(before, arr_1left);
}
.switch-right {
@include icon(before, arr_1right);
}
}
.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;
@include clearfix;
font-size: 0.8em;
border: 1px solid var(--dark-gray-color-20);
padding: $padding;
min-height: $height;
a.info {
box-sizing: border-box;
color: var(--black);
display: block;
word-break: normal !important;
&:hover {
color: var(--black);
}
}
.image {
@include square($height);
background-size: contain;
background-position: left center;
background-repeat: no-repeat;
display: inline-block;
float: left;
margin-right: $padding;
}
}
|
