.header > .credits {
font-size: 0.9em;
line-height: 1.48em;
- margin: 0 0 30px 0;
+ margin: 0 0 10px 0;
padding: 0;
font-style: italic;
}
+.header > .meta-data {
+ font-size: 0.65em;
+ margin: 0 0 15px 0;
+}
+
/*======= Controls toolbar =======*/
.toolbar {
background-color: #fbfbfb;
-moz-user-select: none;
border-right: 1px solid #b5b5b5;
+ z-index: 1;
}
.button {
border-radius: 4px;
border: 1px solid #b5b5b5;
border-bottom-width: 0;
- box-shadow: 0 1px 12px #666;
+ box-shadow: 0 1px 3px #c1c1c1;
}
.keep-open .dropdown-popup {
position: absolute;
top: 30px; /* offset arrow from top of popup */
left: -16px;
- width: 24px;
+ width: 16px;
height: 24px;
background-image: url("chrome://global/skin/reader/RM-Type-Controls-Arrow.svg");
display: block;
#font-type-buttons,
#font-size-buttons,
-#color-scheme-buttons {
+#color-scheme-buttons,
+#content-width-buttons,
+#line-height-buttons {
display: flex;
flex-direction: row;
}
#font-type-buttons > button,
#font-size-buttons > button,
-#color-scheme-buttons > button {
+#color-scheme-buttons > button,
+#content-width-buttons > button,
+#line-height-buttons > button {
text-align: center;
border: 0;
}
#font-type-buttons > button,
-#font-size-buttons > button {
+#font-size-buttons > button,
+#content-width-buttons > button,
+#line-height-buttons > button {
width: 50%;
background-color: transparent;
border-left: 1px solid #B5B5B5;
}
#font-type-buttons > button:first-child,
-#font-size-buttons > button:first-child {
+#font-size-buttons > button:first-child,
+#content-width-buttons > button:first-child,
+#line-height-buttons > button:first-child {
border-left: 0;
}
}
#font-size-buttons > button,
-#color-scheme-buttons > button {
+#color-scheme-buttons > button,
+#content-width-buttons > button,
+#line-height-buttons > button {
height: 60px;
}
}
/* Font sizes are different per-platform, so we need custom CSS to line them up. */
-%ifdef XP_MACOSX
-#font-type-buttons > .sans-serif-button > .name {
- margin-top: 10px;
-}
-
-#font-type-buttons > .sans-serif-button > .description {
- margin-top: -4px;
-}
-
-#font-type-buttons > .serif-button > .name {
- font-size: 63px;
-}
-%elifdef XP_WIN
#font-type-buttons > .sans-serif-button > .name {
margin-top: 2px;
}
#font-type-buttons > .serif-button > .name {
font-size: 63px;
}
-%else
-#font-type-buttons > .sans-serif-button > .name {
- margin-top: 5px;
-}
-
-#font-type-buttons > .sans-serif-button > .description {
- margin-top: -8px;
-}
-
-#font-type-buttons > .serif-button > .name {
- font-size: 70px;
-}
-%endif
.button:hover,
#font-size-buttons > button:hover,
-#font-type-buttons > button:hover {
+#font-type-buttons > button:hover,
+#content-width-buttons > button:hover,
+#line-height-buttons > button:hover {
background-color: #ebebeb;
}
.dropdown.open,
.button:active,
#font-size-buttons > button:active,
-#font-size-buttons > button.selected {
+#font-size-buttons > button.selected,
+#content-width-buttons > button:active,
+#content-width-buttons > button.selected,
+#line-height-buttons > button:active,
+#line-height-buttons > button.selected {
background-color: #dadada;
}
}
.minus-button,
-.plus-button {
+.plus-button,
+.content-width-minus-button,
+.content-width-plus-button,
+.line-height-minus-button,
+.line-height-plus-button {
background-color: transparent;
border: 0;
background-size: 18px 18px;
background-image: url("chrome://global/skin/reader/RM-Plus-24x24.svg");
}
-#pocket-button {
- background-image: url("chrome://global/skin/reader/pocket.svg#pocket-mark");
+.content-width-minus-button {
+ background-size: 42px 16px;
+ background-image: url("chrome://global/skin/reader/RM-Content-Width-Minus-42x16.svg");
+}
+
+.content-width-plus-button {
+ background-size: 44px 16px;
+ background-image: url("chrome://global/skin/reader/RM-Content-Width-Plus-44x16.svg");
+}
+
+.line-height-minus-button {
+ background-size: 34px 14px;
+ background-image: url("chrome://global/skin/reader/RM-Line-Height-Minus-38x14.svg");
}
-#pocket-button:hover:active {
- background-image: url("chrome://global/skin/reader/pocket.svg#pocket-mark-added");
+.line-height-plus-button {
+ background-size: 34px 24px;
+ background-image: url("chrome://global/skin/reader/RM-Line-Height-Plus-38x24.svg");
}
@media print {