-
Notifications
You must be signed in to change notification settings - Fork 0
/
reactions.sass.css
167 lines (146 loc) · 2.93 KB
/
reactions.sass.css
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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
/* Run `gem install sass` then run the following command
* `sass --watch reactions.sass.css:reactions.css`
* This will recompile the SASS in this file into reactions.css which is used in the extension. */
$gray: #F2F2F2
$blue: #3b5998
.r-background
display: none
position: fixed
left: 0
top: 0
width: 100%
min-height: 100%
overflow: hidden
z-index: 500
background: rgba(0, 0, 0, 0.15)
.r-panel
display: none
box-shadow: 0 2px 26px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.1)
border-radius: 3px
position: fixed
overflow: hidden
z-index: 501
top: 100px
left: 50%
width: 550px
margin-left: -225px
background: #FFF
.r-panel *
box-sizing: border-box
.r-bar
padding: 8px
overflow: hidden
&.no-top-padding
padding: 0
.r-option
float: left
width: 50%
font-size: 16px
border-radius: 3px
text-align: center
box-sizing: border-box
font-family: Helvetica, Arial, 'lucida grande',tahoma,verdana,arial,sans-serif
border: 1px solid transparent
color: #3B5998
padding: 4px 0
&:hover
background-color: $gray
cursor: pointer
&.selected
background-color: $gray
border: 1px solid #E9EAED
.r-img
float: left
width: 25%
.r-img.bouce
-webkit-animation: bounce 250ms ease-out
&:last-child
float: right
.stop-scrolling
height: 100%
overflow: hidden
#r-gif-container
height: 380px
.gif-container-overlay
position: absolute
left: 0px
top: 0px
width: 100%
height: 400px
background: #000
display: none
text-align: center
overflow: hidden
&.show
display: flex
flex-direction: column
justify-content: center
.gif-inner-container
overflow: auto
height: 400px
.r-overlay-btn
text-align: center
color: white
background: rgba(0, 0, 0, 0.6)
position: absolute
border-radius: 3px
font-size: 18px
border: 1px solid #EEE
outline: none
&:hover
background: rgba(0, 0, 0, 0.8)
cursor: pointer
.r-overlay-btn.left
bottom: 14px
left: 14px
.r-overlay-btn.right
right: 14px
bottom: 14px
.gif-container-overlay img
position: relative
left: 0px
top: 0px
width: 100%
max-height: 100%
outline: 0
height: auto
/* Video Related Containers */
.video-source
margin: 0 auto
width: 320px
height: 240px
border: 1px solid #EEE
display: block
.r-timer-bar
position: relative
text-align: center
height: 32px
line-height: 32px
padding: 2px
width: 320px
margin: 0 auto
.r-timer-bar-text
color: white
position: absolute
text-align: center
width: 100%
height: 32px
z-index: 10
.r-timer-bar .progress-bar
background: $blue
top: 0
left: 0
position: absolute
width: 0%
height: 32px
-webkit-transition: width 250ms
z-index: 9
@-webkit-keyframes bounce
0%
-webkit-transform: scale(1.5)
box-shadow: 0 4px 10px 4px rgba(0, 0, 0, 0.8)
100%
-webkit-transform: scale(1)
box-shadow: 0 0 0px 0px rgba(0, 0, 0, 0)
.r-hidden
display: none