зеркало из https://github.com/mozilla/lightbeam.git
[Issue #252] styling tweaks
This commit is contained in:
Mavis Ou
Родитель
051554f1c7
Коммит
83f1f57705
|
|
@ -2,19 +2,19 @@
|
|||
font-family: 'Open Sans';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: url('font/opensans-italic-webfont.woff') format('woff')
|
||||
src: url('font/OpenSans-LightItalic.ttf') format('truetype')
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: bold;
|
||||
font-weight: 700;
|
||||
src: url('font/opensans-bold-webfont.woff') format('woff')
|
||||
src: url('font/OpenSans-Regular.ttf') format('truetype')
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url('font/opensans-regular-webfont.woff') format('woff')
|
||||
src: url('font/OpenSans-Light.ttf') format('truetype')
|
||||
}
|
||||
|
|
|
|||
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичные данные
data/font/opensans-bold-webfont.woff
Двоичные данные
data/font/opensans-bold-webfont.woff
Двоичный файл не отображается.
Двоичные данные
data/font/opensans-bolditalic-webfont.woff
Двоичные данные
data/font/opensans-bolditalic-webfont.woff
Двоичный файл не отображается.
Двоичные данные
data/font/opensans-italic-webfont.woff
Двоичные данные
data/font/opensans-italic-webfont.woff
Двоичный файл не отображается.
Двоичные данные
data/font/opensans-regular-webfont.woff
Двоичные данные
data/font/opensans-regular-webfont.woff
Двоичный файл не отображается.
|
|
@ -8,9 +8,6 @@
|
|||
<link rel="stylesheet" type="text/css" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header class="mainhead">
|
||||
<h1>Collusion</h1>
|
||||
</header>
|
||||
<div class="main">
|
||||
<aside class="controls">
|
||||
<div class="btn_group visualization">
|
||||
|
|
@ -65,25 +62,22 @@
|
|||
<li class="show-info-button"><a>Toggle Info Panel</a></li>
|
||||
</ul>
|
||||
<div class="square-button-controls">
|
||||
<div>
|
||||
<div class="square-button">
|
||||
<a class="help-mode"><img src="image/collusion_icon_help.png" /></a>
|
||||
</div>
|
||||
<div class="square-button">
|
||||
<a class="help-mode"><img src="image/collusion_icon_help.png" /></a>
|
||||
<div class="button-label">HELP</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="square-button">
|
||||
<a class="settings"><img src="image/collusion_icon_settings.png" /></a>
|
||||
</div>
|
||||
<div class="square-button">
|
||||
<a class="settings"><img src="image/collusion_icon_settings.png" /></a>
|
||||
<div class="button-label">SETTINGS</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="square-button">
|
||||
<a><img src="image/collusion_icon_about.png" /></a>
|
||||
</div>
|
||||
<div class="square-button">
|
||||
<a class="about"><img src="image/collusion_icon_about.png" /></a>
|
||||
<div class="button-label">ABOUT</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collusion-url">
|
||||
www.mozilla.org/collusion
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div id="content" class="">
|
||||
|
|
|
|||
109
data/style.css
109
data/style.css
|
|
@ -9,12 +9,18 @@
|
|||
dropdown buttons: #363636
|
||||
sidebar "link" buttons: #939393
|
||||
*/
|
||||
|
||||
|
||||
/* New colour scheme:
|
||||
sidebar, info panel
|
||||
background:#404850
|
||||
*/
|
||||
|
||||
html, body{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
background-color: #2E2B2B;
|
||||
background-color: #000;
|
||||
color: #EAEAEA;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -34,44 +40,33 @@ h3 {
|
|||
|
||||
.main{
|
||||
position: relative;
|
||||
height: calc(100% - 80px);
|
||||
}
|
||||
|
||||
.mainhead{
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
background: #333131;
|
||||
}
|
||||
|
||||
.mainhead h1{
|
||||
margin-left: 30px;
|
||||
font-size: 20px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.controls{
|
||||
width: 200px;
|
||||
padding: 15px 30px;
|
||||
float: left;
|
||||
border-top: 1px solid #555555;
|
||||
border-right: 1px solid #555555;
|
||||
z-index: 5;
|
||||
height: 100%;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
background: #404850;
|
||||
}
|
||||
|
||||
/*.controls i:not(.icon-sort-down){
|
||||
margin-right: 5px;
|
||||
font-size: 14px;
|
||||
vertical-align: middle;
|
||||
}*/
|
||||
|
||||
.hidden{
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Button Styling =============== */
|
||||
|
||||
.btn a:hover,
|
||||
.square-button a:hover{
|
||||
background: #475B61;
|
||||
}
|
||||
|
||||
.btn_group,
|
||||
.btn{
|
||||
width: 100%;
|
||||
|
|
@ -80,6 +75,7 @@ h3 {
|
|||
background: #25292D;
|
||||
font-size: 7pt;
|
||||
letter-spacing: 1px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.btn_group .dropdown_button{
|
||||
|
|
@ -96,7 +92,6 @@ h3 {
|
|||
|
||||
.btn_group .arrow{
|
||||
float: right;
|
||||
/*border-left: 1px solid #555555;*/
|
||||
padding: 0 10px;
|
||||
background: #12181B;
|
||||
border-radius: 0 5px 0 0;
|
||||
|
|
@ -108,7 +103,7 @@ h3 {
|
|||
}
|
||||
|
||||
.btn a,
|
||||
.square-button{
|
||||
.square-button a{
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -122,24 +117,25 @@ h3 {
|
|||
line-height: 28px;
|
||||
}
|
||||
|
||||
.btn_group div.dropdown_options.expanded a:hover{
|
||||
.btn_group .dropdown_options.expanded a:hover{
|
||||
cursor: pointer;
|
||||
background: #475B61;
|
||||
}
|
||||
|
||||
.btn_group div.dropdown_options a[data-selected]{
|
||||
.btn_group .dropdown_options a[data-selected]{
|
||||
border-radius: 0 0 5px 5px;
|
||||
background: #5F6771;
|
||||
}
|
||||
|
||||
.btn_group div.dropdown_options.expanded a{
|
||||
.btn_group .dropdown_options.expanded a{
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.btn_group div.dropdown_options.expanded a:last-child{
|
||||
.btn_group .dropdown_options.expanded a:last-child{
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
|
||||
.btn_group div.dropdown_options a.collapsed{
|
||||
.btn_group .dropdown_options a.collapsed{
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -169,51 +165,60 @@ h3 {
|
|||
}
|
||||
|
||||
.controls .square-button-controls{
|
||||
position: fixed;
|
||||
bottom: 70px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.controls .collusion-url{
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
margin-bottom: 50px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.controls .square-button-controls div{
|
||||
.square-button{
|
||||
float: left;
|
||||
text-align: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.controls .square-button-controls div:not(:last-child){
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.controls .square-button{
|
||||
background: #25292D;
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.controls .square-button.active{
|
||||
.square-button:not(:last-child){
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.square-button a{
|
||||
display: block;
|
||||
background: #25292D;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
padding: 5px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.square-button.active{
|
||||
background: #5F6771;
|
||||
}
|
||||
|
||||
.controls .square-button img{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
.square-button img{
|
||||
position: relative;
|
||||
top: 2px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.controls .square-button-controls .button-label{
|
||||
.square-button .button-label{
|
||||
font-size: 7pt;
|
||||
/*color: #2D3337;*/
|
||||
color: white;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
margin-top: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
#content{
|
||||
position: relative;
|
||||
margin-left: 200px;
|
||||
z-index: 0;
|
||||
height: 100%;
|
||||
border-top: 1px solid #555555;
|
||||
}
|
||||
|
||||
#content span,
|
||||
|
|
@ -229,6 +234,7 @@ h3 {
|
|||
transition: width 0.5s ease;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
background: #404850;
|
||||
}
|
||||
|
||||
.map-section{
|
||||
|
|
@ -283,7 +289,6 @@ h3 {
|
|||
|
||||
.showinfo .info{
|
||||
width: 300px;
|
||||
border-left: 1px solid #555555;
|
||||
}
|
||||
|
||||
.info .blue-text {
|
||||
|
|
|
|||
|
|
@ -13,6 +13,8 @@ var btnSelectCallback = function(e,btnGroup,callback){
|
|||
var targetValue = e.target.getAttribute("data-value");
|
||||
var otherOptions = btnGroup.querySelectorAll(".dropdown_options a:not([data-selected])");
|
||||
btnGroup.querySelector(".dropdown_options").classList.remove("expanded");
|
||||
btnGroup.querySelector(".arrow").querySelector(".icon-sort-down").classList.remove("hidden");
|
||||
btnGroup.querySelector(".arrow").querySelector(".icon-sort-up").classList.add("hidden");
|
||||
toArray(otherOptions).forEach(function(option){
|
||||
option.classList.add("collapsed");
|
||||
});
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче