diff options
Diffstat (limited to 'arc-firefox-theme/chrome/browser/readinglist')
3 files changed, 213 insertions, 0 deletions
diff --git a/arc-firefox-theme/chrome/browser/readinglist/icons.svg b/arc-firefox-theme/chrome/browser/readinglist/icons.svg new file mode 100644 index 0000000..6aa0159 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/readinglist/icons.svg @@ -0,0 +1,56 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + viewBox="0 0 14 14" + xml:space="preserve"> + + <defs> + <style type="text/css"> + use:not(:target) { + display: none; + } + + #addpage, #alreadyadded { + fill: #808080; + } + #addpage-hover, #alreadyadded-hover { + fill: #555555; + } + #addpage-active, #alreadyadded-active { + fill: #0095DD; + } + </style> + + <mask id="plus-mask"> + <rect width="100%" height="100%" fill="white"/> + <rect x="3" y="6" width="8" height="2"/> + <rect x="6" y="3" width="2" height="8"/> + </mask> + + <mask id="minus-mask"> + <rect width="100%" height="100%" fill="white"/> + <rect x="3" y="6" width="8" height="2"/> + </mask> + + <g id="addpage-shape"> + <circle cx="7" cy="7" r="6" mask="url(#plus-mask)"/> + </g> + + <g id="removepage-shape"> + <circle cx="7" cy="7" r="6" mask="url(#minus-mask)"/> + </g> + + </defs> + + <use id="addpage" xlink:href="#addpage-shape"/> + <use id="addpage-hover" xlink:href="#addpage-shape"/> + <use id="addpage-active" xlink:href="#addpage-shape"/> + + <use id="alreadyadded" xlink:href="#removepage-shape"/> + <use id="alreadyadded-hover" xlink:href="#removepage-shape"/> + <use id="alreadyadded-active" xlink:href="#removepage-shape"/> + +</svg> diff --git a/arc-firefox-theme/chrome/browser/readinglist/readinglist-icon.svg b/arc-firefox-theme/chrome/browser/readinglist/readinglist-icon.svg new file mode 100644 index 0000000..0a24a67 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/readinglist/readinglist-icon.svg @@ -0,0 +1,9 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16"> + <rect x="4.8" y="6.4" fill="#808080" width="11.2" height="3.2"/> + <rect x="4.8" y="11.2" fill="#808080" width="11.2" height="3.2"/> + <rect x="4.8" y="1.6" fill="#808080" width="11.2" height="3.2"/> + <circle fill="#808080" cx="1.6" cy="3.2" r="1.6"/> + <circle fill="#808080" cx="1.6" cy="8" r="1.6"/> + <circle fill="#808080" cx="1.6" cy="12.8" r="1.6"/> +</svg> diff --git a/arc-firefox-theme/chrome/browser/readinglist/sidebar.css b/arc-firefox-theme/chrome/browser/readinglist/sidebar.css new file mode 100644 index 0000000..27fc12b --- /dev/null +++ b/arc-firefox-theme/chrome/browser/readinglist/sidebar.css @@ -0,0 +1,148 @@ +/* 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/. */ + + +:root, body { + overflow-x: hidden; +} + +body { + margin: 0; + font: message-box; + color: #333333; + -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: #FEFEFE; +} + +.item.selected { + background: #FDFDFD; +} + +.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: #ebebeb; + 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: #0095DD; +} + +.item:hover .item-domain { + color: #008ACB; +} + +.item:not(:hover):not(.selected) .remove-button { + visibility: hidden; +} + +.remove-button { + padding: 0; + width: 16px; + height: 16px; + min-width: 16px; + min-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; +} + +html { + border: 1px solid ThreeDShadow; + background-color: -moz-Field; + color: -moz-FieldText; + box-sizing: border-box; +} + +.item { + -moz-padding-end: 0; +} + +.item.active { + background-color: -moz-cellhighlight; + color: -moz-cellhighlighttext; +} + +.item-title { + margin: 1px 0 0; +} + +.item-title, .item-domain { + -moz-margin-end: 6px; +} + +.remove-button { + background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 16, 16, 0); +} + +.remove-button:hover { + background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 32, 16, 16); +} + +.remove-button:hover:active { + background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 48, 16, 32); +} |
