diff --git a/public/stylesheets/bubble.css b/public/stylesheets/bubble.css new file mode 100644 index 0000000000000000000000000000000000000000..c77063ddd68f2f1de1d494009281390a5aeb4654 --- /dev/null +++ b/public/stylesheets/bubble.css @@ -0,0 +1,64 @@ +/* ------------------------------------------------------------------------------------ +-- MORE COMPLEX CSS3 EXAMPLES +------------------------------------------------------------------------------------ */ + +/* Pinched speech bubble +------------------------------------------ */ + +.pinched { + position:relative; + padding:15px; + margin:25px 0 2px; + text-align:center; + color:#fff; + background:#333; + + /* css3 */ + -moz-border-radius:10px; + -webkit-border-radius:10px; + border-radius:10px; +} + +/* creates a rectangle of the colour wanted for the pointy bit */ +.pinched:before { + content:"\00a0"; + position:absolute; + top:-20px; + left:7%; + width:100px; + height:20px; + margin:0 0 0 -50px; + background:#333; +} + +/* creates a rounded rectangle to cover part of the rectangle generated above */ +.pinched:after { + content:"\00a0"; + position:absolute; + top:-20px; + left:0; + width:4%; + height:20px; + background:#fff; + + /* css3 */ + -moz-border-radius-bottomright:15px; + -webkit-border-bottom-right-radius:15px; + border-bottom-right-radius:15px; +} + +/* creates the other rounded rectangle */ +.pinched>:first-child:before { + content:"\00a0"; + position:absolute; + top:-20px; + right:0; + width:96%; + height:20px; + background:#fff; + + /* css3 */ + -moz-border-radius-bottomleft:15px; + -webkit-border-bottom-left-radius:15px; + border-bottom-left-radius:15px; +} \ No newline at end of file diff --git a/public/stylesheets/ui.css b/public/stylesheets/ui.css index 3fef3ac8c3b9d078def6017a440ea25c595116b1..1aed43c5a64b1e4d7f01121021c2aa0c90f69932 100644 --- a/public/stylesheets/ui.css +++ b/public/stylesheets/ui.css @@ -50,6 +50,8 @@ ul.button_set { .button .selected, .button_set .selected { background: -webkit-gradient(linear, 0% 29%, 0% 85%, from(#e0e0e0), to(#fafafa)); + background: -moz-linear-gradient(top, #e0e0e0, #fafafa); + background-image: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); border-top: 1px solid #aaaaaa; } .right {