.button-container { background-color: var(--foreground); border: none !important; display: inline-block; height: 14px; opacity: .33; width: 14px; } .button-container:focus, .button-container:hover { background-color: var(--accent); border: none !important; opacity: 1; } .button-container:not(:first-of-type) { margin-left: var(--s); } .favourite-button-container { -moz-mask-image: url(../../icons/heart.svg); -o-mask-image: url(../../icons/heart.svg); -webkit-mask-image: url(../../icons/heart.svg); mask-image: url(../../icons/heart.svg); } .reply-button-container { -moz-mask-image: url(../../icons/reply.svg); -o-mask-image: url(../../icons/reply.svg); -webkit-mask-image: url(../../icons/reply.svg); mask-image: url(../../icons/reply.svg); } .repeat-button-container { -moz-mask-image: url(../../icons/repeat.svg); -o-mask-image: url(../../icons/repeat.svg); -webkit-mask-image: url(../../icons/repeat.svg); mask-image: url(../../icons/repeat.svg); } .delete-button-container { -moz-mask-image: url(../../icons/delete.svg); -o-mask-image: url(../../icons/delete.svg); -webkit-mask-image: url(../../icons/delete.svg); mask-image: url(../../icons/delete.svg); } .embed { border: unset; display: flex; padding: var(--s); } .embed .p-author, .embed .p-name { font-weight: 700; } .embed .p-summary { width: 60%; } .embed .p-summary hr { margin-bottom: var(--s); margin-top: var(--s); } .embed header { margin-bottom: var(--m); width: 100%; } .embed img { height: auto; margin-right: var(--s); width: 25%; } .embed img { max-height: min-content; max-width: min-content; padding: unset; } .feed-actions-details summary, .note-actions-extra-details summary { display: block; height: var(--unit); width: var(--unit); } .feed-actions-details-dropdown { font-size: .937rem; } .feed-actions-details[open] > .feed-actions-details-dropdown a span { float: right; margin-left: 4px; } .feed-actions-details[open] > .feed-actions-details-dropdown, .note-actions-extra-details[open] > summary + * { background: var(--background-card); border: 2px solid var(--border); border-radius: var(--s); box-shadow: var(--shadow); display: flex; padding: 4px 8px; position: absolute; right: 0; width: max-content; z-index: 1; } .feed-actions-details[open] > summary, .note-actions-extra-details[open] > summary { opacity: 1 !important; } .feed-actions-details[open] svg { height: auto; width: 1em; } .feed-empty { display: flex; } .feed-empty .feed-background { height: auto; margin-left: auto; margin-right: auto; margin-top: var(--xxl); opacity: 3%; width: 40%; } .feed-header { display: flex; margin-top: var(--s); margin-bottom: var(--s); align-items: center; } .feed-header .section-title { font-size: 1.383rem; } .feed-header .feed-actions { margin-left: auto; text-transform: capitalize; } .h-entry { background-color: var(--background-card) !important; border-radius: var(--s); display: flex; } .h-entry .embed[class*="p-"] { padding: unset; } .h-entry .replies { border-left: 1px solid var(--border); margin-bottom: var(--s); padding: 0 var(--s); } .h-entry a:focus { text-decoration: underline; } .h-entry figure { background: var(--gradient); border-radius: var(--s); margin: unset; padding: var(--s); } .h-entry img { background: repeating-conic-gradient(#ffffff66 0deg 90deg, #ffffff33 0deg 180deg) 0 0/40px 40px round; } .h-entry-language { background: var(--gradient-backwards); border-radius: 0 0 var(--s) 0; color: var(--foreground); float: right; padding: 6px 12px; position: relative; } .h-entry:not(:first-child) { margin-top: var(--s); } .h-entry:not(embed) { border: 1px solid var(--border); } .h-entry[id^="note-anchor-"]:target { border: 2px solid var(--accent) !important; } .h-feed hr, .notes hr { margin-top: var(--s); } .note-actions { float: right; } .note-actions > li { display: inline-block; margin-left: 2px; margin-right: 2px; } .note-actions-extra-details ul { display: flex; flex-direction: column; } .note-actions-extra-details hr { margin: unset; } .note-actions-extra-details summary { opacity: .33; } .note-actions-extra-details[open] > summary + * > li { font-size: .937rem; line-height: 2; } .note-actions-separator { background: var(--foreground); display: inline-block; height: 1em; margin-left: 2px; margin-right: 2px; opacity: .33; width: 1px; } .note-actions-set { opacity: 1 !important; } .note-attachments { display: flex; } .note-attachments-unit { border-radius: var(--s); display: flex; max-width: max-content; padding: var(--s); } .note-attachments-unit > figure figcaption { display: flex; word-break: break-all; } .note-attachments-unit:not(:only-child) { margin-right: var(--s); } .note-author-fullname { font-weight: 700; } .note-author-nickname, .note-conversation-info { opacity: .5; } .note-author-url { float: left; margin-left: 4px; } .note-author-url, .note-conversation-url, .note-url { font-style: italic; } .note-complementary { background: var(--gradient) !important; border-left: 1px solid var(--accent); font-size: .937rem; margin-bottom: 4px; margin-right: var(--s); padding-left: var(--s); border-radius: 0 0 0 var(--s); } .note-complementary a { font-weight: 700; } .note-complementary:last-of-type { margin-bottom: var(--s); } .note-content { border-radius: 0 0 var(--s) var(--s); display: block; padding: 0 4px 4px 0; } .note-conversation-info { margin-left: 4px; } .note-info { display: flex; justify-content: space-between; background: var(--gradient-backwards); } .note-info, embed header { border-bottom: unset; border-radius: 0 var(--s) 0 0; display: flex; line-height: initial; padding: 4px var(--s) 4px 0; } .note-info-start { display: flex; } .note-info-start > * { word-break: break-all; } .note-replies-start { font-size: .937rem; font-weight: 700; opacity: .5; } .note-sidebar { display: flex; padding: var(--s); } .note-sidebar > * { border-radius: 2px; height: auto; max-height: 3rem; max-width: 3rem; width: 100%; } .note-sidebar img { background: unset !important; } .note-text a { text-decoration: underline !important; } .note-wrapper { height: inherit; width: 100%; } @media only screen and (max-width: 1280px) { .note-sidebar { padding: 8px 2px 0; } .note-sidebar > * { max-height: 2rem; max-width: 2rem; } }