Last active
December 24, 2015 07:09
-
-
Save padicode/6761650 to your computer and use it in GitHub Desktop.
PadiAct Custom Design CSS sample
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.padiOverlay { | |
position: fixed; | |
left: 0px; | |
top: 0px; | |
padding: 0px; | |
margin: 0px; | |
visibility: visible; | |
overflow-x: hidden; | |
overflow-y: auto; | |
width: 100%; | |
height: 100%; | |
z-index: 1040; | |
} | |
.padiFade { | |
zoom: 1; | |
background-color: rgba(0,0,0,0.6); | |
width: 100%; | |
height: 100%; | |
z-index: 1041; | |
} | |
.padiPop4Overlay h1, .padiPop4Overlay h2, .padiPop4Overlay h3, .padiPop4Overlay div, .padiPop4Overlay ul, .padiPop4Overlay li, .padiPop4Overlay ol, .padiPop4Overlay p, .padiPop4Overlay a, .padiPop4Overlay input, .padiPop4Overlay input[type=text], .padiPop4Overlay input[type=email] { | |
margin: 0; | |
padding: 0; | |
border: 0; | |
outline: none; | |
font-size: 100%; | |
font-family: Arial, Helvetica, sans-serif; | |
vertical-align: middle; | |
float: none; | |
width: auto; | |
height: auto; | |
background-image: none; | |
letter-spacing: 0; | |
-webkit-box-shadow: none; | |
-moz-box-shadow: none; | |
box-shadow: none; | |
list-style: none; | |
-webkit-text-shadow: none !important; | |
-moz-text-shadow: none !important; | |
text-shadow: none !important; | |
-webkit-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
-ms-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
.padiPop4Overlay *, .padiPop4Overlay *:before, .padiPop4Overlay *:after { | |
-webkit-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
-ms-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
.padiPop4Wrap { | |
position: absolute; | |
visibility: visible; | |
z-index: 1602; | |
padding: 10px; | |
left: 50%; | |
margin-left: -200px; | |
top: 5%; | |
height: auto; | |
width: auto; | |
max-width: 400px; | |
} | |
.padiPop4Overlay { | |
font-family: Arial, Helvetica, sans-serif; | |
font-size: 13px; | |
background-color: rgb(180,180,180); | |
background-color: rgba(180,180,180,0.8); | |
background-image: none; | |
background-repeat: no-repeat; | |
padding: 6px; | |
-moz-border-radius: 6px; | |
-webkit-border-radius: 6px; | |
border-radius: 6px; | |
box-shadow: 0 0 25px rgba(0, 0, 0, 0.8); | |
-webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.8); | |
-moz-box-shadow: 0 0 25px rgba(0, 0, 0, 0.8); | |
-moz-background-clip: padding; | |
-webkit-background-clip: padding-box; | |
background-clip: padding-box; | |
position: static; | |
margin: 0; | |
z-index: 1060; | |
overflow: auto; | |
} | |
.padiPop4Overlay a { | |
color: inherit; | |
text-decoration: underline; | |
border-bottom: none; | |
} | |
.padiPop4Overlay a:hover { | |
color:inherit; | |
text-decoration: underline; | |
border-bottom: none; | |
} | |
.padiPop4Overlay h1.padiTitle { | |
color: #000; | |
font-size: 18px; | |
font-weight: bold; | |
margin: 0; | |
padding: 15px 0; | |
text-shadow: none; | |
word-spacing: -1px; | |
text-decoration: none; | |
line-height: 22px; | |
} | |
.padiPop4Overlay div.padiPopupContent { | |
position: relative; | |
-moz-border-radius: 6px; | |
-webkit-border-radius: 6px; | |
border-radius: 6px; | |
background: rgb(255,255,255); | |
margin-bottom: 0; | |
-moz-background-clip: padding; | |
-webkit-background-clip: padding-box; | |
background-clip: padding-box; | |
color: #2d2d2d; | |
} | |
.padiPop4Overlay .padiContent { | |
padding: 0 1.6em 0.2em 1.5em; | |
color: #2d2d2d; | |
} | |
.padiPop4Overlay .padiContent p { | |
margin-top: 0; | |
margin-bottom: 1.4em; | |
} | |
.padiPop4Overlay .padiCriticalMessage { | |
border: none !important; | |
background: #FCC; | |
padding: 10px; | |
font-size: 13px; | |
font-weight: normal; | |
color: #b10000; | |
-moz-border-radius: 6px; | |
-webkit-border-radius: 6px; | |
border-radius: 6px; | |
} | |
.padiPop4Overlay .padiFields { | |
width: 100%; | |
display: block; | |
vertical-align: top; | |
padding: 0; | |
} | |
.padiPop4Overlay .padiThanks { | |
width: 100%; | |
display: block; | |
vertical-align: top; | |
padding: 0; | |
font-weight: bold; | |
color: #2d2d2d; | |
} | |
.padiClearfix:after { | |
content: " "; /* Older browser do not support empty content */ | |
visibility: hidden; | |
display: block; | |
height: 0; | |
clear: both; | |
} | |
.padiPop4Overlay .padiClose { | |
font-family: Arial, Helvetica, sans-serif; | |
padding: 8px; | |
margin: 0; | |
display: block; | |
float: right; | |
font-size: 28px; | |
font-weight: bold; | |
line-height: 18px; | |
color: rgb(180,180,180); | |
text-shadow: none; | |
opacity: 0.5; | |
filter: alpha(opacity=20); | |
text-decoration: none !important; | |
border: none; | |
} | |
.padiPop4Overlay .padiClose:hover { | |
color: rgb(180,180,180); | |
text-decoration: none; | |
opacity: 0.9; | |
filter: alpha(opacity=40); | |
cursor: pointer; | |
text-decoration: none !important; | |
border: none; | |
padding: 8px; | |
margin: 0; | |
display: block; | |
} | |
/* THE FORM FIELDS */ | |
.padiPop4Overlay form { | |
position: relative; | |
padding-top: 5px; | |
margin: 0; | |
display: block; | |
} | |
.padiPop4Overlay form .padiField { | |
display: block; | |
width: 100%; | |
height: 34px; | |
padding: 6px 8px; | |
font-size: 13px; | |
line-height: 1.428571429; | |
color: #2d2d2d; | |
vertical-align: middle; | |
background-color: rgba(255,255,255,0.3); | |
background-image: none; | |
border: 1px solid #CCC; | |
border-radius: 4px; | |
-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.18); | |
-moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.18); | |
box-shadow: inset 0 0 3px rgba(0,0,0,0.18); | |
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; | |
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; | |
margin: 4px 0px 3px 0px; | |
font-family: Arial, Helvetica, sans-serif; | |
} | |
.padiPop4Overlay form .padiCheck { | |
margin: 0px 4px 2px 4px; | |
vertical-align: bottom; | |
} | |
.padiPop4Overlay form .padiField:focus { | |
border-color: #666; | |
outline: 0; | |
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(255,255,255,0.6); | |
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(255,255,255,0.6); | |
} | |
.padiPop4Overlay form .padiLabel { | |
font-weight: bold; | |
} | |
.padiPop4Overlay form .padiRadioLabel { | |
font-weight: normal !important; | |
font-size: 12px; | |
} | |
.padiPop4Overlay form option { | |
color: #333; | |
} | |
.padiPop4Overlay form .padiRadio { | |
margin-bottom: 1.4em; | |
padding: 0; | |
list-style: none; | |
} | |
.padiPop4Overlay form .padiRadio li { | |
margin: 3px 0px; | |
} | |
.padiPop4Overlay form .padiButton { | |
color: #fff; | |
background-color: #222; | |
border-color: #000; | |
} | |
.padiPop4Overlay form .padiButton:hover { | |
background-color: #444; | |
border-color: #222; | |
} | |
.padiPop4Overlay form .padiButton:active { | |
background-image: none; | |
outline: 0; | |
-webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.225); | |
box-shadow: inset 0 3px 5px rgba(0,0,0,0.225); | |
} | |
.padiPop4Overlay form .padiButton { | |
display: inline-block; | |
padding: 4px 10px; | |
margin-bottom: 0; | |
margin-top: 15px; | |
font-size: 14px; | |
font-weight: bold; | |
line-height: 1.428571429; | |
text-shadow: 0px 1px 2px rgba(0,0,0,0.3); | |
text-align: center; | |
white-space: nowrap; | |
vertical-align: middle; | |
cursor: pointer; | |
background-image: none; | |
border: 1px solid transparent; | |
border-radius: 10px; | |
-moz-border-radius: 10px; | |
-webkit-border-radius: 10px; | |
-webkit-user-select: none; | |
-moz-user-select: none; | |
-ms-user-select: none; | |
-o-user-select: none; | |
user-select: none; | |
outline: none; | |
opacity: 0.9; | |
font-family: Arial, Helvetica, sans-serif; | |
} | |
.padiPop4Overlay form .padiButton:hover { | |
opacity: 1; | |
} | |
.padiPop4Overlay form .padiSLabel { | |
font-size: 12px; | |
display: block; | |
margin: 5px 0; | |
} | |
.padiPop4Overlay .privacy { | |
font-size: 11px; | |
font-style: italic; | |
color: #777; | |
margin-bottom: 10px !important; | |
} | |
.padiPreload { | |
display: inline-block; | |
position: absolute; | |
bottom: 0; | |
right: inherit; | |
padding: 3px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment