Skip to content

Instantly share code, notes, and snippets.

@diwu1989

diwu1989/wootric.css

Created June 17, 2016 06:59
Show Gist options
  • Save diwu1989/5e1145c6089fc9b07ac959d583fe940d to your computer and use it in GitHub Desktop.
Save diwu1989/5e1145c6089fc9b07ac959d583fe940d to your computer and use it in GitHub Desktop.
Download ZIP
wootric css
Raw
wootric.css
/*
------------------------------------------
ALL WOOTRIC BEACON CSS BELOW
------------------------------------------
*/
#wootric-modal * {
/* intelligent box-model please! */
/* include padding in container sizing */
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
-webkit-user-select: none;
/* mega reset */
position: relative;
width: auto;
height: auto;
margin: 0;
padding: 0;
text-align: center;
float: none;
clear: both;
min-height: 0px;
min-width: 0px;
}
#wootric-modal INPUT,
#wootric-modal TEXTAREA,
#wootric-modal P {
-webkit-user-select: auto;
}
#wootric-modal INPUT[type=\'submit\'] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/*
A New Micro Clearfix Hack
License: none (public domain)
http://nicolasgallagher.com/micro-clearfix-hack/
*/
#wootric-modal .clearfix:before,
#wootric-modal .clearfix:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
#wootric-modal .clearfix:after {
clear: both;
}
/* device width stuff */
#wootric-modal .device {
display: none;
}
@media only screen and (max-width: 767px) {
#wootric-modal .device {
display: block;
}
#wootric-modal .screen {
display: none;
}
}
/* positioning & sizing stuffs */
#wootric-modal .floatleft {
float: left !important;
}
#wootric-modal .floatright {
float: right !important;
}
#wootric-modal .inlineblock {
display: inline-block !important;
vertical-align: top !important;
}
#wootric-modal .relative,
#wootric-modal.relative {
position: relative;
}
#wootric-modal .fixed,
#wootric-modal.fixed {
position: fixed !important;
-webkit-transform: translateZ(0);
}
#wootric-modal .hidden,
#wootric-modal.hidden {
display: none;
}
#wootric-modal .collapsed {
max-height: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
overflow: hidden;
transition: max-height 0.3s ease;
-webkit-transition: max-height 0.3s ease;
-moz-transition: max-height 0.3s ease;
transition: padding 0.3s ease;
-webkit-transition: padding 0.3s ease;
-moz-transition: padding 0.3s ease;
transition: margin 0.3s ease;
-webkit-transition: margin 0.3s ease;
-moz-transition: margin 0.3s ease;
}
#wootric-modal .wootric-beacon-contents > div {
transition: max-height 0.3s ease;
-webkit-transition: max-height 0.3s ease;
-moz-transition: max-height 0.3s ease;
transition: padding 0.3s ease;
-webkit-transition: padding 0.3s ease;
-moz-transition: padding 0.3s ease;
transition: margin 0.3s ease;
-webkit-transition: margin 0.3s ease;
-moz-transition: margin 0.3s ease;
}
/*
------------------------------------------
BEACON BASIC STUFF
(colour scheme all the way at the bottom)
------------------------------------------
*/
body.wootric-modal-showing {
transition: padding 0.3s ease;
-webkit-transition: padding 0.3s ease;
-moz-transition: padding 0.3s ease;
}
#wootric-modal {
position: fixed;
top: -300px;
left: 0;
right: 0;
width: 100%;
font-family: "Helvetica Neue", Helvetica-Neue, Helvetica Neue, Helvetica, Arial, sans-serif;
transition: top 0.5s ease;
-webkit-transition: top 0.5s ease;
-moz-transition: top 0.5s ease;
z-index: 10000000001;
}
#wootric-modal.show {
top: 0px;
}
#wootric-modal.bottom {
top: auto;
bottom: -300px;
transition: bottom 0.5s ease;
-webkit-transition: bottom 0.5s ease;
-moz-transition: bottom 0.5s ease;
}
#wootric-modal.bottom.show {
top: auto;
bottom: 0px;
}
#wootric-modal .wootric-beacon-parent {
position: relative;
width: 100%;
border-bottom: 5px solid;
}
#wootric-modal.bottom .wootric-beacon-parent {
border-bottom: none;
border-top: 5px solid;
}
#wootric-modal #wootric-close {
position: absolute;
z-index: 1;
cursor: pointer;
top: 10px;
right: 10px;
width: 34px;
height: 34px;
padding: 0px;
padding-left: 34px;
border-radius: 17px;
-moz-border-radius: 17px;
font-size: 14px;
line-height: 32px;
font-weight: 200;
text-align: left;
color: #808080;
overflow: hidden;
transition: width 0.25s ease;
-webkit-transition: width 0.25s ease;
-moz-transition: width 0.25s ease;
}
#wootric-modal.compact #wootric-close {
width: 28px;
height: 28px;
padding-left: 28px;
border-radius: 14px;
-moz-border-radius: 14px;
font-size: 12px;
font-weight: 400;
line-height: 26px;
}
#wootric-modal #wootric-close:hover {
width: 104px;
}
#wootric-modal.compact #wootric-close:hover {
width: 94px;
}
#wootric-modal #wootric-close span#wootric-x {
position: absolute;
z-index: 1;
cursor: pointer;
top: 0px;
left: 0px;
width: 34px;
height: 34px;
border-radius: 17px;
-moz-border-radius: 17px;
padding: 5px;
font-size: 18px;
line-height: 24px;
font-weight: 400;
color: #808080;
}
#wootric-modal.compact #wootric-close span#wootric-x {
width: 28px;
height: 28px;
border-radius: 14px;
-moz-border-radius: 14px;
padding: 3px;
font-size: 16px;
line-height: 20px;
font-weight: 400;
}
#wootric-modal #wootric-fullscore,
#wootric-modal #wootric-question,
#wootric-modal #wootric-feedback,
#wootric-modal #wootric-share {
margin: 0 0 0.85rem 0;
}
#wootric-modal.compact #wootric-fullscore,
#wootric-modal.compact #wootric-question,
#wootric-modal.compact #wootric-feedback,
#wootric-modal.compact #wootric-share {
margin: 0 0 0.5rem 0;
}
#wootric-modal.spacious #wootric-fullscore,
#wootric-modal.spacious #wootric-question,
#wootric-modal.spacious #wootric-feedback,
#wootric-modal.spacious #wootric-share {
margin: 0 0 1.15rem 0;
}
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
#wootric-modal #wootric-fullscore,
#wootric-modal #wootric-question,
#wootric-modal #wootric-feedback,
#wootric-modal #wootric-share {
margin: 0 0 0.75rem 0 !important;
}
#wootric-modal #wootric-question {
margin: 1.5rem 0 0.75rem 0 !important;
}
#wootric-modal.compact #wootric-fullscore,
#wootric-modal.compact #wootric-question,
#wootric-modal.compact #wootric-feedback,
#wootric-modal.compact #wootric-share {
margin: 0 0 0.5rem 0 !important;
}
#wootric-modal.compact #wootric-question {
margin: 2rem 0 0.75rem 0 !important;
}
}
#wootric-modal p {
line-height: 24px;
font-size: 16px;
margin: 0;
padding: 0 3rem;
}
#wootric-modal.compact p {
font-size: 14px;
}
#wootric-modal.spacious p {
font-size: 18px;
font-weight: 200;
}
#wootric-modal form,
#wootric-modal .wootric-beacon-contents {
top: 0;
left: 0;
width: 100%;
text-align: center;
z-index: 1;
}
#wootric-modal .wootric-beacon-contents {
padding: 1.25rem 0 0.25rem 0;
}
#wootric-modal.compact .wootric-beacon-contents {
padding: 0.5rem 0 0 0;
}
#wootric-modal.spacious .wootric-beacon-contents {
padding: 1.75rem 0 0.5rem 0;
}
#wootric-modal ul {
display: inline-block;
font-size: 0;
line-height: 36px;
margin: 0 .25rem;
padding: 0;
}
#wootric-modal li {
font-size: 14px;
padding: 12px 16px;
border-radius: 25px;
-moz-border-radius: 25px;
display: inline;
margin-right: 3px;
cursor: pointer;
}
#wootric-modal.compact li {
font-size: 14px;
padding: 8px 12px;
}
#wootric-modal.spacious li {
font-size: 16px;
padding: 14px 18px;
}
#wootric-modal li.selected,
#wootric-modal li.selected:hover {
background-color: #2d91d7 !important;
color: white !important;
text-shadow: 0 0 0 transparent, 0 -1px 1px rgba(0, 0, 0, 0.5) !important;
}
#wootric-modal li:last-child {
padding: 12px;
}
#wootric-modal.compact li:last-child {
padding: 8px;
}
#wootric-modal.spacious li:last-child {
padding: 14px;
}
#wootric-modal label {
font-style: italic;
font-size: 12px;
display: inline-block;
padding: 1rem 0 0 0;
}
#wootric-modal.compact label {
padding: 0;
}
#wootric-modal.spacious label {
padding: 1.25rem 0 0 0;
}
#wootric-modal .wootric-score label:first-child {
padding: 0 0 1rem 0;
}
#wootric-modal .feedback {
max-height: 240;
}
#wootric-modal .feedback input,
#wootric-modal .feedback textarea {
margin: 0;
display: inline-block;
vertical-align: top;
}
#wootric-modal textarea {
font-family: "Helvetica Neue", Helvetica-Neue, Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 13px;
line-height: 18px;
width: 50%;
border-radius: 4px 0 0 4px;
border-right: transparent;
box-shadow: none;
padding: 8px;
text-align: left;
resize: none;
}
#wootric-modal.compact textarea {
font-size: 12px;
line-height: 15px;
}
#wootric-modal.spacious textarea {
font-size: 14px;
line-height: 21px;
}
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
#wootric-modal textarea {
width: 70%;
}
}
#wootric-modal #wootric-submit {
background: rgba(0, 0, 0, 0.5);
border: 1px solid rgba(0, 0, 0, 0.1);
color: white;
cursor: pointer;
text-transform: uppercase;
font-size: 14px;
line-height: 18px;
border-radius: 0 4px 4px 0;
padding: 17px;
margin-left: -5px;
}
#wootric-modal.compact #wootric-submit {
font-size: 13px;
line-height: 12px;
}
#wootric-modal.spacious #wootric-submit {
font-size: 15px;
line-height: 24px;
}
@-moz-document url-prefix() {
#wootric-modal #wootric-submit {
padding: 16px;
padding-bottom: 17px;
}
}
#wootric-modal::-webkit-input-placeholder {
font-weight: normal;
}
#wootric-modal .wootric-explain {
font-size: 0.8rem;
}
#wootric-modal .share p {
font-size: 0.9rem;
}
#wootric-modal .share span {
display: inline-block;
padding: 7px;
margin: 0 3px;
}
#wootric-modal .share span {
cursor: pointer;
opacity: 0.5;
}
#wootric-modal .share span:hover {
opacity: 1;
}
#wootric-modal .share span:not(.decline) label {
display: none;
}
#wootric-modal .share span:not(.decline) i {
font-size: 24px;
}
#wootric-modal .share span:not(.decline) i.icon-google {
margin-top: 3px;
}
#wootric-modal .share span.decline {
font-size: 14px;
}
/*
------------------------------------------
POWERED BY WOOTRIC
------------------------------------------
*/
#wootric-modal .poweredby {
display: block;
padding-bottom: 10px;
font-size: .7rem;
color: #b4b4b4;
}
#wootric-modal .poweredby a {
text-decoration: none;
color: #82bed2;
}
#wootric-modal .poweredby a:hover {
color: #64aac8;
}
/*
------------------------------------------
THANK YOU BUTTONS
------------------------------------------
*/
#wootric-modal .twitter-button {
background-color: #1b95e0;
border-radius: 3px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 14px;
height: 20px;
padding: 1px 8px 1px 6px;
text-shadow: none;
}
#wootric-modal .twitter-button:hover {
background-color: #0c7abf;
}
#wootric-modal .thank-you-button-outline {
background: rgba(45, 145, 215, 0);
border: 1px solid rgba(45, 145, 215, 0.5);
border-radius: 4px;
color: #2d91d7;
cursor: pointer;
font-family: "Helvetica Neue", Helvetica, Arial, sans serif;
font-size: 13px;
font-weight: 400;
height: 20px;
padding: 0 5px;
}
#wootric-modal span.tweet {
display: inline;
font-size: 11px;
margin: 0;
opacity: 1;
padding: 0;
}
#wootric-modal .thank-you-button-outline:hover {
background: rgba(45, 145, 215, 0.1);
cursor: pointer;
}
#wootric-modal .no-thanks-button {
background: white;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 4px;
color: #888;
font-family: "Helvetica Neue", Helvetica, Arial, sans serif;
font-size: 13px;
font-weight: 400;
height: 20px;
padding: 0 5px;
}
#wootric-modal .no-thanks-button:hover {
background: rgba(0, 0, 0, 0.05);
cursor: pointer;
}
#wootric-modal div {
font-family: "Helvetica Neue", Helvetica, Arial, sans serif;
text-align: center;
}
#wootric-modal .thanks {
color: #7da52d;
font-weight: 600;
}
#wootric-modal .wootric-followup {
color: #333;
font-size: 14px;
padding: 1rem 0 0.7rem;
}
#wootric-modal .wootric-followup p {
font-size: 14px !important;
}
#wootric-modal .followup-btns {
margin-bottom: 1rem;
}
#wootric-modal .followup-btns input {
margin: 0;
}
/*
------------------------------------------
MODAL COLOUR SCHEME STUFFS
------------------------------------------
*/
/* default light scheme */
#wootric-modal .wootric-beacon-parent {
color: #373737;
text-shadow: 0 0 0 transparent, 0 1px 1px white;
border-color: rgba(0, 0, 0, 0.16) !important;
background-color: white;
box-shadow: 0 0 28px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 28px rgba(0, 0, 0, 0.1);
}
/* dark scheme */
#wootric-modal.dark .wootric-beacon-parent {
color: #b9b9b9;
text-shadow: 0 0 0 transparent, 0 -1px 1px rgba(0, 0, 0, 0.75);
border-color: rgba(0, 0, 0, 0.56);
background-color: #373737;
box-shadow: 0 0 28px rgba(0, 0, 0, 0.28);
-moz-box-shadow: 0 0 28px rgba(0, 0, 0, 0.28);
}
/* default light scheme */
#wootric-modal #wootric-thanks {
color: #7da52d;
font-weight: 600;
}
/* dark scheme */
#wootric-modal.dark #wootric-thanks {
color: #87b937;
font-weight: 600;
}
/* default light scheme */
#wootric-modal #wootric-close {
border: 1px solid rgba(0, 0, 0, 0.14);
}
#wootric-modal #wootric-close:hover {
background-color: #ededed;
color: rgba(0, 0, 0, 0.75);
}
/* dark scheme */
#wootric-modal.dark #wootric-close {
border: 1px solid rgba(255, 255, 255, 0.14);
}
#wootric-modal.dark #wootric-close:hover {
background-color: #535353;
color: rgba(255, 255, 255, 0.75);
}
/* default light scheme */
#wootric-modal li {
border: 1px solid rgba(0, 0, 0, 0.2);
color: rgba(0, 0, 0, 0.55);
}
/* dark scheme */
#wootric-modal.dark li {
border: 1px solid rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0.55);
}
/* default light scheme */
#wootric-modal li:hover {
background: rgba(0, 0, 0, 0.05);
color: rgba(0, 0, 0, 0.95);
}
/* dark scheme */
#wootric-modal.dark li:hover {
background: rgba(255, 255, 255, 0.07);
color: white;
}
/* default light scheme */
#wootric-modal label {
color: rgba(0, 0, 0, 0.3);
}
/* dark scheme */
#wootric-modal.dark label {
color: rgba(255, 255, 255, 0.4);
}
/* default light scheme */
#wootric-modal textarea {
color: rgba(0, 0, 0, 0.5);
border: 1px solid rgba(0, 0, 0, 0.1);
background-color: rgba(0, 0, 0, 0.02);
}
/* dark scheme */
#wootric-modal.dark textarea {
color: rgba(255, 255, 255, 0.75);
border: 1px solid rgba(0, 0, 0, 0.2);
background-color: rgba(0, 0, 0, 0.1);
}
/* default light scheme */
#wootric-modal .share p {
color: rgba(0, 0, 0, 0.75);
}
/* dark scheme */
#wootric-modal.dark .share p {
color: rgba(255, 255, 255, 0.75);
}
/*
------------------------------------------
ICON FONT
------------------------------------------
*/
@font-face {
font-family: \'FontAwesome\';
src: url("//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?v=4.3.0");
src: url("//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"),
url("//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0") format("woff2"),
url("//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff?v=4.3.0") format("woff"),
url("//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.ttf?v=4.3.0") format("truetype"),
url("//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg");
font-weight: normal;
font-style: normal;
}
#wootric-modal.dark [class^="icon-"],
#wootric-modal.dark [class*=" icon-"] {
color: #777777;
}
#wootric-modal.dark [class^="icon-"]:hover,
#wootric-modal.dark [class*=" icon-"]:hover {
color: #b9b9b9;
}
#wootric-modal.light [class^="icon-"],
#wootric-modal.light [class*=" icon-"] {
color: white;
}
#wootric-modal.light [class^="icon-"]:hover,
#wootric-modal.light [class*=" icon-"]:hover {
color: white;
}
#wootric-modal #wootric-share #wootric-social-link {
display: inline-block;
}
#wootric-modal #wootric-share #wootric-decline {
display: inline-block;
}
#wootric-modal .fb-like {
position: relative;
top: -5px;
margin: 0 0.3rem 0 0.1rem;
}
#wootric-modal .fa-facebook:before {
content: "\\f09a";
}
#wootric-modal .fa-twitter:before {
content: "\\f099";
}
#wootric-modal .fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment