Fix button backgrounds in .compact.

Thanks to Scott Vivian <scott.vivian@gmail.com>.
This commit is contained in:
Max Goodman
2013-01-22 15:28:29 -08:00
parent 598980269b
commit ab47d07220
2 changed files with 53 additions and 53 deletions

View File

@@ -14,24 +14,24 @@ textarea { font-family: inherit; }
#preload { position: absolute; top: -1000px; left: -1000px; }
/*UI stuff*/
.newbutton { -moz-appearance: none; -webkit-appearance: none; appearance: none; border-width: 8px; -moz-border-image: url("../compact/border-button.png") 8 stretch; -webkit-border-image: url("../compact/border-button.png") 8 stretch; -webkit-border-image: url("../compact/border-button.png") 8 stretch; -o-border-image: url("../compact/border-button.png") 8 stretch; border-image: url("../compact/border-button.png") 8 stretch; color: white; font-family: inherit; font-size: 12px; font-weight: bold; text-decoration: none; text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.1), 0px -1px 1px rgba(0, 0, 0, 0.4); background: none; }
.newbutton:active, .newbutton:hover, .newbutton[selected], .newbutton.expanded, .newbutton.active { -moz-border-image: url("../compact/border-button-active.png") 8 stretch; -webkit-border-image: url("../compact/border-button-active.png") 8 stretch; -webkit-border-image: url("../compact/border-button-active.png") 8 stretch; -o-border-image: url("../compact/border-button-active.png") 8 stretch; border-image: url("../compact/border-button-active.png") 8 stretch; color: white; }
.newbutton { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-width: 8px; -moz-border-image: url("../compact/border-button.png") 8; -webkit-border-image: url("../compact/border-button.png") 8; -webkit-border-image: url("../compact/border-button.png") 8; -o-border-image: url("../compact/border-button.png") 8; border-image: url("../compact/border-button.png") 8 fill; color: white; font-family: inherit; font-size: 12px; font-weight: bold; text-decoration: none; text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.1), 0px -1px 1px rgba(0, 0, 0, 0.4); background: none; }
.newbutton:active, .newbutton:hover, .newbutton[selected], .newbutton.expanded, .newbutton.active { -moz-border-image: url("../compact/border-button-active.png") 8; -webkit-border-image: url("../compact/border-button-active.png") 8; -webkit-border-image: url("../compact/border-button-active.png") 8; -o-border-image: url("../compact/border-button-active.png") 8; border-image: url("../compact/border-button-active.png") 8 fill; color: white; }
.button, .button:visited { -moz-border-radius: 6px; -webkit-border-radius: 6px; -o-border-radius: 6px; -ms-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #bfd0e0), color-stop(100%, #80a2c4)); background: -webkit-linear-gradient(top, #bfd0e0, #80a2c4); background: -moz-linear-gradient(top, #bfd0e0, #80a2c4); background: -o-linear-gradient(top, #bfd0e0, #80a2c4); background: -ms-linear-gradient(top, #bfd0e0, #80a2c4); background: linear-gradient(top, #bfd0e0, #80a2c4); background-color: #9fb9d2; height: 30px; line-height: 30px; color: white; font-family: inherit; font-size: 12px; font-weight: bold; margin: 0px; padding: 5px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; width: auto; text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.1), 0px -1px 1px rgba(0, 0, 0, 0.4); border: 1px solid #517191; -moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.75), 0px 1px 1px rgba(255, 255, 255, 0.6), 0px -1px 1px rgba(0, 0, 0, 0.1); -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.75), 0px 1px 1px rgba(255, 255, 255, 0.6), 0px -1px 1px rgba(0, 0, 0, 0.1); -o-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.75), 0px 1px 1px rgba(255, 255, 255, 0.6), 0px -1px 1px rgba(0, 0, 0, 0.1); box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.75), 0px 1px 1px rgba(255, 255, 255, 0.6), 0px -1px 1px rgba(0, 0, 0, 0.1); }
.button, .button:visited { -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #bfd0e0), color-stop(100%, #80a2c4)); background: -webkit-linear-gradient(top, #bfd0e0, #80a2c4); background: -moz-linear-gradient(top, #bfd0e0, #80a2c4); background: -o-linear-gradient(top, #bfd0e0, #80a2c4); background: linear-gradient(top, #bfd0e0, #80a2c4); background-color: #9fb9d2; height: 30px; line-height: 30px; color: white; font-family: inherit; font-size: 12px; font-weight: bold; margin: 0px; padding: 5px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; width: auto; text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.1), 0px -1px 1px rgba(0, 0, 0, 0.4); border: 1px solid #517191; -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.75), 0px 1px 1px rgba(255, 255, 255, 0.6), 0px -1px 1px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.75), 0px 1px 1px rgba(255, 255, 255, 0.6), 0px -1px 1px rgba(0, 0, 0, 0.1); box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.75), 0px 1px 1px rgba(255, 255, 255, 0.6), 0px -1px 1px rgba(0, 0, 0, 0.1); }
.button:active, .button[selected], .button.active, .button.upmod, .button.downmod { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7e8994), color-stop(100%, #80a2c4)); background: -webkit-linear-gradient(top, #7e8994, #80a2c4); background: -moz-linear-gradient(top, #7e8994, #80a2c4); background: -o-linear-gradient(top, #7e8994, #80a2c4); background: -ms-linear-gradient(top, #7e8994, #80a2c4); background: linear-gradient(top, #7e8994, #80a2c4); background-color: #7f95ac; }
.button:active, .button[selected], .button.active, .button.upmod, .button.downmod { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7e8994), color-stop(100%, #80a2c4)); background: -webkit-linear-gradient(top, #7e8994, #80a2c4); background: -moz-linear-gradient(top, #7e8994, #80a2c4); background: -o-linear-gradient(top, #7e8994, #80a2c4); background: linear-gradient(top, #7e8994, #80a2c4); background-color: #7f95ac; }
button.button { padding: 0 5px; }
.secondary_button { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #abbbc9), color-stop(100%, #8393a3)); background: -webkit-linear-gradient(top, #abbbc9, #8393a3); background: -moz-linear-gradient(top, #abbbc9, #8393a3); background: -o-linear-gradient(top, #abbbc9, #8393a3); background: -ms-linear-gradient(top, #abbbc9, #8393a3); background: linear-gradient(top, #abbbc9, #8393a3); background-color: #97a7b6; border: 1px solid #626D78; }
.secondary_button { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #abbbc9), color-stop(100%, #8393a3)); background: -webkit-linear-gradient(top, #abbbc9, #8393a3); background: -moz-linear-gradient(top, #abbbc9, #8393a3); background: -o-linear-gradient(top, #abbbc9, #8393a3); background: linear-gradient(top, #abbbc9, #8393a3); background-color: #97a7b6; border: 1px solid #626D78; }
.secondary_button:active, .second_button[selected], .second_button.active { background-color: #ABBBC9; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8393a3), color-stop(100%, #abbbc9)); background: -webkit-linear-gradient(top, #8393a3, #abbbc9); background: -moz-linear-gradient(top, #8393a3, #abbbc9); background: -o-linear-gradient(top, #8393a3, #abbbc9); background: -ms-linear-gradient(top, #8393a3, #abbbc9); background: linear-gradient(top, #8393a3, #abbbc9); background-color: #97a7b6; }
.secondary_button:active, .second_button[selected], .second_button.active { background-color: #ABBBC9; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8393a3), color-stop(100%, #abbbc9)); background: -webkit-linear-gradient(top, #8393a3, #abbbc9); background: -moz-linear-gradient(top, #8393a3, #abbbc9); background: -o-linear-gradient(top, #8393a3, #abbbc9); background: linear-gradient(top, #8393a3, #abbbc9); background-color: #97a7b6; }
.small_button, .small_button:visited { -moz-border-radius: 6px; -webkit-border-radius: 6px; -o-border-radius: 6px; -ms-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #bfd0e0), color-stop(100%, #80a2c4)); background: -webkit-linear-gradient(top, #bfd0e0, #80a2c4); background: -moz-linear-gradient(top, #bfd0e0, #80a2c4); background: -o-linear-gradient(top, #bfd0e0, #80a2c4); background: -ms-linear-gradient(top, #bfd0e0, #80a2c4); background: linear-gradient(top, #bfd0e0, #80a2c4); background-color: #9fb9d2; line-height: 20px; color: white; font-family: inherit; font-size: 12px; font-weight: bold; margin: 0px; padding: 1px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; width: auto; text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.1), 0px -1px 1px rgba(0, 0, 0, 0.4); border: 1px solid #517191; -moz-box-shadow: "0px 1px 1px rgba(255,255,255,.6), 0px -1px 1px rgba(0,0,0,.1) "; -webkit-box-shadow: "0px 1px 1px rgba(255,255,255,.6), 0px -1px 1px rgba(0,0,0,.1) "; -o-box-shadow: "0px 1px 1px rgba(255,255,255,.6), 0px -1px 1px rgba(0,0,0,.1) "; box-shadow: "0px 1px 1px rgba(255,255,255,.6), 0px -1px 1px rgba(0,0,0,.1) "; }
.small_button, .small_button:visited { -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #bfd0e0), color-stop(100%, #80a2c4)); background: -webkit-linear-gradient(top, #bfd0e0, #80a2c4); background: -moz-linear-gradient(top, #bfd0e0, #80a2c4); background: -o-linear-gradient(top, #bfd0e0, #80a2c4); background: linear-gradient(top, #bfd0e0, #80a2c4); background-color: #9fb9d2; line-height: 20px; color: white; font-family: inherit; font-size: 12px; font-weight: bold; margin: 0px; padding: 1px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; width: auto; text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.1), 0px -1px 1px rgba(0, 0, 0, 0.4); border: 1px solid #517191; -webkit-box-shadow: "0px 1px 1px rgba(255,255,255,.6), 0px -1px 1px rgba(0,0,0,.1) "; -moz-box-shadow: "0px 1px 1px rgba(255,255,255,.6), 0px -1px 1px rgba(0,0,0,.1) "; box-shadow: "0px 1px 1px rgba(255,255,255,.6), 0px -1px 1px rgba(0,0,0,.1) "; }
.small_button:active, .small_button[selected], .small_button.active { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7e8994), color-stop(100%, #80a2c4)); background: -webkit-linear-gradient(top, #7e8994, #80a2c4); background: -moz-linear-gradient(top, #7e8994, #80a2c4); background: -o-linear-gradient(top, #7e8994, #80a2c4); background: -ms-linear-gradient(top, #7e8994, #80a2c4); background: linear-gradient(top, #7e8994, #80a2c4); background-color: #7f95ac; }
.small_button:active, .small_button[selected], .small_button.active { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7e8994), color-stop(100%, #80a2c4)); background: -webkit-linear-gradient(top, #7e8994, #80a2c4); background: -moz-linear-gradient(top, #7e8994, #80a2c4); background: -o-linear-gradient(top, #7e8994, #80a2c4); background: linear-gradient(top, #7e8994, #80a2c4); background-color: #7f95ac; }
.group_button { -moz-border-radius: 0; -webkit-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; -khtml-border-radius: 0; border-radius: 0; border-left: 1px solid #a6bed9; border-right: 1px solid #445d79; }
.group_button { -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; border-left: 1px solid #a6bed9; border-right: 1px solid #445d79; }
.group_button:first-child { -moz-border-radius-topleft: 6px; -moz-border-radius-bottomleft: 6px; border-top-left-radius: 6px; border-bottom-left-radius: 6px; -webkit-border-top-left-radius: 6px; -webkit-border-bottom-left-radius: 6px; border-left: 1px solid #517090; }
@@ -44,10 +44,10 @@ button.button { padding: 0 5px; }
.comment .options_link { top: 10px; }
/*Options expando*/
.link .options_expando, .comment .options_expando, .message .options_expando { background: #213345; margin: 35px -5px -1px; border-top: 1px solid #111922; display: none; -moz-box-shadow: inset 0px 3px 8px rgba(0, 0, 0, 0.8); -webkit-box-shadow: inset 0px 3px 8px rgba(0, 0, 0, 0.8); -o-box-shadow: inset 0px 3px 8px rgba(0, 0, 0, 0.8); box-shadow: inset 0px 3px 8px rgba(0, 0, 0, 0.8); text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.8); text-align: center; height: 60px; overflow: hidden; }
.link .options_expando a, .comment .options_expando a, .message .options_expando a { display: inline-block; color: white; text-decoration: none; font-size: 11px; padding: 10px; width: 50px; height: 40px; text-align: center; border-right: 1px solid #111922; border-left: 1px solid #324c67; -moz-transition: all 100ms ease-in; -webkit-transition: all 100ms ease-in; -o-transition: all 100ms ease-in; transition: all 100ms ease-in; }
.link .options_expando, .comment .options_expando, .message .options_expando { background: #213345; margin: 35px -5px -1px; border-top: 1px solid #111922; display: none; -webkit-box-shadow: inset 0px 3px 8px rgba(0, 0, 0, 0.8); -moz-box-shadow: inset 0px 3px 8px rgba(0, 0, 0, 0.8); box-shadow: inset 0px 3px 8px rgba(0, 0, 0, 0.8); text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.8); text-align: center; height: 60px; overflow: hidden; }
.link .options_expando a, .comment .options_expando a, .message .options_expando a { display: inline-block; color: white; text-decoration: none; font-size: 11px; padding: 10px; width: 50px; height: 40px; text-align: center; border-right: 1px solid #111922; border-left: 1px solid #324c67; -webkit-transition: all 100ms ease-in; -moz-transition: all 100ms ease-in; -o-transition: all 100ms ease-in; transition: all 100ms ease-in; }
.link .options_expando a:active, .comment .options_expando a:active, .message .options_expando a:active { background-color: #324c67; border-left: 1px solid #42668a; }
.link .options_expando a:hover, .comment .options_expando a:hover, .message .options_expando a:hover { background-color: #263340; -moz-box-shadow: inset 0px 3px 8px rgba(0, 0, 0, 0.8); -webkit-box-shadow: inset 0px 3px 8px rgba(0, 0, 0, 0.8); -o-box-shadow: inset 0px 3px 8px rgba(0, 0, 0, 0.8); box-shadow: inset 0px 3px 8px rgba(0, 0, 0, 0.8); border-left: 1px solid #42668a; }
.link .options_expando a:hover, .comment .options_expando a:hover, .message .options_expando a:hover { background-color: #263340; -webkit-box-shadow: inset 0px 3px 8px rgba(0, 0, 0, 0.8); -moz-box-shadow: inset 0px 3px 8px rgba(0, 0, 0, 0.8); box-shadow: inset 0px 3px 8px rgba(0, 0, 0, 0.8); border-left: 1px solid #42668a; }
.link .options_expando a:first-child, .comment .options_expando a:first-child, .message .options_expando a:first-child { border-left: none; }
.link .options_expando a:last-child, .comment .options_expando a:last-child, .message .options_expando a:last-child { border-right: none; }
.link .options_expando.expanded, .comment .options_expando.expanded, .message .options_expando.expanded { display: block; }
@@ -89,11 +89,11 @@ button.button { padding: 0 5px; }
.unhide-icon { background-image: url("../compact/unhide.png"); /*SPRITE*/ }
/*Toolbar*/
#topbar { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cee3f8), color-stop(100%, #a8c4e0)); background: -webkit-linear-gradient(top, #cee3f8, #a8c4e0); background: -moz-linear-gradient(top, #cee3f8, #a8c4e0); background: -o-linear-gradient(top, #cee3f8, #a8c4e0); background: -ms-linear-gradient(top, #cee3f8, #a8c4e0); background: linear-gradient(top, #cee3f8, #a8c4e0); background-color: #bbd3ec; border-bottom: 1px solid #7599BD; border-top: 1px solid #DCEAF7; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; padding: 0px 10px; height: 40px; position: relative; }
#topbar { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cee3f8), color-stop(100%, #a8c4e0)); background: -webkit-linear-gradient(top, #cee3f8, #a8c4e0); background: -moz-linear-gradient(top, #cee3f8, #a8c4e0); background: -o-linear-gradient(top, #cee3f8, #a8c4e0); background: linear-gradient(top, #cee3f8, #a8c4e0); background-color: #bbd3ec; border-bottom: 1px solid #7599BD; border-top: 1px solid #DCEAF7; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0px 10px; height: 40px; position: relative; }
#topbar #header-img { height: 32px; width: auto; }
#topbar .left { position: absolute; left: 0; bottom: 3px; overflow: hidden; max-height: 40px; }
#topbar .right { position: absolute; right: 10px; bottom: 1px; }
#topbar > h1 { color: #444; font-size: 18px; font-weight: bold; text-align: center; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin: 0 10px; padding: 0; padding-top: 16px; text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px, rgba(0, 0, 0, 0.1) 0px -1px 0px; -moz-box-flex: 1; -webkit-box-flex: 1; -ms-box-flex: 1; box-flex: 1; }
#topbar > h1 { color: #444; font-size: 18px; font-weight: bold; text-align: center; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin: 0 10px; padding: 0; padding-top: 16px; text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px, rgba(0, 0, 0, 0.1) 0px -1px 0px; -webkit-box-flex: 1; -moz-box-flex: 1; -ms-box-flex: 1; box-flex: 1; }
#topbar > h1 a { color: inherit; text-decoration: inherit; }
@@ -118,7 +118,7 @@ body[orient="landscape"] > #topbar > h1 { margin-left: -125px; width: 250px; }
.topbar-options { width: 30px; height: 30px; display: inline-block; background-image: url("../compact/menu-options.png"); /*SPRITE*/ }
.topbar-options.active, .topbar-options:hover, .topbar-options:active { background-image: url("../compact/menu-options-active.png"); /*SPRITE*/ }
#top_menu { position: absolute; right: 5px; top: 44px; background-color: white; border: 1px solid rgba(27, 47, 94, 0.4); border-top: 0px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-bottomleft: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-bottomright: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); -o-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); z-index: 5; display: none; }
#top_menu { position: absolute; right: 5px; top: 44px; background-color: white; border: 1px solid rgba(27, 47, 94, 0.4); border-top: 0px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-bottomleft: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-bottomright: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); z-index: 5; display: none; }
#top_menu > .menuitem { padding: 5px; }
@@ -129,7 +129,7 @@ body[orient="landscape"] > #topbar > h1 { margin-left: -125px; width: 250px; }
.status { color: red; margin-left: 20px; }
/*Subtoolbar (eg hot)*/
.subtoolbar { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; height: 32px; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #cccccc)); background: -webkit-linear-gradient(top, #ffffff, #cccccc); background: -moz-linear-gradient(top, #ffffff, #cccccc); background: -o-linear-gradient(top, #ffffff, #cccccc); background: -ms-linear-gradient(top, #ffffff, #cccccc); background: linear-gradient(top, #ffffff, #cccccc); background-color: #e5e5e5; border-bottom: 1px solid #bbb; padding: 6px; text-overflow: ellipsis; overflow: hidden; }
.subtoolbar { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height: 32px; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #cccccc)); background: -webkit-linear-gradient(top, #ffffff, #cccccc); background: -moz-linear-gradient(top, #ffffff, #cccccc); background: -o-linear-gradient(top, #ffffff, #cccccc); background: linear-gradient(top, #ffffff, #cccccc); background-color: #e5e5e5; border-bottom: 1px solid #bbb; padding: 6px; text-overflow: ellipsis; overflow: hidden; }
.subtoolbar > ul { list-style-type: none; margin: 0; padding: 0; }
@@ -137,7 +137,7 @@ body[orient="landscape"] > #topbar > h1 { margin-left: -125px; width: 250px; }
.subtoolbar > ul > li a { color: #4c566c; font-weight: bold; text-decoration: none; font-size: 12px; line-height: 20px; margin: 0; padding: 3px 10px; text-overflow: ellipsis; overflow: hidden; }
.subtoolbar > ul > li.selected a { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa)); background: -webkit-linear-gradient(top, #dddddd, #aaaaaa); background: -moz-linear-gradient(top, #dddddd, #aaaaaa); background: -o-linear-gradient(top, #dddddd, #aaaaaa); background: -ms-linear-gradient(top, #dddddd, #aaaaaa); background: linear-gradient(top, #dddddd, #aaaaaa); background-color: #c3c3c3; -moz-border-radius: 8px; -webkit-border-radius: 8px; -o-border-radius: 8px; -ms-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px; border: 1px solid #aaa; padding-top: 2px; padding-bottom: 1px; -moz-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.8); -webkit-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.8); -o-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.8); box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.8); }
.subtoolbar > ul > li.selected a { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa)); background: -webkit-linear-gradient(top, #dddddd, #aaaaaa); background: -moz-linear-gradient(top, #dddddd, #aaaaaa); background: -o-linear-gradient(top, #dddddd, #aaaaaa); background: linear-gradient(top, #dddddd, #aaaaaa); background-color: #c3c3c3; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; border: 1px solid #aaa; padding-top: 2px; padding-bottom: 1px; -webkit-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.8); -moz-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.8); box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.8); }
/*Things*/
/*Arrows*/
@@ -148,7 +148,7 @@ body[orient="landscape"] > #topbar > h1 { margin-left: -125px; width: 250px; }
.link .arrow.downmod, .comment .arrow.downmod, .message .arrow.downmod { background-image: url("../compact/downvote-active.png"); /*SPRITE*/ }
/*Links*/
.link { min-height: 70px; border-bottom: 1px solid #999; border-top: 1px solid #ddd; padding: 5px 5px; padding-bottom: 0px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; background: rgba(255, 255, 255, 0.6); position: relative; overflow: hidden; }
.link { min-height: 70px; border-bottom: 1px solid #999; border-top: 1px solid #ddd; padding: 5px 5px; padding-bottom: 0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: rgba(255, 255, 255, 0.6); position: relative; overflow: hidden; }
.link:first-child { border-top: none; }
@@ -209,28 +209,28 @@ body[orient="landscape"] > #topbar > h1 { margin-left: -125px; width: 250px; }
.link .expando-button { float: left; display: block; height: auto; line-height: inherit; margin: 3px 10px 2px 0; width: 30px; height: 30px; background-image: url("../compact/selftext.png"); /*SPRITE*/ }
.link .expando-button.expanded { background-image: url("../compact/selftext-active.png"); /*SPRITE*/ }
.link > .expando { clear: both; margin: 5px 0; margin-bottom: 30px; border: 1px solid #999; background: #ddd; padding: 5px; -moz-border-radius: 8px; -webkit-border-radius: 8px; -o-border-radius: 8px; -ms-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px; font-size: 11px; }
.link > .expando { clear: both; margin: 5px 0; margin-bottom: 30px; border: 1px solid #999; background: #ddd; padding: 5px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; font-size: 11px; }
.link > .thing_options { font-size: x-small; margin: none; display: block; float: left; clear: left; margin: 2px 0px 0px 10px; }
.nsfw-warning { -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; color: #ac3939; text-decoration: none; font-weight: normal; font-size: 9px; margin-left: 5px; padding: 0 2px; border: 1px solid #d27979 !important; }
.nsfw-warning { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; color: #ac3939; text-decoration: none; font-weight: normal; font-size: 9px; margin-left: 5px; padding: 0 2px; border: 1px solid #d27979 !important; }
/* Comment count */
.commentcount { float: right; margin: 5px; width: 45px; text-align: right; }
.commentcount > .comments { border-width: 8px; -moz-border-image: url("../compact/border-button.png") 8 stretch; -webkit-border-image: url("../compact/border-button.png") 8 stretch; -webkit-border-image: url("../compact/border-button.png") 8 stretch; -o-border-image: url("../compact/border-button.png") 8 stretch; border-image: url("../compact/border-button.png") 8 stretch; color: white; font-family: inherit; font-size: 12px; font-weight: bold; text-decoration: none; text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.1), 0px -1px 1px rgba(0, 0, 0, 0.4); }
.commentcount > .comments:active, .commentcount > .comments:hover, .commentcount > .comments[selected], .commentcount > .comments.preloaded { -moz-border-image: url("../compact/border-button-active.png") 8 stretch; -webkit-border-image: url("../compact/border-button-active.png") 8 stretch; -webkit-border-image: url("../compact/border-button-active.png") 8 stretch; -o-border-image: url("../compact/border-button-active.png") 8 stretch; border-image: url("../compact/border-button-active.png") 8 stretch; }
.commentcount > .comments { border-width: 8px; -moz-border-image: url("../compact/border-button.png") 8; -webkit-border-image: url("../compact/border-button.png") 8; -webkit-border-image: url("../compact/border-button.png") 8; -o-border-image: url("../compact/border-button.png") 8; border-image: url("../compact/border-button.png") 8 fill; color: white; font-family: inherit; font-size: 12px; font-weight: bold; text-decoration: none; text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.1), 0px -1px 1px rgba(0, 0, 0, 0.4); }
.commentcount > .comments:active, .commentcount > .comments:hover, .commentcount > .comments[selected], .commentcount > .comments.preloaded { -moz-border-image: url("../compact/border-button-active.png") 8; -webkit-border-image: url("../compact/border-button-active.png") 8; -webkit-border-image: url("../compact/border-button-active.png") 8; -o-border-image: url("../compact/border-button-active.png") 8; border-image: url("../compact/border-button-active.png") 8 fill; }
/* Comment styles */
.commentarea > h1 { color: #4c566c; font-size: 17px; margin: 10px 10px 5px; border-bottom: 1px solid rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.4); -webkit-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.4); -o-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.4); box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.4); }
.commentarea > h1 { color: #4c566c; font-size: 17px; margin: 10px 10px 5px; border-bottom: 1px solid rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.4); -moz-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.4); box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.4); }
.commentarea > .menuarea { display: none; /*TODO: Make dropdown menu*/ }
.commentarea > .main-form-title { color: #4c566c; font-size: 17px; font-weight: bold; margin: 0 10px; }
.commentarea > .usertext { background: white; margin: 0 10px 5px; border: 1px solid #d9d9d9; -moz-border-radius: 8px; -webkit-border-radius: 8px; -o-border-radius: 8px; -ms-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px; }
.commentarea > .usertext { background: white; margin: 0 10px 5px; border: 1px solid #d9d9d9; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; }
.commentarea > .usertext textarea { margin: 0; padding: 5px; width: 100%; height: 100px; border: none; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; -moz-border-radius: 8px; -webkit-border-radius: 8px; -o-border-radius: 8px; -ms-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px; border-bottom: 1px solid #d9d9d9; }
.commentarea > .usertext textarea { margin: 0; padding: 5px; width: 100%; height: 100px; border: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; border-bottom: 1px solid #d9d9d9; }
.cancel, .save { float: right; padding: 0 5px !important; }
@@ -264,12 +264,12 @@ body[orient="landscape"] > #topbar > h1 { margin-left: -125px; width: 250px; }
.markhelp tr:last-child td:last-child { -webkit-border-bottom-right-radius: 8px; -moz-border-radius-bottomright: 8px; border-bottom-right-radius: 8px; }
/*Cloned comment reply */
.usertext textarea { margin: 0; padding: 5px; border: 1px solid #d9d9d9; width: 100%; min-height: 100px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
.usertext textarea { margin: 0; padding: 5px; border: 1px solid #d9d9d9; width: 100%; min-height: 100px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.child form.usertext.cloneable { margin: 5px; }
/**Actual comments*/
.comment { background: white; border: 1px solid #d9d9d9; margin: 10px; -moz-border-radius: 8px; -webkit-border-radius: 8px; -o-border-radius: 8px; -ms-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px; }
.comment { background: white; border: 1px solid #d9d9d9; margin: 10px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; }
.comment > .midcol { float: left; margin: 7px; overflow: hidden; }
@@ -293,13 +293,13 @@ body[orient="landscape"] > #topbar > h1 { margin-left: -125px; width: 250px; }
body.post-under-6h-old .gilded-comment-icon { opacity: .55; }
/** messages and inbox */
.message { background: white; position: relative; border: 1px solid #d9d9d9; margin: 10px; -moz-border-radius: 8px; -webkit-border-radius: 8px; -o-border-radius: 8px; -ms-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px; padding: 5px; }
.message { background: white; position: relative; border: 1px solid #d9d9d9; margin: 10px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; padding: 5px; }
.message > .midcol { float: left; margin: 10px; overflow: hidden; }
.message.unread { background-color: #FFFFAA; }
.message .correspondent { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cee3f8), color-stop(100%, #9ebedc)); background: -webkit-linear-gradient(top, #cee3f8, #9ebedc); background: -moz-linear-gradient(top, #cee3f8, #9ebedc); background: -o-linear-gradient(top, #cee3f8, #9ebedc); background: -ms-linear-gradient(top, #cee3f8, #9ebedc); background: linear-gradient(top, #cee3f8, #9ebedc); background-color: #b6d0ea; /* TODO */ margin-right: 10px; padding: 2px 5px; -moz-border-radius: 15px; -webkit-border-radius: 15px; -o-border-radius: 15px; -ms-border-radius: 15px; -khtml-border-radius: 15px; border-radius: 15px; }
.message .correspondent { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cee3f8), color-stop(100%, #9ebedc)); background: -webkit-linear-gradient(top, #cee3f8, #9ebedc); background: -moz-linear-gradient(top, #cee3f8, #9ebedc); background: -o-linear-gradient(top, #cee3f8, #9ebedc); background: linear-gradient(top, #cee3f8, #9ebedc); background-color: #b6d0ea; /* TODO */ margin-right: 10px; padding: 2px 5px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; }
.message .correspondent a { text-decoration: none; }
@@ -320,7 +320,7 @@ body.post-under-6h-old .gilded-comment-icon { opacity: .55; }
/* subreddit */
.link .subreddit { background-color: transparent; margin: 0px; }
.subreddit { background-color: white; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; margin: 5px; }
.subreddit { background-color: white; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; margin: 5px; }
.subreddit p.title { display: block; margin-left: 35px; margin-right: 30px; }
@@ -330,7 +330,7 @@ body.post-under-6h-old .gilded-comment-icon { opacity: .55; }
.subreddit .tagline { font-size: x-small; color: #666; }
.subreddit .button.active { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #bfd0e0), color-stop(100%, #80a2c4)); background: -webkit-linear-gradient(top, #bfd0e0, #80a2c4); background: -moz-linear-gradient(top, #bfd0e0, #80a2c4); background: -o-linear-gradient(top, #bfd0e0, #80a2c4); background: -ms-linear-gradient(top, #bfd0e0, #80a2c4); background: linear-gradient(top, #bfd0e0, #80a2c4); background-color: #9fb9d2; }
.subreddit .button.active { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #bfd0e0), color-stop(100%, #80a2c4)); background: -webkit-linear-gradient(top, #bfd0e0, #80a2c4); background: -moz-linear-gradient(top, #bfd0e0, #80a2c4); background: -o-linear-gradient(top, #bfd0e0, #80a2c4); background: linear-gradient(top, #bfd0e0, #80a2c4); background-color: #9fb9d2; }
.subreddit > .entry .score, .subreddit > .entry.likes .score.unvoted, .subreddit > .entry.dislikes .score.unvoted { display: none; }
@@ -353,7 +353,7 @@ body.post-under-6h-old .gilded-comment-icon { opacity: .55; }
#compose-message label { display: block; font-size: 17px; font-weight: bold; }
#compose-message input[type="text"] { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; border: 1px solid #757575; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; margin-bottom: 5px; padding: 5px; width: 100%; }
#compose-message input[type="text"] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid #757575; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; margin-bottom: 5px; padding: 5px; width: 100%; }
#compose-message textarea { border-color: #757575; height: 200px; }
@@ -401,7 +401,7 @@ body.post-under-6h-old .gilded-comment-icon { opacity: .55; }
#login_login > div > ul li label, #login_reg > div > ul li label { display: block; font-size: 17px; font-weight: bold; }
#login_login input[type="text"], #login_login input[type="password"], #login_reg input[type="text"], #login_reg input[type="password"] { width: 100%; margin: 0 0 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; border: 1px solid #757575; /*It was the coins fault!*/ font-size: 17px; padding: 5px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
#login_login input[type="text"], #login_login input[type="password"], #login_reg input[type="text"], #login_reg input[type="password"] { width: 100%; margin: 0 0 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; border: 1px solid #757575; /*It was the coins fault!*/ font-size: 17px; padding: 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#login_login > div > ul li input[type="checkbox"] + label, #login_reg > div > ul li input[type="checkbox"] + label { display: inline; }
@@ -412,7 +412,7 @@ body.toolbar { margin: 0px; padding: 0px; overflow: hidden; }
.toolbar-iframe { border: none; height: 100%; width: 100%; background: white; }
.frame-toolbar { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(206, 227, 248, 0.9)), color-stop(100%, rgba(169, 196, 224, 0.9))); background: -webkit-linear-gradient(top, rgba(206, 227, 248, 0.9), rgba(169, 196, 224, 0.9)); background: -moz-linear-gradient(top, rgba(206, 227, 248, 0.9), rgba(169, 196, 224, 0.9)); background: -o-linear-gradient(top, rgba(206, 227, 248, 0.9), rgba(169, 196, 224, 0.9)); background: -ms-linear-gradient(top, rgba(206, 227, 248, 0.9), rgba(169, 196, 224, 0.9)); background: linear-gradient(top, rgba(206, 227, 248, 0.9), rgba(169, 196, 224, 0.9)); background-color: rgba(187, 211, 236, 0.9); width: 300px; padding: 5px; top: 5px; border: 1px solid #6999c9; border-left: 0; position: absolute; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-box-shadow: rgba(0, 0, 0, 0.15) 3px 3px 3px; -webkit-box-shadow: rgba(0, 0, 0, 0.15) 3px 3px 3px; -o-box-shadow: rgba(0, 0, 0, 0.15) 3px 3px 3px; box-shadow: rgba(0, 0, 0, 0.15) 3px 3px 3px; }
.frame-toolbar { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(206, 227, 248, 0.9)), color-stop(100%, rgba(169, 196, 224, 0.9))); background: -webkit-linear-gradient(top, rgba(206, 227, 248, 0.9), rgba(169, 196, 224, 0.9)); background: -moz-linear-gradient(top, rgba(206, 227, 248, 0.9), rgba(169, 196, 224, 0.9)); background: -o-linear-gradient(top, rgba(206, 227, 248, 0.9), rgba(169, 196, 224, 0.9)); background: linear-gradient(top, rgba(206, 227, 248, 0.9), rgba(169, 196, 224, 0.9)); background-color: rgba(187, 211, 236, 0.9); width: 300px; padding: 5px; top: 5px; border: 1px solid #6999c9; border-left: 0; position: absolute; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -webkit-box-shadow: rgba(0, 0, 0, 0.15) 3px 3px 3px; -moz-box-shadow: rgba(0, 0, 0, 0.15) 3px 3px 3px; box-shadow: rgba(0, 0, 0, 0.15) 3px 3px 3px; }
.toolbar .entry .score { width: 100%; text-align: center; display: none; padding-top: 7px; }
@@ -423,7 +423,7 @@ body.toolbar { margin: 0px; padding: 0px; overflow: hidden; }
.toolbar .entry { text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.4), 0px -1px 1px rgba(0, 0, 0, 0.1); font-weight: bold; font-size: 15px; }
/*Close toolbar button*/
.toolbar .close { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eca09c), color-stop(100%, #a35752)); background: -webkit-linear-gradient(top, #eca09c, #a35752); background: -moz-linear-gradient(top, #eca09c, #a35752); background: -o-linear-gradient(top, #eca09c, #a35752); background: -ms-linear-gradient(top, #eca09c, #a35752); background: linear-gradient(top, #eca09c, #a35752); background-color: #c77b77; -moz-border-radius: 30px; -webkit-border-radius: 30px; -o-border-radius: 30px; -ms-border-radius: 30px; -khtml-border-radius: 30px; border-radius: 30px; border: 1px solid #884944; bottom: -13px; color: rgba(0, 0, 0, 0.594); font-size: 15px; font-weight: bold; height: 21px; padding-left: 6px; position: absolute; right: -13px; text-decoration: none; width: 21px; text-shadow: rgba(255, 255, 255, 0.3) 0px 1px 1px, rgba(0, 0, 0, 0.2) 0px -1px 1px; }
.toolbar .close { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eca09c), color-stop(100%, #a35752)); background: -webkit-linear-gradient(top, #eca09c, #a35752); background: -moz-linear-gradient(top, #eca09c, #a35752); background: -o-linear-gradient(top, #eca09c, #a35752); background: linear-gradient(top, #eca09c, #a35752); background-color: #c77b77; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; border-radius: 30px; border: 1px solid #884944; bottom: -13px; color: rgba(0, 0, 0, 0.594); font-size: 15px; font-weight: bold; height: 21px; padding-left: 6px; position: absolute; right: -13px; text-decoration: none; width: 21px; text-shadow: rgba(255, 255, 255, 0.3) 0px 1px 1px, rgba(0, 0, 0, 0.2) 0px -1px 1px; }
/* takdown page (sigh) */
.infobar.red img { float: left; }
@@ -436,7 +436,7 @@ body.toolbar { margin: 0px; padding: 0px; overflow: hidden; }
.cover { position: absolute; left: 0px; top: 0px; width: 100%; background-color: gray; opacity: .3; z-index: 1000; }
.popup { position: absolute; top: 75px; left: 0; -moz-border-radius: 30px; -webkit-border-radius: 30px; -o-border-radius: 30px; -ms-border-radius: 30px; -khtml-border-radius: 30px; border-radius: 30px; background-color: white; text-align: left; z-index: 1001; padding: 10px; border-color: #B2B2B2 black black #B2B2B2; border-style: solid; border-width: 1px; margin-left: auto; margin-right: auto; max-width: 350px; }
.popup { position: absolute; top: 75px; left: 0; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; border-radius: 30px; background-color: white; text-align: left; z-index: 1001; padding: 10px; border-color: #B2B2B2 black black #B2B2B2; border-style: solid; border-width: 1px; margin-left: auto; margin-right: auto; max-width: 350px; }
.popup h1 { text-align: center; font-size: large; font-weight: normal; color: orangered; }
@@ -448,15 +448,15 @@ body.toolbar { margin: 0px; padding: 0px; overflow: hidden; }
/** Tab switcher **/
#newlink .tabmenu { display: -webkit-box; display: -moz-box; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; margin: 10px; padding: 0; }
#newlink .tabmenu li { display: block; webkit-box-flex: 1; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d9d9d9), color-stop(100%, #b3b3b3)); background: -webkit-linear-gradient(top, #d9d9d9, #b3b3b3); background: -moz-linear-gradient(top, #d9d9d9, #b3b3b3); background: -o-linear-gradient(top, #d9d9d9, #b3b3b3); background: -ms-linear-gradient(top, #d9d9d9, #b3b3b3); background: linear-gradient(top, #d9d9d9, #b3b3b3); background-color: #c6c6c6; border: 1px solid #999999; position: relative; }
#newlink .tabmenu li { display: block; webkit-box-flex: 1; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d9d9d9), color-stop(100%, #b3b3b3)); background: -webkit-linear-gradient(top, #d9d9d9, #b3b3b3); background: -moz-linear-gradient(top, #d9d9d9, #b3b3b3); background: -o-linear-gradient(top, #d9d9d9, #b3b3b3); background: linear-gradient(top, #d9d9d9, #b3b3b3); background-color: #c6c6c6; border: 1px solid #999999; position: relative; }
#newlink .tabmenu li a { width: 100%; height: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; display: block; padding: 5px; color: #4d4d4d; text-shadow: rgba(255, 255, 255, 0.4) 0px 1px 1px; text-decoration: none; font-weight: bold; }
#newlink .tabmenu li a { width: 100%; height: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: block; padding: 5px; color: #4d4d4d; text-shadow: rgba(255, 255, 255, 0.4) 0px 1px 1px; text-decoration: none; font-weight: bold; }
#newlink .tabmenu li:first-child { -webkit-border-bottom-left-radius: 5px; -webkit-border-top-left-radius: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-topleft: 5px; }
#newlink .tabmenu li:last-child { -webkit-border-bottom-right-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-topright: 5px; border-left-color: #cccccc; }
#newlink li.selected { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #808080), color-stop(100%, #b3b3b3)); background: -webkit-linear-gradient(top, #808080, #b3b3b3); background: -moz-linear-gradient(top, #808080, #b3b3b3); background: -o-linear-gradient(top, #808080, #b3b3b3); background: -ms-linear-gradient(top, #808080, #b3b3b3); background: linear-gradient(top, #808080, #b3b3b3); background-color: #999999; }
#newlink li.selected { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #808080), color-stop(100%, #b3b3b3)); background: -webkit-linear-gradient(top, #808080, #b3b3b3); background: -moz-linear-gradient(top, #808080, #b3b3b3); background: -o-linear-gradient(top, #808080, #b3b3b3); background: linear-gradient(top, #808080, #b3b3b3); background-color: #999999; }
#newlink li.selected a { text-shadow: rgba(0, 0, 0, 0.4) 0px -1px 1px; color: #f2f2f2; }
@@ -469,9 +469,9 @@ body.toolbar { margin: 0px; padding: 0px; overflow: hidden; }
#newlink .roundfield { position: relative; padding: 0px 5px; }
#newlink .roundfield-content textarea { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 5em; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; }
#newlink .roundfield-content textarea { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 5em; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; }
#newlink .roundfield-content input[type="text"], #newlink .roundfield-content input[type="url"] { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 2em; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; }
#newlink .roundfield-content input[type="text"], #newlink .roundfield-content input[type="url"] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 2em; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; }
#newlink .title { font-weight: bold; }
@@ -480,20 +480,20 @@ body.toolbar { margin: 0px; padding: 0px; overflow: hidden; }
#url-field .title-status { background: #e6e6e6; border: 1px solid gray; padding: 2px 4px; margin-top: 5px; display: inline-block; }
#suggested-reddits ul { background: #e6e6e6; border: 1px solid gray; padding: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; -o-border-radius: 8px; -ms-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px; }
#suggested-reddits ul { background: #e6e6e6; border: 1px solid gray; padding: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; }
#suggested-reddits ul li { display: inline; }
#suggested-reddits ul li a { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #becfe0), color-stop(100%, #81a3c5)); background: -webkit-linear-gradient(top, #becfe0, #81a3c5); background: -moz-linear-gradient(top, #becfe0, #81a3c5); background: -o-linear-gradient(top, #becfe0, #81a3c5); background: -ms-linear-gradient(top, #becfe0, #81a3c5); background: linear-gradient(top, #becfe0, #81a3c5); background-color: #9fb9d2; -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; display: inline-block; margin: 5px; padding: 3px 7px; text-decoration: none; border: 1px solid #507faf; color: #304c69; }
#suggested-reddits ul li a { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #becfe0), color-stop(100%, #81a3c5)); background: -webkit-linear-gradient(top, #becfe0, #81a3c5); background: -moz-linear-gradient(top, #becfe0, #81a3c5); background: -o-linear-gradient(top, #becfe0, #81a3c5); background: linear-gradient(top, #becfe0, #81a3c5); background-color: #9fb9d2; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; display: inline-block; margin: 5px; padding: 3px 7px; text-decoration: none; border: 1px solid #507faf; color: #304c69; }
/* Autocomplete */
#sr-autocomplete-area { position: relative; z-index: 50; }
#sr-drop-down { position: absolute; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e6e6e6), color-stop(100%, #bfbfbf)); background: -webkit-linear-gradient(top, #e6e6e6, #bfbfbf); background: -moz-linear-gradient(top, #e6e6e6, #bfbfbf); background: -o-linear-gradient(top, #e6e6e6, #bfbfbf); background: -ms-linear-gradient(top, #e6e6e6, #bfbfbf); background: linear-gradient(top, #e6e6e6, #bfbfbf); background-color: #d2d2d2; border: 1px solid gray; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; border-top: 0px; display: none; left: 5px; margin: 0px; padding: 0px; position: absolute; font-weight: bold; color: #333333; }
#sr-drop-down { position: absolute; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e6e6e6), color-stop(100%, #bfbfbf)); background: -webkit-linear-gradient(top, #e6e6e6, #bfbfbf); background: -moz-linear-gradient(top, #e6e6e6, #bfbfbf); background: -o-linear-gradient(top, #e6e6e6, #bfbfbf); background: linear-gradient(top, #e6e6e6, #bfbfbf); background-color: #d2d2d2; border: 1px solid gray; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; border-top: 0px; display: none; left: 5px; margin: 0px; padding: 0px; position: absolute; font-weight: bold; color: #333333; }
#sr-drop-down li { display: block; padding: 2px 5px; }
#sr-drop-down li:hover, #sr-drop-down li:active { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #becfe0), color-stop(100%, #81a3c5)); background: -webkit-linear-gradient(top, #becfe0, #81a3c5); background: -moz-linear-gradient(top, #becfe0, #81a3c5); background: -o-linear-gradient(top, #becfe0, #81a3c5); background: -ms-linear-gradient(top, #becfe0, #81a3c5); background: linear-gradient(top, #becfe0, #81a3c5); background-color: #9fb9d2; color: white; text-shadow: rgba(255, 255, 255, 0.098) 0px 1px 1px, rgba(0, 0, 0, 0.398) 0px -1px 1px; -webkit-text-stroke: 1px solid #517090; }
#sr-drop-down li:hover, #sr-drop-down li:active { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #becfe0), color-stop(100%, #81a3c5)); background: -webkit-linear-gradient(top, #becfe0, #81a3c5); background: -moz-linear-gradient(top, #becfe0, #81a3c5); background: -o-linear-gradient(top, #becfe0, #81a3c5); background: linear-gradient(top, #becfe0, #81a3c5); background-color: #9fb9d2; color: white; text-shadow: rgba(255, 255, 255, 0.098) 0px 1px 1px, rgba(0, 0, 0, 0.398) 0px -1px 1px; -webkit-text-stroke: 1px solid #517090; }
#sr-drop-down li:last-child { -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; }
@@ -535,17 +535,17 @@ body.toolbar { margin: 0px; padding: 0px; overflow: hidden; }
.md center { text-align: left; }
/* bookmarklet page */
.instructions p { background-color: white; padding: 10px; margin: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; }
.instructions p { background-color: white; padding: 10px; margin: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; }
.instructions h1 { font-size: medium; margin-left: 5px; }
.instructions h2 { font-size: medium; margin-left: 5px; }
.instructions img { width: 290px; margin-left: 15px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; border: 1px solid #888; }
.instructions img { width: 290px; margin-left: 15px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; border: 1px solid #888; }
.instructions textarea#bookmarklet { width: 290px; margin: 15px; height: 80px; }
.tryme { width: 100%; max-width: 280px; padding: 10px; background-color: white; -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; margin: 10px auto; }
.tryme { width: 100%; max-width: 280px; padding: 10px; background-color: white; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; margin: 10px auto; }
.tryme p { margin: 10px; font-size: small; }
@@ -561,6 +561,6 @@ body.toolbar { margin: 0px; padding: 0px; overflow: hidden; }
a.author { margin-right: 0.5em; }
.flair, .linkflair { margin-top: 2px; margin-right: 0.5em; padding: 0px 2px; display: inline-block; background: whiteSmoke; color: #545454; border: 1px solid #dedede; font-size: 9px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -o-border-radius: 2px; -ms-border-radius: 2px; -khtml-border-radius: 2px; border-radius: 2px; -moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.9); -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.9); -o-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.9); box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.9); }
.flair, .linkflair { margin-top: 2px; margin-right: 0.5em; padding: 0px 2px; display: inline-block; background: whiteSmoke; color: #545454; border: 1px solid #dedede; font-size: 9px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.9); -moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.9); box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.9); }
.linkflair { font-weight: normal; max-width: 10em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

View File

@@ -47,7 +47,7 @@ textarea {
.newbutton {
@include appearance(none);
border-width: 8px;
@include border-image(url($static + 'border-button.png') 8 stretch);
@include border-image(url($static + 'border-button.png') 8 fill);
color: white;
font: {
family: inherit;
@@ -59,7 +59,7 @@ textarea {
background: none;
&:active, &:hover, &[selected], &.expanded, &.active {
@include border-image(url($static + 'border-button-active.png') 8 stretch);
@include border-image(url($static + 'border-button-active.png') 8 fill);
color: white;
}
}
@@ -705,7 +705,7 @@ body[orient="landscape"] > #topbar > h1 {
}
.commentcount > .comments {
border-width: 8px;
@include border-image(url($static + 'border-button.png') 8 stretch);
@include border-image(url($static + 'border-button.png') 8 fill);
color: white; font-family: inherit; font-size: 12px;
font-weight: bold;
@@ -713,7 +713,7 @@ body[orient="landscape"] > #topbar > h1 {
text-shadow: 0px 1px 1px rgba(255,255,255,.1), 0px -1px 1px rgba(0,0,0,.4);
&:active, &:hover, &[selected], &.preloaded {
@include border-image(url($static + 'border-button-active.png') 8 stretch);
@include border-image(url($static + 'border-button-active.png') 8 fill);
}
}
/* Comment styles */