diff options
Diffstat (limited to 'toolkit/themes/shared/aboutReaderPocket.css')
| -rw-r--r-- | toolkit/themes/shared/aboutReaderPocket.css | 246 |
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; + } +} |