/* Table of contents -------------------------------------------------- - Placement - Share button - Toast */ /* Placement -------------------------------------------------- LinkStack prints the share button at the top of , before the page container, and right-aligns it with an align="right" attribute. The layout in skeleton-auto.css turns into the one flex column of the page, so the button is ordered back under the last link and centred here. -------------------------------------------------- */ .sharediv { order: 1; position: relative; z-index: 1; width: 100%; padding: 24px 0 0; text-align: center; } .sharediv > div { display: block; text-align: center; } /* the clipboard fallback target, never meant to be seen */ .copy-icon { display: none; } /* Share button -------------------------------------------------- */ /* LinkStack draws the icon as a Font Awesome glyph, so it sits on the text baseline rather than in a 20px box, and vertical-align: middle would drop it to the middle of the 46px line box. */ .share-icon { padding: 0 8px 0 0; vertical-align: -.1em; -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); } /* older LinkStack versions ship the icon as an image instead */ img.share-icon { width: 20px; height: 20px; padding-bottom: 3.5px; vertical-align: middle; } .sharebutton, sharebutton { display: inline-block !important; width: auto !important; min-width: 150px; height: 48px !important; box-sizing: border-box; padding: 0 22px !important; border: 1px solid var(--slate-line) !important; border-radius: 60px !important; background-color: transparent !important; color: var(--slate-ink) !important; font-family: inherit; font-size: 16px; font-weight: 600; line-height: 46px !important; letter-spacing: -.02em; text-align: center; text-decoration: none; vertical-align: middle; white-space: nowrap; box-shadow: none !important; cursor: pointer; /* !important because LinkStack's animations.css loads last and rewrites transition-property to transform on .button-hover */ transition: background-color 200ms var(--slate-ease), border-color 200ms var(--slate-ease) !important; } .sharebutton:hover, .sharebutton:focus, sharebutton:hover { border-color: var(--slate-accent-hover-rim) !important; background-color: var(--slate-surface) !important; color: var(--slate-ink-strong) !important; filter: none !important; outline: 0; } .sharebutton.sharebutton-primary, .sharebutton.sharebutton-primary:hover, .sharebutton.sharebutton-primary:focus { color: var(--slate-ink-strong) !important; filter: none !important; } /* LinkStack bounces the icon on hover through .icon-hover, this theme does not */ .sharebutton:hover .share-icon, .sharebutton:focus .share-icon, .sharebutton:active .share-icon { -webkit-transform: none !important; transform: none !important; animation: none !important; } /* Toast -------------------------------------------------- */ .toastdiv { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; } .toastbox { position: fixed; top: 105%; z-index: 2; width: 280px; padding: 12px; box-sizing: border-box; border: 1px solid var(--slate-accent-rim); border-radius: 12px; background-color: var(--slate-accent); color: var(--slate-ink); font-size: 15px; text-align: center; -webkit-transition: transform .3s linear; transition: transform .3s linear; } .toastbox.toast-tox--active { -webkit-transform: translateY(-150px); transform: translateY(-150px); }