From e6947267ac09872af2aa1c74c74cb00d8581abe4 Mon Sep 17 00:00:00 2001 From: Robert Kaiser Date: Sun, 12 Apr 2015 21:01:03 +0200 Subject: [PATCH] sync both themes with toolkit windows theme changes in Mozilla 38 cycle --- EarlyBlue/global/aboutReader.css | 232 ++++++++++++------ EarlyBlue/global/aboutSupport.css | 13 +- EarlyBlue/global/checkbox.css | 14 +- EarlyBlue/global/config.css | 83 ++----- EarlyBlue/global/icons/warning.svg | 12 + EarlyBlue/global/in-content/common.css | 88 ++++--- EarlyBlue/global/in-content/info-pages.css | 89 +++++++ .../global/media/videoClickToPlayButton.svg | 42 +--- EarlyBlue/global/reader/RM-Add-24x24.svg | 6 + EarlyBlue/global/reader/RM-Close-24x24.svg | 31 +++ EarlyBlue/global/reader/RM-Delete-24x24.svg | 6 + EarlyBlue/global/reader/RM-Minus-24x24.svg | 39 +++ EarlyBlue/global/reader/RM-Plus-24x24.svg | 39 +++ .../global/reader/RM-Reading-List-24x24.svg | 46 ++++ .../global/reader/RM-Type-Controls-24x24.svg | 23 ++ .../global/reader/RM-Type-Controls-Arrow.svg | 42 ++++ EarlyBlue/mozapps/extensions/extensions.css | 2 +- EarlyBlue/mozapps/extensions/utilities.png | Bin 248 -> 0 bytes EarlyBlue/mozapps/extensions/utilities.svg | 25 ++ LCARStrek/global/aboutReader.css | 232 ++++++++++++------ LCARStrek/global/aboutSupport.css | 13 +- LCARStrek/global/checkbox.css | 27 +- .../global/checkbox/cbox-check-inverted.gif | Bin 0 -> 54 bytes LCARStrek/global/config.css | 95 ++----- LCARStrek/global/icons/warning.svg | 12 + LCARStrek/global/in-content/common.css | 94 ++++--- LCARStrek/global/in-content/info-pages.css | 4 + .../global/media/videoClickToPlayButton.svg | 48 ++-- LCARStrek/mozapps/extensions/extensions.css | 4 +- .../mozapps/extensions/utilities-hover.png | Bin 248 -> 0 bytes LCARStrek/mozapps/extensions/utilities.png | Bin 248 -> 0 bytes LCARStrek/mozapps/extensions/utilities.svg | 28 +++ 32 files changed, 976 insertions(+), 413 deletions(-) create mode 100644 EarlyBlue/global/icons/warning.svg create mode 100644 EarlyBlue/global/in-content/info-pages.css create mode 100644 EarlyBlue/global/reader/RM-Add-24x24.svg create mode 100644 EarlyBlue/global/reader/RM-Close-24x24.svg create mode 100644 EarlyBlue/global/reader/RM-Delete-24x24.svg create mode 100644 EarlyBlue/global/reader/RM-Minus-24x24.svg create mode 100644 EarlyBlue/global/reader/RM-Plus-24x24.svg create mode 100644 EarlyBlue/global/reader/RM-Reading-List-24x24.svg create mode 100644 EarlyBlue/global/reader/RM-Type-Controls-24x24.svg create mode 100644 EarlyBlue/global/reader/RM-Type-Controls-Arrow.svg delete mode 100644 EarlyBlue/mozapps/extensions/utilities.png create mode 100644 EarlyBlue/mozapps/extensions/utilities.svg create mode 100755 LCARStrek/global/checkbox/cbox-check-inverted.gif create mode 100644 LCARStrek/global/icons/warning.svg delete mode 100644 LCARStrek/mozapps/extensions/utilities-hover.png delete mode 100644 LCARStrek/mozapps/extensions/utilities.png create mode 100644 LCARStrek/mozapps/extensions/utilities.svg diff --git a/EarlyBlue/global/aboutReader.css b/EarlyBlue/global/aboutReader.css index 27393b2e..b852c609 100644 --- a/EarlyBlue/global/aboutReader.css +++ b/EarlyBlue/global/aboutReader.css @@ -5,8 +5,20 @@ body { padding: 64px 0; max-width: 660px; - margin-left: auto; - margin-right: auto; + margin: 0 auto; +} + +@media (max-width: 785px) { + body { + padding-top: 64px; + -moz-padding-end: 0; + padding-bottom: 64px; + -moz-padding-start: 51px; + } +} + +body.loaded { + transition: color 0.4s, background-color 0.4s; } .light, @@ -27,11 +39,13 @@ body { background-color: #f0ece7; } -.sans-serif { +.sans-serif, +.sans-serif .remove-button { font-family: "Fira Sans", Helvetica, Arial, sans-serif; } -.serif { +.serif, +.serif .remove-button { font-family: "Charis SIL", Georgia, "Times New Roman", serif; } @@ -79,7 +93,7 @@ body { display: none; text-align: center; width: 100%; - font-size: 0.9rem; + font-size: 0.9em; } /* Header */ @@ -90,8 +104,8 @@ body { } .domain { - font-size: 0.9rem; - line-height: 1.33rem; + font-size: 0.9em; + line-height: 1.48em; padding-bottom: 4px; font-family: "Fira Sans", Helvetica, Arial, sans-serif; text-decoration: none; @@ -109,16 +123,16 @@ body { } .header > h1 { - font-size: 1.33rem; - line-height: 1.66rem; + font-size: 1.33em; + line-height: 1.25em; width: 100%; margin: 30px 0; padding: 0; } .header > .credits { - font-size: 0.9rem; - line-height: 1.33rem; + font-size: 0.9em; + line-height: 1.48em; margin: 0 0 30px 0; padding: 0; font-style: italic; @@ -126,10 +140,10 @@ body { /* Content */ -.content { +#moz-reader-content { display: none; - font-size: 1rem; - line-height: 1.44rem; + font-size: 1em; + line-height: 1.6em; } .content h1, @@ -138,19 +152,19 @@ body { font-weight: bold; } -.content h1 { - font-size: 1.33rem; - line-height: 1.66rem; +#moz-reader-content h1 { + font-size: 1.33em; + line-height: 1.25em; } -.content h2 { - font-size: 1.1rem; - line-height: 1.66rem; +#moz-reader-content h2 { + font-size: 1.1em; + line-height: 1.51em; } -.content h3 { - font-size: 1rem; - line-height: 1.66rem; +#moz-reader-content h3 { + font-size: 1em; + line-height: 1.66em; } .content a { @@ -171,26 +185,34 @@ body { } .content p, -.content img, .content code, .content pre, .content blockquote, .content ul, .content ol, -.content li { +.content li, +.content figure, +.content .wp-caption { margin: 0 0 30px 0; } -.content .wp-caption, -.content figure { - margin: 0 30px 30px 30px; +.content p > img:only-child, +.content p > a:only-child > img:only-child, +.content .wp-caption img, +.content figure img { + display: block; +} + +.content img[moz-reader-center] { + margin-left: auto; + margin-right: auto; } -.content .caption, -.content .wp-caption-text, -.content figcaption { - font-size: 0.9rem; - line-height: 1.33rem; +#moz-reader-content .caption, +#moz-reader-content .wp-caption-text, +#moz-reader-content figcaption { + font-size: 0.9em; + line-height: 1.48em; font-style: italic; } @@ -212,6 +234,13 @@ body { .dark > .container > .content blockquote { -moz-border-start: 2px solid #eeeeee; } +.dark *::-moz-selection { + background-color: #FFFFFF; + color: #0095DD; +} +.dark a::-moz-selection { + color: #DD4800; +} .content ul, .content ol { @@ -220,7 +249,7 @@ body { .content ul { -moz-padding-start: 30px; - list-style: disk; + list-style: disc; } .content ol { @@ -234,30 +263,34 @@ body { font-family: "Fira Sans", Helvetica, Arial, sans-serif; position: fixed; height: 100%; - top: 0px; - left: 0px; + top: 0; + left: 0; margin: 0; padding: 0; list-style: none; - background-color: #FBFBFB; + background-color: #fbfbfb; -moz-user-select: none; - border-right: 1px solid #B5B5B5; + border-right: 1px solid #b5b5b5; } .button { - color: white; display: block; - background-position: center; background-size: 24px 24px; background-repeat: no-repeat; - background-color: transparent; + color: #333; + background-color: #fbfbfb; height: 40px; + padding: 0; +} + +.toolbar .button { width: 40px; + background-position: center; + margin-right: -1px; border-top: 0; border-left: 0; - border-right: 0; + border-right: 1px solid #b5b5b5; border-bottom: 1px solid #c1c1c1; - padding: 0; } .button[hidden] { @@ -267,36 +300,32 @@ body { .dropdown { text-align: center; list-style: none; - margin: 0px; - padding: 0px; + margin: 0; + padding: 0; } .dropdown li { - margin: 0px; - padding: 0px; + margin: 0; + padding: 0; } /*======= Font style popup =======*/ .dropdown-popup { - min-width: 250px; + min-width: 300px; text-align: start; position: absolute; left: 48px; /* offset to account for toolbar width */ z-index: 1000; - background-color: #FBFBFB; + background-color: #fbfbfb; visibility: hidden; border-radius: 4px; - border: 1px 1px 0 1px solid #B5B5B5; - box-shadow: 0px 1px 12px #666; + border: 1px 1px 0 1px solid #b5b5b5; + box-shadow: 0 1px 12px #666; } .dropdown-popup > hr { - width: 100%; - height: 0px; - border: 0px; - border-top: 1px solid #B5B5B5; - margin: 0; + display: none; } .open > .dropdown-popup { @@ -337,17 +366,15 @@ body { #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; + border: 0; } #font-type-buttons > button, #font-size-buttons > button { width: 50%; background-color: transparent; + border-left: 1px solid #B5B5B5; + border-bottom: 1px solid #B5B5B5; } #color-scheme-buttons > button { @@ -355,40 +382,62 @@ body { font-size: 14px; } +#color-scheme-buttons > .dark-button { + margin-top: -1px; + height: 61px; +} + #font-type-buttons > button:first-child, -#font-size-buttons > button:first-child, -#color-scheme-buttons > button:first-child { - border-left: 0px; +#font-size-buttons > button:first-child { + border-left: 0; } #font-type-buttons > button { display: inline-block; - font-size: 48px; + font-size: 58px; + height: 100px; +} + +/* Make the serif button content the same size as the sans-serif button content. */ +#font-type-buttons > .serif-button { + padding-top: 1px; + font-size: 60px; +} + +#font-size-buttons > button, +#color-scheme-buttons > button { + height: 60px; } #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; + box-shadow: inset 0 -3px 0 0 #fc6420; +} + +#font-type-buttons > button:active:hover, +#font-type-buttons > button.selected { + border-bottom: 1px solid #FC6420; } #font-type-buttons > button > div { color: #666; font-size: 12px; + margin-top: -4px; } .button:hover, #font-size-buttons > button:hover, #font-type-buttons > button:hover { - background-color: #EBEBEB; + background-color: #ebebeb; } .dropdown.open, .button:active, #font-size-buttons > button:active, #font-size-buttons > button.selected { - background-color: #DADADA; + background-color: #dadada; } /* Only used on Android */ @@ -404,12 +453,40 @@ body { .plus-button { background-color: transparent; border: 0; - height: 50px; background-size: 18px 18px; background-repeat: no-repeat; background-position: center; } +.footer { + height: 64px; + background-color: #ebebeb; + position: absolute; + left: 0; + width: 100%; + text-align: center; + padding: 12px 0; + box-sizing: border-box; + box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.35) inset; +} + +.sepia .footer { + background-color: #dedad4; +} + +.remove-button { + background-image: url("chrome://global/skin/reader/RM-Delete-24x24.svg"); + margin: 0 auto; + border: 1px solid #c1c1c1; + background-position: 10px 7px; + padding-left: 42px; + padding-right: 10px; + border-radius: 2px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); + font-size: 18px; +} + + /*======= Toolbar icons =======*/ /* Android-only controls */ @@ -418,15 +495,23 @@ body { } .close-button { - background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg"); + background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close"); 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-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover"); 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; } .style-button { @@ -460,4 +545,7 @@ body { .toolbar { display: none; } + .footer { + display: none; + } } diff --git a/EarlyBlue/global/aboutSupport.css b/EarlyBlue/global/aboutSupport.css index 8b71b9f1..990091a8 100644 --- a/EarlyBlue/global/aboutSupport.css +++ b/EarlyBlue/global/aboutSupport.css @@ -81,7 +81,7 @@ td { overflow: hidden; } -#reset-box { +#action-box { background-color: #CCD0DD; border: 1px solid #666699; color: #000000; @@ -92,10 +92,15 @@ td { -moz-margin-end: 0; padding: 16px; width: 30%; - visibility: hidden; } -#reset-box:-moz-dir(rtl) { +#action-box, +#reset-box, +#safe-mode-box { + display: none; +} + +#action-box:-moz-dir(rtl) { float: left; } @@ -103,7 +108,7 @@ td { margin-top: 0; } -#reset-box > button { +#action-box > button { display: block; } diff --git a/EarlyBlue/global/checkbox.css b/EarlyBlue/global/checkbox.css index 36777951..66253d53 100644 --- a/EarlyBlue/global/checkbox.css +++ b/EarlyBlue/global/checkbox.css @@ -46,6 +46,7 @@ checkbox:-moz-focusring > .checkbox-label-center-box > .checkbox-label-box { /* ..... disabled state ..... */ +checkbox[disabled="true"] > .checkbox-check, checkbox[disabled="true"] > .checkbox-spacer-box > .checkbox-check { background-color: #CCD0DD; } @@ -58,21 +59,30 @@ checkbox[disabled="true"] { .checkbox-check { border: 1px inset #CCD0DD; - width: 12px; - height: 12px; + width: 1em; + height: 1em; + min-width: 12px; + min-height: 12px; background: transparent 50% 50% no-repeat; } +checkbox > .checkbox-check { + -moz-margin-end: 4px; +} + +checkbox:hover:active > .checkbox-check, checkbox:hover:active > .checkbox-spacer-box > .checkbox-check { background-color: #CCD0DD; } /* ..... checked state ..... */ +checkbox[checked="true"] > .checkbox-check, checkbox[checked="true"] > .checkbox-spacer-box > .checkbox-check { background-image: url("chrome://global/skin/checkbox/cbox-check.gif"); } +checkbox[checked="true"][disabled="true"] > .checkbox-check, checkbox[checked="true"][disabled="true"] > .checkbox-spacer-box > .checkbox-check { background-image: url("chrome://global/skin/checkbox/cbox-check-disabled.gif") !important } diff --git a/EarlyBlue/global/config.css b/EarlyBlue/global/config.css index 0a949ef8..9731c4b8 100644 --- a/EarlyBlue/global/config.css +++ b/EarlyBlue/global/config.css @@ -6,81 +6,48 @@ == Styles for about:config ======================================================================= */ -@import url("chrome://global/skin/"); -@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); - -/* ::::: warning screen ::::: */ - -#warningScreen -{ - background: #CCD0DD; +#warningScreen { + font-size: 15px; + padding-top: 0; + padding-bottom: 0; + -moz-padding-start: calc(48px + 4.6em); + -moz-padding-end: 48px; } -#warningBox -{ - background: #9999CC; - color: #000000; - border: 1px solid #666699; - border-radius: 10px; - padding: 3em; - -moz-padding-start: 30px; - -moz-margin-start: 1em; - -moz-margin-end: 1em; +.title { + background-image: url("chrome://global/skin/icons/warning.svg"); } -#warningInnerBox -{ - max-width: 50em; +#warningTitle { + font-weight: lighter; + line-height: 1.2; + color: #6666CC; + margin: 0; + margin-bottom: .5em; } -#warningTitle -{ - margin: 0 0 .6em; - font-size: 160%; - border-bottom: 1px solid #666699; +#warningText { + margin: 1em 0; } -#warningText -{ - font-size: 110%; - -moz-margin-start: 0; -} - -#warningButton -{ +#warningButton { margin-top: 0.6em; } -#showWarningNextTime -{ - margin-top: 0.6em; +#filterRow { + margin-top: 4px; + -moz-margin-start: 4px; } -#exclam -{ - list-style-image: url("chrome://global/skin/icons/alert-exclam.gif"); - -moz-margin-end: 3em; +#configTree { + margin-top: 4px; + margin-bottom: 4px; } -/* ::::: tree rows ::::: */ - -#configTreeBody::-moz-tree-cell-text(user) -{ +#configTreeBody::-moz-tree-cell-text(user) { font-weight: bold; } -#configTreeBody::-moz-tree-cell-text(locked) -{ +#configTreeBody::-moz-tree-cell-text(locked) { font-style: italic; } - -#configTree -{ - margin-top: 5px; - margin-bottom: 5px; -} - -#filterRow -{ - margin-top: 5px; -} diff --git a/EarlyBlue/global/icons/warning.svg b/EarlyBlue/global/icons/warning.svg new file mode 100644 index 00000000..79d1ddf0 --- /dev/null +++ b/EarlyBlue/global/icons/warning.svg @@ -0,0 +1,12 @@ + + + + + + + + \ No newline at end of file diff --git a/EarlyBlue/global/in-content/common.css b/EarlyBlue/global/in-content/common.css index b3777733..e222bce7 100644 --- a/EarlyBlue/global/in-content/common.css +++ b/EarlyBlue/global/in-content/common.css @@ -8,7 +8,8 @@ @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; html|body, -xul|page { +xul|page, +xul|window { font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; -moz-appearance: none; background-color: #CCD0DD; @@ -25,13 +26,20 @@ html|h1 { font-size: 2.5em; font-weight: lighter; line-height: 1.2; + color: #000000; margin: 0; margin-bottom: .5em; } +html|hr { + border-style: solid none none none; + border-color: #666699; +} + xul|caption { } +xul|caption > xul|checkbox, xul|caption > xul|label { margin-top: 0; margin-bottom: 0; @@ -58,9 +66,7 @@ xul|prefpane > xul|*.content-box { xul|groupbox { -moz-appearance: none; border: none; - margin-top: 15px; - margin-bottom: 15px; - -moz-margin-end: 0; + margin: 15px 0 0; -moz-padding-start: 0; -moz-padding-end: 0; font-size: 1.25rem; @@ -200,7 +206,7 @@ xul|menulist > xul|*.menulist-label-box { padding-left: 10px !important; } -xul|menulist > xul|*.menulist-label-box > xul|*.menulist-icon { +xul|menulist > xul|*.menulist-label-box > xul|*.menulist-icon[src] { -moz-margin-end: 5px; } @@ -359,7 +365,6 @@ xul|button[type="menu"] > xul|menupopup xul|menuseparator { height: 30px; color: #333; line-height: 20px; - text-shadow: 0 1px 1px #fefffe; padding-right: 10px; padding-left: 10px; border: 1px solid #c1c1c1; @@ -384,34 +389,52 @@ xul|textbox[disabled="true"] { /* Links */ /* html|a, -xul|*.text-link, -xul|*.inline-link { +.text-link, +.inline-link { line-height: 22px; color: #0095dd; text-decoration: none; } html|a:hover, -xul|*.text-link:hover, -xul|*.inline-link:hover { +.text-link:hover, +.inline-link:hover { color: #4cb1ff; text-decoration: none; } html|a:hover:active, -xul|*.text-link:hover:active, -xul|*.inline-link:hover:active { +.text-link:hover:active, +.inline-link:hover:active { color: #ff9500; text-decoration: none; } */ /* Checkboxes and radio buttons */ /* +/ Hide the actual checkbox / +html|input[type="checkbox"] { + opacity: 0; + position: absolute; +} + +/ Create a box to style as the checkbox / +html|input[type="checkbox"] + html|label:before { + display: inline-block; + content: ""; + vertical-align: middle; +} + +html|input[type="checkbox"] + html|label { + line-height: 0px; +} + xul|checkbox { -moz-margin-start: 0; } -xul|*.checkbox-check { +xul|*.checkbox-check, +html|input[type="checkbox"] + html|label:before { -moz-appearance: none; width: 23px; height: 23px; @@ -426,7 +449,8 @@ xul|*.checkbox-check { box-shadow: 0 1px 1px 0 #fff, inset 0 2px 0 0 rgba(0,0,0,0.03); } -xul|checkbox:not([disabled="true"]):hover > xul|*.checkbox-check { +xul|checkbox:not([disabled="true"]):hover > xul|*.checkbox-check, +html|input[type="checkbox"]:not(:disabled) + html|label:hover:before { border-color: #0095dd; } @@ -436,7 +460,12 @@ xul|*.checkbox-check[checked] { linear-gradient(#fff, rgba(255,255,255,0.8)) !important; } -xul|checkbox[disabled="true"] > xul|*.checkbox-check { +html|input[type="checkbox"]:checked + html|label:before { + background-image: url("chrome://global/skin/in-content/check.svg#check"), linear-gradient(#fff, rgba(255,255,255,0.8)) !important; +} + +xul|checkbox[disabled="true"] > xul|*.checkbox-check, +html|input[type="checkbox"]:disabled + html|label { opacity: 0.5; } @@ -521,6 +550,7 @@ xul|*#categories[keyboard-navigation="true"]:-moz-focusring > xul|*.category[cur padding-bottom: 2px; -moz-padding-start: 9px; margin: 0; + -moz-user-select: none; } *|*.category-icon { @@ -542,6 +572,7 @@ xul|*#categories[keyboard-navigation="true"]:-moz-focusring > xul|*.category[cur font-weight: normal; line-height: 40px; margin: 0; + -moz-user-select: none; } */ /* File fields */ @@ -627,6 +658,11 @@ xul|tree { border: 1px solid #c1c1c1; } +xul|tree:-moz-focusring, +xul|richlistbox:-moz-focusring { + border: 1px dotted #0095dd; +} + xul|listheader, xul|treecols { -moz-appearance: none; @@ -644,7 +680,7 @@ xul|treecolpicker { padding: 5px 10px; } -xul|treecol:not([hideheader="true"]):hover, +xul|treecol:not([hideheader="true"]):not([sortable="false"]):hover, xul|treecolpicker:hover { background-color: #dadada; color: #333; @@ -658,21 +694,15 @@ xul|treecolpicker { } xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection] { - list-style-image: url("chrome://global/skin/in-content/sorter.png"); - width: 12px; - height: 8px; + list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown"); + width: 18px; + height: 18px; } -xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection="descending"] { +xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection="ascending"] { 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; @@ -694,6 +724,7 @@ xul|caption { } xul|button, +html|button, xul|colorpicker[type="button"], xul|menulist { margin: 2px 4px; @@ -710,7 +741,6 @@ xul|checkbox { xul|radio { -moz-binding: url("chrome://global/content/bindings/radio.xml#radio"); - -moz-margin-start: 0; -moz-padding-start: 0; } @@ -720,8 +750,8 @@ xul|*.checkbox-icon { } html|a:-moz-focusring, -xul|*.text-link:-moz-focusring, -xul|*.inline-link:-moz-focusring { +.text-link:-moz-focusring, +.inline-link:-moz-focusring { border: 1px dotted -moz-DialogText; } */ \ No newline at end of file diff --git a/EarlyBlue/global/in-content/info-pages.css b/EarlyBlue/global/in-content/info-pages.css new file mode 100644 index 00000000..45f6a0b3 --- /dev/null +++ b/EarlyBlue/global/in-content/info-pages.css @@ -0,0 +1,89 @@ +@import url("chrome://global/skin/in-content/common.css"); +/* Body and container */ +body { + display: flex; + box-sizing: padding-box; + min-height: 100vh; + padding-top: 0; + padding-bottom: 0; + -moz-padding-start: calc(48px + 4.6em); + -moz-padding-end: 48px; + align-items: center; + justify-content: center; +} + +.container { + min-width: 13em; + max-width: 52em; +} + +/* Typography */ +.title { + background-image: url("chrome://browser/skin/aboutNetError_info.svg"); + background-position: left 0; + background-repeat: no-repeat; + background-size: 1.6em; + -moz-margin-start: -2.3em; + -moz-padding-start: 2.3em; + font-size: 2.5em; +} + +.title:-moz-dir(rtl) { + background-position: right 0; +} + +.title-text { + border-bottom: 1px solid #666699; + font-size: inherit; + padding-bottom: 0.4em; +} + +@media (max-width: 675px) { + body { + padding: 0 48px; + } + + .title { + background-image: none !important; + -moz-padding-start: 0; + -moz-margin-start: 0; + } + + .title-text { + padding-top: 0; + } +} + +ul, ol { + margin: 0; + padding: 0; + -moz-margin-start: 1em; +} + +ul > li, ol > li { + margin-bottom: .5em; +} + +ul { + list-style: disc; +} + +/* Buttons */ +.button-container { + margin-top: 1.2em; +} + +.button-container > button { + min-width: 150px; +} + +.button-container > button:first-child { + -moz-margin-start: 0; +} + +/* Trees */ +tree { + min-height: 12em; + margin-top: 1.2em; + width: 100%; +} \ No newline at end of file diff --git a/EarlyBlue/global/media/videoClickToPlayButton.svg b/EarlyBlue/global/media/videoClickToPlayButton.svg index c8d6f23c..f118afb0 100644 --- a/EarlyBlue/global/media/videoClickToPlayButton.svg +++ b/EarlyBlue/global/media/videoClickToPlayButton.svg @@ -1,3 +1,7 @@ + + - - - - - - - + + style="fill:#ffffff;" /> + style="filter:url(#dropShadow);" /> + style="fill:url(#arrowGradient);" /> + style="fill:url(#whiteGradient);" /> + style="fill:white;fill-opacity:.3;" /> + style="fill:white;fill-opacity:.8;" /> diff --git a/EarlyBlue/global/reader/RM-Add-24x24.svg b/EarlyBlue/global/reader/RM-Add-24x24.svg new file mode 100644 index 00000000..66551ef1 --- /dev/null +++ b/EarlyBlue/global/reader/RM-Add-24x24.svg @@ -0,0 +1,6 @@ + + + + diff --git a/EarlyBlue/global/reader/RM-Close-24x24.svg b/EarlyBlue/global/reader/RM-Close-24x24.svg new file mode 100644 index 00000000..b0674b2d --- /dev/null +++ b/EarlyBlue/global/reader/RM-Close-24x24.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/EarlyBlue/global/reader/RM-Delete-24x24.svg b/EarlyBlue/global/reader/RM-Delete-24x24.svg new file mode 100644 index 00000000..6010fbe7 --- /dev/null +++ b/EarlyBlue/global/reader/RM-Delete-24x24.svg @@ -0,0 +1,6 @@ + + + + diff --git a/EarlyBlue/global/reader/RM-Minus-24x24.svg b/EarlyBlue/global/reader/RM-Minus-24x24.svg new file mode 100644 index 00000000..9da7e03b --- /dev/null +++ b/EarlyBlue/global/reader/RM-Minus-24x24.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/EarlyBlue/global/reader/RM-Plus-24x24.svg b/EarlyBlue/global/reader/RM-Plus-24x24.svg new file mode 100644 index 00000000..249912a1 --- /dev/null +++ b/EarlyBlue/global/reader/RM-Plus-24x24.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/EarlyBlue/global/reader/RM-Reading-List-24x24.svg b/EarlyBlue/global/reader/RM-Reading-List-24x24.svg new file mode 100644 index 00000000..1f21efd5 --- /dev/null +++ b/EarlyBlue/global/reader/RM-Reading-List-24x24.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/EarlyBlue/global/reader/RM-Type-Controls-24x24.svg b/EarlyBlue/global/reader/RM-Type-Controls-24x24.svg new file mode 100644 index 00000000..a25429ad --- /dev/null +++ b/EarlyBlue/global/reader/RM-Type-Controls-24x24.svg @@ -0,0 +1,23 @@ + + + + + + + diff --git a/EarlyBlue/global/reader/RM-Type-Controls-Arrow.svg b/EarlyBlue/global/reader/RM-Type-Controls-Arrow.svg new file mode 100644 index 00000000..9094d8a3 --- /dev/null +++ b/EarlyBlue/global/reader/RM-Type-Controls-Arrow.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/EarlyBlue/mozapps/extensions/extensions.css b/EarlyBlue/mozapps/extensions/extensions.css index 59a635a1..7af4bd7e 100644 --- a/EarlyBlue/mozapps/extensions/extensions.css +++ b/EarlyBlue/mozapps/extensions/extensions.css @@ -298,7 +298,7 @@ } #header-utils-btn { - list-style-image: url("chrome://mozapps/skin/extensions/utilities.png"); + list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg#utilities"); -moz-margin-end: 16px; } diff --git a/EarlyBlue/mozapps/extensions/utilities.png b/EarlyBlue/mozapps/extensions/utilities.png deleted file mode 100644 index 7c03676064be19cb7e006f5c0ab14fb68df0c78d..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 248 zcmeAS@N?(olHy`uVBq!ia0vp^f*{Pu3?vyBU)>3!ii6yp7}lMWc?smO1^9%xZeQ^u zE$xgCQ>!URx+KUin8D%MjWiG^$=lt9p@UV{1IXbl@Q5sCVBi)8VMc~ob0mO*>?NMQ zuI#tC7`cq)`ufaQ0EJ{TLn2C?^K)}k^GbkR1_tM%)Wnk16ovB4k_-iRPv3wPy;OFf zxT&X$V+hCfA?so5 bAs=AR@TZ*bPP1{OEy!d~S3j3^P6 + + + + + + + + diff --git a/LCARStrek/global/aboutReader.css b/LCARStrek/global/aboutReader.css index 27393b2e..b852c609 100644 --- a/LCARStrek/global/aboutReader.css +++ b/LCARStrek/global/aboutReader.css @@ -5,8 +5,20 @@ body { padding: 64px 0; max-width: 660px; - margin-left: auto; - margin-right: auto; + margin: 0 auto; +} + +@media (max-width: 785px) { + body { + padding-top: 64px; + -moz-padding-end: 0; + padding-bottom: 64px; + -moz-padding-start: 51px; + } +} + +body.loaded { + transition: color 0.4s, background-color 0.4s; } .light, @@ -27,11 +39,13 @@ body { background-color: #f0ece7; } -.sans-serif { +.sans-serif, +.sans-serif .remove-button { font-family: "Fira Sans", Helvetica, Arial, sans-serif; } -.serif { +.serif, +.serif .remove-button { font-family: "Charis SIL", Georgia, "Times New Roman", serif; } @@ -79,7 +93,7 @@ body { display: none; text-align: center; width: 100%; - font-size: 0.9rem; + font-size: 0.9em; } /* Header */ @@ -90,8 +104,8 @@ body { } .domain { - font-size: 0.9rem; - line-height: 1.33rem; + font-size: 0.9em; + line-height: 1.48em; padding-bottom: 4px; font-family: "Fira Sans", Helvetica, Arial, sans-serif; text-decoration: none; @@ -109,16 +123,16 @@ body { } .header > h1 { - font-size: 1.33rem; - line-height: 1.66rem; + font-size: 1.33em; + line-height: 1.25em; width: 100%; margin: 30px 0; padding: 0; } .header > .credits { - font-size: 0.9rem; - line-height: 1.33rem; + font-size: 0.9em; + line-height: 1.48em; margin: 0 0 30px 0; padding: 0; font-style: italic; @@ -126,10 +140,10 @@ body { /* Content */ -.content { +#moz-reader-content { display: none; - font-size: 1rem; - line-height: 1.44rem; + font-size: 1em; + line-height: 1.6em; } .content h1, @@ -138,19 +152,19 @@ body { font-weight: bold; } -.content h1 { - font-size: 1.33rem; - line-height: 1.66rem; +#moz-reader-content h1 { + font-size: 1.33em; + line-height: 1.25em; } -.content h2 { - font-size: 1.1rem; - line-height: 1.66rem; +#moz-reader-content h2 { + font-size: 1.1em; + line-height: 1.51em; } -.content h3 { - font-size: 1rem; - line-height: 1.66rem; +#moz-reader-content h3 { + font-size: 1em; + line-height: 1.66em; } .content a { @@ -171,26 +185,34 @@ body { } .content p, -.content img, .content code, .content pre, .content blockquote, .content ul, .content ol, -.content li { +.content li, +.content figure, +.content .wp-caption { margin: 0 0 30px 0; } -.content .wp-caption, -.content figure { - margin: 0 30px 30px 30px; +.content p > img:only-child, +.content p > a:only-child > img:only-child, +.content .wp-caption img, +.content figure img { + display: block; +} + +.content img[moz-reader-center] { + margin-left: auto; + margin-right: auto; } -.content .caption, -.content .wp-caption-text, -.content figcaption { - font-size: 0.9rem; - line-height: 1.33rem; +#moz-reader-content .caption, +#moz-reader-content .wp-caption-text, +#moz-reader-content figcaption { + font-size: 0.9em; + line-height: 1.48em; font-style: italic; } @@ -212,6 +234,13 @@ body { .dark > .container > .content blockquote { -moz-border-start: 2px solid #eeeeee; } +.dark *::-moz-selection { + background-color: #FFFFFF; + color: #0095DD; +} +.dark a::-moz-selection { + color: #DD4800; +} .content ul, .content ol { @@ -220,7 +249,7 @@ body { .content ul { -moz-padding-start: 30px; - list-style: disk; + list-style: disc; } .content ol { @@ -234,30 +263,34 @@ body { font-family: "Fira Sans", Helvetica, Arial, sans-serif; position: fixed; height: 100%; - top: 0px; - left: 0px; + top: 0; + left: 0; margin: 0; padding: 0; list-style: none; - background-color: #FBFBFB; + background-color: #fbfbfb; -moz-user-select: none; - border-right: 1px solid #B5B5B5; + border-right: 1px solid #b5b5b5; } .button { - color: white; display: block; - background-position: center; background-size: 24px 24px; background-repeat: no-repeat; - background-color: transparent; + color: #333; + background-color: #fbfbfb; height: 40px; + padding: 0; +} + +.toolbar .button { width: 40px; + background-position: center; + margin-right: -1px; border-top: 0; border-left: 0; - border-right: 0; + border-right: 1px solid #b5b5b5; border-bottom: 1px solid #c1c1c1; - padding: 0; } .button[hidden] { @@ -267,36 +300,32 @@ body { .dropdown { text-align: center; list-style: none; - margin: 0px; - padding: 0px; + margin: 0; + padding: 0; } .dropdown li { - margin: 0px; - padding: 0px; + margin: 0; + padding: 0; } /*======= Font style popup =======*/ .dropdown-popup { - min-width: 250px; + min-width: 300px; text-align: start; position: absolute; left: 48px; /* offset to account for toolbar width */ z-index: 1000; - background-color: #FBFBFB; + background-color: #fbfbfb; visibility: hidden; border-radius: 4px; - border: 1px 1px 0 1px solid #B5B5B5; - box-shadow: 0px 1px 12px #666; + border: 1px 1px 0 1px solid #b5b5b5; + box-shadow: 0 1px 12px #666; } .dropdown-popup > hr { - width: 100%; - height: 0px; - border: 0px; - border-top: 1px solid #B5B5B5; - margin: 0; + display: none; } .open > .dropdown-popup { @@ -337,17 +366,15 @@ body { #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; + border: 0; } #font-type-buttons > button, #font-size-buttons > button { width: 50%; background-color: transparent; + border-left: 1px solid #B5B5B5; + border-bottom: 1px solid #B5B5B5; } #color-scheme-buttons > button { @@ -355,40 +382,62 @@ body { font-size: 14px; } +#color-scheme-buttons > .dark-button { + margin-top: -1px; + height: 61px; +} + #font-type-buttons > button:first-child, -#font-size-buttons > button:first-child, -#color-scheme-buttons > button:first-child { - border-left: 0px; +#font-size-buttons > button:first-child { + border-left: 0; } #font-type-buttons > button { display: inline-block; - font-size: 48px; + font-size: 58px; + height: 100px; +} + +/* Make the serif button content the same size as the sans-serif button content. */ +#font-type-buttons > .serif-button { + padding-top: 1px; + font-size: 60px; +} + +#font-size-buttons > button, +#color-scheme-buttons > button { + height: 60px; } #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; + box-shadow: inset 0 -3px 0 0 #fc6420; +} + +#font-type-buttons > button:active:hover, +#font-type-buttons > button.selected { + border-bottom: 1px solid #FC6420; } #font-type-buttons > button > div { color: #666; font-size: 12px; + margin-top: -4px; } .button:hover, #font-size-buttons > button:hover, #font-type-buttons > button:hover { - background-color: #EBEBEB; + background-color: #ebebeb; } .dropdown.open, .button:active, #font-size-buttons > button:active, #font-size-buttons > button.selected { - background-color: #DADADA; + background-color: #dadada; } /* Only used on Android */ @@ -404,12 +453,40 @@ body { .plus-button { background-color: transparent; border: 0; - height: 50px; background-size: 18px 18px; background-repeat: no-repeat; background-position: center; } +.footer { + height: 64px; + background-color: #ebebeb; + position: absolute; + left: 0; + width: 100%; + text-align: center; + padding: 12px 0; + box-sizing: border-box; + box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.35) inset; +} + +.sepia .footer { + background-color: #dedad4; +} + +.remove-button { + background-image: url("chrome://global/skin/reader/RM-Delete-24x24.svg"); + margin: 0 auto; + border: 1px solid #c1c1c1; + background-position: 10px 7px; + padding-left: 42px; + padding-right: 10px; + border-radius: 2px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); + font-size: 18px; +} + + /*======= Toolbar icons =======*/ /* Android-only controls */ @@ -418,15 +495,23 @@ body { } .close-button { - background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg"); + background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close"); 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-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover"); 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; } .style-button { @@ -460,4 +545,7 @@ body { .toolbar { display: none; } + .footer { + display: none; + } } diff --git a/LCARStrek/global/aboutSupport.css b/LCARStrek/global/aboutSupport.css index f1a003a4..d99ed071 100644 --- a/LCARStrek/global/aboutSupport.css +++ b/LCARStrek/global/aboutSupport.css @@ -137,7 +137,7 @@ td { overflow: hidden; } -#reset-box { +#action-box { background-color: #000000; border: 1px solid #9C9CFF; color: #FF9F00; @@ -148,10 +148,15 @@ td { -moz-margin-end: 0; padding: 16px; width: 30%; - visibility: hidden; } -#reset-box:-moz-dir(rtl) { +#action-box, +#reset-box, +#safe-mode-box { + display: none; +} + +#action-box:-moz-dir(rtl) { float: left; } @@ -159,7 +164,7 @@ td { margin-top: 0; } -#reset-box > button { +#action-box > button { display: block; } diff --git a/LCARStrek/global/checkbox.css b/LCARStrek/global/checkbox.css index 759ec780..3a60c41c 100644 --- a/LCARStrek/global/checkbox.css +++ b/LCARStrek/global/checkbox.css @@ -47,6 +47,7 @@ checkbox:-moz-focusring > .checkbox-label-center-box > .checkbox-label-box { /* ..... disabled state ..... */ +checkbox[disabled="true"] > .checkbox-check, checkbox[disabled="true"] > .checkbox-spacer-box > .checkbox-check { border: 1px solid #8050B0; background-color: #000000; @@ -61,16 +62,26 @@ checkbox[disabled="true"] > .checkbox-label-center-box > .checkbox-label-box { .checkbox-check { border-radius: 2px; border: 1px solid #FF9F00; - width: 12px; - height: 12px; + width: 1em; + height: 1em; + min-width: 12px; + min-height: 12px; background: transparent 50% 50% no-repeat; } +checkbox > .checkbox-check { + -moz-margin-end: 4px; +} + +checkbox:not([disabled="true"]):hover > .checkbox-check, +checkbox:not([disabled="true"]):hover:active > .checkbox-check, checkbox:not([disabled="true"]):hover > .checkbox-spacer-box > .checkbox-check, checkbox:not([disabled="true"]):hover:active > .checkbox-spacer-box > .checkbox-check { border: 1px solid #FFCF00; } +checkbox:not([disabled="true"]):hover > .checkbox-label-box, +checkbox:not([disabled="true"]):hover:active > .checkbox-label-box, checkbox:not([disabled="true"]):hover > .checkbox-label-center-box > .checkbox-label-box, checkbox:not([disabled="true"]):hover:active > .checkbox-label-center-box > .checkbox-label-box { color: #FFCF00; @@ -78,16 +89,20 @@ checkbox:not([disabled="true"]):hover:active > .checkbox-label-center-box > .che /* ..... checked state ..... */ +checkbox[checked="true"] > .checkbox-check, checkbox[checked="true"] > .checkbox-spacer-box > .checkbox-check { background-image: url("chrome://global/skin/checkbox/cbox-check.gif"); } +checkbox[checked="true"]:hover > .checkbox-check, +checkbox[checked="true"]:hover:active > .checkbox-check, checkbox[checked="true"]:hover > .checkbox-spacer-box > .checkbox-check, checkbox[checked="true"]:hover:active > .checkbox-spacer-box > .checkbox-check { background-image: url("chrome://global/skin/checkbox/cbox-check-hover.gif"); } -checkbox[checked="true"][disabled="true"] > .checkbox-spacer-box > .checkbox-check { +checkbox[checked="true"][disabled="true"] .checkbox-check, +checkbox[checked="true"][disabled="true"] > .checkbox-spacer-box > > .checkbox-check { background-image: url("chrome://global/skin/checkbox/cbox-check-disabled.gif") !important; } @@ -114,12 +129,18 @@ caption > checkbox:not([disabled="true"]):hover:active > .checkbox-label-center- color: inherit; } +caption > checkbox:not([disabled="true"]) > .checkbox-check, +caption > checkbox:not([disabled="true"]):hover > .checkbox-check, +caption > checkbox:not([disabled="true"]):hover:active > .checkbox-check, caption > checkbox:not([disabled="true"]) > .checkbox-spacer-box > .checkbox-check, caption > checkbox:not([disabled="true"]):hover > .checkbox-spacer-box > .checkbox-check, caption > checkbox:not([disabled="true"]):hover:active > .checkbox-spacer-box > .checkbox-check { border-color: #000000; } +caption > checkbox[checked="true"] > .checkbox-check, +caption > checkbox[checked="true"]:hover > .checkbox-check, +caption > checkbox[checked="true"]:hover:active > .checkbox-check, caption > checkbox[checked="true"] > .checkbox-spacer-box > .checkbox-check, caption > checkbox[checked="true"]:hover > .checkbox-spacer-box > .checkbox-check, caption > checkbox[checked="true"]:hover:active > .checkbox-spacer-box > .checkbox-check { diff --git a/LCARStrek/global/checkbox/cbox-check-inverted.gif b/LCARStrek/global/checkbox/cbox-check-inverted.gif new file mode 100755 index 0000000000000000000000000000000000000000..f5b94ba6133622856944216d96d85fd7ec6f776a GIT binary patch literal 54 zcmZ?wbhEHbjEB<6* label -{ - -moz-margin-start: 0; -} - -#textbox -{ - -moz-margin-end: 0; -} diff --git a/LCARStrek/global/icons/warning.svg b/LCARStrek/global/icons/warning.svg new file mode 100644 index 00000000..57d228ad --- /dev/null +++ b/LCARStrek/global/icons/warning.svg @@ -0,0 +1,12 @@ + + + + + + + + \ No newline at end of file diff --git a/LCARStrek/global/in-content/common.css b/LCARStrek/global/in-content/common.css index 3faf41f1..f06fc51c 100644 --- a/LCARStrek/global/in-content/common.css +++ b/LCARStrek/global/in-content/common.css @@ -8,7 +8,8 @@ @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; html|body, -xul|page { +xul|page, +xul|window { font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; -moz-appearance: none; background-color: #000000; @@ -25,13 +26,20 @@ html|h1 { font-size: 2.5em; font-weight: lighter; line-height: 1.2; + color: #9C9CFF; margin: 0; margin-bottom: .5em; } +html|hr { + border-style: solid none none none; + border-color: #9C9CFF; +} + xul|caption { } +xul|caption > xul|checkbox, xul|caption > xul|label { margin-top: 0; margin-bottom: 0; @@ -58,9 +66,7 @@ xul|prefpane > xul|*.content-box { xul|groupbox { -moz-appearance: none; border: none; - margin-top: 15px; - margin-bottom: 15px; - -moz-margin-end: 0; + margin: 15px 0 0; -moz-padding-start: 0; -moz-padding-end: 0; font-size: 1.25rem; @@ -201,7 +207,7 @@ xul|menulist > xul|*.menulist-label-box { padding-left: 10px !important; } -xul|menulist > xul|*.menulist-label-box > xul|*.menulist-icon { +xul|menulist > xul|*.menulist-label-box > xul|*.menulist-icon[src] { -moz-margin-end: 5px; } @@ -363,7 +369,6 @@ xul|button[type="menu"] > xul|menupopup xul|menuseparator { height: 30px; color: #333; line-height: 20px; - text-shadow: 0 1px 1px #fefffe; padding-right: 10px; padding-left: 10px; border: 1px solid #c1c1c1; @@ -388,34 +393,52 @@ xul|textbox[disabled="true"] { /* Links */ html|a, -xul|*.text-link, -xul|*.inline-link { +.text-link, +.inline-link { /* line-height: 22px;*/ color: #3333FF; text-decoration: none; } html|a:hover, -xul|*.text-link:hover, -xul|*.inline-link:hover { +.text-link:hover, +.inline-link:hover { color: #FFCF00; text-decoration: underline; } html|a:hover:active, -xul|*.text-link:hover:active, -xul|*.inline-link:hover:active { +.text-link:hover:active, +.inline-link:hover:active { color: #FF9F00; text-decoration: underline; } /* Checkboxes and radio buttons */ /* +/ Hide the actual checkbox / +html|input[type="checkbox"] { + opacity: 0; + position: absolute; +} + +/ Create a box to style as the checkbox / +html|input[type="checkbox"] + html|label:before { + display: inline-block; + content: ""; + vertical-align: middle; +} + +html|input[type="checkbox"] + html|label { + line-height: 0px; +} + xul|checkbox { -moz-margin-start: 0; } -xul|*.checkbox-check { +xul|*.checkbox-check, +html|input[type="checkbox"] + html|label:before { -moz-appearance: none; width: 23px; height: 23px; @@ -430,7 +453,8 @@ xul|*.checkbox-check { box-shadow: 0 1px 1px 0 #fff, inset 0 2px 0 0 rgba(0,0,0,0.03); } -xul|checkbox:not([disabled="true"]):hover > xul|*.checkbox-check { +xul|checkbox:not([disabled="true"]):hover > xul|*.checkbox-check, +html|input[type="checkbox"]:not(:disabled) + html|label:hover:before { border-color: #0095dd; } @@ -440,7 +464,12 @@ xul|*.checkbox-check[checked] { linear-gradient(#fff, rgba(255,255,255,0.8)) !important; } -xul|checkbox[disabled="true"] > xul|*.checkbox-check { +html|input[type="checkbox"]:checked + html|label:before { + background-image: url("chrome://global/skin/in-content/check.svg#check"), linear-gradient(#fff, rgba(255,255,255,0.8)) !important; +} + +xul|checkbox[disabled="true"] > xul|*.checkbox-check, +html|input[type="checkbox"]:disabled + html|label { opacity: 0.5; } @@ -518,15 +547,18 @@ xul|*#categories[keyboard-navigation="true"]:-moz-focusring > xul|*.category[cur border-top: 1px #ffffff dotted; border-bottom: 1px #ffffff dotted; } - +*/ *|*.category-name { +/* line-height: 22px; font-size: 1.25rem; padding-bottom: 2px; -moz-padding-start: 9px; margin: 0; +*/ + -moz-user-select: none; } - +/* *|*.category-icon { width: 24px; height: 24px; @@ -546,6 +578,7 @@ xul|*#categories[keyboard-navigation="true"]:-moz-focusring > xul|*.category[cur font-weight: normal; line-height: 40px; margin: 0; + -moz-user-select: none; } /* File fields */ @@ -645,6 +678,11 @@ xul|tree { border: 1px solid #c1c1c1; } +xul|tree:-moz-focusring, +xul|richlistbox:-moz-focusring { + border: 1px dotted #0095dd; +} + xul|listheader, xul|treecols { -moz-appearance: none; @@ -662,7 +700,7 @@ xul|treecolpicker { padding: 5px 10px; } -xul|treecol:not([hideheader="true"]):hover, +xul|treecol:not([hideheader="true"]):not([sortable="false"]):hover, xul|treecolpicker:hover { background-color: #dadada; color: #333; @@ -676,20 +714,14 @@ xul|treecolpicker { } xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection] { - list-style-image: url("chrome://global/skin/in-content/sorter.png"); - width: 12px; - height: 8px; + list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown"); + width: 18px; + height: 18px; } -xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection="descending"] { +xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection="ascending"] { 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 === */ /* @@ -698,6 +730,7 @@ xul|caption { } xul|button, +html|button, xul|colorpicker[type="button"], xul|menulist { margin: 2px 4px; @@ -714,7 +747,6 @@ xul|checkbox { xul|radio { -moz-binding: url("chrome://global/content/bindings/radio.xml#radio"); - -moz-margin-start: 0; -moz-padding-start: 0; } @@ -724,8 +756,8 @@ xul|*.checkbox-icon { } */ html|a:-moz-focusring, -xul|*.text-link:-moz-focusring, -xul|*.inline-link:-moz-focusring { +.text-link:-moz-focusring, +.inline-link:-moz-focusring { /* Don't specify the outline-color, we should always use initial value. */ outline: 1px dotted; } diff --git a/LCARStrek/global/in-content/info-pages.css b/LCARStrek/global/in-content/info-pages.css index e21ddebc..b75ddd4a 100644 --- a/LCARStrek/global/in-content/info-pages.css +++ b/LCARStrek/global/in-content/info-pages.css @@ -77,6 +77,10 @@ ul { min-width: 150px; } +.button-container > button:first-child { + -moz-margin-start: 0; +} + /* Trees */ tree { min-height: 12em; diff --git a/LCARStrek/global/media/videoClickToPlayButton.svg b/LCARStrek/global/media/videoClickToPlayButton.svg index d5e21c78..62ee0448 100644 --- a/LCARStrek/global/media/videoClickToPlayButton.svg +++ b/LCARStrek/global/media/videoClickToPlayButton.svg @@ -1,3 +1,7 @@ + + - - - - - - - + - + style="fill:#000000;" /> + - + style="filter:url(#dropShadow);" /> - + + style="fill:url(#whiteGradient);" /> + style="fill:#000000;fill-opacity:.3;" /> + style="fill:#402800;fill-opacity:.8;" /> diff --git a/LCARStrek/mozapps/extensions/extensions.css b/LCARStrek/mozapps/extensions/extensions.css index 85b5523f..60488483 100644 --- a/LCARStrek/mozapps/extensions/extensions.css +++ b/LCARStrek/mozapps/extensions/extensions.css @@ -320,14 +320,14 @@ } #header-utils-btn { - list-style-image: url("chrome://mozapps/skin/extensions/utilities.png"); + list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg#utilities"); -moz-margin-end: 16px; } #header-utils-btn:hover, #header-utils-btn:hover:active, #header-utils-btn[open="true"] { - list-style-image: url("chrome://mozapps/skin/extensions/utilities-hover.png"); + list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg#utilities-hover"); } #header-utils-btn > .button-box > .button-menu-dropmarker { diff --git a/LCARStrek/mozapps/extensions/utilities-hover.png b/LCARStrek/mozapps/extensions/utilities-hover.png deleted file mode 100644 index e8ab8cd1856a8ec73da08cde5fafbf66d7894232..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 248 zcmeAS@N?(olHy`uVBq!ia0vp^f*{Pu3?vyBU)>3!ii6yp7}lMWc?smO1^9%xZr|`3 z$W+^-9S@Q&3GxeOaCmkj4a7xpK`XVW*uXfTkZfj1M2T~LZflFz;kcfhkdcs(U~}L=LPbyG!GH41&41)Mrfp74STQj@;fL~lhGmX5Gh{quJ#0PX a1MC_8l=IzbHjcCfne6H6=d#Wzp$Py3wL-@L diff --git a/LCARStrek/mozapps/extensions/utilities.png b/LCARStrek/mozapps/extensions/utilities.png deleted file mode 100644 index 1aaba92e44d6542284fec9e2613009127eb57380..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 248 zcmeAS@N?(olHy`uVBq!ia0vp^f*{Pu3?vyBU)>3!ii6yp7}lMWc?smO1^9%xZrc(3 ze?G&FT^wv6>5?G7UYh7ML)4 + + + + + + + + -- 2.43.0