aboutsummaryrefslogtreecommitdiff
path: root/arc-firefox-theme/chrome/browser/readinglist
diff options
context:
space:
mode:
Diffstat (limited to 'arc-firefox-theme/chrome/browser/readinglist')
-rw-r--r--arc-firefox-theme/chrome/browser/readinglist/icons.svg56
-rw-r--r--arc-firefox-theme/chrome/browser/readinglist/readinglist-icon.svg9
-rw-r--r--arc-firefox-theme/chrome/browser/readinglist/sidebar.css148
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);
+}