.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;
}
.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;
/*======= Toolbar icons =======*/
.close-button {
- background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close");
+ background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg");
+ -moz-context-properties: fill;
+ fill: #808080;
height: 68px;
background-position: center 8px;
}
.close-button:hover {
- background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover");
+ fill: #fff;
background-color: #d94141;
border-bottom: 1px solid #d94141;
border-right: 1px solid #d94141;
}
.close-button:hover:active {
- background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover");
background-color: #AE2325;
border-bottom: 1px solid #AE2325;
border-right: 1px solid #AE2325;
background-image: url("chrome://global/skin/reader/RM-Plus-24x24.svg");
}
+.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");
+}
+
+.line-height-plus-button {
+ background-size: 34px 24px;
+ background-image: url("chrome://global/skin/reader/RM-Line-Height-Plus-38x24.svg");
+}
+
@media print {
.toolbar {
display: none !important;