.notes hr { margin-top: var(--smaller) } .note-wrapper { width: 100%; height: inherit } .note-sidebar { padding: var(--smaller) } .note-sidebar * { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-left: auto; margin-right: auto; max-height: 100% } .note-sidebar .avatar { width: var(--big); height: auto; background: unset; margin-bottom: var(--smaller); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px } .h-entry:not(:first-child) { margin-top: var(--smaller) } .h-entry img { background: repeating-conic-gradient(#ffffff66 0deg 90deg, #ffffff33 0deg 180deg) 0 0/40px 40px round; } .embed { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; padding: var(--smaller); border: unset; } .embed header { width: 100%; margin-bottom: var(--small); } .embed img { width: 25%; height: auto; margin-right: var(--smaller); } .embed .p-summary { width: 60%; } .embed .p-name, .embed .p-author { font-weight: bold; } .embed img { padding: unset; max-width: -webkit-min-content; max-width: -moz-min-content; max-width: min-content; max-height: -webkit-min-content; max-height: -moz-min-content; max-height: min-content } .embed .p-summary hr { margin-top: var(--smaller); margin-bottom: var(--smaller); } .h-entry .embed[class*="p-"] { padding: unset } .h-entry a:focus { text-decoration: underline } .h-entry { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-border-radius: var(--smaller); -moz-border-radius: var(--smaller); border-radius: var(--smaller) } .h-entry figure { margin: unset; -o-object-fit: cover; object-fit: cover } .h-entry .replies .h-entry { background-color: unset; padding: 0 var(--smaller) var(--smaller) 0; margin-left: var(--small) } .note-info, embed header { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; max-height: var(--big); border-bottom: unset; -webkit-border-radius: var(--smaller) var(--smaller) 0 0; -moz-border-radius: var(--smaller) var(--smaller) 0 0; border-radius: var(--smaller) var(--smaller) 0 0; font-size: var(--small); padding: 6px 10px 6px 0 } .note-info { background: var(--gradient-backwards) !important; } .note-author { font-size: var(--default); display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-align-self: center; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center } .note-author-fullname { font-weight: bold; } .note-author-nickname { opacity: 0.5; } .note-author-nickname::before { content: '@'; } .note-actions { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; vertical-align: middle } .note-actions-set { opacity: 1 !important; } .note-actions .form-group { all: unset } .button-container { border: none !important; -webkit-border-radius: unset !important; -moz-border-radius: unset !important; border-radius: unset !important; -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important; -webkit-mask-size: cover !important; mask-size: cover !important; margin-left: var(--smaller); width: var(--default); height: var(--default); background-color: var(--foreground); opacity: 0.33; } .button-container:hover, .button-container:focus { border: none; opacity: 1; } .favourite-button-container { -webkit-mask-image: url("../../icons/heart.svg"); -o-mask-image: url("../../icons/heart.svg"); -moz-mask-image: url("../../icons/heart.svg"); mask-image: url("../../icons/heart.svg") } .reply-button-container { -webkit-mask-image: url("../../icons/reply.svg"); -o-mask-image: url("../../icons/reply.svg"); -moz-mask-image: url("../../icons/reply.svg"); mask-image: url("../../icons/reply.svg") } .repeat-button-container { -webkit-mask-image: url("../../icons/repeat.svg"); -o-mask-image: url("../../icons/repeat.svg"); -moz-mask-image: url("../../icons/repeat.svg"); mask-image: url("../../icons/repeat.svg") } .delete-button-container { -webkit-mask-image: url("../../icons/delete.svg"); -o-mask-image: url("../../icons/delete.svg"); -moz-mask-image: url("../../icons/delete.svg"); mask-image: url("../../icons/delete.svg"); } #add_favourite, #remove_favourite { margin-top: var(--smaller); } .note-content { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-border-radius: 0 0 var(--smaller) var(--smaller); -moz-border-radius: 0 0 var(--smaller) var(--smaller); border-radius: 0 0 var(--smaller) var(--smaller); padding: var(--default) } .note-text { margin-bottom: var(--smaller) } .note-attachments-unit { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; max-width: -webkit-max-content; max-width: -moz-max-content; max-width: max-content; -webkit-border-radius: var(--smaller); -moz-border-radius: var(--smaller); border-radius: var(--smaller); padding: var(--smaller); -webkit-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start background-color: var(--background-card) !important; } .note-attachments-unit:not(:only-child) { margin-right: var(--smaller) } .note-attachments-unit>figure figcaption { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; word-break: break-all; margin-bottom: var(--smaller) }