blob42
/
popcorn-site
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add modal css

Browse Source
master
SrPatinhas 10 years ago
parent dbab947f29
commit 6a8c3577af
1 changed files with 180 additions and 1 deletions
Show Stats Download Patch File Download Diff File

181
css/style.css
Unescape Escape View File

@ -4317,6 +4317,185 @@ License URI: http://www.opensource.org/licenses/mit-license.php
border-radius: 0 0 3px 3px;
}
/* social modal */
#modal_popup{
display:none;
}
.header-modal {
background: #0A0B28;
height: 60px;
padding: 10px 30px;
color: #FFF;
font-size: 18px;
line-height: 60px;
}
.modal-body {
padding: 30px 10px 10px;
font-size: 17px;
color: #000;
text-align: center;
}
.pochoclin-img{
position: absolute;
bottom: 0;
width: 150px;
left: 10px;
}
/* buttons to share */
.share-container {
margin: 0 auto 10px;
text-align: center;
}
.share-btn {
display: inline-block;
vertical-align: top;
position: relative;
margin: 0 20px;
padding-top: 40px;
width: 80px;
font-weight: bold;
text-align: center;
text-decoration: none;
border-radius: 8px;
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}
.share-btn:active {
margin-top: 3px;
}
.share-btn:active .share-btn-action {
padding-bottom: 3px;
-webkit-box-shadow: inset 0 -3px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -3px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.15);
}
.share-btn:active .share-btn-action:after {
bottom: 3px;
}
.share-btn-count {
position: absolute;
top: 10px;
left: 0;
right: 0;
line-height: 30px;
font-size: 19px;
letter-spacing: -1px;
color: #555;
text-shadow: 0 1px white;
background: #E7E7E7;
border-width: 1px 1px 0;
border-style: solid;
border-color: #c5c5c5 #bbb;
border-radius: 8px 8px 0 0;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.03), transparent 40%);
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.03), transparent 40%);
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.03), transparent 40%);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.03), transparent 40%);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.18), 0 2px rgba(0, 0, 0, 0.07);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.18), 0 2px rgba(0, 0, 0, 0.07);
}
.share-btn-count:before, .share-btn-count:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -6px;
border: 6px solid transparent;
border-top-color: #e6eff5;
}
.share-btn-count:before {
margin-left: -7px;
margin-top: 1px;
border-width: 7px;
border-top-color: rgba(0, 0, 0, 0.07);
}
.share-btn-action {
display: block;
position: relative;
line-height: 32px;
padding: 2px 0 6px;
font-size: 12px;
color: white;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
border: solid rgba(0, 0, 0, 0.18);
border-width: 0 1px;
border-radius: 0 0 8px 8px;
}
.share-btn-action:before {
content: '';
display: inline-block;
vertical-align: top;
margin: 8px 2px 0 0;
width: 18px;
height: 18px;
background-image: url("icons.png");
}
.share-btn-action:after {
content: '';
position: absolute;
top: 0;
bottom: 6px;
left: 0;
right: 0;
border-radius: 0 0 6px 6px;
-webkit-box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.25);
box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.25);
}
.share-btn-tweet {
background: #83cfe8;
background-image: -webkit-linear-gradient(top, #83cfe8, #6ebbd4);
background-image: -moz-linear-gradient(top, #83cfe8, #6ebbd4);
background-image: -o-linear-gradient(top, #83cfe8, #6ebbd4);
background-image: linear-gradient(to bottom, #83cfe8, #6ebbd4);
-webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.16), inset 0 -1px rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -6px rgba(0, 0, 0, 0.16), inset 0 -1px rgba(0, 0, 0, 0.15);
}
.share-btn-tweet:before {
margin-left: -3px;
}
.share-btn-tweet:after {
-webkit-box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.5);
box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.5);
}
.share-btn-tweet + .share-btn-count {
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.12), 0 2px rgba(0, 0, 0, 0.04);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.12), 0 2px rgba(0, 0, 0, 0.04);
}
.share-btn-tweet + .share-btn-count:before {
border-top-color: rgba(0, 0, 0, 0.05);
}
.share-btn-like {
background: #6480bd;
background-image: -webkit-linear-gradient(top, #6480bd, #3c5894);
background-image: -moz-linear-gradient(top, #6480bd, #3c5894);
background-image: -o-linear-gradient(top, #6480bd, #3c5894);
background-image: linear-gradient(to bottom, #6480bd, #3c5894);
-webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 -6px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.2);
}
.share-btn-like:before {
background-position: -18px 0;
}
.share-btn-plus {
background: #626262;
background-image: -webkit-linear-gradient(top, #626262, #404040);
background-image: -moz-linear-gradient(top, #626262, #404040);
background-image: -o-linear-gradient(top, #626262, #404040);
background-image: linear-gradient(to bottom, #626262, #404040);
-webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.08), inset 0 -1px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 -6px rgba(0, 0, 0, 0.08), inset 0 -1px rgba(0, 0, 0, 0.3);
}
.share-btn-plus:before {
display: none;
}
/* Flags */
#ad {background-image: url(../images/flags/ad.png)}
#ae {background-image: url(../images/flags/ae.png)}
@ -4541,4 +4720,4 @@ License URI: http://www.opensource.org/licenses/mit-license.php
#zh-cn {background-image: url(../images/flags/zh-cn.png)}
#zh-tw {background-image: url(../images/flags/zh-tw.png)}
#zm {background-image: url(../images/flags/zm.png)}
#zw {background-image: url(../images/flags/zw.png)}
#zw {background-image: url(../images/flags/zw.png)}

Write Preview
Loading…
Cancel
Save