Skip to content

Instantly share code, notes, and snippets.

@zachdrago
Last active August 29, 2015 14:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zachdrago/9156ea0f07dde3ce90e6 to your computer and use it in GitHub Desktop.
Save zachdrago/9156ea0f07dde3ce90e6 to your computer and use it in GitHub Desktop.
Lightbox styling for Golin/Toyota (Special Olympics)
/* --- Stackla popup - General Settings ---*/
.stacklapopup-bg {
opacity: 0.8 !important;
}
.stacklapopup-content-wrap {
background: #000;
border: thin solid #555;
}
.stacklapopup-image-wrapper.stacklapopup-js-zoom {
background-color: transparent !important;
padding: 0 !important;
}
/* --------------------------------------- */
/* ------- Twitter buttons --------- */
.stacklapopup-twitter-intent-wrapper {
position: relative;
z-index: 1000;
top: 26px;
left: 545px;
max-width: 90px !important;
margin: 0 !important;
padding: 0 !important;
}
.stacklapopup-twitter-intent div{
width: 30px !important;
}
.stacklapopup-twitter-intent {
background: transparent !important;
padding: 0px 0px 0px 0px !important;
}
.stacklapopup-twitter-intent a {
background-image: url('https://stackla-web-assets.s3.amazonaws.com/zachdrago.stackla.com/media/images/customimages/2015-04/1428407048/sprites.png') !important;
}
/* -------------------------------- */
/* ------- Close Button ----------- */
.stacklapopup-content .stacklapopup-close {
color: #777 !important;
width: 50px !important;
transition: all .3s ease-in-out;
background-color: transparent;
}
.stacklapopup-content .stacklapopup-close:hover {
color: #FFC527 !important;
}
/* -------------------------------- */
/* ---------- Caption ------------- */
.stacklapopup-caption {
background: #000 !important;
padding-top: 10px !important;
color: #fff !important;
/* text-align: center; */
}
.stacklapopup-caption p {
color: #fff !important;
}
.stacklapopup-caption a {
color: #aaa !important;
}
.stacklapopup-caption a:hover {
color: #FFC527 !important;
text-decoration: none !important;
}
/* -------------------------------- */
/* -------- Social source --------- */
.stacklapopup-source {
background: #000 !important;
color: #aaa !important;
}
/* -------------------------------- */
/* ---------- Interactins/sharing ---------- */
.stacklapopup-interactions {
display: table;
background-color: #000 !important;
}
.stacklapopup-interactions-wrapper {
position: absolute;
top: 0;
left: 400px;
}
.stacklapopup-sharing a {
font-size: 0px !important;
width: 35px !important;
color: #000 !important;
border: thin solid #000 !important;
}
.stacklapopup-share-list {
background-color: transparent !important;
}
.stacklapopup-shareicon {
float: none;
margin-left: auto;
margin-right: auto;
}
.stacklapopup-share-list li a {
background-color: transparent !important;
}
.stacklapopup-interactions li {
transition: all .3s ease-in-out;
}
.stacklapopup-interactions li:hover {
background-color: #FFC527 !important;
}
/* ----------------------------------------- */
/* ---------- User info ------------ */
.stacklapopup-user-info {
padding: 10px 0 20px 10px !important;
}
.stacklapopup-user-info a:hover {
color: #FFC527 !important;
text-decoration: none !important;
}
/* --------------------------------- */
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
/* --- Stackla popup - General Settings ---*/
.stacklapopup-bg {
opacity: 0.8 !important;
}
.stacklapopup-content-wrap {
background: #000;
border: thin solid #555;
}
.stacklapopup-image-wrapper.stacklapopup-js-zoom {
background-color: transparent !important;
padding: 0 !important;
}
/* --------------------------------------- */
/* ------- Twitter buttons --------- */
.stacklapopup-twitter-intent-wrapper {
position: relative;
z-index: 1000;
top: 26px;
left: 545px;
max-width: 90px !important;
margin: 0 !important;
padding: 0 !important;
}
.stacklapopup-twitter-intent div{
width: 30px !important;
}
.stacklapopup-twitter-intent {
background: transparent !important;
padding: 0px 0px 0px 0px !important;
}
.stacklapopup-twitter-intent a {
background-image: url('https://stackla-web-assets.s3.amazonaws.com/zachdrago.stackla.com/media/images/customimages/2015-04/1428407048/sprites.png') !important;
}
/* -------------------------------- */
/* ------- Close Button ----------- */
.stacklapopup-content .stacklapopup-close {
color: #777 !important;
width: 50px !important;
transition: all .3s ease-in-out;
background-color: transparent;
}
.stacklapopup-content .stacklapopup-close:hover {
color: #FFC527 !important;
}
/* -------------------------------- */
/* ---------- Caption ------------- */
.stacklapopup-caption {
background: #000 !important;
padding-top: 10px !important;
color: #fff !important;
/* text-align: center; */
}
.stacklapopup-caption p {
color: #fff !important;
}
.stacklapopup-caption a {
color: #aaa !important;
}
.stacklapopup-caption a:hover {
color: #FFC527 !important;
text-decoration: none !important;
}
/* -------------------------------- */
/* -------- Social source --------- */
.stacklapopup-source {
background: #000 !important;
color: #aaa !important;
}
/* -------------------------------- */
/* ---------- Interactins/sharing ---------- */
.stacklapopup-interactions {
display: table;
background-color: #000 !important;
}
.stacklapopup-interactions-wrapper {
position: absolute;
top: 0;
left: 400px;
}
.stacklapopup-sharing a {
font-size: 0px !important;
width: 35px !important;
color: #000 !important;
border: thin solid #000 !important;
}
.stacklapopup-share-list {
background-color: transparent !important;
}
.stacklapopup-shareicon {
float: none;
margin-left: auto;
margin-right: auto;
}
.stacklapopup-share-list li a {
background-color: transparent !important;
}
.stacklapopup-interactions li {
transition: all .3s ease-in-out;
}
.stacklapopup-interactions li:hover {
background-color: #FFC527 !important;
}
/* ----------------------------------------- */
/* ---------- User info ------------ */
.stacklapopup-user-info {
padding: 10px 0 20px 10px !important;
}
.stacklapopup-user-info a:hover {
color: #FFC527 !important;
text-decoration: none !important;
}
/* --------------------------------- */
</style>
</head>
<body>
<div class='stacklafw' data-id='3689' data-hash='5523a89092f2d' data-ct='' data-alias='toyota-specialolympics.stackla.com' data-ttl="30" ></div>
<script type='text/javascript'>
(function (d, id) {
if (d.getElementById(id)) return;
var t = d.createElement('script');
t.type = 'text/javascript';
t.src = '//assetscdn.stackla.com/media/js/widget/fluid-embed.js';
t.id = id;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(t);
}(document, 'stacklafw-js'));
</script>
<script id="jsbin-source-css" type="text/css">/* --- Stackla popup - General Settings ---*/
.stacklapopup-bg {
opacity: 0.8 !important;
}
.stacklapopup-content-wrap {
background: #000;
border: thin solid #555;
}
.stacklapopup-image-wrapper.stacklapopup-js-zoom {
background-color: transparent !important;
padding: 0 !important;
}
/* --------------------------------------- */
/* ------- Twitter buttons --------- */
.stacklapopup-twitter-intent-wrapper {
position: relative;
z-index: 1000;
top: 26px;
left: 545px;
max-width: 90px !important;
margin: 0 !important;
padding: 0 !important;
}
.stacklapopup-twitter-intent div{
width: 30px !important;
}
.stacklapopup-twitter-intent {
background: transparent !important;
padding: 0px 0px 0px 0px !important;
}
.stacklapopup-twitter-intent a {
background-image: url('https://stackla-web-assets.s3.amazonaws.com/zachdrago.stackla.com/media/images/customimages/2015-04/1428407048/sprites.png') !important;
}
/* -------------------------------- */
/* ------- Close Button ----------- */
.stacklapopup-content .stacklapopup-close {
color: #777 !important;
width: 50px !important;
transition: all .3s ease-in-out;
background-color: transparent;
}
.stacklapopup-content .stacklapopup-close:hover {
color: #FFC527 !important;
}
/* -------------------------------- */
/* ---------- Caption ------------- */
.stacklapopup-caption {
background: #000 !important;
padding-top: 10px !important;
color: #fff !important;
/* text-align: center; */
}
.stacklapopup-caption p {
color: #fff !important;
}
.stacklapopup-caption a {
color: #aaa !important;
}
.stacklapopup-caption a:hover {
color: #FFC527 !important;
text-decoration: none !important;
}
/* -------------------------------- */
/* -------- Social source --------- */
.stacklapopup-source {
background: #000 !important;
color: #aaa !important;
}
/* -------------------------------- */
/* ---------- Interactins/sharing ---------- */
.stacklapopup-interactions {
display: table;
background-color: #000 !important;
}
.stacklapopup-interactions-wrapper {
position: absolute;
top: 0;
left: 400px;
}
.stacklapopup-sharing a {
font-size: 0px !important;
width: 35px !important;
color: #000 !important;
border: thin solid #000 !important;
}
.stacklapopup-share-list {
background-color: transparent !important;
}
.stacklapopup-shareicon {
float: none;
margin-left: auto;
margin-right: auto;
}
.stacklapopup-share-list li a {
background-color: transparent !important;
}
.stacklapopup-interactions li {
transition: all .3s ease-in-out;
}
.stacklapopup-interactions li:hover {
background-color: #FFC527 !important;
}
/* ----------------------------------------- */
/* ---------- User info ------------ */
.stacklapopup-user-info {
padding: 10px 0 20px 10px !important;
}
.stacklapopup-user-info a:hover {
color: #FFC527 !important;
text-decoration: none !important;
}
/* --------------------------------- */
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment