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 file,
michael@0:  * You can obtain one at http://mozilla.org/MPL/2.0/. */
michael@0: 
michael@0: html {
michael@0:   -moz-text-size-adjust: none;
michael@0: }
michael@0: 
michael@0: body {
michael@0:   padding: 20px;
michael@0:   transition-property: background-color, color;
michael@0:   transition-duration: 0.4s;
michael@0:   max-width: 35em;
michael@0:   margin-left: auto;
michael@0:   margin-right: auto;
michael@0: }
michael@0: 
michael@0: .light {
michael@0:   background-color: #ffffff;
michael@0:   color: #222222;
michael@0: }
michael@0: 
michael@0: .dark {
michael@0:   background-color: #000000;
michael@0:   color: #eeeeee;
michael@0: }
michael@0: 
michael@0: .sans-serif {
michael@0:   font-family: sans-serif;
michael@0: }
michael@0: 
michael@0: .serif {
michael@0:   font-family: serif;
michael@0: }
michael@0: 
michael@0: .message {
michael@0:   margin-top: 40px;
michael@0:   display: none;
michael@0:   text-align: center;
michael@0:   width: 100%;
michael@0:   font-size: 16px;
michael@0: }
michael@0: 
michael@0: .header {
michael@0:   text-align: start;
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: .domain,
michael@0: .credits {
michael@0:   font-family: sans-serif;
michael@0: }
michael@0: 
michael@0: .domain {
michael@0:   margin-top: 10px;
michael@0:   padding-bottom: 10px;
michael@0:   color: #00acff !important;
michael@0:   text-decoration: none;
michael@0: }
michael@0: 
michael@0: .domain-border {
michael@0:   margin-top: 15px;
michael@0:   border-bottom: 1.5px solid #777777;
michael@0:   width: 50%;
michael@0: }
michael@0: 
michael@0: .header > h1 {
michael@0:   font-size: 2.625em;
michael@0:   font-weight: 700;
michael@0:   line-height: 1.1em;
michael@0:   width: 100%;
michael@0:   margin: 0px;
michael@0:   margin-top: 32px;
michael@0:   margin-bottom: 16px;
michael@0:   padding: 0px;
michael@0: }
michael@0: 
michael@0: .header > .credits {
michael@0:   padding: 0px;
michael@0:   margin: 0px;
michael@0:   margin-bottom: 32px;
michael@0: }
michael@0: 
michael@0: .light > .header > .domain {
michael@0:   color: #ee7600;
michael@0:   border-bottom-color: #d0d0d0; 
michael@0: }
michael@0: 
michael@0: .light > .header > h1 {
michael@0:   color: #222222;
michael@0: }
michael@0: 
michael@0: .light > .header > .credits {
michael@0:   color: #898989;
michael@0: }
michael@0: 
michael@0: .dark > .header > .domain {
michael@0:   color: #ff9400;
michael@0:   border-bottom-color: #777777; 
michael@0: }
michael@0: 
michael@0: .dark > .header > h1 {
michael@0:   color: #eeeeee;
michael@0: }
michael@0: 
michael@0: .dark > .header > .credits {
michael@0:   color: #aaaaaa;
michael@0: }
michael@0: 
michael@0: .font-size1 > .header > h1 {
michael@0:   font-size: 27px;
michael@0: }
michael@0: 
michael@0: .font-size2 > .header > h1 {
michael@0:   font-size: 29px;
michael@0: }
michael@0: 
michael@0: .font-size3 > .header > h1 {
michael@0:   font-size: 31px;
michael@0: }
michael@0: 
michael@0: .font-size4 > .header > h1 {
michael@0:   font-size: 33px;
michael@0: }
michael@0: 
michael@0: .font-size5 > .header > h1 {
michael@0:   font-size: 35px;
michael@0: }
michael@0: 
michael@0: /* This covers caption, domain, and credits
michael@0:    texts in the reader UI */
michael@0: 
michael@0: .font-size1 > .content .wp-caption-text,
michael@0: .font-size1 > .content figcaption,
michael@0: .font-size1 > .header > .domain,
michael@0: .font-size1 > .header > .credits {
michael@0:   font-size: 10px;
michael@0: }
michael@0: 
michael@0: .font-size2 > .content .wp-caption-text,
michael@0: .font-size2 > .content figcaption,
michael@0: .font-size2 > .header > .domain,
michael@0: .font-size2 > .header > .credits {
michael@0:   font-size: 13px;
michael@0: }
michael@0: 
michael@0: .font-size3 > .content .wp-caption-text,
michael@0: .font-size3 > .content figcaption,
michael@0: .font-size3 > .header > .domain,
michael@0: .font-size3 > .header > .credits {
michael@0:   font-size: 15px;
michael@0: }
michael@0: 
michael@0: .font-size4 > .content .wp-caption-text,
michael@0: .font-size4 > .content figcaption,
michael@0: .font-size4 > .header > .domain,
michael@0: .font-size4 > .header > .credits {
michael@0:   font-size: 17px;
michael@0: }
michael@0: 
michael@0: .font-size5 > .content .wp-caption-text,
michael@0: .font-size5 > .content figcaption,
michael@0: .font-size5 > .header > .domain,
michael@0: .font-size5 > .header > .credits {
michael@0:   font-size: 19px;
michael@0: }
michael@0: 
michael@0: .content {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: .content a {
michael@0:   text-decoration: underline !important;
michael@0:   font-weight: normal;
michael@0: }
michael@0: 
michael@0: .light > .content a,
michael@0: .light > .content a:visited,
michael@0: .light > .content a:hover,
michael@0: .light > .content a:active {
michael@0:   color: #00acff !important;
michael@0: }
michael@0: 
michael@0: .dark > .content a,
michael@0: .dark > .content a:visited,
michael@0: .dark > .content a:hover,
michael@0: .dark > .content a:active {
michael@0:   color: #00acff !important;
michael@0: }
michael@0: 
michael@0: .content * {
michael@0:   max-width: 100% !important;
michael@0:   height: auto !important;
michael@0: }
michael@0: 
michael@0: .content p {
michael@0:   line-height: 1.4em !important;
michael@0:   margin: 0px !important;
michael@0:   margin-bottom: 20px !important;
michael@0: }
michael@0: 
michael@0: /* Covers all images showing edge-to-edge using a 
michael@0:    an optional caption text */
michael@0: .content .wp-caption,
michael@0: .content figure {
michael@0:   display: block !important;
michael@0:   width: 100% !important;
michael@0:   margin: 0px !important;
michael@0:   margin-bottom: 32px !important;
michael@0: }
michael@0: 
michael@0: /* Images marked to be shown edge-to-edge with an
michael@0:    optional captio ntext */
michael@0: .content p > img:only-child,
michael@0: .content p > a:only-child > img:only-child,
michael@0: .content .wp-caption img,
michael@0: .content figure img {
michael@0:   max-width: none !important;
michael@0:   height: auto !important;
michael@0:   display: block !important;
michael@0:   margin-top: 0px !important;
michael@0:   margin-bottom: 32px !important;
michael@0: }
michael@0: 
michael@0: /* If image is place inside one of these blocks
michael@0:    there's no need to add margin at the bottom */
michael@0: .content .wp-caption img,
michael@0: .content figure img {
michael@0:   margin-bottom: 0px !important;
michael@0: }
michael@0: 
michael@0: /* Image caption text */
michael@0: .content .caption,
michael@0: .content .wp-caption-text,
michael@0: .content figcaption {
michael@0:   font-family: sans-serif;
michael@0:   margin: 0px !important;
michael@0:   padding-top: 4px !important;
michael@0: }
michael@0: 
michael@0: .light > .content .caption,
michael@0: .light > .content .wp-caption-text,
michael@0: .light > .content figcaption {
michael@0:   color: #898989;
michael@0: }
michael@0: 
michael@0: .dark > .content .caption,
michael@0: .dark > .content .wp-caption-text,
michael@0: .dark > .content figcaption {
michael@0:   color: #aaaaaa;
michael@0: }
michael@0: 
michael@0: /* Ensure all pre-formatted code inside the reader content
michael@0:    are properly wrapped inside content width */
michael@0: .content code,
michael@0: .content pre {
michael@0:   white-space: pre-wrap !important;
michael@0:   margin-bottom: 20px !important;
michael@0: }
michael@0: 
michael@0: .content blockquote {
michael@0:   margin: 0px !important;
michael@0:   margin-bottom: 20px !important;
michael@0:   padding: 0px !important;
michael@0:   -moz-padding-start: 16px !important;
michael@0:   border: 0px !important;
michael@0:   border-left: 2px solid !important;
michael@0: }
michael@0: 
michael@0: .light > .content blockquote {
michael@0:   color: #898989 !important;
michael@0:   border-left-color: #d0d0d0 !important;
michael@0: }
michael@0: 
michael@0: .dark > .content blockquote {
michael@0:   color: #aaaaaa !important;
michael@0:   border-left-color: #777777 !important;
michael@0: }
michael@0: 
michael@0: .content ul,
michael@0: .content ol {
michael@0:   margin: 0px !important;
michael@0:   margin-bottom: 20px !important;
michael@0:   padding: 0px !important;
michael@0:   line-height: 1.5em;
michael@0: }
michael@0: 
michael@0: .content ul {
michael@0:   -moz-padding-start: 30px !important;
michael@0:   list-style: disk !important;
michael@0: }
michael@0: 
michael@0: .content ol {
michael@0:   -moz-padding-start: 35px !important;
michael@0:   list-style: decimal !important;
michael@0: }
michael@0: 
michael@0: .font-size1-sample,
michael@0: .font-size1 > .content {
michael@0:   font-size: 14px !important;
michael@0: }
michael@0: 
michael@0: .font-size2-sample,
michael@0: .font-size2 > .content {
michael@0:   font-size: 16px !important;
michael@0: }
michael@0: 
michael@0: .font-size3-sample,
michael@0: .font-size3 > .content {
michael@0:   font-size: 18px !important;
michael@0: }
michael@0: 
michael@0: .font-size4-sample,
michael@0: .font-size4 > .content {
michael@0:   font-size: 20px !important;
michael@0: }
michael@0: 
michael@0: .font-size5-sample,
michael@0: .font-size5 > .content {
michael@0:   font-size: 22px !important;
michael@0: }
michael@0: 
michael@0: .toolbar {
michael@0:   font-family: "Clear Sans",sans-serif;
michael@0:   transition-property: visibility, opacity;
michael@0:   transition-duration: 0.7s;
michael@0:   visibility: visible;
michael@0:   opacity: 1.0;
michael@0:   position: fixed;
michael@0:   width: 100%;
michael@0:   bottom: 0px;
michael@0:   left: 0px;
michael@0:   margin: 0;
michael@0:   padding: 0;
michael@0:   list-style: none;
michael@0:   background-color: #ced7de;
michael@0:   -moz-user-select: none;
michael@0: }
michael@0: 
michael@0: .toolbar-hidden {
michael@0:   transition-property: visibility, opacity;
michael@0:   transition-duration: 0.7s;
michael@0:   visibility: hidden;
michael@0:   opacity: 0.0;
michael@0: }
michael@0: 
michael@0: .toolbar > * {
michael@0:   float: right;
michael@0:   width: 33%;
michael@0: }
michael@0: 
michael@0: .button {
michael@0:   color: white;
michael@0:   display: block;
michael@0:   background-position: center;
michael@0:   background-size: 30px 24px;
michael@0:   background-repeat: no-repeat;
michael@0: }
michael@0: 
michael@0: .dropdown {
michael@0:   text-align: center;
michael@0:   display: inline-block;
michael@0:   list-style: none;
michael@0:   margin: 0px;
michael@0:   padding: 0px;
michael@0: }
michael@0: 
michael@0: .dropdown li {
michael@0:   margin: 0px;
michael@0:   padding: 0px;
michael@0: }
michael@0: 
michael@0: .dropdown-toggle {
michael@0:   margin: 0px;
michael@0:   padding: 0px;
michael@0: }
michael@0: 
michael@0: .dropdown-popup {
michael@0:   text-align: start;
michael@0:   position: absolute;
michael@0:   left: 0px;
michael@0:   z-index: 1000;
michael@0:   float: left;
michael@0:   background: #dde2e7;
michael@0:   margin-top: 12px;
michael@0:   margin-bottom: 10px;
michael@0:   padding-top: 4px;
michael@0:   padding-bottom: 8px;
michael@0:   font-size: 14px;
michael@0:   box-shadow: 0px -1px 12px #333;
michael@0:   border-radius: 3px;
michael@0:   visibility: hidden;
michael@0: }
michael@0: 
michael@0: .dropdown-popup > hr {
michael@0:   width: 100%;
michael@0:   height: 0px;
michael@0:   border: 0px;
michael@0:   border-top: 1px solid #C5D0DA;
michael@0:   margin: 0;
michael@0: }
michael@0: 
michael@0: .open > .dropdown-popup {
michael@0:   margin-top: 0px;
michael@0:   margin-bottom: 6px;
michael@0:   bottom: 100%;
michael@0:   visibility: visible;
michael@0: }
michael@0: 
michael@0: .dropdown-arrow {
michael@0:   position: absolute;
michael@0:   width: 40px;
michael@0:   height: 18px;
michael@0:   bottom: -18px;
michael@0:   background-image: url('chrome://browser/skin/images/reader-dropdown-arrow-mdpi.png');
michael@0:   background-size: 40px 18px;
michael@0:   background-position: center;
michael@0:   display: block;
michael@0: }
michael@0: 
michael@0: #font-type-buttons,
michael@0: .segmented-button {
michael@0:   display: flex;
michael@0:   flex-direction: row;
michael@0:   list-style: none;
michael@0:   padding: 10px 5px;
michael@0:   white-space: nowrap;
michael@0: }
michael@0: 
michael@0: #font-type-buttons > li,
michael@0: .segmented-button > li {
michael@0:   width: 50px; /* combined with flex, this acts as a minimum width */
michael@0:   flex: 1 0 auto;
michael@0:   text-align: center;
michael@0:   line-height: 20px;
michael@0: }
michael@0: 
michael@0: #font-type-buttons > li {
michael@0:   padding: 10px 0;
michael@0: }
michael@0: 
michael@0: .segmented-button > li {
michael@0:   border-left: 1px solid #C5D0DA;
michael@0: }
michael@0: 
michael@0: .segmented-button > li:first-child {
michael@0:   border-left: 0px;
michael@0: }
michael@0: 
michael@0: #font-type-buttons > li > a,
michael@0: .segmented-button > li > a {
michael@0:   vertical-align: middle;
michael@0:   text-decoration: none;
michael@0:   color: black;
michael@0: }
michael@0: 
michael@0: #font-type-buttons > li > a {
michael@0:   display: inline-block;
michael@0:   font-size: 48px;
michael@0:   line-height: 50px;
michael@0:   margin-bottom: 5px;
michael@0:   border-bottom: 3px solid transparent;
michael@0: }
michael@0: 
michael@0: .segmented-button > li > a {
michael@0:   display: block;
michael@0:   padding: 5px 0;
michael@0:   font-family: "Clear Sans",sans-serif;
michael@0:   font-weight: lighter;
michael@0: }
michael@0: 
michael@0: #font-type-buttons > li > a:active,
michael@0: #font-type-buttons > li.selected > a {
michael@0:   border-color: #ff9400;
michael@0: }
michael@0: 
michael@0: .segmented-button > li > a:active,
michael@0: .segmented-button > li.selected > a {
michael@0:   font-weight: bold;
michael@0: }
michael@0: 
michael@0: #font-type-buttons > li > .sans-serif {
michael@0:   font-weight: lighter;
michael@0: }
michael@0: 
michael@0: #font-type-buttons > li > div {
michael@0:   color: #666;
michael@0:   font-size: 12px;
michael@0: }
michael@0: 
michael@0: .toggle-button.on {
michael@0:   background-image: url('chrome://browser/skin/images/reader-toggle-on-icon-mdpi.png');
michael@0: }
michael@0: 
michael@0: .toggle-button {
michael@0:   background-image: url('chrome://browser/skin/images/reader-toggle-off-icon-mdpi.png');
michael@0: }
michael@0: 
michael@0: .share-button {
michael@0:   background-image: url('chrome://browser/skin/images/reader-share-icon-mdpi.png');
michael@0: }
michael@0: 
michael@0: .style-button {
michael@0:   background-image: url('chrome://browser/skin/images/reader-style-icon-mdpi.png');
michael@0: }
michael@0: 
michael@0: @media screen and (min-resolution: 1.25dppx) {
michael@0:   .dropdown-arrow {
michael@0:     background-image: url('chrome://browser/skin/images/reader-dropdown-arrow-hdpi.png');
michael@0:   }
michael@0: 
michael@0:   .step-control > .plus-button {
michael@0:     background-image: url('chrome://browser/skin/images/reader-plus-icon-hdpi.png');
michael@0:   }
michael@0: 
michael@0:   .step-control > .minus-button {
michael@0:     background-image: url('chrome://browser/skin/images/reader-minus-icon-hdpi.png');
michael@0:   }
michael@0: 
michael@0:   .toggle-button.on {
michael@0:     background-image: url('chrome://browser/skin/images/reader-toggle-on-icon-hdpi.png');
michael@0:   }
michael@0: 
michael@0:   .toggle-button {
michael@0:     background-image: url('chrome://browser/skin/images/reader-toggle-off-icon-hdpi.png');
michael@0:   }
michael@0: 
michael@0:   .share-button {
michael@0:     background-image: url('chrome://browser/skin/images/reader-share-icon-hdpi.png');
michael@0:   }
michael@0: 
michael@0:   .style-button {
michael@0:     background-image: url('chrome://browser/skin/images/reader-style-icon-hdpi.png');
michael@0:   }
michael@0: }
michael@0: 
michael@0: @media screen and (min-resolution: 2dppx) {
michael@0:   .dropdown-arrow {
michael@0:     background-image: url('chrome://browser/skin/images/reader-dropdown-arrow-xhdpi.png');
michael@0:   }
michael@0: 
michael@0:   .step-control > .plus-button {
michael@0:     background-image: url('chrome://browser/skin/images/reader-plus-icon-xhdpi.png');
michael@0:   }
michael@0: 
michael@0:   .step-control > .minus-button {
michael@0:     background-image: url('chrome://browser/skin/images/reader-minus-icon-xhdpi.png');
michael@0:   }
michael@0: 
michael@0:   .toggle-button.on {
michael@0:     background-image: url('chrome://browser/skin/images/reader-toggle-on-icon-xhdpi.png');
michael@0:   }
michael@0: 
michael@0:   .toggle-button {
michael@0:     background-image: url('chrome://browser/skin/images/reader-toggle-off-icon-xhdpi.png');
michael@0:   }
michael@0: 
michael@0:   .share-button {
michael@0:     background-image: url('chrome://browser/skin/images/reader-share-icon-xhdpi.png');
michael@0:   }
michael@0: 
michael@0:   .style-button {
michael@0:     background-image: url('chrome://browser/skin/images/reader-style-icon-xhdpi.png');
michael@0:   }
michael@0: }
michael@0: 
michael@0: @media screen and (orientation: portrait) {
michael@0:   .button {
michael@0:     height: 48px;
michael@0:   }
michael@0: }
michael@0: 
michael@0: @media screen and (orientation: landscape) {
michael@0:   .button {
michael@0:     height: 40px;
michael@0:   }
michael@0: }
michael@0: 
michael@0: @media screen and (min-width: 960px) {
michael@0:   .button {
michael@0:     width: 56px;
michael@0:     height: 56px;
michael@0:   }
michael@0: 
michael@0:   .toolbar > * {
michael@0:     width: 56px;
michael@0:   }
michael@0: }