Pocket / Getpocket.com: Enhanced CSS

/* Here be dragons */

html,
body,
.page-readersepia {
    background-color: #fffff8;
}

body,
.page-readersepia .reader_content,
.page-readersepia .reader_content h1,
.page-readersepia .reader_content h2,
.page-readersepia .reader_content h3,
.page-readersepia .reader_content h4,
.page-readersepia .reader_content h5,
.page-readersepia .reader_content h6 {
    color: #330;
}

.text_body a,
.page-readersepia .text_body a {
    color: #2a5ab5;
    transition-property: color, background-color;
    transition-duration: 0.3s;
    transition-timing-function: linear;
    transition-delay: 0.1s;
}

.text_body img[src*=".gif"] {
    opacity: 0;
    transition:  opacity 1s ease 2s;
}

.text_body img[src*=".gif"]:hover {
    opacity: 1;
    background-color: grey;
    transition: opacity 1s ease 0.3s;
}

.text_body img[src*=".gif"] + caption::after {
    content: "(gif)"
}

a.title,
a:hover,
a:focus {
    color: #2a5ab5 !important;
}

.text_body a:hover {
    text-decoration: underline;
    background-color: #f0f8ff;
}

.text_body a:active {
    background-color: #2a5ab5;
    color: #fffff6 !important;
}

.reader_content {
    max-width: 55em !important;
}

a.button,
a.button:hover,
a.button:focus,
a.button:active {
    color: white !important;
}

.confirmation_dialog a.button {
    color: #222 !important;
}

/* Item titles:  black */
.item a.title {
    color: #313131 !important;
}

/* Premium nag */

[data-itemurl~="https://getpocket.com/premium"] {
    display: none;
}

/* Add item counters */

.queue_list_main {
    counter-reset: itemNum;
}

.item_type_normal {
    counter-increment: itemNum;
}

.page_queue_list .item .title:before {
    content: counters(itemNum, "")". ";
}

/* Move tag editor to top of screen, embiggen */

.overlay_screen .content_detail {
    vertical-align: top;
    padding-top: 1em;
}

.overlay_screen .overlay_detail_confirmtag {
    width: 50em;
    padding: 0.5em;
}

.token-input-list {
    width: 62em;
}

/* Move button */

.overlay_screen .overlay_detail_confirmtag .button {
    clear: both;
    margin-top: 0.5em;
}

/* Hide sponsored items */

.item_type_spoc {
    display: none !important;
}

/* Tweak item URL line height */

.item .original_url {
    line-height: 1.4;
}

/* Article metadata:  tell us what you don't have */
.authors[style*="display: none;"] {
    display: initial !important;
}

.authors[style*="display: none;"]::after {
    content: "No Author Determined, ";
    font-weight: bold;
}

.date.date_empty::after {
    content: "No Date Determined";
}

/* Normal tags container */
.reader_head .tags {
    display: block;
    margin-top: 0.75em;
    width: 100%;
}

.reader_head .sub li {
    height: auto;
}

.reader_head .tags .tag_container {
    height: auto;
    max-width: none;
    width: calc(100% - 5em);
    counter-reset: tagCount;
}

.reader_head .tags .tag_container .tag {
    counter-increment: tagCount;
}

.reader_head .tags .tag_container > .tag:last-child {
    position: relative;
}

.reader_head .tags .tag_container > .tag:last-child::after {
    content: "(" counter(tagCount) ")";
    color: #b1b2b2;
    display: inline-block;
    margin-left: 2em;
    position: absolute;
    top: 0;
    right: -3em;
    padding: 4px 8px;
}

.page-readersepia .tags .tag_container > .tag:last-child::after {
    color: #ad998b;
}

.page-readerdark .tags .tag_container > .tag:last-child::after {
    color: #ccc;
}




/* Show overflow tags */
.reader_head .tags .tag-overflow {
    display: block;
}

/* But not the overflow link button */
.page-readersepia .reader_head .tags .tag-overflow-link {
    display: none;
}

/* Tags popover list -- embiggen */
#pagenav_tagfilter ul {
    height: 800px;
}

.popover-new-centeredleft {
    height: 810px;
    top: -245.5px !important;
}

/* Tags-editing overlay -- not so opaque */
.overlay_screen {
    background: rgba( 0,0,0,0.1);
    /* shorten it ... */
    height: 0;
}

/* Article tags editor -- override 000-Annoyances no display */

html:not(#stylus) body:not(.page-reader) .overlay_screen .overlay_detail_confirmtag {
    display: block !important;
}

/* Add item menu */
#addMenu {
    right: 136px;
    width: 70em;
    left: auto !important;
}

#addMenu .container input {
    width: 52em;
}