memehub

:host {background: var(--schema-alert-background);color: var(--schema-alert-foreground);padding: 1.25em 1em;width: 100%;border: solid 1px rgba(0, 0, 0, 0.1);border-radius: 8px;display: block;}:host(.warn) {color: #856404;background-color: #fff3cd;border-color: #ffeeba;}p {display: block;margin: 0;opacity: 0.67;}

:host {width: 100%;opacity: 1;visibility: visible;margin-bottom: 1em;display: block;max-width: var(--max-width);width: 100%;margin: 0 auto 1em auto;overflow: hidden;animation: item-in var(--animation-time);transition: opacity var(--animation-time) cubic-bezier(0.25, 0.8, 0.25, 1);box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);border-radius: 2px;--item-label-width: 0.9em;}:host(:first-of-type) {margin-top: 1em;}:host([removed]) {pointer-events: none;touch-action: none;}:host([removed]) #pic {animation: die 0.3s;animation-fill-mode: both;}:host([removed]) #buttons,:host([removed]) #share {animation: fout 0.3s;animation-fill-mode: both;}:host([removed])::after {width: 100%;max-width: calc(var(--max-width) - 4em);content: "Post Removed Successfully";display: flex;color: white;background: var(--schema-danger);overflow: hidden;animation: notice 0.3s;animation-fill-mode: both;height: 0em;padding: 0 2em;align-items: center;}@keyframes fout {from {opacity: 1;}to {opacity: 0.2;}}@keyframes notice {from {height: 0em;}to {height: 3em;}}@keyframes die {0% {opacity: 1;transform: scale(1);}100% {opacity: 0.2;transform: scale(1);}}@keyframes item-in {from {opacity: 0;transform: translateY(1em);}to {opacity: 1;transform: translateY(0);}}:host([liked]) #like svg {animation: like var(--animation-time);fill: var(--schema-post-liked);}@keyframes like {0% {fill: var(--schema-post-button-fill);transform: scale(1);}50% {fill: var(--schema-post-liked);transform: scale(1.25);}100% {fill: var(--schema-post-liked);transform: scale(1);}}#buttons {display: flex;margin: 0.4em 0.56em;flex-flow: row nowrap;}#actions {display: flex;flex-flow: row nowrap;}button {display: flex;flex: auto 0 0;flex-flow: row nowrap;justify-content: center;align-items: center;cursor: pointer;background: none;border: 0;color: inherit;}button svg {height: 1.2em;margin-right: 0.25em;fill: var(--schema-post-button-fill);}#user {margin-left: auto;}#user img {width: 1em;height: 1em;border-radius: 50%;margin-left: 0.25em;}label {text-align: left;animation: label-in var(--animation-time);width: var(--item-label-width);color: var(--schema-post-counter-text);}label + label {margin-left: calc(-1 * var(--item-label-width));}label[destroy] {animation: label-out var(--animation-time);}#username {color: var(--schema-post-username-text);}@keyframes label-out {to {transform: translateY(-100%);opacity: 0;}}@keyframes label-in {from {transform: translateY(100%);opacity: 0;}}/** Fix icon sizes */#delete svg {height: 1.16em;}@media (max-width: 500px) {#buttons {flex-flow: column nowrap;}}

:host {display: flex;justify-content: center;align-items: center;}img {display: none;}:host([loaded]) component-loader {display: none;}:host([loaded]) img {display: block;width: 100%;height: 100%;object-fit: contain;}component-loader {font-size: 3em;}

:host {display: flex;flex-flow: row nowrap;align-items: center;}#load {font-size: 1em;width: 1em;height: 1em;display: block;border: transparent 2px solid;border-radius: 50%;border-left-color: var(--schema-loader);animation: 0.4s spin infinite;animation-timing-function: cubic-bezier(0.42, 0.15, 0.55, 0.71);margin: auto;}p {margin: 0;font-size: 0.66em;margin-left: 0.7em;}@keyframes spin {from {transform: rotate(0deg);}to {transform: rotate(360deg);}}

:host {display: flex;flex-flow: column nowrap;overflow: hidden;height: 100%;--tab-height: 2.5em;--tab-border-size: 2px;}#tabs {display: flex;flex-flow: row nowrap;}#container {flex: 1 1 100%;align-items: flex-start;height: calc(100% - var(--tab-height) - var(--tab-border-size));overflow-x: visible;display: flex;flex-flow: row nowrap;transform: translateX(calc(-100% * var(--active-tab)));transition: all var(--animation-time);}#tabs .tab {fill: grey;color: grey;flex: 1 1 100%;}#tabs .tab[active] {background: royalblue;color: white;fill: white;}#container > * {width: 100%;height: 100%;flex: 1 0 100%;}#footer {background: royalblue;color: white;}

:host {--tab-active-border-color: var(--schema-active);--tab-active-fill-color: var(--schema-active);--tab-inactive-fill-color: grey;--tab-active-background-color: transparent;--tab-inactive-background-color: transparent;--tab-border-size: 2px;--tab-height: 2.5em;display: flex;flex-flow: row nowrap;height: var(--tab-height);flex: auto 0 0;}svg {height: 1.5em;}.tab {color: var(--tab-inactive-fill-color);fill: var(--tab-inactive-fill-color);flex: 1 1 100%;border: solid var(--tab-border-size) transparent;background: var(--tab-inactive-background-color);display: flex;justify-content: center;align-items: center;}.tab[active] {background: var(--tab-active-background-color);color: var(--tab-active-fill-color);fill: var(--tab-active-fill-color);border-bottom-color: var(--tab-active-border-color);}svg + span {margin-left: 0.5em;}span {text-transform: uppercase;}

:host {background: var(--schema-updater-background);color: var(--schema-updater-foreground);animation: updateIn var(--animation-time);display: flex;flex-flow: row nowrap;padding: 1em 2em;}#text {flex: 1 1 100%;}component-modal-button {flex: 0 0 auto;}@keyframes updateIn {from {opacity: 0;transform: translateY(100%);}to {}}