1 | .lg-comment-box {
|
2 | width: 420px;
|
3 | max-width: 100%;
|
4 | position: absolute;
|
5 | right: 0;
|
6 | top: 0;
|
7 | bottom: 0;
|
8 | z-index: 9999;
|
9 | background-color: #fff;
|
10 | will-change: transform;
|
11 | -moz-transform: translate3d(100%, 0, 0);
|
12 | -o-transform: translate3d(100%, 0, 0);
|
13 | -ms-transform: translate3d(100%, 0, 0);
|
14 | -webkit-transform: translate3d(100%, 0, 0);
|
15 | transform: translate3d(100%, 0, 0);
|
16 | -webkit-transition: -webkit-transform 0.4s cubic-bezier(0, 0, 0.25, 1) 0s;
|
17 | -moz-transition: -moz-transform 0.4s cubic-bezier(0, 0, 0.25, 1) 0s;
|
18 | -o-transition: -o-transform 0.4s cubic-bezier(0, 0, 0.25, 1) 0s;
|
19 | transition: transform 0.4s cubic-bezier(0, 0, 0.25, 1) 0s;
|
20 | }
|
21 |
|
22 | .lg-comment-box .lg-comment-title {
|
23 | margin: 0;
|
24 | color: #fff;
|
25 | font-size: 18px;
|
26 | }
|
27 |
|
28 | .lg-comment-box .lg-comment-header {
|
29 | background-color: #000;
|
30 | padding: 12px 20px;
|
31 | position: absolute;
|
32 | left: 0;
|
33 | right: 0;
|
34 | top: 0;
|
35 | }
|
36 |
|
37 | .lg-comment-box .lg-comment-body {
|
38 | height: 100% !important;
|
39 | padding-top: 43px !important;
|
40 | width: 100% !important;
|
41 | }
|
42 |
|
43 | .lg-comment-box .fb-comments {
|
44 | height: 100%;
|
45 | width: 100%;
|
46 | background: url("../images/loading.gif") no-repeat scroll center center #fff;
|
47 | overflow-y: auto;
|
48 | display: inline-block;
|
49 | }
|
50 |
|
51 | .lg-comment-box .fb-comments[fb-xfbml-state='rendered'] {
|
52 | background-image: none;
|
53 | }
|
54 |
|
55 | .lg-comment-box .fb-comments > span {
|
56 | max-width: 100%;
|
57 | }
|
58 |
|
59 | .lg-comment-box .lg-comment-close {
|
60 | position: absolute;
|
61 | right: 5px;
|
62 | top: 12px;
|
63 | cursor: pointer;
|
64 | font-size: 20px;
|
65 | color: #999;
|
66 | will-change: color;
|
67 | -webkit-transition: color 0.2s linear;
|
68 | -o-transition: color 0.2s linear;
|
69 | transition: color 0.2s linear;
|
70 | }
|
71 |
|
72 | .lg-comment-box .lg-comment-close:hover {
|
73 | color: #fff;
|
74 | }
|
75 |
|
76 | .lg-comment-box .lg-comment-close:after {
|
77 | content: '\e070';
|
78 | }
|
79 |
|
80 | .lg-comment-box iframe {
|
81 | max-width: 100% !important;
|
82 | width: 100% !important;
|
83 | }
|
84 |
|
85 | .lg-comment-box #disqus_thread {
|
86 | padding: 0 20px;
|
87 | }
|
88 |
|
89 | .lg-outer .lg-comment-overlay {
|
90 | background-color: rgba(0, 0, 0, 0.25);
|
91 | bottom: 0;
|
92 | cursor: default;
|
93 | left: 0;
|
94 | position: fixed;
|
95 | right: 0;
|
96 | top: 0;
|
97 | z-index: 1081;
|
98 | opacity: 0;
|
99 | visibility: hidden;
|
100 | will-change: visibility, opacity;
|
101 | -webkit-transition: visibility 0s linear 0.18s, opacity 0.18s linear 0s;
|
102 | -o-transition: visibility 0s linear 0.18s, opacity 0.18s linear 0s;
|
103 | transition: visibility 0s linear 0.18s, opacity 0.18s linear 0s;
|
104 | }
|
105 |
|
106 | .lg-outer .lg-comment-toggle:after {
|
107 | content: '\e908';
|
108 | }
|
109 |
|
110 | .lg-outer.lg-comment-active .lg-comment-overlay {
|
111 | -webkit-transition-delay: 0s;
|
112 | transition-delay: 0s;
|
113 | -moz-transform: translate3d(0, 0px, 0);
|
114 | -o-transform: translate3d(0, 0px, 0);
|
115 | -ms-transform: translate3d(0, 0px, 0);
|
116 | -webkit-transform: translate3d(0, 0px, 0);
|
117 | transform: translate3d(0, 0px, 0);
|
118 | opacity: 1;
|
119 | visibility: visible;
|
120 | }
|
121 |
|
122 | .lg-outer.lg-comment-active .lg-comment-toggle {
|
123 | color: #fff;
|
124 | }
|
125 |
|
126 | .lg-outer.lg-comment-active .lg-comment-box {
|
127 | -moz-transform: translate3d(0, 0, 0);
|
128 | -o-transform: translate3d(0, 0, 0);
|
129 | -ms-transform: translate3d(0, 0, 0);
|
130 | -webkit-transform: translate3d(0, 0, 0);
|
131 | transform: translate3d(0, 0, 0);
|
132 | }
|