From a04db72db70ebe0ef2f40dd71e5c01c1df123e27 Mon Sep 17 00:00:00 2001 From: Eric Bidelman Date: Thu, 8 Aug 2013 12:40:40 -0700 Subject: [PATCH] Fixes #52. Turn on outline when tabbing --- static/css/elements/chromedash-feature.css | 2 +- static/css/main.css | 2 +- static/sass/_base.scss | 4 ++++ static/sass/elements/chromedash-feature.scss | 16 +++++++++++----- 4 files changed, 17 insertions(+), 7 deletions(-) diff --git a/static/css/elements/chromedash-feature.css b/static/css/elements/chromedash-feature.css index b269b0e5f44..50ecb14e75a 100644 --- a/static/css/elements/chromedash-feature.css +++ b/static/css/elements/chromedash-feature.css @@ -1 +1 @@ -@host{:scope{display:block;-webkit-transition:height 400ms ease-in-out;-moz-transition:height 400ms ease-in-out;-o-transition:height 400ms ease-in-out;transition:height 400ms ease-in-out;height:75px;overflow:hidden;cursor:pointer;background-color:#FAFAFA;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));background:-webkit-linear-gradient(top, #ffffff,#f2f2f2);background:-moz-linear-gradient(top, #ffffff,#f2f2f2);background:-o-linear-gradient(top, #ffffff,#f2f2f2);background:linear-gradient(top, #ffffff,#f2f2f2);padding:0.75em 1em;box-shadow:1px 1px 4px rgba(0,0,0,0.065);margin-bottom:1px;position:relative;border-radius:3px;padding:5px 20px;list-style:none;outline:none}:scope.open{height:290px;overflow:auto}}h2{display:inline-block;margin-right:1em;font-size:25px}.topcorner.pull-right{top:15px;right:15px;position:absolute}.topcorner .icon-beaker{color:#797979}.topcorner .icon-warning-sign{color:darkred}.topcorner .tooltip:hover:before,.topcorner .tooltip:active:before{content:attr(title) "";position:absolute;background-color:#FAFAFA;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));background:-webkit-linear-gradient(top, #ffffff,#f2f2f2);background:-moz-linear-gradient(top, #ffffff,#f2f2f2);background:-o-linear-gradient(top, #ffffff,#f2f2f2);background:linear-gradient(top, #ffffff,#f2f2f2);padding:0.75em 1em;box-shadow:1px 1px 4px rgba(0,0,0,0.065);box-shadow:2px 2px 4px #a9a9a9;border:1px solid #e6e6e6;z-index:100;text-align:center;color:#666;top:10px;right:25px;width:auto;white-space:nowrap}hgroup{display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;-moz-align-items:center;-ms-align-items:center;-o-align-items:center;align-items:center}hgroup .category{color:#a9a9a9;cursor:pointer}hgroup chromedash-color-status{position:absolute;top:0;left:0}hgroup chromedash-color-status:hover:before,hgroup chromedash-color-status:active:before{content:attr(title) "";position:absolute;background-color:#FAFAFA;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));background:-webkit-linear-gradient(top, #ffffff,#f2f2f2);background:-moz-linear-gradient(top, #ffffff,#f2f2f2);background:-o-linear-gradient(top, #ffffff,#f2f2f2);background:linear-gradient(top, #ffffff,#f2f2f2);padding:0.75em 1em;box-shadow:1px 1px 4px rgba(0,0,0,0.065);box-shadow:2px 2px 4px #a9a9a9;border:1px solid #e6e6e6;z-index:100;text-align:center;color:#666;top:50%;margin:-30px auto;left:25px;width:275px}section{margin-top:10px}section.desc{cursor:pointer}section.desc summary{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}section.desc summary.open{white-space:normal}section h3{margin-bottom:10px;font-size:18px;color:#366597;font-weight:400}section label{font-weight:600;margin-right:5px}section div{margin-bottom:10px;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;-o-flex-wrap:wrap;flex-wrap:wrap}section div>*{margin-right:20px}section .impl_status .chrome_android.tooltip{position:relative}section .impl_status .chrome_android.tooltip:hover:before,section .impl_status .chrome_android.tooltip:active:before{content:attr(title) "";position:absolute;background-color:#FAFAFA;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));background:-webkit-linear-gradient(top, #ffffff,#f2f2f2);background:-moz-linear-gradient(top, #ffffff,#f2f2f2);background:-o-linear-gradient(top, #ffffff,#f2f2f2);background:linear-gradient(top, #ffffff,#f2f2f2);padding:0.75em 1em;box-shadow:1px 1px 4px rgba(0,0,0,0.065);box-shadow:2px 2px 4px #a9a9a9;border:1px solid #e6e6e6;z-index:100;text-align:center;color:#666;top:-50px;left:20px;width:225px}section .icon-android{color:#A4C739;font-size:1.5em}section .views{display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;-o-flex-wrap:wrap;flex-wrap:wrap}section .views>*{display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;-moz-align-items:center;-ms-align-items:center;-o-align-items:center;align-items:center;position:relative}section .views>*>label{cursor:inherit}section .views>*:hover:before,section .views>*:active:before{content:attr(title) "";position:absolute;background-color:#FAFAFA;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));background:-webkit-linear-gradient(top, #ffffff,#f2f2f2);background:-moz-linear-gradient(top, #ffffff,#f2f2f2);background:-o-linear-gradient(top, #ffffff,#f2f2f2);background:linear-gradient(top, #ffffff,#f2f2f2);padding:0.75em 1em;box-shadow:1px 1px 4px rgba(0,0,0,0.065);box-shadow:2px 2px 4px #a9a9a9;border:1px solid #e6e6e6;z-index:100;text-align:center;color:#666;top:-50px;left:20px;width:150px}section .standardization{display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;-o-flex-wrap:wrap;flex-wrap:wrap}section .standardization>*{display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;-moz-align-items:center;-ms-align-items:center;-o-align-items:center;align-items:center}section .comments{white-space:pre-wrap}chromedash-color-status{display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;margin-right:5px;box-sizing:border-box;-webkit-box-flex:1;-webkit-flex:auto 0 0;-moz-flex:auto 0 0;-ms-flex:auto 0 0;-o-flex:auto 0 0;flex:auto 0 0}@media only screen and (max-width: 700px){h2{font-size:20px !important}section{margin-left:0}.impl_status{display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;-webkit-box-orient:vertical;-webkit-flex-direction:column;-moz-flex-direction:column;-ms-flex-direction:column;-o-flex-direction:column;flex-direction:column;-webkit-flex-wrap:initial;-moz-flex-wrap:initial;-ms-flex-wrap:initial;-o-flex-wrap:initial;flex-wrap:initial}.impl_status>span:not([hidden]):not(:last-of-type),.impl_status>a{margin-bottom:10px}.views span{margin-bottom:10px}} +@host{:scope{display:block;-webkit-transition:height 400ms ease-in-out;-moz-transition:height 400ms ease-in-out;-o-transition:height 400ms ease-in-out;transition:height 400ms ease-in-out;height:75px;overflow:hidden;cursor:pointer;background-color:#FAFAFA;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));background:-webkit-linear-gradient(top, #ffffff,#f2f2f2);background:-moz-linear-gradient(top, #ffffff,#f2f2f2);background:-o-linear-gradient(top, #ffffff,#f2f2f2);background:linear-gradient(top, #ffffff,#f2f2f2);padding:0.75em 1em;box-shadow:1px 1px 4px rgba(0,0,0,0.065);margin-bottom:1px;position:relative;border-radius:3px;padding:5px 20px;list-style:none}:scope:active{outline:none}:scope.open{height:290px;overflow:auto;outline:none}}h2{display:inline-block;margin-right:1em;font-size:25px}.topcorner.pull-right{top:15px;right:15px;position:absolute}.topcorner .icon-beaker{color:#797979}.topcorner .icon-warning-sign{color:darkred}.topcorner .tooltip:hover:before,.topcorner .tooltip:active:before{content:attr(title) "";position:absolute;background-color:#FAFAFA;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));background:-webkit-linear-gradient(top, #ffffff,#f2f2f2);background:-moz-linear-gradient(top, #ffffff,#f2f2f2);background:-o-linear-gradient(top, #ffffff,#f2f2f2);background:linear-gradient(top, #ffffff,#f2f2f2);padding:0.75em 1em;box-shadow:1px 1px 4px rgba(0,0,0,0.065);box-shadow:2px 2px 4px #a9a9a9;border:1px solid #e6e6e6;z-index:100;text-align:center;color:#666;top:10px;right:25px;width:auto;white-space:nowrap}hgroup{display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;-moz-align-items:center;-ms-align-items:center;-o-align-items:center;align-items:center}hgroup .category{color:#a9a9a9;cursor:pointer}hgroup chromedash-color-status{position:absolute;top:0;left:0}hgroup chromedash-color-status:hover:before,hgroup chromedash-color-status:active:before{content:attr(title) "";position:absolute;background-color:#FAFAFA;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));background:-webkit-linear-gradient(top, #ffffff,#f2f2f2);background:-moz-linear-gradient(top, #ffffff,#f2f2f2);background:-o-linear-gradient(top, #ffffff,#f2f2f2);background:linear-gradient(top, #ffffff,#f2f2f2);padding:0.75em 1em;box-shadow:1px 1px 4px rgba(0,0,0,0.065);box-shadow:2px 2px 4px #a9a9a9;border:1px solid #e6e6e6;z-index:100;text-align:center;color:#666;top:50%;margin:-30px auto;left:25px;width:275px}section{margin-top:10px}section.desc{cursor:pointer}section.desc summary{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}section.desc summary.open{white-space:normal}section h3{margin-bottom:10px;font-size:18px;color:#366597;font-weight:400}section label{font-weight:600;margin-right:5px}section div{margin-bottom:10px;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;-o-flex-wrap:wrap;flex-wrap:wrap}section div>*{margin-right:20px}section .impl_status .chrome_android.tooltip{position:relative}section .impl_status .chrome_android.tooltip:hover:before,section .impl_status .chrome_android.tooltip:active:before{content:attr(title) "";position:absolute;background-color:#FAFAFA;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));background:-webkit-linear-gradient(top, #ffffff,#f2f2f2);background:-moz-linear-gradient(top, #ffffff,#f2f2f2);background:-o-linear-gradient(top, #ffffff,#f2f2f2);background:linear-gradient(top, #ffffff,#f2f2f2);padding:0.75em 1em;box-shadow:1px 1px 4px rgba(0,0,0,0.065);box-shadow:2px 2px 4px #a9a9a9;border:1px solid #e6e6e6;z-index:100;text-align:center;color:#666;top:-50px;left:20px;width:225px}section .icon-android{color:#A4C739;font-size:1.5em}section .views{display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;-o-flex-wrap:wrap;flex-wrap:wrap}section .views>*{display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;-moz-align-items:center;-ms-align-items:center;-o-align-items:center;align-items:center;position:relative}section .views>*>label{cursor:inherit}section .views>*:hover:before,section .views>*:active:before{content:attr(title) "";position:absolute;background-color:#FAFAFA;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));background:-webkit-linear-gradient(top, #ffffff,#f2f2f2);background:-moz-linear-gradient(top, #ffffff,#f2f2f2);background:-o-linear-gradient(top, #ffffff,#f2f2f2);background:linear-gradient(top, #ffffff,#f2f2f2);padding:0.75em 1em;box-shadow:1px 1px 4px rgba(0,0,0,0.065);box-shadow:2px 2px 4px #a9a9a9;border:1px solid #e6e6e6;z-index:100;text-align:center;color:#666;top:-50px;left:20px;width:150px}section .standardization{display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;-o-flex-wrap:wrap;flex-wrap:wrap}section .standardization>*{display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;-moz-align-items:center;-ms-align-items:center;-o-align-items:center;align-items:center}section .comments{white-space:pre-wrap}chromedash-color-status{display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;margin-right:5px;box-sizing:border-box;-webkit-box-flex:1;-webkit-flex:auto 0 0;-moz-flex:auto 0 0;-ms-flex:auto 0 0;-o-flex:auto 0 0;flex:auto 0 0}@media only screen and (max-width: 700px){h2{font-size:20px !important}section{margin-left:0}.impl_status{display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;-webkit-box-orient:vertical;-webkit-flex-direction:column;-moz-flex-direction:column;-ms-flex-direction:column;-o-flex-direction:column;flex-direction:column;-webkit-flex-wrap:initial;-moz-flex-wrap:initial;-ms-flex-wrap:initial;-o-flex-wrap:initial;flex-wrap:initial}.impl_status>span:not([hidden]):not(:last-of-type),.impl_status>a{margin-bottom:10px}.views span{margin-bottom:10px}} diff --git a/static/css/main.css b/static/css/main.css index fd23e25c2f8..20166070bae 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -1 +1 @@ -html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}html{line-height:1}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}q,blockquote{quotes:none}q:before,q:after,blockquote:before,blockquote:after{content:"";content:none}a img{border:none}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block}*{box-sizing:border-box}a{text-decoration:none}a:hover{text-decoration:underline}button,.button{display:inline-block;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #f9f9f9), color-stop(70%, #e3e3e3));background:-webkit-linear-gradient(#f9f9f9 40%,#e3e3e3 70%);background:-moz-linear-gradient(#f9f9f9 40%,#e3e3e3 70%);background:-o-linear-gradient(#f9f9f9 40%,#e3e3e3 70%);background:linear-gradient(#f9f9f9 40%,#e3e3e3 70%);border:1px solid #a9a9a9;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px;padding:5px 8px;outline:none;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-o-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;text-shadow:1px 1px #fff;font-size:10pt}button:not(:disabled):hover{border-color:#515151}button:not(:disabled):active{background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #e3e3e3), color-stop(70%, #f9f9f9));background:-webkit-linear-gradient(#e3e3e3 40%,#f9f9f9 70%);background:-moz-linear-gradient(#e3e3e3 40%,#f9f9f9 70%);background:-o-linear-gradient(#e3e3e3 40%,#f9f9f9 70%);background:linear-gradient(#e3e3e3 40%,#f9f9f9 70%)}html,body{height:100%}body{color:#666;font:14px "Open Sans", Arial, sans-serif;background-color:#eee;opacity:1.0 !important;transition:none !important}h1,h2,h3,h4{font-weight:300}h1{font-size:30px}h2,h3,h4{color:#444}h2{font-size:25px}h3{font-size:20px}a{color:#4580c0}a:hover{color:#366597;text-decoration:none}b{font-weight:bold}input:not([type="submit"]),textarea{border:1px solid #d4d4d4}input:not([type="submit"])[disabled],textarea[disabled]{opacity:0.5}header,footer{display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;-moz-align-items:center;-ms-align-items:center;-o-align-items:center;align-items:center;text-shadow:0 1px 0 white}header{margin:15px 0 0 0;-webkit-user-select:none;-moz-user-select:none;-o-user-select:none;-ms-user-select:none;user-select:none}header a{color:currentcolor}header aside{background-color:#FAFAFA;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));background:-webkit-linear-gradient(top, #ffffff,#f2f2f2);background:-moz-linear-gradient(top, #ffffff,#f2f2f2);background:-o-linear-gradient(top, #ffffff,#f2f2f2);background:linear-gradient(top, #ffffff,#f2f2f2);padding:0.75em 1em;box-shadow:1px 1px 4px rgba(0,0,0,0.065);border-top-right-radius:5px;border-bottom-right-radius:5px;border-bottom:1px solid #d4d4d4;border-right:1px solid #d4d4d4;background-color:#FAFAFA;padding:0.75em 1em;background:url(/static/img/chromium-128.png) no-repeat 10px 50%,#fafafa;background-size:25%;padding-left:125px}header aside h1{line-height:1}header aside img{height:45px;width:45px;margin-right:7px}header nav{display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;-moz-align-items:center;-ms-align-items:center;-o-align-items:center;align-items:center;margin-left:3em}header nav a{background-color:#FAFAFA;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));background:-webkit-linear-gradient(top, #ffffff,#f2f2f2);background:-moz-linear-gradient(top, #ffffff,#f2f2f2);background:-o-linear-gradient(top, #ffffff,#f2f2f2);background:linear-gradient(top, #ffffff,#f2f2f2);padding:0.75em 1em;box-shadow:1px 1px 4px rgba(0,0,0,0.065);-webkit-box-flex:1;-webkit-flex:1;-moz-flex:1;-ms-flex:1;-o-flex:1;flex:1;cursor:pointer;margin-right:1em;font-size:16px;text-align:center;border-radius:3px;border-bottom:1px solid #d4d4d4;border-right:1px solid #d4d4d4}header nav a:active{position:relative;top:1px;left:1px;box-shadow:3px 3px 4px rgba(0,0,0,0.065)}header nav a.disabled{opacity:0.5;pointer-events:none}footer{background-color:#FAFAFA;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));background:-webkit-linear-gradient(top, #ffffff,#f2f2f2);background:-moz-linear-gradient(top, #ffffff,#f2f2f2);background:-o-linear-gradient(top, #ffffff,#f2f2f2);background:linear-gradient(top, #ffffff,#f2f2f2);padding:0.75em 1em;box-shadow:1px 1px 4px rgba(0,0,0,0.065);font-size:12px;box-shadow:0 -2px 5px rgba(0,0,0,0.065);display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;-webkit-box-orient:vertical;-webkit-flex-direction:column;-moz-flex-direction:column;-ms-flex-direction:column;-o-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-moz-justify-content:center;-ms-justify-content:center;-o-justify-content:center;justify-content:center;text-align:center;position:relative}footer div{margin-top:5px}chromedash-legend{width:600px;left:-moz-calc(50% - 600px/2);left:-o-calc(50% - 600px/2);left:-webkit-calc(50% - 600px/2);left:calc(50% - 600px/2);top:7%;opacity:0}#subheader{display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;-moz-align-items:center;-ms-align-items:center;-o-align-items:center;align-items:center;margin:20px 20px 0 25px;max-width:905px}#subheader div{margin-right:25px}#subheader div.feature-count{min-width:325px;margin-right:5px}#subheader div.search{margin-right:0}#subheader div.search input{width:200px;outline:none;padding:10px 7px}#subheader div.actionlinks{-webkit-box-flex:1;-webkit-flex:1 0 0;-moz-flex:1 0 0;-ms-flex:1 0 0;-o-flex:1 0 0;flex:1 0 0;text-align:right;margin-right:0}#subheader div.actionlinks a{margin-left:20px}#container{display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;-webkit-box-orient:vertical;-webkit-flex-direction:column;-moz-flex-direction:column;-ms-flex-direction:column;-o-flex-direction:column;flex-direction:column;height:100%;width:100%}#content{display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;-webkit-box-flex:1;-webkit-flex:1 0 0;-moz-flex:1 0 0;-ms-flex:1 0 0;-o-flex:1 0 0;flex:1 0 0;margin:20px;overflow:auto;position:relative}#panels{display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;width:100%;overflow:hidden}#panels nav{font-size:120%;font-weight:300;width:150px;overflow-x:hidden}#panels nav chromedash-metadata{overflow:auto;width:165px}#panels nav chromedash-metadata .help{text-align:center}#panels chromedash-featurelist{-webkit-box-flex:1;-webkit-flex:1 0 0;-moz-flex:1 0 0;-ms-flex:1 0 0;-o-flex:1 0 0;flex:1 0 0;overflow:auto;max-width:760px}@media only screen and (max-width: 700px){h1{font-size:25px}h2{font-size:20px}h3{font-size:15px}#container{display:block}#content{margin:0}header{margin:0;display:block}header aside{padding:0.5em;border-radius:0}header aside hgroup{text-align:right}header aside hgroup span{display:none}header nav{margin:10px 0;-webkit-box-pack:center;-webkit-justify-content:center;-moz-justify-content:center;-ms-justify-content:center;-o-justify-content:center;justify-content:center}header nav a{padding:5px 10px;margin:0;border-radius:0}#panels{display:block}#panels nav{display:none}#subheader{margin:5px}#subheader div:not(.search){display:none}#subheader div.search{text-align:center;-webkit-box-flex:1;-webkit-flex:1 0 0;-moz-flex:1 0 0;-ms-flex:1 0 0;-o-flex:1 0 0;flex:1 0 0;margin:0}chromedash-feature,[is="chromedash-feature"]{box-shadow:none !important;border-radius:0 !important;padding:10px !important;margin:0 !important;-webkit-transition:none !important;-moz-transition:none !important;-o-transition:none !important;transition:none !important}footer{padding:0.35em}} +html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}html{line-height:1}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}q,blockquote{quotes:none}q:before,q:after,blockquote:before,blockquote:after{content:"";content:none}a img{border:none}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block}*{box-sizing:border-box}:focus{outline:1px solid #85b4df}a{text-decoration:none}a:hover{text-decoration:underline}button,.button{display:inline-block;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #f9f9f9), color-stop(70%, #e3e3e3));background:-webkit-linear-gradient(#f9f9f9 40%,#e3e3e3 70%);background:-moz-linear-gradient(#f9f9f9 40%,#e3e3e3 70%);background:-o-linear-gradient(#f9f9f9 40%,#e3e3e3 70%);background:linear-gradient(#f9f9f9 40%,#e3e3e3 70%);border:1px solid #a9a9a9;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px;padding:5px 8px;outline:none;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-o-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;text-shadow:1px 1px #fff;font-size:10pt}button:not(:disabled):hover{border-color:#515151}button:not(:disabled):active{background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #e3e3e3), color-stop(70%, #f9f9f9));background:-webkit-linear-gradient(#e3e3e3 40%,#f9f9f9 70%);background:-moz-linear-gradient(#e3e3e3 40%,#f9f9f9 70%);background:-o-linear-gradient(#e3e3e3 40%,#f9f9f9 70%);background:linear-gradient(#e3e3e3 40%,#f9f9f9 70%)}html,body{height:100%}body{color:#666;font:14px "Open Sans", Arial, sans-serif;background-color:#eee;opacity:1.0 !important;transition:none !important}h1,h2,h3,h4{font-weight:300}h1{font-size:30px}h2,h3,h4{color:#444}h2{font-size:25px}h3{font-size:20px}a{color:#4580c0}a:hover{color:#366597;text-decoration:none}b{font-weight:bold}input:not([type="submit"]),textarea{border:1px solid #d4d4d4}input:not([type="submit"])[disabled],textarea[disabled]{opacity:0.5}header,footer{display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;-moz-align-items:center;-ms-align-items:center;-o-align-items:center;align-items:center;text-shadow:0 1px 0 white}header{margin:15px 0 0 0;-webkit-user-select:none;-moz-user-select:none;-o-user-select:none;-ms-user-select:none;user-select:none}header a{color:currentcolor}header aside{background-color:#FAFAFA;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));background:-webkit-linear-gradient(top, #ffffff,#f2f2f2);background:-moz-linear-gradient(top, #ffffff,#f2f2f2);background:-o-linear-gradient(top, #ffffff,#f2f2f2);background:linear-gradient(top, #ffffff,#f2f2f2);padding:0.75em 1em;box-shadow:1px 1px 4px rgba(0,0,0,0.065);border-top-right-radius:5px;border-bottom-right-radius:5px;border-bottom:1px solid #d4d4d4;border-right:1px solid #d4d4d4;background-color:#FAFAFA;padding:0.75em 1em;background:url(/static/img/chromium-128.png) no-repeat 10px 50%,#fafafa;background-size:25%;padding-left:125px}header aside h1{line-height:1}header aside img{height:45px;width:45px;margin-right:7px}header nav{display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;-moz-align-items:center;-ms-align-items:center;-o-align-items:center;align-items:center;margin-left:3em}header nav a{background-color:#FAFAFA;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));background:-webkit-linear-gradient(top, #ffffff,#f2f2f2);background:-moz-linear-gradient(top, #ffffff,#f2f2f2);background:-o-linear-gradient(top, #ffffff,#f2f2f2);background:linear-gradient(top, #ffffff,#f2f2f2);padding:0.75em 1em;box-shadow:1px 1px 4px rgba(0,0,0,0.065);-webkit-box-flex:1;-webkit-flex:1;-moz-flex:1;-ms-flex:1;-o-flex:1;flex:1;cursor:pointer;margin-right:1em;font-size:16px;text-align:center;border-radius:3px;border-bottom:1px solid #d4d4d4;border-right:1px solid #d4d4d4}header nav a:active{position:relative;top:1px;left:1px;box-shadow:3px 3px 4px rgba(0,0,0,0.065)}header nav a.disabled{opacity:0.5;pointer-events:none}footer{background-color:#FAFAFA;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));background:-webkit-linear-gradient(top, #ffffff,#f2f2f2);background:-moz-linear-gradient(top, #ffffff,#f2f2f2);background:-o-linear-gradient(top, #ffffff,#f2f2f2);background:linear-gradient(top, #ffffff,#f2f2f2);padding:0.75em 1em;box-shadow:1px 1px 4px rgba(0,0,0,0.065);font-size:12px;box-shadow:0 -2px 5px rgba(0,0,0,0.065);display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;-webkit-box-orient:vertical;-webkit-flex-direction:column;-moz-flex-direction:column;-ms-flex-direction:column;-o-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-moz-justify-content:center;-ms-justify-content:center;-o-justify-content:center;justify-content:center;text-align:center;position:relative}footer div{margin-top:5px}chromedash-legend{width:600px;left:-moz-calc(50% - 600px/2);left:-o-calc(50% - 600px/2);left:-webkit-calc(50% - 600px/2);left:calc(50% - 600px/2);top:7%;opacity:0}#subheader{display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;-moz-align-items:center;-ms-align-items:center;-o-align-items:center;align-items:center;margin:20px 20px 0 25px;max-width:905px}#subheader div{margin-right:25px}#subheader div.feature-count{min-width:325px;margin-right:5px}#subheader div.search{margin-right:0}#subheader div.search input{width:200px;outline:none;padding:10px 7px}#subheader div.actionlinks{-webkit-box-flex:1;-webkit-flex:1 0 0;-moz-flex:1 0 0;-ms-flex:1 0 0;-o-flex:1 0 0;flex:1 0 0;text-align:right;margin-right:0}#subheader div.actionlinks a{margin-left:20px}#container{display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;-webkit-box-orient:vertical;-webkit-flex-direction:column;-moz-flex-direction:column;-ms-flex-direction:column;-o-flex-direction:column;flex-direction:column;height:100%;width:100%}#content{display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;-webkit-box-flex:1;-webkit-flex:1 0 0;-moz-flex:1 0 0;-ms-flex:1 0 0;-o-flex:1 0 0;flex:1 0 0;margin:20px;overflow:auto;position:relative}#panels{display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;width:100%;overflow:hidden}#panels nav{font-size:120%;font-weight:300;width:150px;overflow-x:hidden}#panels nav chromedash-metadata{overflow:auto;width:165px}#panels nav chromedash-metadata .help{text-align:center}#panels chromedash-featurelist{-webkit-box-flex:1;-webkit-flex:1 0 0;-moz-flex:1 0 0;-ms-flex:1 0 0;-o-flex:1 0 0;flex:1 0 0;overflow:auto;max-width:760px}@media only screen and (max-width: 700px){h1{font-size:25px}h2{font-size:20px}h3{font-size:15px}#container{display:block}#content{margin:0}header{margin:0;display:block}header aside{padding:0.5em;border-radius:0}header aside hgroup{text-align:right}header aside hgroup span{display:none}header nav{margin:10px 0;-webkit-box-pack:center;-webkit-justify-content:center;-moz-justify-content:center;-ms-justify-content:center;-o-justify-content:center;justify-content:center}header nav a{padding:5px 10px;margin:0;border-radius:0}#panels{display:block}#panels nav{display:none}#subheader{margin:5px}#subheader div:not(.search){display:none}#subheader div.search{text-align:center;-webkit-box-flex:1;-webkit-flex:1 0 0;-moz-flex:1 0 0;-ms-flex:1 0 0;-o-flex:1 0 0;flex:1 0 0;margin:0}chromedash-feature,[is="chromedash-feature"]{box-shadow:none !important;border-radius:0 !important;padding:10px !important;margin:0 !important;-webkit-transition:none !important;-moz-transition:none !important;-o-transition:none !important;transition:none !important}footer{padding:0.35em}} diff --git a/static/sass/_base.scss b/static/sass/_base.scss index 3834f5a645f..c1a790f0153 100644 --- a/static/sass/_base.scss +++ b/static/sass/_base.scss @@ -11,6 +11,10 @@ box-sizing: border-box; } +:focus { + outline: 1px solid $chromium-color-medium; +} + a { text-decoration: none; } diff --git a/static/sass/elements/chromedash-feature.scss b/static/sass/elements/chromedash-feature.scss index b5dee2ec4b6..2d7e94c5b44 100644 --- a/static/sass/elements/chromedash-feature.scss +++ b/static/sass/elements/chromedash-feature.scss @@ -13,14 +13,20 @@ // margin-bottom: 10px; margin-bottom: 1px; position: relative; + //border: 1px solid transparent; border-radius: $default-border-radius; padding: 5px 20px; list-style: none; - outline: none; - } - :scope.open { - height: 290px; - overflow: auto; + + &:active { + outline: none; + } + + &.open { + height: 290px; + overflow: auto; + outline: none; + } } }