From 21c0144b2194f018832e93a3b6e112d3bd4852cb Mon Sep 17 00:00:00 2001 From: Robert Kaiser Date: Sun, 29 Mar 2015 20:18:48 +0200 Subject: [PATCH] sync both themes with toolkit windows theme changes in Mozilla 37 cycle --- EarlyBlue/global/aboutReader.css | 463 +++++++++++++++++++++++++ EarlyBlue/global/in-content/common.css | 152 ++++++-- EarlyBlue/global/notification.css | 11 +- LCARStrek/global/aboutReader.css | 463 +++++++++++++++++++++++++ LCARStrek/global/in-content/common.css | 154 ++++++-- LCARStrek/global/notification.css | 11 +- 6 files changed, 1206 insertions(+), 48 deletions(-) create mode 100644 EarlyBlue/global/aboutReader.css create mode 100644 LCARStrek/global/aboutReader.css diff --git a/EarlyBlue/global/aboutReader.css b/EarlyBlue/global/aboutReader.css new file mode 100644 index 00000000..27393b2e --- /dev/null +++ b/EarlyBlue/global/aboutReader.css @@ -0,0 +1,463 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ + +body { + padding: 64px 0; + max-width: 660px; + margin-left: auto; + margin-right: auto; +} + +.light, +.light-button { + color: #333333; + background-color: #ffffff; +} + +.dark, +.dark-button { + color: #eeeeee; + background-color: #333333; +} + +.sepia, +.sepia-button { + color: #333333; + background-color: #f0ece7; +} + +.sans-serif { + font-family: "Fira Sans", Helvetica, Arial, sans-serif; +} + +.serif { + font-family: "Charis SIL", Georgia, "Times New Roman", serif; +} + +.font-size1 { + font-size: 10px; +} + +.font-size2 { + font-size: 12px; +} + +.font-size3 { + font-size: 14px; +} + +.font-size4 { + font-size: 16px; +} + +.font-size5 { + font-size: 18px; +} + +.font-size6 { + font-size: 20px; +} + +.font-size7 { + font-size: 22px; +} + +.font-size8 { + font-size: 24px; +} + +.font-size9 { + font-size: 26px; +} + + +/* Loading/error message */ + +.message { + margin-top: 40px; + display: none; + text-align: center; + width: 100%; + font-size: 0.9rem; +} + +/* Header */ + +.header { + text-align: start; + display: none; +} + +.domain { + font-size: 0.9rem; + line-height: 1.33rem; + padding-bottom: 4px; + font-family: "Fira Sans", Helvetica, Arial, sans-serif; + text-decoration: none; + border-bottom: 1px solid; + color: #0095dd; +} + +.light > .container > .header > .domain, +.sepia > .container > .header > .domain { + border-bottom-color: #333333; +} + +.dark > .container > .header > .domain { + border-bottom-color: #eeeeee; +} + +.header > h1 { + font-size: 1.33rem; + line-height: 1.66rem; + width: 100%; + margin: 30px 0; + padding: 0; +} + +.header > .credits { + font-size: 0.9rem; + line-height: 1.33rem; + margin: 0 0 30px 0; + padding: 0; + font-style: italic; +} + +/* Content */ + +.content { + display: none; + font-size: 1rem; + line-height: 1.44rem; +} + +.content h1, +.content h2, +.content h3 { + font-weight: bold; +} + +.content h1 { + font-size: 1.33rem; + line-height: 1.66rem; +} + +.content h2 { + font-size: 1.1rem; + line-height: 1.66rem; +} + +.content h3 { + font-size: 1rem; + line-height: 1.66rem; +} + +.content a { + text-decoration: underline; + font-weight: normal; +} + +.content a, +.content a:visited, +.content a:hover, +.content a:active { + color: #0095dd; +} + +.content * { + max-width: 100%; + height: auto; +} + +.content p, +.content img, +.content code, +.content pre, +.content blockquote, +.content ul, +.content ol, +.content li { + margin: 0 0 30px 0; +} + +.content .wp-caption, +.content figure { + margin: 0 30px 30px 30px; +} + +.content .caption, +.content .wp-caption-text, +.content figcaption { + font-size: 0.9rem; + line-height: 1.33rem; + font-style: italic; +} + +.content code, +.content pre { + white-space: pre-wrap; +} + +.content blockquote { + padding: 0; + -moz-padding-start: 16px; +} + +.light > .container > .content blockquote, +.sepia > .container > .content blockquote { + -moz-border-start: 2px solid #333333; +} + +.dark > .container > .content blockquote { + -moz-border-start: 2px solid #eeeeee; +} + +.content ul, +.content ol { + padding: 0; +} + +.content ul { + -moz-padding-start: 30px; + list-style: disk; +} + +.content ol { + -moz-padding-start: 30px; + list-style: decimal; +} + +/*======= Controls toolbar =======*/ + +.toolbar { + font-family: "Fira Sans", Helvetica, Arial, sans-serif; + position: fixed; + height: 100%; + top: 0px; + left: 0px; + margin: 0; + padding: 0; + list-style: none; + background-color: #FBFBFB; + -moz-user-select: none; + border-right: 1px solid #B5B5B5; +} + +.button { + color: white; + display: block; + background-position: center; + background-size: 24px 24px; + background-repeat: no-repeat; + background-color: transparent; + height: 40px; + width: 40px; + border-top: 0; + border-left: 0; + border-right: 0; + border-bottom: 1px solid #c1c1c1; + padding: 0; +} + +.button[hidden] { + display: none; +} + +.dropdown { + text-align: center; + list-style: none; + margin: 0px; + padding: 0px; +} + +.dropdown li { + margin: 0px; + padding: 0px; +} + +/*======= Font style popup =======*/ + +.dropdown-popup { + min-width: 250px; + text-align: start; + position: absolute; + left: 48px; /* offset to account for toolbar width */ + z-index: 1000; + background-color: #FBFBFB; + visibility: hidden; + border-radius: 4px; + border: 1px 1px 0 1px solid #B5B5B5; + box-shadow: 0px 1px 12px #666; +} + +.dropdown-popup > hr { + width: 100%; + height: 0px; + border: 0px; + border-top: 1px solid #B5B5B5; + margin: 0; +} + +.open > .dropdown-popup { + visibility: visible; +} + +.dropdown-arrow { + position: absolute; + top: 30px; /* offset arrow from top of popup */ + left: -16px; + width: 24px; + 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 { + display: flex; + flex-direction: row; +} + +#font-type-buttons > button:first-child { + border-top-left-radius: 3px; +} +#font-type-buttons > button:last-child { + border-top-right-radius: 3px; +} +#color-scheme-buttons > button:first-child { + border-bottom-left-radius: 3px; +} +#color-scheme-buttons > button:last-child { + border-bottom-right-radius: 3px; +} + +#font-type-buttons > button, +#font-size-buttons > button, +#color-scheme-buttons > button { + text-align: center; + border-left: 1px solid #B5B5B5; + border-right: 0; + border-top: 0; + border-bottom: 0; + padding: 10px; +} + +#font-type-buttons > button, +#font-size-buttons > button { + width: 50%; + background-color: transparent; +} + +#color-scheme-buttons > button { + width: 33.33%; + font-size: 14px; +} + +#font-type-buttons > button:first-child, +#font-size-buttons > button:first-child, +#color-scheme-buttons > button:first-child { + border-left: 0px; +} + +#font-type-buttons > button { + display: inline-block; + font-size: 48px; +} + +#font-type-buttons > button:active:hover, +#font-type-buttons > button.selected, +#color-scheme-buttons > button:active:hover, +#color-scheme-buttons > button.selected { + box-shadow: inset 0 -3px 0 0 #FC6420; +} + +#font-type-buttons > button > div { + color: #666; + font-size: 12px; +} + +.button:hover, +#font-size-buttons > button:hover, +#font-type-buttons > button:hover { + background-color: #EBEBEB; +} + +.dropdown.open, +.button:active, +#font-size-buttons > button:active, +#font-size-buttons > button.selected { + background-color: #DADADA; +} + +/* Only used on Android */ +#font-size-sample { + display: none; +} + +.serif-button { + font-family: "Charis SIL", Georgia, "Times New Roman", serif; +} + +.minus-button, +.plus-button { + background-color: transparent; + border: 0; + height: 50px; + background-size: 18px 18px; + background-repeat: no-repeat; + background-position: center; +} + +/*======= Toolbar icons =======*/ + +/* Android-only controls */ +.share-button { + display: none; +} + +.close-button { + background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg"); + height: 68px; + background-position: center 8px; +} + +.close-button:active, +.close-button:hover { + background-image: url("chrome://global/skin/reader/RM-Close-hover-24x24.svg"); + background-color: #d94141; +} + +.style-button { + background-image: url("chrome://global/skin/reader/RM-Type-Controls-24x24.svg"); +} + +.toggle-button.on { + background-image: url("chrome://global/skin/reader/RM-Delete-24x24.svg"); +} + +.toggle-button { + background-image: url("chrome://global/skin/reader/RM-Add-24x24.svg"); +} + +.list-button { + background-image: url("chrome://global/skin/reader/RM-Reading-List-24x24.svg"); +} +.list-button.on { + background-color: #d9d9d9; +} + +.minus-button { + background-image: url("chrome://global/skin/reader/RM-Minus-24x24.svg"); +} + +.plus-button { + background-image: url("chrome://global/skin/reader/RM-Plus-24x24.svg"); +} + +@media print { + .toolbar { + display: none; + } +} diff --git a/EarlyBlue/global/in-content/common.css b/EarlyBlue/global/in-content/common.css index 3ba0b39d..b3777733 100644 --- a/EarlyBlue/global/in-content/common.css +++ b/EarlyBlue/global/in-content/common.css @@ -37,8 +37,15 @@ xul|caption > xul|label { margin-bottom: 0; } +xul|description { + -moz-margin-start: 0; +} + *|*.main-content { - padding: 40px 48px 48px; + padding-top: 40px; + -moz-padding-end: 48px; /* orig is 44px to compensate the 4px margin of child elements */ + padding-bottom: 48px; + -moz-padding-start: 48px; overflow: auto; } @@ -166,6 +173,22 @@ xul|menulist[disabled="true"] { color: #999999; } /* +*|button.primary { + background-color: #0095dd; + border-color: transparent; + color: #fff; +} + +html|button.primary:enabled:hover, +xul|button.primary:not([disabled="true"]):hover { + background-color: #008acb; +} + +html|button.primary:enabled:hover:active, +xul|button.primary:not([disabled="true"]):hover:active { + background-color: #006b9d; +} + xul|colorpicker[type="button"] { padding: 6px; width: 50px; @@ -196,7 +219,7 @@ xul|button[type="menu"] > xul|*.button-box > xul|*.button-menu-dropmarker { xul|*.help-button { min-width: 30px; border-radius: 2px; - border: 1px solid #c1c1c1; + border-width: 0; background-color: #ffcb00; background-image: none; box-shadow: none; @@ -286,7 +309,7 @@ xul|menulist[disabled="true"]:not([editable="true"]) > xul|*.menulist-dropmarker xul|menulist > xul|menupopup, xul|button[type="menu"] > xul|menupopup { -moz-appearance: none; - border: 1px solid rgba(23,50,77,0.4); + border: 1px solid #c1c1c1; border-radius: 2px; background-color: #fff; } @@ -323,10 +346,9 @@ xul|button[type="menu"] > xul|menupopup > xul|menuitem[selected="true"] { xul|menulist > xul|menupopup xul|menuseparator, xul|button[type="menu"] > xul|menupopup xul|menuseparator { -moz-appearance: none; - margin-top: 2px; - margin-bottom: 2px; + margin: 0; padding: 0; - border-top: 1px solid rgba(23,50,77,0.4); + border-top: 1px solid #c1c1c1; border-bottom: none; } */ @@ -364,7 +386,6 @@ xul|textbox[disabled="true"] { html|a, xul|*.text-link, xul|*.inline-link { - font-size: 1.25rem; line-height: 22px; color: #0095dd; text-decoration: none; @@ -398,7 +419,8 @@ xul|*.checkbox-check { border: 1px solid #c1c1c1; -moz-margin-end: 10px; background-color: #f1f1f1; - background-image: linear-gradient(#fff, rgba(255,255,255,0.8)); + / !important needed to override toolkit checked !important rule / + background-image: linear-gradient(#fff, rgba(255,255,255,0.8)) !important; background-position: center center; background-repeat: no-repeat; box-shadow: 0 1px 1px 0 #fff, inset 0 2px 0 0 rgba(0,0,0,0.03); @@ -423,14 +445,6 @@ xul|*.checkbox-label-box { -moz-padding-start: 0; } -@media (min-resolution: 2dppx) { - xul|*.checkbox-check[checked] { - background-size: 12px 12px, auto; - background-image: url("chrome://global/skin/in-content/check@2x.png"), - linear-gradient(#fff, rgba(255,255,255,0.8)) !important; - } -} - xul|richlistitem > xul|*.checkbox-check { margin: 3px 6px; } @@ -452,10 +466,7 @@ xul|radio:not([disabled="true"]):hover > xul|*.radio-check { } xul|*.radio-check[selected] { - background-image: radial-gradient(circle, rgb(23,146,229), - rgb(76,177,255) 5.5px, rgba(76,177,255,0.2) 6px, - transparent 6px), - linear-gradient(rgb(255,255,255), rgba(255,255,255,0.8)); + list-style-image: url("chrome://global/skin/in-content/radio.svg#radio"); } xul|radio[disabled="true"] > xul|*.radio-check { @@ -475,6 +486,7 @@ xul|*#categories { background-color: #424f5a; padding-top: 39px; margin: 0; + border-width: 0; } xul|*.category { @@ -519,6 +531,7 @@ xul|*#categories[keyboard-navigation="true"]:-moz-focusring > xul|*.category[cur /* header */ /* *|*.header { + -moz-margin-end: 4px; / add the 4px end-margin of other elements / border-bottom: 1px solid #c8c8c8; margin-bottom: 15px; padding-bottom: 15px; @@ -575,6 +588,105 @@ xul|filefield + xul|button { -moz-border-start: none; } */ +/* List boxes */ +/* +xul|richlistbox, +xul|listbox { + -moz-appearance: none; + -moz-margin-start: 0; + background-color: #fff; + border: 1px solid #c1c1c1; + color: #333; +} + +xul|treechildren::-moz-tree-row, +xul|listbox xul|listitem { + padding: 0.3em; + margin: 0; + border: none; + border-radius: 0; + background-image: none; +} + +xul|treechildren::-moz-tree-row(hover), +xul|listbox xul|listitem:hover { + background-color: rgba(0,149,221,0.25); +} + +xul|treechildren::-moz-tree-row(selected), +xul|listbox xul|listitem[selected="true"] { + background-color: #0095dd; + color: #fff; +} +*/ +/* Trees */ +/* +xul|tree { + -moz-appearance: none; + font-size: 1em; + border: 1px solid #c1c1c1; +} + +xul|listheader, +xul|treecols { + -moz-appearance: none; + border: none; + border-bottom: 1px solid #c1c1c1; + padding: 0; +} + +xul|treecol:not([hideheader="true"]), +xul|treecolpicker { + -moz-appearance: none; + border: none; + background-color: #ebebeb; + color: #808080; + padding: 5px 10px; +} + +xul|treecol:not([hideheader="true"]):hover, +xul|treecolpicker:hover { + background-color: #dadada; + color: #333; +} + +xul|treecol:not([hideheader="true"]):not(:first-child), +xul|treecolpicker { + -moz-border-start-width: 1px; + -moz-border-start-style: solid; + border-image: linear-gradient(transparent 0%, transparent 20%, #c1c1c1 20%, #c1c1c1 80%, transparent 80%, transparent 100%) 1 1; +} + +xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection] { + list-style-image: url("chrome://global/skin/in-content/sorter.png"); + width: 12px; + height: 8px; +} + +xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection="descending"] { + transform: scaleY(-1); +} + +@media (min-resolution: 2dppx) { + xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection] { + list-style-image: url("chrome://global/skin/in-content/sorter@2x.png"); + } +} + +/ This is the only way to increase the height of a tree row unfortunately / +xul|treechildren::-moz-tree-row { + min-height: 2em; +} + +/ Color needs to be set on tree cell in order to be applied / +xul|treechildren::-moz-tree-cell-text { + color: #333; +} + +xul|treechildren::-moz-tree-cell-text(selected) { + color: #fff; +} +*/ /* === END common.inc.css === */ /* xul|caption { diff --git a/EarlyBlue/global/notification.css b/EarlyBlue/global/notification.css index 2fa8003e..2c43f685 100644 --- a/EarlyBlue/global/notification.css +++ b/EarlyBlue/global/notification.css @@ -1,19 +1,24 @@ @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); notification { - background-color : #FFFFCC; color: #000000; + background-color : #FFFFCC; text-shadow: none; } notification[type="info"] { - background-color: #CCD0DD; color: #000000; + background-color: #CCD0DD; } notification[type="critical"] { - background-color: #FFC0C0; color: #000000; + background-color: #FFC0C0; +} + +.messageText > .text-link { + color: inherit !important; + text-decoration: underline; } .messageImage { diff --git a/LCARStrek/global/aboutReader.css b/LCARStrek/global/aboutReader.css new file mode 100644 index 00000000..27393b2e --- /dev/null +++ b/LCARStrek/global/aboutReader.css @@ -0,0 +1,463 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ + +body { + padding: 64px 0; + max-width: 660px; + margin-left: auto; + margin-right: auto; +} + +.light, +.light-button { + color: #333333; + background-color: #ffffff; +} + +.dark, +.dark-button { + color: #eeeeee; + background-color: #333333; +} + +.sepia, +.sepia-button { + color: #333333; + background-color: #f0ece7; +} + +.sans-serif { + font-family: "Fira Sans", Helvetica, Arial, sans-serif; +} + +.serif { + font-family: "Charis SIL", Georgia, "Times New Roman", serif; +} + +.font-size1 { + font-size: 10px; +} + +.font-size2 { + font-size: 12px; +} + +.font-size3 { + font-size: 14px; +} + +.font-size4 { + font-size: 16px; +} + +.font-size5 { + font-size: 18px; +} + +.font-size6 { + font-size: 20px; +} + +.font-size7 { + font-size: 22px; +} + +.font-size8 { + font-size: 24px; +} + +.font-size9 { + font-size: 26px; +} + + +/* Loading/error message */ + +.message { + margin-top: 40px; + display: none; + text-align: center; + width: 100%; + font-size: 0.9rem; +} + +/* Header */ + +.header { + text-align: start; + display: none; +} + +.domain { + font-size: 0.9rem; + line-height: 1.33rem; + padding-bottom: 4px; + font-family: "Fira Sans", Helvetica, Arial, sans-serif; + text-decoration: none; + border-bottom: 1px solid; + color: #0095dd; +} + +.light > .container > .header > .domain, +.sepia > .container > .header > .domain { + border-bottom-color: #333333; +} + +.dark > .container > .header > .domain { + border-bottom-color: #eeeeee; +} + +.header > h1 { + font-size: 1.33rem; + line-height: 1.66rem; + width: 100%; + margin: 30px 0; + padding: 0; +} + +.header > .credits { + font-size: 0.9rem; + line-height: 1.33rem; + margin: 0 0 30px 0; + padding: 0; + font-style: italic; +} + +/* Content */ + +.content { + display: none; + font-size: 1rem; + line-height: 1.44rem; +} + +.content h1, +.content h2, +.content h3 { + font-weight: bold; +} + +.content h1 { + font-size: 1.33rem; + line-height: 1.66rem; +} + +.content h2 { + font-size: 1.1rem; + line-height: 1.66rem; +} + +.content h3 { + font-size: 1rem; + line-height: 1.66rem; +} + +.content a { + text-decoration: underline; + font-weight: normal; +} + +.content a, +.content a:visited, +.content a:hover, +.content a:active { + color: #0095dd; +} + +.content * { + max-width: 100%; + height: auto; +} + +.content p, +.content img, +.content code, +.content pre, +.content blockquote, +.content ul, +.content ol, +.content li { + margin: 0 0 30px 0; +} + +.content .wp-caption, +.content figure { + margin: 0 30px 30px 30px; +} + +.content .caption, +.content .wp-caption-text, +.content figcaption { + font-size: 0.9rem; + line-height: 1.33rem; + font-style: italic; +} + +.content code, +.content pre { + white-space: pre-wrap; +} + +.content blockquote { + padding: 0; + -moz-padding-start: 16px; +} + +.light > .container > .content blockquote, +.sepia > .container > .content blockquote { + -moz-border-start: 2px solid #333333; +} + +.dark > .container > .content blockquote { + -moz-border-start: 2px solid #eeeeee; +} + +.content ul, +.content ol { + padding: 0; +} + +.content ul { + -moz-padding-start: 30px; + list-style: disk; +} + +.content ol { + -moz-padding-start: 30px; + list-style: decimal; +} + +/*======= Controls toolbar =======*/ + +.toolbar { + font-family: "Fira Sans", Helvetica, Arial, sans-serif; + position: fixed; + height: 100%; + top: 0px; + left: 0px; + margin: 0; + padding: 0; + list-style: none; + background-color: #FBFBFB; + -moz-user-select: none; + border-right: 1px solid #B5B5B5; +} + +.button { + color: white; + display: block; + background-position: center; + background-size: 24px 24px; + background-repeat: no-repeat; + background-color: transparent; + height: 40px; + width: 40px; + border-top: 0; + border-left: 0; + border-right: 0; + border-bottom: 1px solid #c1c1c1; + padding: 0; +} + +.button[hidden] { + display: none; +} + +.dropdown { + text-align: center; + list-style: none; + margin: 0px; + padding: 0px; +} + +.dropdown li { + margin: 0px; + padding: 0px; +} + +/*======= Font style popup =======*/ + +.dropdown-popup { + min-width: 250px; + text-align: start; + position: absolute; + left: 48px; /* offset to account for toolbar width */ + z-index: 1000; + background-color: #FBFBFB; + visibility: hidden; + border-radius: 4px; + border: 1px 1px 0 1px solid #B5B5B5; + box-shadow: 0px 1px 12px #666; +} + +.dropdown-popup > hr { + width: 100%; + height: 0px; + border: 0px; + border-top: 1px solid #B5B5B5; + margin: 0; +} + +.open > .dropdown-popup { + visibility: visible; +} + +.dropdown-arrow { + position: absolute; + top: 30px; /* offset arrow from top of popup */ + left: -16px; + width: 24px; + 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 { + display: flex; + flex-direction: row; +} + +#font-type-buttons > button:first-child { + border-top-left-radius: 3px; +} +#font-type-buttons > button:last-child { + border-top-right-radius: 3px; +} +#color-scheme-buttons > button:first-child { + border-bottom-left-radius: 3px; +} +#color-scheme-buttons > button:last-child { + border-bottom-right-radius: 3px; +} + +#font-type-buttons > button, +#font-size-buttons > button, +#color-scheme-buttons > button { + text-align: center; + border-left: 1px solid #B5B5B5; + border-right: 0; + border-top: 0; + border-bottom: 0; + padding: 10px; +} + +#font-type-buttons > button, +#font-size-buttons > button { + width: 50%; + background-color: transparent; +} + +#color-scheme-buttons > button { + width: 33.33%; + font-size: 14px; +} + +#font-type-buttons > button:first-child, +#font-size-buttons > button:first-child, +#color-scheme-buttons > button:first-child { + border-left: 0px; +} + +#font-type-buttons > button { + display: inline-block; + font-size: 48px; +} + +#font-type-buttons > button:active:hover, +#font-type-buttons > button.selected, +#color-scheme-buttons > button:active:hover, +#color-scheme-buttons > button.selected { + box-shadow: inset 0 -3px 0 0 #FC6420; +} + +#font-type-buttons > button > div { + color: #666; + font-size: 12px; +} + +.button:hover, +#font-size-buttons > button:hover, +#font-type-buttons > button:hover { + background-color: #EBEBEB; +} + +.dropdown.open, +.button:active, +#font-size-buttons > button:active, +#font-size-buttons > button.selected { + background-color: #DADADA; +} + +/* Only used on Android */ +#font-size-sample { + display: none; +} + +.serif-button { + font-family: "Charis SIL", Georgia, "Times New Roman", serif; +} + +.minus-button, +.plus-button { + background-color: transparent; + border: 0; + height: 50px; + background-size: 18px 18px; + background-repeat: no-repeat; + background-position: center; +} + +/*======= Toolbar icons =======*/ + +/* Android-only controls */ +.share-button { + display: none; +} + +.close-button { + background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg"); + height: 68px; + background-position: center 8px; +} + +.close-button:active, +.close-button:hover { + background-image: url("chrome://global/skin/reader/RM-Close-hover-24x24.svg"); + background-color: #d94141; +} + +.style-button { + background-image: url("chrome://global/skin/reader/RM-Type-Controls-24x24.svg"); +} + +.toggle-button.on { + background-image: url("chrome://global/skin/reader/RM-Delete-24x24.svg"); +} + +.toggle-button { + background-image: url("chrome://global/skin/reader/RM-Add-24x24.svg"); +} + +.list-button { + background-image: url("chrome://global/skin/reader/RM-Reading-List-24x24.svg"); +} +.list-button.on { + background-color: #d9d9d9; +} + +.minus-button { + background-image: url("chrome://global/skin/reader/RM-Minus-24x24.svg"); +} + +.plus-button { + background-image: url("chrome://global/skin/reader/RM-Plus-24x24.svg"); +} + +@media print { + .toolbar { + display: none; + } +} diff --git a/LCARStrek/global/in-content/common.css b/LCARStrek/global/in-content/common.css index 8931e9c8..3faf41f1 100644 --- a/LCARStrek/global/in-content/common.css +++ b/LCARStrek/global/in-content/common.css @@ -37,8 +37,15 @@ xul|caption > xul|label { margin-bottom: 0; } +xul|description { + -moz-margin-start: 0; +} + *|*.main-content { - padding: 40px 48px 48px; + padding-top: 40px; + -moz-padding-end: 48px; /* orig is 44px to compensate the 4px margin of child elements */ + padding-bottom: 48px; + -moz-padding-start: 48px; overflow: auto; } @@ -168,6 +175,20 @@ xul|menulist[disabled="true"] { background-color: #402858; color: #000000; } + +*|button.primary { + background-color: #A06060; +} + +html|button.primary:enabled:hover, +xul|button.primary:not([disabled="true"]):hover { + background-color: #FFCF00; +} + +html|button.primary:enabled:hover:active, +xul|button.primary:not([disabled="true"]):hover:active { + background-color: #FF9F00; +} /* xul|colorpicker[type="button"] { padding: 6px; @@ -201,7 +222,7 @@ xul|*.help-button { /* min-width: 30px; border-radius: 2px; - border: 1px solid #c1c1c1; + border-width: 0; background-color: #ffcb00; background-image: none; box-shadow: none; @@ -292,7 +313,7 @@ xul|menulist[disabled="true"]:not([editable="true"]) > xul|*.menulist-dropmarker xul|menulist > xul|menupopup, xul|button[type="menu"] > xul|menupopup { -moz-appearance: none; - border: 1px solid rgba(23,50,77,0.4); + border: 1px solid #c1c1c1; border-radius: 2px; background-color: #fff; } @@ -329,10 +350,9 @@ xul|button[type="menu"] > xul|menupopup > xul|menuitem[selected="true"] { xul|menulist > xul|menupopup xul|menuseparator, xul|button[type="menu"] > xul|menupopup xul|menuseparator { -moz-appearance: none; - margin-top: 2px; - margin-bottom: 2px; + margin: 0; padding: 0; - border-top: 1px solid rgba(23,50,77,0.4); + border-top: 1px solid #c1c1c1; border-bottom: none; } */ @@ -370,8 +390,7 @@ xul|textbox[disabled="true"] { html|a, xul|*.text-link, xul|*.inline-link { -/* font-size: 1.25rem; - line-height: 22px;*/ +/* line-height: 22px;*/ color: #3333FF; text-decoration: none; } @@ -404,7 +423,8 @@ xul|*.checkbox-check { border: 1px solid #c1c1c1; -moz-margin-end: 10px; background-color: #f1f1f1; - background-image: linear-gradient(#fff, rgba(255,255,255,0.8)); + / !important needed to override toolkit checked !important rule / + background-image: linear-gradient(#fff, rgba(255,255,255,0.8)) !important; background-position: center center; background-repeat: no-repeat; box-shadow: 0 1px 1px 0 #fff, inset 0 2px 0 0 rgba(0,0,0,0.03); @@ -429,14 +449,6 @@ xul|*.checkbox-label-box { -moz-padding-start: 0; } -@media (min-resolution: 2dppx) { - xul|*.checkbox-check[checked] { - background-size: 12px 12px, auto; - background-image: url("chrome://global/skin/in-content/check@2x.png"), - linear-gradient(#fff, rgba(255,255,255,0.8)) !important; - } -} - xul|richlistitem > xul|*.checkbox-check { margin: 3px 6px; } @@ -458,10 +470,7 @@ xul|radio:not([disabled="true"]):hover > xul|*.radio-check { } xul|*.radio-check[selected] { - background-image: radial-gradient(circle, rgb(23,146,229), - rgb(76,177,255) 5.5px, rgba(76,177,255,0.2) 6px, - transparent 6px), - linear-gradient(rgb(255,255,255), rgba(255,255,255,0.8)); + list-style-image: url("chrome://global/skin/in-content/radio.svg#radio"); } xul|radio[disabled="true"] > xul|*.radio-check { @@ -481,6 +490,7 @@ xul|*#categories { background-color: #424f5a; padding-top: 39px; margin: 0; + border-width: 0; } xul|*.category { @@ -525,7 +535,8 @@ xul|*#categories[keyboard-navigation="true"]:-moz-focusring > xul|*.category[cur /* header */ *|*.header { -/* border-bottom: 1px solid #A09090; +/* -moz-margin-end: 4px; / add the 4px end-margin of other elements / + border-bottom: 1px solid #A09090; margin-bottom: 15px; padding-bottom: 15px; */ } @@ -581,6 +592,105 @@ xul|filefield + xul|button { -moz-border-start: none; } */ +/* List boxes */ +/* +xul|richlistbox, +xul|listbox { + -moz-appearance: none; + -moz-margin-start: 0; + background-color: #fff; + border: 1px solid #c1c1c1; + color: #333; +} + +xul|treechildren::-moz-tree-row, +xul|listbox xul|listitem { + padding: 0.3em; + margin: 0; + border: none; + border-radius: 0; + background-image: none; +} + +xul|treechildren::-moz-tree-row(hover), +xul|listbox xul|listitem:hover { + background-color: rgba(0,149,221,0.25); +} + +xul|treechildren::-moz-tree-row(selected), +xul|listbox xul|listitem[selected="true"] { + background-color: #0095dd; + color: #fff; +} + +/ This is the only way to increase the height of a tree row unfortunately / +xul|treechildren::-moz-tree-row { + min-height: 2em; +} + +/ Color needs to be set on tree cell in order to be applied / +xul|treechildren::-moz-tree-cell-text { + color: #333; +} + +xul|treechildren::-moz-tree-cell-text(selected) { + color: #fff; +} +*/ +/* Trees */ +/* +xul|tree { + -moz-appearance: none; + font-size: 1em; + border: 1px solid #c1c1c1; +} + +xul|listheader, +xul|treecols { + -moz-appearance: none; + border: none; + border-bottom: 1px solid #c1c1c1; + padding: 0; +} + +xul|treecol:not([hideheader="true"]), +xul|treecolpicker { + -moz-appearance: none; + border: none; + background-color: #ebebeb; + color: #808080; + padding: 5px 10px; +} + +xul|treecol:not([hideheader="true"]):hover, +xul|treecolpicker:hover { + background-color: #dadada; + color: #333; +} + +xul|treecol:not([hideheader="true"]):not(:first-child), +xul|treecolpicker { + -moz-border-start-width: 1px; + -moz-border-start-style: solid; + border-image: linear-gradient(transparent 0%, transparent 20%, #c1c1c1 20%, #c1c1c1 80%, transparent 80%, transparent 100%) 1 1; +} + +xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection] { + list-style-image: url("chrome://global/skin/in-content/sorter.png"); + width: 12px; + height: 8px; +} + +xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection="descending"] { + transform: scaleY(-1); +} + +@media (min-resolution: 2dppx) { + xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection] { + list-style-image: url("chrome://global/skin/in-content/sorter@2x.png"); + } +} +*/ /* === END common.inc.css === */ /* xul|caption { diff --git a/LCARStrek/global/notification.css b/LCARStrek/global/notification.css index 49d37451..6a429fae 100644 --- a/LCARStrek/global/notification.css +++ b/LCARStrek/global/notification.css @@ -1,20 +1,25 @@ @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); notification { - background-color : #FFCF00; color: #000000; + background-color : #FFCF00; text-shadow: none; border-radius: 8px; } notification[type="info"] { - background-color: #9C9CFF; color: #000000; + background-color: #9C9CFF; } notification[type="critical"] { - background-color: #FF0000; color: #000000; + background-color: #FF0000; +} + +.messageText > .text-link { + color: inherit !important; + text-decoration: underline; } .messageImage { -- 2.43.0