michael@0: /* This Source Code Form is subject to the terms of the Mozilla Public
michael@0:  * License, v. 2.0. If a copy of the MPL was not distributed with this
michael@0:  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
michael@0: 
michael@0: %filter substitution
michael@0: %include defines.inc
michael@0: 
michael@0: html {
michael@0:   font-family: "Clear Sans",sans-serif;
michael@0:   font-size: 14px;
michael@0:   background-color: @color_about_background@;
michael@0:   -moz-text-size-adjust: none;
michael@0: }
michael@0: 
michael@0: body {
michael@0:   margin: 0;
michael@0: }
michael@0: 
michael@0: .header {
michael@0:   color: black;
michael@0:   font-size: 1.1em;
michael@0:   font-weight: bold;
michael@0:   border-bottom: 2px solid;
michael@0:   -moz-border-bottom-colors: #ff9100 #f27900;
michael@0:   display: flex;
michael@0:   flex-direction: row;
michael@0:   align-items: center;
michael@0: }
michael@0: 
michael@0: .header > div {
michael@0:   flex: 1;
michael@0:   padding: 1em;
michael@0:   -moz-padding-start: 1.5em;
michael@0: }
michael@0: 
michael@0: #header-button {
michael@0:   background-repeat: no-repeat;
michael@0:   background-position: center center;
michael@0:   background-size: 33px 33px;
michael@0:   flex: 0;
michael@0:   height: 100%;
michael@0: }
michael@0: 
michael@0: .list {
michael@0:   padding: 0px;
michael@0:   margin: 0px;
michael@0:   width: 100%;
michael@0: }
michael@0: 
michael@0: .list-item {
michael@0:   color: black;
michael@0:   background-color: @color_about_item@;
michael@0:   border-bottom: 2px solid;
michael@0:   -moz-border-bottom-colors: #ffffff #bac2ac;
michael@0:   position: relative;
michael@0:   list-style-type: none;
michael@0:   list-style-image: none;
michael@0:   margin: 0px;
michael@0:   padding: 0px;
michael@0: }
michael@0: 
michael@0: .list-item[isDisabled="true"] {
michael@0:   color: #999999;
michael@0: }
michael@0: 
michael@0: .list-item:active,
michael@0: .list-item:active > .inner {
michael@0:   background-image: none;
michael@0: }
michael@0: 
michael@0: .inner {
michael@0:   background-color: @color_about_item_inner@;
michael@0:   padding: 1em;
michael@0: 
michael@0:   /* make room for the favicon */
michael@0:   -moz-margin-start: 4.5em;
michael@0: }
michael@0: 
michael@0: /* Icons */
michael@0: body[dir="ltr"] .icon {
michael@0:   left: 1.35em;
michael@0: }
michael@0: 
michael@0: body[dir="ltr"] .icon {
michael@0:   right: 1.35em;
michael@0: }
michael@0: 
michael@0: .icon {
michael@0:   border: none;
michael@0:   top: 1.35em;
michael@0:   width: 1.8em;
michael@0:   height: 1.8em;
michael@0:   position: absolute;
michael@0:   pointer-events: none;
michael@0: }
michael@0: 
michael@0: .list-item[isDisabled="true"] .favicon {
michael@0:   opacity: 0.3;
michael@0: }
michael@0: 
michael@0: /* Buttons */
michael@0: .buttons {
michael@0:   display: flex;
michael@0:   flex-direction: row;
michael@0:   width: 100%;
michael@0: }
michael@0: 
michael@0: .buttons > button {
michael@0:   -moz-appearance: none;
michael@0:   color: black;
michael@0:   font-size: 1em !important;
michael@0:   border: 1px solid transparent;
michael@0:   border-top-color: #bac2ac;
michael@0:   -moz-border-start-color: #bac2ac;
michael@0:   background-image: none;
michael@0:   background-color: @color_about_item_inner@;
michael@0:   border-radius: 0px !important;
michael@0:   flex: 1;
michael@0:   padding: 0.75em 0.5em;
michael@0: }
michael@0: 
michael@0: .buttons > button[disabled="true"] {
michael@0:   color: #b5b5b5;
michael@0: }
michael@0: 
michael@0: .buttons > button[hidden="true"] {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: .buttons:first-child {
michael@0:   -moz-border-start-color: transparent;
michael@0: }
michael@0: 
michael@0: .row {
michael@0:   display: flex;
michael@0:   width: 100%;
michael@0: }
michael@0: 
michael@0: .title {
michael@0:   font-weight: bold;
michael@0:   overflow: hidden;
michael@0:   flex: 1;
michael@0: }
michael@0: 
michael@0: #browse-title {
michael@0:   margin: 0.5em 0;
michael@0:   background-image: url("chrome://browser/skin/images/chevron.png");
michael@0:   background-size: 8px 20px;
michael@0:   background-position: right;
michael@0:   background-repeat: no-repeat;
michael@0: }