From bcb9d005748b2ce85edf14e01a0ebfe1cf0973cf Mon Sep 17 00:00:00 2001 From: Robert Kaiser Date: Sat, 11 Apr 2015 01:56:48 +0200 Subject: [PATCH] first stab on supporting reader view and reding list --- LCARStrek/browser/browser.css | 88 +++++++++- LCARStrek/browser/readerMode.svg | 34 ++++ LCARStrek/browser/readinglist/icons.svg | 56 +++++++ .../browser/readinglist/readinglist-icon.svg | 9 ++ LCARStrek/browser/readinglist/sidebar.css | 150 ++++++++++++++++++ LCARStrek/global/reader/RM-Add-24x24.svg | 6 + LCARStrek/global/reader/RM-Close-24x24.svg | 31 ++++ LCARStrek/global/reader/RM-Delete-24x24.svg | 6 + LCARStrek/global/reader/RM-Minus-24x24.svg | 39 +++++ LCARStrek/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 +++++ 13 files changed, 568 insertions(+), 1 deletion(-) create mode 100644 LCARStrek/browser/readerMode.svg create mode 100644 LCARStrek/browser/readinglist/icons.svg create mode 100644 LCARStrek/browser/readinglist/readinglist-icon.svg create mode 100644 LCARStrek/browser/readinglist/sidebar.css create mode 100644 LCARStrek/global/reader/RM-Add-24x24.svg create mode 100644 LCARStrek/global/reader/RM-Close-24x24.svg create mode 100644 LCARStrek/global/reader/RM-Delete-24x24.svg create mode 100644 LCARStrek/global/reader/RM-Minus-24x24.svg create mode 100644 LCARStrek/global/reader/RM-Plus-24x24.svg create mode 100644 LCARStrek/global/reader/RM-Reading-List-24x24.svg create mode 100644 LCARStrek/global/reader/RM-Type-Controls-24x24.svg create mode 100644 LCARStrek/global/reader/RM-Type-Controls-Arrow.svg diff --git a/LCARStrek/browser/browser.css b/LCARStrek/browser/browser.css index 0f0e96ef..60c6a306 100644 --- a/LCARStrek/browser/browser.css +++ b/LCARStrek/browser/browser.css @@ -2347,6 +2347,62 @@ richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url- -moz-image-region: rect(0, 32px, 16px, 16px); } +/* === BEGIN readinglist.inc.css === */ + +/* Reading List button */ + +#urlbar:not([focused]):not(:hover) #readinglist-addremove-button { + opacity: 0; + width: 0px; +} + +#readinglist-addremove-button { + list-style-image: url("chrome://browser/skin/readinglist/icons.svg#addpage"); + -moz-image-region: rect(0, 14px, 14px, 0); + transition: width 150ms ease-in-out, opacity 150ms ease-in-out 150ms; + opacity: 1; + width: 20px; +} + +#readinglist-addremove-button:hover { + list-style-image: url("chrome://browser/skin/readinglist/icons.svg#addpage-hover"); +} + +#readinglist-addremove-button:active { + list-style-image: url("chrome://browser/skin/readinglist/icons.svg#addpage-active"); +} + +#readinglist-addremove-button[already-added="true"] { + list-style-image: url("chrome://browser/skin/readinglist/icons.svg#alreadyadded"); +} + +#readinglist-addremove-button[already-added="true"]:hover { + list-style-image: url("chrome://browser/skin/readinglist/icons.svg#alreadyadded-hover"); +} + +#readinglist-addremove-button[already-added="true"]:active { + list-style-image: url("chrome://browser/skin/readinglist/icons.svg#alreadyadded-active"); +} + +/* === END readinglist.inc.css === */ + +/* Reader mode button */ + +#reader-mode-button { + list-style-image: url("chrome://browser/skin/readerMode.svg"); + -moz-image-region: rect(0, 16px, 16px, 0); +} + +#reader-mode-button:hover, +#reader-mode-button[readeractive]:hover { + -moz-image-region: rect(0, 32px, 16px, 16px); +} + +#reader-mode-button:hover:active, +#reader-mode-button[readeractive] { + -moz-image-region: rect(0, 48px, 16px, 32px); +} + /* social share panel */ .social-share-frame { @@ -2528,8 +2584,22 @@ toolbarbutton[type="socialmark"] > .toolbarbutton-icon { /* ::::: content area ::::: */ +#sidebar-box { + background-color: #9C9CFF; + color: #000000; +} + #sidebar { - background-color: Window; + background-color: #000000; +} + +#sidebar-splitter { + -moz-margin-start: 0; +} + +#sidebar-header { + color: #000000; + padding: 2px; } #sidebar-title { @@ -2548,6 +2618,16 @@ toolbarbutton[type="socialmark"] > .toolbarbutton-icon { list-style-image: url("chrome://global/skin/icons/close-button-hover.gif"); } +#sidebar-splitter:-moz-locale-dir(ltr), +#sidebar:-moz-locale-dir(ltr) { + border-radius: 0 5px 0 0; +} + +#sidebar-splitter:-moz-locale-dir(rtl), +#sidebar:-moz-locale-dir(rtl) { + border-radius: 5px 0 0 0; +} + .browserContainer > findbar { /* background-color: -moz-dialog; @@ -3448,6 +3528,12 @@ notification[value="translation"] { -moz-image-region: auto; } +#menu_readingList, +#BMB_readingList { + list-style-image: url("chrome://browser/skin/readinglist/readinglist-icon.svg"); + -moz-image-region: auto; +} + /* ::::: Keyboard UI Panel ::::: */ .KUI-panel { diff --git a/LCARStrek/browser/readerMode.svg b/LCARStrek/browser/readerMode.svg new file mode 100644 index 00000000..b08904c3 --- /dev/null +++ b/LCARStrek/browser/readerMode.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/LCARStrek/browser/readinglist/icons.svg b/LCARStrek/browser/readinglist/icons.svg new file mode 100644 index 00000000..d152cd79 --- /dev/null +++ b/LCARStrek/browser/readinglist/icons.svg @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/LCARStrek/browser/readinglist/readinglist-icon.svg b/LCARStrek/browser/readinglist/readinglist-icon.svg new file mode 100644 index 00000000..83e2a66e --- /dev/null +++ b/LCARStrek/browser/readinglist/readinglist-icon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/LCARStrek/browser/readinglist/sidebar.css b/LCARStrek/browser/readinglist/sidebar.css new file mode 100644 index 00000000..b0f8c3bf --- /dev/null +++ b/LCARStrek/browser/readinglist/sidebar.css @@ -0,0 +1,150 @@ +/* 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/. */ + +/* === BEGIN readinglist.inc.css === */ + +:root, body { + overflow-x: hidden; +} + +body { + margin: 0; + font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; + background-color: #000000; + color: #FF9F00; + -moz-user-select: none; + overflow: hidden; +} + +#emptyListInfo { + cursor: default; + padding: 3em 1em; + text-align: center; +} + +.item { + display: flex; + flex-flow: row; + cursor: pointer; + padding: 6px; + opacity: 0; + max-height: 0; + transition: opacity 150ms ease-in-out, max-height 150ms ease-in-out 150ms; +} + +.item.active { + background: #A09090; + color: #000000; +} + +.item.selected { + background: #008484; + color: #000000; +} + +.item:hover { + background: #FFCF00; + color: #000000; +} + +.item-thumb-container { + min-width: 64px; + max-width: 64px; + min-height: 40px; + max-height: 40px; + border: 1px solid white; + box-shadow: 0px 1px 2px rgba(0,0,0,.35); + margin: 5px; + background-color: #A09090; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + background-image: url("chrome://branding/content/silhouette-40.svg"); +} + +.item-thumb-container.preview-available { + background-color: #fff; + background-size: cover; +} + +.item-summary-container { + display: flex; + flex-flow: column; + -moz-padding-start: 4px; + overflow: hidden; + flex-grow: 1; +} + +.item-title-lines { + display: flex; +} + +.item-title { + overflow: hidden; + max-height: 2.8em; + line-height: 1.4; + flex-grow: 1; +} + +.item-domain { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + max-height: 1.4em; + color: #3333FF; +} + +.item:hover .item-domain { + color: #000000; +} + +.item:not(:hover):not(.selected) .remove-button { + visibility: hidden; +} + +.remove-button { + padding: 0; + -moz-margin-end: 2px; + border-radius: 3px; + width: 16px; + height: 16px; + background-size: contain; + background-color: transparent; + border-width: 0; +} + +.item.visible { + opacity: 1; + max-height: 80px; + transition: max-height 250ms ease-in-out, opacity 250ms ease-in-out 250ms; +} + +/* === END readinglist.inc.css === */ + +.item { + -moz-padding-end: 0; +} + +.item-title { + margin: 1px 0 0; +} + +.item-title, .item-domain { + -moz-margin-end: 6px; +} + +.remove-button { + background-color: #000000; + background-image: -moz-image-rect(url("chrome://global/skin/icons/close.png"), 0, 16, 16, 0); +} + +.remove-button:hover { + background-color: #FFCF00; + background-image: -moz-image-rect(url("chrome://global/skin/icons/close.png"), 0, 32, 16, 16); +} + +.remove-button:hover:active { + background-color: #FF9F00; + background-image: -moz-image-rect(url("chrome://global/skin/icons/close.png"), 0, 32, 16, 16); +} diff --git a/LCARStrek/global/reader/RM-Add-24x24.svg b/LCARStrek/global/reader/RM-Add-24x24.svg new file mode 100644 index 00000000..66551ef1 --- /dev/null +++ b/LCARStrek/global/reader/RM-Add-24x24.svg @@ -0,0 +1,6 @@ + + + + diff --git a/LCARStrek/global/reader/RM-Close-24x24.svg b/LCARStrek/global/reader/RM-Close-24x24.svg new file mode 100644 index 00000000..b0674b2d --- /dev/null +++ b/LCARStrek/global/reader/RM-Close-24x24.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/LCARStrek/global/reader/RM-Delete-24x24.svg b/LCARStrek/global/reader/RM-Delete-24x24.svg new file mode 100644 index 00000000..6010fbe7 --- /dev/null +++ b/LCARStrek/global/reader/RM-Delete-24x24.svg @@ -0,0 +1,6 @@ + + + + diff --git a/LCARStrek/global/reader/RM-Minus-24x24.svg b/LCARStrek/global/reader/RM-Minus-24x24.svg new file mode 100644 index 00000000..9da7e03b --- /dev/null +++ b/LCARStrek/global/reader/RM-Minus-24x24.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/LCARStrek/global/reader/RM-Plus-24x24.svg b/LCARStrek/global/reader/RM-Plus-24x24.svg new file mode 100644 index 00000000..249912a1 --- /dev/null +++ b/LCARStrek/global/reader/RM-Plus-24x24.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/LCARStrek/global/reader/RM-Reading-List-24x24.svg b/LCARStrek/global/reader/RM-Reading-List-24x24.svg new file mode 100644 index 00000000..1f21efd5 --- /dev/null +++ b/LCARStrek/global/reader/RM-Reading-List-24x24.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/LCARStrek/global/reader/RM-Type-Controls-24x24.svg b/LCARStrek/global/reader/RM-Type-Controls-24x24.svg new file mode 100644 index 00000000..a25429ad --- /dev/null +++ b/LCARStrek/global/reader/RM-Type-Controls-24x24.svg @@ -0,0 +1,23 @@ + + + + + + + diff --git a/LCARStrek/global/reader/RM-Type-Controls-Arrow.svg b/LCARStrek/global/reader/RM-Type-Controls-Arrow.svg new file mode 100644 index 00000000..9094d8a3 --- /dev/null +++ b/LCARStrek/global/reader/RM-Type-Controls-Arrow.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -- 2.35.3