summaryrefslogtreecommitdiffstats
path: root/toolkit/themes/shared/aboutReaderPocket.css
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--toolkit/themes/shared/aboutReaderPocket.css246
1 files changed, 246 insertions, 0 deletions
diff --git a/toolkit/themes/shared/aboutReaderPocket.css b/toolkit/themes/shared/aboutReaderPocket.css
new file mode 100644
index 0000000000..ff163d7798
--- /dev/null
+++ b/toolkit/themes/shared/aboutReaderPocket.css
@@ -0,0 +1,246 @@
+/* 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/. */
+
+#pocket-cta-container {
+ box-shadow: 0 2px 8px var(--toolbar-box-shadow);
+ margin: calc(var(--body-padding) * -1);
+ margin-top: 20px;
+ padding: 32px 0;
+ position: relative;
+}
+
+.pocket-cta-container-cta-only #pocket-cta-only,
+.pocket-cta-container-cta-and-recs #pocket-cta-and-recs {
+ display: block;
+}
+
+.pocket-cta {
+ padding-inline-start: 90px;
+ background: url("chrome://global/skin/reader/RM-Pocket-Glyph.svg") no-repeat 16px 4px;
+ line-height: 1.5;
+}
+
+body.dark .pocket-cta {
+ background-image: url("chrome://global/skin/reader/RM-Pocket-Glyph-Dark.svg");
+}
+
+body.sepia .pocket-cta {
+ background-image: url("chrome://global/skin/reader/RM-Pocket-Glyph-Sepia.svg");
+}
+
+.pocket-cta-inner {
+ width: 936px;
+ margin: auto;
+ display: none;
+}
+
+.pocket-cta-header {
+ font-weight: 900;
+ font-size: 20px;
+ line-height: 1.2;
+}
+
+.pocket-cta-subhead {
+ margin: 4px 0 24px;
+ line-height: 1.5;
+}
+
+.pocket-btn {
+ background: #008078;
+ border-radius: 4px;
+ border: 0;
+ color: #FBFBFE;
+ font-size: 16px;
+ padding: 12px 24px;
+ text-decoration: none;
+ text-align: center;
+}
+
+.pocket-btn:hover,
+.pocket-btn:focus,
+.pocket-btn:active {
+ background: #004d48;
+}
+
+.pocket-dismiss-cta {
+ cursor: pointer;
+ display: inline-block;
+ position: absolute;
+ inset-inline-end: 80px;
+ top: calc(50% - 9px);
+ border: 0;
+ width: 18px;
+ height: 18px;
+ background: no-repeat center/contain url("chrome://global/skin/icons/close.svg");
+}
+
+.pocket-btn-add {
+ background: no-repeat left center url("chrome://global/skin/icons/pocket-outline.svg");
+ fill: #5B5B66;
+ background-size: 16px;
+ border: 0;
+ padding-inline-start: 20px;
+ font-size: 16px;
+ color: #5B5B66;
+ cursor: pointer;
+}
+
+body.dark .pocket-btn-add {
+ fill: #eee;
+ color: #eee;
+}
+
+.pocket-btn-add:hover,
+body.dark .pocket-btn-add:hover {
+ fill: #EF4056;
+}
+
+.pocket-btn-add.saved,
+body.dark .pocket-btn-add.saved {
+ background-image: url("chrome://global/skin/icons/pocket.svg");
+}
+
+.pocket-collapse-recs {
+ cursor: pointer;
+ background: no-repeat center/contain url("chrome://global/skin/icons/arrow-down.svg");
+ padding: 0;
+ margin: 0;
+ border: 0;
+ width: 18px;
+ height: 30px;
+}
+
+.pocket-collapse-recs.closed {
+ transform: rotate(-90deg);
+}
+
+.pocket-recs-top {
+ display: flex;
+}
+
+.pocket-recs-top .col:nth-child(2) {
+ padding-inline-start: 8px;
+}
+
+.pocket-recs {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 14px;
+}
+
+.pocket-recs.closed {
+ display: none;
+}
+
+.pocket-recs p {
+ text-align: start;
+}
+
+.pocket-rec {
+ padding: 16px 0;
+ width: 31%;
+}
+
+.pocket-rec-top {
+ display: flex;
+ text-decoration: none;
+}
+
+.pocket-sign-up-wrapper {
+ text-align: center;
+}
+
+.pocket-rec .pocket-rec-title {
+ font-style: normal;
+ font-weight: bold;
+ font-size: 16px;
+ line-height: 24px;
+ color: var(--main-foreground);
+}
+
+.pocket-rec .pocket-rec-thumb {
+ width: 66px;
+ height: 66px;
+ filter: drop-shadow(0px 2px 6px rgba(58, 57, 68, 0.2));
+ border-radius: 4px;
+ margin-inline-start: 16px;
+ visibility: hidden;
+}
+
+.pocket-rec .pocket-rec-thumb.pocket-rec-thumb-loaded {
+ visibility: visible;
+}
+
+.pocket-rec .pocket-rec-meta {
+ font-style: normal;
+ font-weight: normal;
+ font-size: 14px;
+ line-height: 20px;
+ color: #5B5B66;
+}
+
+body.dark .pocket-rec .pocket-rec-meta {
+ color: #eee;
+}
+
+.pocket-cta-container-logged-in #pocket-cta-only .pocket-sign-up,
+.pocket-cta-container-logged-out #pocket-cta-only .pocket-discover-more {
+ display: none;
+}
+
+/* Medium breakpoint */
+@media (max-width: 1128px) {
+ .pocket-cta-inner {
+ width: 600px;
+ }
+
+ .pocket-dismiss-cta {
+ inset-inline-end: 40px;
+ }
+
+ .pocket-rec {
+ width: 48%;
+ }
+
+ .pocket-rec:nth-child(3) {
+ display: none;
+ }
+}
+
+/* Small breakpoint */
+@media (max-width: 767px) {
+ .pocket-cta-inner {
+ width: 330px;
+ text-align: center;
+ }
+
+ .pocket-cta-header,
+ .pocket-cta-subhead,
+ .pocket-rec-bottom,
+ .pocket-rec-title {
+ text-align: start;
+ }
+
+ .pocket-cta {
+ padding: 66px 0 0;
+ background: url("chrome://global/skin/reader/RM-Pocket-Glyph.svg") no-repeat center 0;
+ }
+
+ .pocket-dismiss-cta {
+ inset-inline-end: 20px;
+ top: 20px;
+ }
+
+ .pocket-recs {
+ display: block;
+ }
+
+ .pocket-rec {
+ width: 100%;
+ }
+
+ .pocket-rec:nth-child(2) {
+ display: block;
+ }
+}