Skip to content

Instantly share code, notes, and snippets.

@ryndel ryndel/bubble.css
Last active Dec 17, 2015

Embed
What would you like to do?
A collection of old css files from common.css. Replaced by less mixins
/* bubbles */
.bubble {
border-color: #EE4B4B;
position: relative;
left: 0px;
top: 0px;
color:#333;
padding:20px;
width: 225px;
height: 125px;
margin: 8px 13px 25px 0;
border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
background: #c2f5fc;
text-align: left;
float: left;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
line-height: 1.3;
border-width: 0;
}
.bubble.red {
background-color:#ffe1d9;
}
.bubble.green {
background-color:#f5ffd9;
}
.bubble.blue {
background-color:#d7f8fc;
}
.bubble.magenta {
background-color:#ffd9e9;
}
.bubble.orange {
background-color:#ffe7d9;
}
.bubble.yellow {
background-color:#fff3d9;
}
.bubble.grey {
background-color:#dddddd;
}
.bubble p {
colour:#333;
height:4em;
}
.bubble a.button, .bubble a.button:visited {
position:absolute;
bottom:20px;
right:20px;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
.bubble:last-child: {
margin-right:0;
}
.bubble:before, .bubble:after {
content: "";
position: absolute;
top: 100%;
left: 124px;
border-top: 15px solid transparent;
border-left: 0 solid transparent;
border-right: 15px solid transparent;
border-left-color:#000;
border-top-color:#000;
}
.bubble.red:after {
border-left-color:#ffe1d9;
border-top-color:#ffe1d9;
}
.bubble.green:after {
border-left-color:#f5ffd9;
border-top-color:#f5ffd9;
}
.bubble.blue:after {
border-left-color:#d7f8fc;
border-top-color:#d7f8fc;
}
.bubble.magenta:after {
border-left-color:#ffd9e9;
border-top-color:#ffd9e9;
}
.bubble.orange:after {
border-left-color:#ffe7d9;
border-top-color:#ffe7d9;
}
.bubble.yellow:after {
border-left-color:#fff3d9;
border-top-color:#fff3d9;
}
.bubble.grey:after {
border-left-color:#dddddd;
border-top-color:#dddddd;
}
.bubble:hover {
box-shadow:3px 3px 5px rgba(0,0,0,0.2);
-webkit-box-shadow:3px 3px 5px rgba(0,0,0,0.2);
-moz-box-shadow:3px 3px 5px rgba(0,0,0,0.2);
}
.bubble-large {
border-color: #EE4B4B;
position: relative;
left: 0px;
top: 0px;
color:#333;
padding:20px 20px 10px 20px;
margin: 8px 0;
border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
background: #eee;
text-align: left;
float: left;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
line-height: 1.3;
border-width: 0;
}
/* buttons */
.button, a.button:visited {
background: #222;
display: inline-block;
padding: 5px 10px 6px;
color: #fff !important;
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
position: relative;
cursor: pointer;
}
a.button:hover { background-color: #111; color: #fff; }
/* .button:active { top: 1px; } */
.small.button, a.small.button:visited { font-size: 11px; padding: ; }
.button, .button:visited,
.medium.button, a.medium.button:visited { font-size: 13px; font-weight: normal; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); }
.large.button, a.large.button:visited { font-size: 14px; padding: 8px 14px 9px; }
.red.button, a.red.button:visited { background-color: #e33100; }
a.red.button:hover { background-color: #872300; }
.green.button, a.green.button:visited { background-color: #91bd09; }
a.green.button:hover { background-color: #749a02; }
.blue.button, a.blue.button:visited { background-color: #2daebf; }
a.blue.button:hover { background-color: #007d9a; }
.magenta.button, a.magenta.button:visited { background-color: #a9014b; }
a.magenta.button:hover { background-color: #630030; }
.orange.button, a.orange.button:visited { background-color: #ff5c00; }
a.orange.button:hover { background-color: #d45500; }
.yellow.button, a.yellow.button:visited { background-color: #ffb515; }
a.yellow.button:hover { background-color: #fc9200; }
.grey.button, a.grey.button:visited { background-color: #666666; }
a.grey.button:hover { background-color: #333333; }
/* buttons */
.button, .button:visited {
background: #222;
display: inline-block;
padding: 5px 10px 6px;
color: #fff !important;
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
}
.button:hover { background-color: #111; color: #fff; }
/* .button:active { top: 1px; } */
.small.button, .small.button:visited { font-size: 11px; padding: ; }
.button, .button:visited,
.medium.button, .medium.button:visited { font-size: 13px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); }
.large.button, .large.button:visited { font-size: 14px; padding: 8px 14px 9px; }
.red.button, .red.button:visited { background-color: #e33100; }
.red.button:hover { background-color: #872300; }
.green.button, .green.button:visited { background-color: #91bd09; }
.green.button:hover { background-color: #749a02; }
.blue.button, .blue.button:visited { background-color: #2daebf; }
.blue.button:hover { background-color: #007d9a; }
.magenta.button, .magenta.button:visited { background-color: #a9014b; }
.magenta.button:hover { background-color: #630030; }
.orange.button, .orange.button:visited { background-color: #ff5c00; }
.orange.button:hover { background-color: #d45500; }
.yellow.button, .yellow.button:visited { background-color: #ffb515; }
.yellow.button:hover { background-color: #fc9200; }
.grey.button, .grey.button:visited { background-color: #666666; }
.grey.button:hover { background-color: #333333; }
.red, a.red:visited { background-color: #e33100; }
a.red:hover { background-color: #872300; }
.green, a.green:visited { background-color: #91bd09; }
a.green:hover { background-color: #749a02; }
.blue, a.blue:visited { background-color: #2daebf; }
a.blue:hover { background-color: #007d9a; }
.magenta, a.magenta:visited { background-color: #a9014b; }
a.magenta:hover { background-color: #630030; }
.orange, a.orange:visited { background-color: #ff5c00; }
a.orange:hover { background-color: #d45500; }
.yellow, a.yellow:visited { background-color: #ffb515; }
a.yellow:hover { background-color: #fc9200; }
.grey, a.grey:visited { background-color: #666666; }
a.grey:hover { background-color: #333333; }
/* Popup */
.popup {
display: none;
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
z-index:9999;
}
.popup .overlay {
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background: rgba(0,0,0, 0.5);
}
.popup .window {
position: absolute;
top: 50%;
left: 50%;
width: 60%;
height: 60%;
margin-left: -30%;
margin-top: -30%;
background: #fff;
-moz-border-radius: 15px;
border-radius: 15px;
padding:16px;
background:#fff;
background-size:contain;
}
.popup article {
height: 100%;
text-align: left;
padding: 12px;
color:#4c4b4c;
}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, button, input, select, textarea { font-family: sans-serif; color: #222; }
body { margin: 0; font-size: 1em; line-height: 1.4; color:#333 }
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }
a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
button[disabled], input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid { }
input:invalid, textarea:invalid { background-color: #f0dddd; }
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }
.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }
h1, h2, h3, h4, h5 { font-weight:normal }
.ribbon {
position: absolute;
right: 0;
top: 0;
width: 200px;
height: 150px;
font-family:Arial, Helvetica, sans-serif;
text-decoration: none !important;
}
.ribbon:hover {
text-decoration: none !important;
}
.ribbon .tag {
display: block;
height: 30px;
width: 200px;
color: #fff;
text-align: center;
font-size: 13px;
font-weight: bold;
line-height: 30px;
text-decoration:none !important;
box-shadow: 0px 0px 10px rgba( 0, 0, 0, 0.4 );
-webkit-transform-origin: 15px 0px;
-moz-transform-origin: 15px 0px;
-ms-transform-origin: 15px 0px;
-o-transform-origin: 15px 0px;
transform-origin: 15px 0px;
-webkit-transform: translate(80.00000000000003px, -14.999999999999996px) rotate(45.000000000000014deg);
-moz-transform: translate(80.00000000000003px, -14.999999999999996px) rotate(45.000000000000014deg);
-ms-transform: translate(80.00000000000003px, -14.999999999999996px) rotate(45.000000000000014deg);
-o-transform: translate(80.00000000000003px, -14.999999999999996px) rotate(45.000000000000014deg);
}
.ribbon .tag:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 196px;
height: 26px;
margin: 1px;
border: 1px solid rgba( 255, 255, 255, 0.4 );
}
.tag:hover { background-color: #111; color: #fff; text-decoration:none !important }
.small.tag, .small.tag:visited { font-size: 11px; }
.tag, .tag:visited,
.medium.tag, .medium.tag:visited { font-size: 13px; }
.large.tag, .large.tag:visited { font-size: 14px; }
@media screen and (max-width: 800px) {
.ribbon {
width: 120px;
height: 120px;
}
.ribbon .tag {
height: 30px;
width: 120px;
-webkit-transform: translate(50.00000000000003px, -14.999999999999996px) rotate(45.000000000000014deg);
}
.ribbon .tag:after {
width: 156px;
height: 26px;
}
}
/* Social Links */
#social-links {
position: absolute;
top: 50%;
height: 1000px;
margin-top: -500px;
}
#social-links ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#social-links li{
margin: 0;
padding: 0;
}
#social-links li a {
text-indent: -9999px;
display: block;
width: 40px;
height: 40px;
background: url(../img/icons/social-aside.png) 6px 0px no-repeat;
}
#social-links .twitter a {
background-color: #31B6D9;
background-position: 6px 0px;
}
#social-links .facebook a {
background-color: #5069BA;
background-position: 6px -40px;
}
#social-links .github a {
background-color: #888;
background-position: 6px -80px;
}
/* set 1 */
.mono-21px-youtube {
background: url('../img/icons/social-icons-set.png') no-repeat -4px -38px;
width: 21px;
height: 21px;
}
.mono-21px-facebook {
background: url('../img/icons/social-icons-set.png') no-repeat -31px -38px;
width: 21px;
height: 21px;
}
.mono-21px-twitter {
background: url('../img/icons/social-icons-set.png') no-repeat -58px -38px;
width: 21px;
height: 21px;
}
.mono-21px-linkedin {
background: url('../img/icons/social-icons-set.png') no-repeat -85px -38px;
width: 21px;
height: 21px;
}
.mono-21px-flickr {
background: url('../img/icons/social-icons-set.png') no-repeat -112px -38px;
width: 21px;
height: 21px;
}
.mono-21px-octocat {
background: url('../img/icons/social-icons-set.png') no-repeat -140px -39px;
width: 21px;
height: 21px;
}
.mono-21px-github {
background: url('../img/icons/social-icons-set.png') no-repeat -167px -39px;
width: 21px;
height: 21px;
}
/* set 2 */
.color-20px-facebook {
background: url('../img/icons/social-icons-set.png') no-repeat -4px -65px;
width: 20px;
height: 19px;
}
.color-20px-twitter {
background: url('../img/icons/social-icons-set.png') no-repeat -5px -90px;
width: 20px;
height: 19px;
}
.color-20px-email {
background: url('../img/icons/social-icons-set.png') no-repeat -5px -115px;
width: 20px;
height: 19px;
}
.color-20px-github {
background: url('../img/icons/social-icons-set.png') no-repeat -5px -140px;
width: 20px;
height: 19px;
}
/* set 3 */
.color-29px-twitter {
background: url('../img/icons/social-icons-set.png') no-repeat -6px -189px;
width: 29px;
height: 29px;
}
.color-29px-facebook {
background: url('../img/icons/social-icons-set.png') no-repeat -42px -188px;
width: 31px;
height: 31px;
}
.color-29px-rss {
background: url('../img/icons/social-icons-set.png') no-repeat -80px -187px;
width: 31px;
height: 31px;
}
.color-29px-email {
background: url('../img/icons/social-icons-set.png') no-repeat -117px -188px;
width: 31px;
height: 30px;
}
.color-29px-linkedin {
background: url('../img/icons/social-icons-set.png') no-repeat -155px -188px;
width: 31px;
height: 30px;
}
.color-29px-youtube {
background: url('../img/icons/social-icons-set.png') no-repeat -9px -232px;
width: 30px;
height: 29px;
}
.color-29px-flickr {
background: url('../img/icons/social-icons-set.png') no-repeat -48px -231px;
width: 30px;
height: 29px;
}
.color-29px-github {
background: url('../img/icons/social-icons-set.png') no-repeat -88px -231px;
width: 29px;
height: 29px;
}
.color-29px-octocat {
background: url('../img/icons/social-icons-set.png') no-repeat -126px -231px;
width: 29px;
height: 29px;
}
.color-29px-googleplus {
background: url('../img/icons/social-icons-set.png') no-repeat -165px -232px;
width: 28px;
height: 28px;
}
/* set 4 */
.color-16px-facebook {
background: url('../img/icons/social-icons-set.png') no-repeat -22px -271px;
width: 17px;
height: 16px;
}
.color-16px-rss {
background: url('../img/icons/social-icons-set.png') no-repeat -43px -270px;
width: 17px;
height: 17px;
}
.color-16px-email {
background: url('../img/icons/social-icons-set.png') no-repeat -63px -271px;
width: 17px;
height: 16px;
}
.color-16px-linkedin {
background: url('../img/icons/social-icons-set.png') no-repeat -83px -271px;
width: 17px;
height: 16px;
}
.color-16px-youtube {
background: url('../img/icons/social-icons-set.png') no-repeat -103px -271px;
width: 16px;
height: 16px;
}
.color-16px-flickr {
background: url('../img/icons/social-icons-set.png') no-repeat -123px -270px;
width: 17px;
height: 17px;
}
.color-16px-github {
background: url('../img/icons/social-icons-set.png') no-repeat -143px -271px;
width: 15px;
height: 15px;
}
/* set 5 */
.color-60px-facebook {
background: url('../img/icons/social-icons-set.png') no-repeat -3px -320px;
width: 60px;
height: 60px;
}
.color-60px-linkedin {
background: url('../img/icons/social-icons-set.png') no-repeat -66px -320px;
width: 60px;
height: 60px;
}
.color-60px-twitter {
background: url('../img/icons/social-icons-set.png') no-repeat -129px -320px;
width: 60px;
height: 60px;
}
.color-60px-github {
background: url('../img/icons/social-icons-set.png') no-repeat -193px -320px;
width: 60px;
height: 60px;
}
.color-60px-googleplus {
background: url('../img/icons/social-icons-set.png') no-repeat -3px -382px;
width: 60px;
height: 60px;
}
/* set 6 */
.mono-nobg-22px-twitter {
background: url('../img/icons/social-icons-set.png') no-repeat -6px -458px;
width: 27px;
height: 22px;
}
.mono-nobg-22px-facebook {
background: url('../img/icons/social-icons-set.png') no-repeat -47px -458px;
width: 12px;
height: 22px;
}
.mono-nobg-22px-linkedin {
background: url('../img/icons/social-icons-set.png') no-repeat -76px -456px;
width: 27px;
height: 22px;
}
.mono-nobg-22px-googleplus {
background: url('../img/icons/social-icons-set.png') no-repeat -113px -457px;
width: 26px;
height: 23px;
}
.mono-nobg-22px-youtube {
background: url('../img/icons/social-icons-set.png') no-repeat -148px -455px;
width: 21px;
height: 26px;
}
.mono-nobg-22px-rss {
background: url('../img/icons/social-icons-set.png') no-repeat -184px -461px;
width: 19px;
height: 18px;
}
.mono-nobg-22px-github {
background: url('../img/icons/social-icons-set.png') no-repeat -247px -458px;
width: 12px;
height: 22px;
}
/* set 7 */
.mono-nobg-17px-twitter {
background: url('../img/icons/social-icons-set.png') no-repeat -6px -491px;
width: 17px;
height: 15px;
}
.mono-nobg-17px-facebook {
background: url('../img/icons/social-icons-set.png') no-repeat -37px -491px;
width: 8px;
height: 16px;
}
.mono-nobg-17px-linkedin {
background: url('../img/icons/social-icons-set.png') no-repeat -62px -491px;
width: 17px;
height: 16px;
}
.mono-nobg-17px-email {
background: url('../img/icons/social-icons-set.png') no-repeat -95px -493px;
width: 17px;
height: 13px;
}
.mono-nobg-17px-github {
background: url('../img/icons/social-icons-set.png') no-repeat -125px -492px;
width: 8px;
height: 15px;
}
.facebook-black {
background: url('../img/icons/social-monochrome.png') no-repeat 0 0;
width: 32px;
height: 32px;
}
.facebook-white {
background: url('../img/icons/social-monochrome.png') no-repeat 0 -40px;
width: 32px;
height: 32px;
}
.foursquare-black {
background: url('../img/icons/social-monochrome.png') no-repeat -40px 0;
width: 32px;
height: 32px;
}
.foursquare-white {
background: url('../img/icons/social-monochrome.png') no-repeat -40px -40px;
width: 32px;
height: 32px;
}
github-black {
background: url('../img/icons/social-monochrome.png') no-repeat -80px 0;
width: 32px;
height: 32px;
}
.github-white {
background: url('../img/icons/social-monochrome.png') no-repeat -80px -40px;
width: 32px;
height: 32px;
}
.google-black {
background: url('../img/icons/social-monochrome.png') no-repeat -120px 0;
width: 32px;
height: 32px;
}
.google-white {
background: url('../img/icons/social-monochrome.png') no-repeat -120px -40px;
width: 32px;
height: 32px;
}
.linkedin-black {
background: url('../img/icons/social-monochrome.png') no-repeat -160px 0;
width: 32px;
height: 32px;
}
.linkedin-white {
background: url('../img/icons/social-monochrome.png') no-repeat -160px -40px;
width: 32px;
height: 32px;
}
.tumblr-black {
background: url('../img/icons/social-monochrome.png') no-repeat -200px 0;
width: 32px;
height: 32px;
}
.tumblr-white {
background: url('../img/icons/social-monochrome.png') no-repeat -200px -40px;
width: 32px;
height: 32px;
}
.twitter-black {
background: url('../img/icons/social-monochrome.png') no-repeat -240px 0;
width: 32px;
height: 32px;
}
.twitter-white {
background: url('../img/icons/social-monochrome.png') no-repeat -240px -40px;
width: 32px;
height: 32px;
}
.wordpress-black {
background: url('../img/icons/social-monochrome.png') no-repeat -280px 0;
width: 32px;
height: 32px;
}
.wordpress-white {
background: url('../img/icons/social-monochrome.png') no-repeat -280px -40px;
width: 32px;
height: 32px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.