Skip to content

Commit

Permalink
Prefixed class names to avoid conflicts and fixed css bug in white tr…
Browse files Browse the repository at this point in the history 
…ansparent theme.
  • Loading branch information
@Sebobo
Sebobo committed Oct 10, 2011
1 parent a7ed2e6 commit ce8b9e6
Show file tree
Hide file tree
Showing 5 changed files with 176 additions and 191 deletions.
141 changes: 69 additions & 72 deletions css/jquery-smallipop.css
View file
@@ -1,57 +1,57 @@
/* Bubbletip css */
/* smallipop css */
.smallipopHint { display: none; }

#smallipop { position: absolute; display: none; background-color: #314b64; border: 1px solid #0f161e; color: #d2dfe7; z-index: 9999; max-width: 400px; }
#smallipop .bubbleContent { padding: 10px; }
#smallipop .bubbleArrow, #smallipop .bubbleArrowBorder { position: absolute; left: 50%; height: 0; width: 0; }
#smallipop .bubbleArrow { bottom: -20px; margin-left: -10px; border: 10px solid transparent; }
#smallipop .bubbleArrowBorder { bottom: -24px; margin-left: -12px; border: 12px solid transparent; }
#smallipop.alignLeft .bubbleArrow { margin-left: 0; left: auto; right: 20px; }
#smallipop.alignLeft .bubbleArrowBorder { margin-left: 0; left: auto; right: 18px; }
#smallipop.alignRight .bubbleArrow { margin-left: 0; left: 20px; right: auto; }
#smallipop.alignRight .bubbleArrowBorder { margin-left: 0; left: 18px; right: auto; }
#smallipop.alignBottom .bubbleArrow { bottom: auto; top: -20px; }
#smallipop.alignBottom .bubbleArrowBorder { bottom: auto; top: -24px; }
#smallipop.positionedLeft .bubbleArrow, #smallipop.positionedLeft .bubbleArrowBorder { right: -16px; left: auto; top: 50%; bottom: auto; border-width: 8px; margin: -8px 0 0; }
#smallipop.positionedLeft .bubbleArrowBorder { right: -20px; border-width: 10px; margin: -10px 0 0; }
#smallipop.positionedRight .bubbleArrow, #smallipop.positionedRight .bubbleArrowBorder { left: -16px; right: auto; top: 50%; bottom: auto; border-width: 8px; margin: -8px 0 0; }
#smallipop.positionedRight .bubbleArrowBorder { left: -20px; border-width: 10px; margin: -10px 0 0; }
#smallipop .sipContent { padding: 10px; }
#smallipop .sipArrow, #smallipop .sipArrowBorder { position: absolute; left: 50%; height: 0; width: 0; }
#smallipop .sipArrow { bottom: -20px; margin-left: -10px; border: 10px solid transparent; }
#smallipop .sipArrowBorder { bottom: -24px; margin-left: -12px; border: 12px solid transparent; }
#smallipop.sipAlignLeft .sipArrow { margin-left: 0; left: auto; right: 20px; }
#smallipop.sipAlignLeft .sipArrowBorder { margin-left: 0; left: auto; right: 18px; }
#smallipop.sipAlignRight .sipArrow { margin-left: 0; left: 20px; right: auto; }
#smallipop.sipAlignRight .sipArrowBorder { margin-left: 0; left: 18px; right: auto; }
#smallipop.sipAlignBottom .sipArrow { bottom: auto; top: -20px; }
#smallipop.sipAlignBottom .sipArrowBorder { bottom: auto; top: -24px; }
#smallipop.sipPositionedLeft .sipArrow, #smallipop.sipPositionedLeft .sipArrowBorder { right: -16px; left: auto; top: 50%; bottom: auto; border-width: 8px; margin: -8px 0 0; }
#smallipop.sipPositionedLeft .sipArrowBorder { right: -20px; border-width: 10px; margin: -10px 0 0; }
#smallipop.sipPositionedRight .sipArrow, #smallipop.sipPositionedRight .sipArrowBorder { left: -16px; right: auto; top: 50%; bottom: auto; border-width: 8px; margin: -8px 0 0; }
#smallipop.sipPositionedRight .sipArrowBorder { left: -20px; border-width: 10px; margin: -10px 0 0; }
#smallipop a { color: #98cbea; }

/* default theme */
#smallipop.default { text-shadow: 0 -1px 1px #0f161e; }
#smallipop.default .bubbleContent { border-top: 1px solid #586d82; }
#smallipop.default .sipContent { border-top: 1px solid #586d82; }
#smallipop.default a { text-shadow: 0 -1px 1px #0f161e; }
#smallipop.default .bubbleArrow { border-color: #1a2634 transparent transparent transparent; }
#smallipop.default .bubbleArrowBorder { border-color: #0f161e transparent transparent transparent; }
#smallipop.default.alignBottom .bubbleArrow { border-color: transparent transparent #1a2634 transparent; }
#smallipop.default.alignBottom .bubbleArrowBorder { border-color: transparent transparent #0f161e transparent; }
#smallipop.default.positionedLeft .bubbleArrow { border-color: transparent transparent transparent #1a2634; }
#smallipop.default.positionedLeft .bubbleArrowBorder { border-color: transparent transparent transparent #0f161e; }
#smallipop.default.positionedRight .bubbleArrow { border-color: transparent #1a2634 transparent transparent; }
#smallipop.default.positionedRight .bubbleArrowBorder { border-color: transparent #0f161e transparent transparent; }
#smallipop.default .sipArrow { border-color: #1a2634 transparent transparent transparent; }
#smallipop.default .sipArrowBorder { border-color: #0f161e transparent transparent transparent; }
#smallipop.default.sipAlignBottom .sipArrow { border-color: transparent transparent #1a2634 transparent; }
#smallipop.default.sipAlignBottom .sipArrowBorder { border-color: transparent transparent #0f161e transparent; }
#smallipop.default.sipPositionedLeft .sipArrow { border-color: transparent transparent transparent #1a2634; }
#smallipop.default.sipPositionedLeft .sipArrowBorder { border-color: transparent transparent transparent #0f161e; }
#smallipop.default.sipPositionedRight .sipArrow { border-color: transparent #1a2634 transparent transparent; }
#smallipop.default.sipPositionedRight .sipArrowBorder { border-color: transparent #0f161e transparent transparent; }

.cssgradients.rgba #smallipop.default { background-color: transparent; background-image: -webkit-linear-gradient(top, rgba(49, 75, 100, 0.9), rgba(26, 38, 52, 0.9)); background-image: -moz-linear-gradient(top, rgba(49, 75, 100, 0.9), rgba(26, 38, 52, 0.9)); background-image: -ms-linear-gradient(top, rgba(49, 75, 100, 0.9), rgba(26, 38, 52, 0.9)); background-image: -o-linear-gradient(top, rgba(49, 75, 100, 0.9), rgba(26, 38, 52, 0.9)); background-image: linear-gradient(top, rgba(49, 75, 100, 0.9), rgba(26, 38, 52, 0.9)); /* Fallback for opera */ background-image: -webkit-radial-gradient(50% -100px, circle contain, rgba(49, 75, 100, 0.9) 100px, rgba(33, 50, 66, 0.9) 130px, rgba(26, 38, 52, 0.9) 150px); background-image: -moz-radial-gradient(50% -100px, circle contain, rgba(49, 75, 100, 0.9) 100px, rgba(33, 50, 66, 0.9) 130px, rgba(26, 38, 52, 0.9) 150px); background-image: -ms-radial-gradient(50% -100px, circle contain, rgba(49, 75, 100, 0.9) 100px, rgba(33, 50, 66, 0.9) 130px, rgba(26, 38, 52, 0.9) 150px); background-image: -o-radial-gradient(50% -100px, circle contain, rgba(49, 75, 100, 0.9) 100px, rgba(33, 50, 66, 0.9) 130px, rgba(26, 38, 52, 0.9) 150px); background-image: radial-gradient(50% -100px, circle contain, rgba(49, 75, 100, 0.9) 100px, rgba(33, 50, 66, 0.9) 130px, rgba(26, 38, 52, 0.9) 150px); }

.boxshadow.rgba #smallipop.default { -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }

.borderradius #smallipop.default { border-radius: 12px; -o-border-radius: 12px; -moz-border-radius: 12px; -webkit-border-radius: 12px; }
.borderradius #smallipop.default .bubbleContent { border-radius: 12px; -o-border-radius: 12px; -moz-border-radius: 12px; -webkit-border-radius: 12px; }
.borderradius #smallipop.default .sipContent { border-radius: 12px; -o-border-radius: 12px; -moz-border-radius: 12px; -webkit-border-radius: 12px; }

/* blue theme */
#smallipop.blue { background: transparent; border: 10px solid #0064b4; color: #111; font-size: 11px; }
#smallipop.blue a { color: #2276aa; }
#smallipop.blue .bubbleContent { border: 0; background: #fefefe; }
#smallipop.blue .bubbleArrow { bottom: -30px; border-color: #0064b4 transparent transparent transparent; }
#smallipop.blue.alignBottom .bubbleArrow { top: -30px; border-color: transparent transparent #0064b4 transparent; }
#smallipop.blue.positionedLeft .bubbleArrow { right: -26px; border-color: transparent transparent transparent #0064b4; }
#smallipop.blue.positionedRight .bubbleArrow { left: -26px; border-color: transparent #0064b4 transparent transparent; }
#smallipop.blue .sipContent { border: 0; background: #fefefe; }
#smallipop.blue .sipArrow { bottom: -30px; border-color: #0064b4 transparent transparent transparent; }
#smallipop.blue.sipAlignBottom .sipArrow { top: -30px; border-color: transparent transparent #0064b4 transparent; }
#smallipop.blue.sipPositionedLeft .sipArrow { right: -26px; border-color: transparent transparent transparent #0064b4; }
#smallipop.blue.sipPositionedRight .sipArrow { left: -26px; border-color: transparent #0064b4 transparent transparent; }

.rgba #smallipop.blue { border-color: rgba(0, 100, 180, 0.9); }
.rgba #smallipop.blue .bubbleArrow { border-color: rgba(0, 100, 180, 0.9) transparent transparent transparent; }
.rgba #smallipop.blue.alignBottom .bubbleArrow { border-color: transparent transparent rgba(0, 100, 180, 0.9) transparent; }
.rgba #smallipop.blue.positionedLeft .bubbleArrow { border-color: transparent transparent transparent rgba(0, 100, 180, 0.9); }
.rgba #smallipop.blue.positionedRight .bubbleArrow { border-color: transparent rgba(0, 100, 180, 0.9) transparent transparent; }
.rgba #smallipop.blue .sipArrow { border-color: rgba(0, 100, 180, 0.9) transparent transparent transparent; }
.rgba #smallipop.blue.sipAlignBottom .sipArrow { border-color: transparent transparent rgba(0, 100, 180, 0.9) transparent; }
.rgba #smallipop.blue.sipPositionedLeft .sipArrow { border-color: transparent transparent transparent rgba(0, 100, 180, 0.9); }
.rgba #smallipop.blue.sipPositionedRight .sipArrow { border-color: transparent rgba(0, 100, 180, 0.9) transparent transparent; }

.boxshadow.rgba #smallipop.blue { -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }

Expand All @@ -60,71 +60,68 @@
/* black theme */
#smallipop.black { background-color: #222; border-color: #111; text-shadow: 0 -1px 1px #111111; color: #f5f5f5; }
#smallipop.black a { color: #eef8ff; text-shadow: 0 -1px 1px #111111; }
#smallipop.black .bubbleContent { border-top: 1px solid #666; }
#smallipop.black .bubbleArrow { border-color: #222 transparent transparent transparent; }
#smallipop.black .bubbleArrowBorder { border-color: #111 transparent transparent transparent; }
#smallipop.black.alignBottom .bubbleArrow { border-color: transparent transparent #222 transparent; }
#smallipop.black.alignBottom .bubbleArrowBorder { border-color: transparent transparent #111 transparent; }
#smallipop.black.positionedLeft .bubbleArrow { border-color: transparent transparent transparent #222; }
#smallipop.black.positionedLeft .bubbleArrowBorder { border-color: transparent transparent transparent #111; }
#smallipop.black.positionedRight .bubbleArrow { border-color: transparent #222 transparent transparent; }
#smallipop.black.positionedRight .bubbleArrowBorder { border-color: transparent #111 transparent transparent; }
#smallipop.black .sipContent { border-top: 1px solid #666; }
#smallipop.black .sipArrow { border-color: #222 transparent transparent transparent; }
#smallipop.black .sipArrowBorder { border-color: #111 transparent transparent transparent; }
#smallipop.black.sipAlignBottom .sipArrow { border-color: transparent transparent #222 transparent; }
#smallipop.black.sipAlignBottom .sipArrowBorder { border-color: transparent transparent #111 transparent; }
#smallipop.black.sipPositionedLeft .sipArrow { border-color: transparent transparent transparent #222; }
#smallipop.black.sipPositionedLeft .sipArrowBorder { border-color: transparent transparent transparent #111; }
#smallipop.black.sipPositionedRight .sipArrow { border-color: transparent #222 transparent transparent; }
#smallipop.black.sipPositionedRight .sipArrowBorder { border-color: transparent #111 transparent transparent; }

.cssgradients #smallipop.black { background-color: transparent; background-image: -webkit-linear-gradient(top, #333333, #222222); background-image: -moz-linear-gradient(top, #333333, #222222); background-image: -ms-linear-gradient(top, #333333, #222222); background-image: -o-linear-gradient(top, #333333, #222222); background-image: linear-gradient(top, #333333, #222222); }

.boxshadow.rgba #smallipop.black { -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }

.borderradius #smallipop.black { border-radius: 5px; -o-border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
.borderradius #smallipop.black .bubbleContent { border-radius: 5px; -o-border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
.borderradius #smallipop.black .sipContent { border-radius: 5px; -o-border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }

/* orange theme */
#smallipop.orange { background-color: #f9aa18; border-color: #e17500; text-shadow: 0 1px 1px #fff24d; color: #714900; }
#smallipop.orange a { color: #145d95; text-shadow: 0 1px 1px #fff24d; }
#smallipop.orange .bubbleContent { border-top: 1px solid #fffabc; }
#smallipop.orange .bubbleArrow { border-color: #f9aa18 transparent transparent transparent; }
#smallipop.orange .bubbleArrowBorder { border-color: #e17500 transparent transparent transparent; }
#smallipop.orange.alignBottom .bubbleArrow { border-color: transparent transparent #f9aa18 transparent; }
#smallipop.orange.alignBottom .bubbleArrowBorder { border-color: transparent transparent #e17500 transparent; }
#smallipop.orange.positionedLeft .bubbleArrow { border-color: transparent transparent transparent #f9c718; }
#smallipop.orange.positionedLeft .bubbleArrowBorder { border-color: transparent transparent transparent #e17500; }
#smallipop.orange.positionedRight .bubbleArrow { border-color: transparent #f9c718 transparent transparent; }
#smallipop.orange.positionedRight .bubbleArrowBorder { border-color: transparent #e17500 transparent transparent; }
#smallipop.orange .sipContent { border-top: 1px solid #fffabc; }
#smallipop.orange .sipArrow { border-color: #f9aa18 transparent transparent transparent; }
#smallipop.orange .sipArrowBorder { border-color: #e17500 transparent transparent transparent; }
#smallipop.orange.sipAlignBottom .sipArrow { border-color: transparent transparent #f9aa18 transparent; }
#smallipop.orange.sipAlignBottom .sipArrowBorder { border-color: transparent transparent #e17500 transparent; }
#smallipop.orange.sipPositionedLeft .sipArrow { border-color: transparent transparent transparent #f9c718; }
#smallipop.orange.sipPositionedLeft .sipArrowBorder { border-color: transparent transparent transparent #e17500; }
#smallipop.orange.sipPositionedRight .sipArrow { border-color: transparent #f9c718 transparent transparent; }
#smallipop.orange.sipPositionedRight .sipArrowBorder { border-color: transparent #e17500 transparent transparent; }

.cssgradients #smallipop.orange { background-image: -webkit-linear-gradient(top, #fff24d, #f9aa18); background-image: -moz-linear-gradient(top, #fff24d, #f9aa18); background-image: -ms-linear-gradient(top, #fff24d, #f9aa18); background-image: -o-linear-gradient(top, #fff24d, #f9aa18); background-image: linear-gradient(top, #fff24d, #f9aa18); }

.boxshadow.rgba #smallipop.orange { -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }

.borderradius #smallipop.orange { border-radius: 10px; -o-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
.borderradius #smallipop.orange .bubbleContent { border-radius: 10px; -o-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
.borderradius #smallipop.orange .sipContent { border-radius: 10px; -o-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }

/* white theme */
#smallipop.white { background-color: #fafafa; border-color: #ccc; text-shadow: 0 1px 1px #eee; color: #444; width: 200px; max-width: 200px; }
#smallipop.white .bubbleContent { text-align: center; }
#smallipop.white .bubbleArrow { border-color: #fafafa transparent transparent transparent; }
#smallipop.white .bubbleArrowBorder { border-color: #ccc transparent transparent transparent; }
#smallipop.white.alignBottom .bubbleArrow { border-color: transparent transparent #fafafa transparent; }
#smallipop.white.alignBottom .bubbleArrowBorder { border-color: transparent transparent #ccc transparent; }
#smallipop.white.positionedLeft .bubbleArrow { border-color: transparent transparent transparent #fafafa; }
#smallipop.white.positionedLeft .bubbleArrowBorder { border-color: transparent transparent transparent #ccc; }
#smallipop.white.positionedRight .bubbleArrow { border-color: transparent #fafafa transparent transparent; }
#smallipop.white.positionedRight .bubbleArrowBorder { border-color: transparent #ccc transparent transparent; }
#smallipop.white .sipContent { text-align: center; }
#smallipop.white .sipArrow { border-color: #fafafa transparent transparent transparent; }
#smallipop.white .sipArrowBorder { border-color: #ccc transparent transparent transparent; }
#smallipop.white.sipAlignBottom .sipArrow { border-color: transparent transparent #fafafa transparent; }
#smallipop.white.sipAlignBottom .sipArrowBorder { border-color: transparent transparent #ccc transparent; }
#smallipop.white.sipPositionedLeft .sipArrow { border-color: transparent transparent transparent #fafafa; }
#smallipop.white.sipPositionedLeft .sipArrowBorder { border-color: transparent transparent transparent #ccc; }
#smallipop.white.sipPositionedRight .sipArrow { border-color: transparent #fafafa transparent transparent; }
#smallipop.white.sipPositionedRight .sipArrowBorder { border-color: transparent #ccc transparent transparent; }

.boxshadow.rgba #smallipop.white { -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }

.borderradius #smallipop.white { border-radius: 12px; -o-border-radius: 12px; -moz-border-radius: 12px; -webkit-border-radius: 12px; }
.borderradius #smallipop.white .bubbleContent { border-radius: 12px; -o-border-radius: 12px; -moz-border-radius: 12px; -webkit-border-radius: 12px; }
.borderradius #smallipop.white .sipContent { border-radius: 12px; -o-border-radius: 12px; -moz-border-radius: 12px; -webkit-border-radius: 12px; }

/* extension themes. keep at the bottom */
/* white theme extended, requires rgba support */
.rgba #smallipop.whiteTransparent { background-color: rgba(255, 255, 255, 0.8); }
.rgba #smallipop.whiteTransparent .bubbleArrow { bottom: -21px; border-color: rgba(255, 255, 255, 0.8) transparent transparent transparent; }
.rgba #smallipop.whiteTransparent .bubbleArrowBorder { border-color: transparent; }
.rgba #smallipop.whiteTransparent.alignBottom .bubbleArrow { border-color: transparent transparent rgba(255, 255, 255, 0.8) transparent; }
.rgba #smallipop.whiteTransparent.alignBottom .bubbleArrowBorder { border-color: transparent; }
.rgba #smallipop.whiteTransparent.positionedLeft .bubbleArrow { border-color: transparent transparent transparent rgba(255, 255, 255, 0.8); }
.rgba #smallipop.whiteTransparent.positionedLeft .bubbleArrowBorder { border-color: transparent; }
.rgba #smallipop.whiteTransparent.positionedRight .bubbleArrow { border-color: transparent rgba(255, 255, 255, 0.8) transparent transparent; }
.rgba #smallipop.whiteTransparent.positionedRight .bubbleArrowBorder { border-color: transparent; }
.rgba #smallipop.whiteTransparent .sipArrow { bottom: -21px; border-color: rgba(255, 255, 255, 0.8) transparent transparent transparent; }
.rgba #smallipop.whiteTransparent .sipArrowBorder { border-color: transparent; }
.rgba #smallipop.whiteTransparent.sipAlignBottom .sipArrow { top: -21px; border-color: transparent transparent rgba(255, 255, 255, 0.8) transparent; }
.rgba #smallipop.whiteTransparent.sipPositionedLeft .sipArrow { border-color: transparent transparent transparent rgba(255, 255, 255, 0.8); }
.rgba #smallipop.whiteTransparent.sipPositionedRight .sipArrow { border-color: transparent rgba(255, 255, 255, 0.8) transparent transparent; }

/* fat shadow extension theme */
.boxshadow.rgba #smallipop.fatShadow { -webkit-box-shadow: 0 2px 20px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0 2px 20px rgba(0, 0, 0, 0.8); box-shadow: 0 2px 20px rgba(0, 0, 0, 0.8); }
0 lib/jquery-smallipop-0.1.min.js → lib/jquery-smallipop-0.1.1.min.js
View file
File renamed without changes.

0 comments on commit ce8b9e6

Please sign in to comment.