From 2a3b5d3d4da763a3b2c133ae7e2fc391ca1f98d6 Mon Sep 17 00:00:00 2001 From: Paradox Date: Sun, 21 Aug 2011 23:36:26 -0600 Subject: [PATCH] Added color fallback for CSS3 Gradients The few remaining CSS3 gradients on the site have been updated to output a background color as well. This background color is a calculated mixture of the two colors, designed to render a pleasurable alternative color for browsers that don't support mobile gradients (mainly mobile IE) --- r2/r2/public/static/css/compact.css | 36 ++++++++++++++-------------- r2/r2/public/static/css/compact.scss | 5 +--- 2 files changed, 19 insertions(+), 22 deletions(-) diff --git a/r2/r2/public/static/css/compact.css b/r2/r2/public/static/css/compact.css index 86e6f4aae..77f4a91d6 100644 --- a/r2/r2/public/static/css/compact.css +++ b/r2/r2/public/static/css/compact.css @@ -17,19 +17,19 @@ textarea { font-family: inherit; } .newbutton { -moz-appearance: none; -webkit-appearance: none; appearance: none; border-width: 8px; -moz-border-image: url("/static/compact/border-button.png") 8 stretch; -webkit-border-image: url("/static/compact/border-button.png") 8 stretch; -webkit-border-image: url("/static/compact/border-button.png") 8 stretch; -o-border-image: url("/static/compact/border-button.png") 8 stretch; border-image: url("/static/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("/static/compact/border-button-active.png") 8 stretch; -webkit-border-image: url("/static/compact/border-button-active.png") 8 stretch; -webkit-border-image: url("/static/compact/border-button-active.png") 8 stretch; -o-border-image: url("/static/compact/border-button-active.png") 8 stretch; border-image: url("/static/compact/border-button-active.png") 8 stretch; 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-color: #7f7f7f; 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); 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); background-color: #80A2C4; 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 { -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:active, .button[selected], .button.active, .button.upmod, .button.downmod { background-color: #80A2C4; background-color: #7f7f7f; 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); } +.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.button { padding: 0 5px; } -.secondary_button { background-color: #7f7f7f; 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); 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: -ms-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-color: #7f7f7f; 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); } +.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; } -.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-color: #7f7f7f; 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); 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 { -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:active, .small_button[selected], .small_button.active { background-color: #7f7f7f; 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); } +.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; } .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; } @@ -90,7 +90,7 @@ button.button { padding: 0 5px; } .unhide-icon { background-image: url("/static/compact/unhide.png"); /*SPRITE*/ } /*Toolbar*/ -#topbar { background-color: #A8C4E0; background-color: #7f7f7f; 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); 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: -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 #header-img { width: 90px; } #topbar .left { position: absolute; left: 0; bottom: 3px; overflow: hidden; max-height: 40px; } #topbar .right { position: absolute; right: 10px; bottom: 1px; } @@ -130,7 +130,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-color: #7f7f7f; 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); border-bottom: 1px solid #bbb; padding: 6px; text-overflow: ellipsis; overflow: hidden; } +.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 > ul { list-style-type: none; margin: 0; padding: 0; } @@ -138,7 +138,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-color: #7f7f7f; 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); -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: -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); } /*Things*/ /*Arrows*/ @@ -291,7 +291,7 @@ body[orient="landscape"] > #topbar > h1 { margin-left: -125px; width: 250px; } .message.unread { background-color: #FFFFAA; } -.message .correspondent { background-color: #7f7f7f; 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); /* 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: -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 a { text-decoration: none; } @@ -322,7 +322,7 @@ body[orient="landscape"] > #topbar > h1 { margin-left: -125px; width: 250px; } .subreddit .tagline { font-size: x-small; color: #666; } -.subreddit .button.active { background-color: #7f7f7f; 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); } +.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 > .entry .score, .subreddit > .entry.likes .score.unvoted, .subreddit > .entry.dislikes .score.unvoted { display: none; } @@ -398,7 +398,7 @@ body.toolbar { margin: 0px; padding: 0px; overflow: hidden; } .toolbar-iframe { border: none; height: 100%; width: 100%; background: white; } -.frame-toolbar { background-color: rgba(127, 127, 127, 0.9); 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)); 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: -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; } .toolbar .entry .score { width: 100%; text-align: center; display: none; padding-top: 7px; } @@ -409,7 +409,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-color: #7f7b77; 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); -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 { -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; } /* takdown page (sigh) */ .infobar.red img { float: left; } @@ -434,7 +434,7 @@ 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-color: #7f7f7f; 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); 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: -ms-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; } @@ -442,7 +442,7 @@ body.toolbar { margin: 0px; padding: 0px; overflow: hidden; } #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-color: #7f7f7f; 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); } +#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 a { text-shadow: rgba(0, 0, 0, 0.4) 0px -1px 1px; color: #f2f2f2; } @@ -470,16 +470,16 @@ body.toolbar { margin: 0px; padding: 0px; overflow: hidden; } #suggested-reddits ul li { display: inline; } -#suggested-reddits ul li a { background-color: #7f7f7f; 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); -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: -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; } /* Autocomplete */ #sr-autocomplete-area { position: relative; z-index: 50; } -#sr-drop-down { position: absolute; background-color: #7f7f7f; 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); 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: -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 li { display: block; padding: 2px 5px; } -#sr-drop-down li:hover, #sr-drop-down li:active { background-color: #7f7f7f; 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); 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: -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:last-child { -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; } diff --git a/r2/r2/public/static/css/compact.scss b/r2/r2/public/static/css/compact.scss index d041559fc..6fd72e9d2 100644 --- a/r2/r2/public/static/css/compact.scss +++ b/r2/r2/public/static/css/compact.scss @@ -6,8 +6,8 @@ @import "compass/css3"; @mixin vertical_gradient($from, $to) { - background-color: ($from + $to) / 2; @include background(linear-gradient(top, $from, $to)); + background-color: mix($from, $to); //Takes 2 colors, and gives their combination. Looks good on gradual gradients, not on "exciting" gradients } @mixin sprite($url) { background-image: url($url); /*SPRITE*/ @@ -78,14 +78,12 @@ textarea { white-space: nowrap; width: auto; text-shadow: 0px 1px 1px rgba(255,255,255,.1), 0px -1px 1px rgba(0,0,0,.4); - background-color: #80A2C4; border: 1px solid #517191; @include box-shadow(inset 0px 1px 0px hsla(0,0%,100%,.75), 0px 1px 1px rgba(255,255,255,.6), 0px -1px 1px rgba(0,0,0,.1) ); } .button:active, .button[selected], .button.active, /*Vote toolbar styles*/.button.upmod, .button.downmod { - background-color: #80A2C4; @include vertical_gradient(#7E8994, #80A2C4); } button.button { @@ -311,7 +309,6 @@ button.button { /*Toolbar*/ #topbar { - background-color: #A8C4E0; @include vertical_gradient(#CEE3F8, #A8C4E0); border-bottom: 1px solid #7599BD; border-top: 1px solid #DCEAF7; @include box-sizing(border-box);