Permalink
Browse files

Prefixed class names to avoid conflicts and fixed css bug in white tr…

…ansparent theme.
  • Loading branch information...
Sebobo committed Oct 10, 2011
1 parent a7ed2e6 commit ce8b9e69e7d3a6e4ca1fcad733626a442fc01626
View
@@ -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); }
@@ -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); }
File renamed without changes.
Oops, something went wrong.

0 comments on commit ce8b9e6

Please sign in to comment.