313 lines
6.2 KiB
CSS
313 lines
6.2 KiB
CSS
/* Icon */
|
|
|
|
span.icon {
|
|
font-size: 3rem;
|
|
line-height: 5rem;
|
|
text-align: center;
|
|
background-size: cover;
|
|
background-position: center;
|
|
position: relative;
|
|
word-break: keep-all;
|
|
}
|
|
|
|
span.icon.spin,
|
|
i.spin {
|
|
animation: spin 2s linear infinite;
|
|
}
|
|
|
|
span.icon.shake,
|
|
i.shake {
|
|
animation: shake 1s linear infinite;
|
|
}
|
|
|
|
span.icon img {
|
|
max-width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
span.icon.r1 {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
span.icon.r2 {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
span.icon.r3 {
|
|
transform: rotate(270deg);
|
|
}
|
|
|
|
/*span.icon.top {
|
|
position: relative;
|
|
top: -1.5rem;
|
|
width: 100%;
|
|
height: 10rem;
|
|
line-height: 10rem;
|
|
display: block;
|
|
margin: 0;
|
|
left: 0;
|
|
}
|
|
|
|
span.icon.top.preview {
|
|
height: 25rem;
|
|
}*/
|
|
|
|
span.icon.primary.thumb,
|
|
span.icon.control.thumb {
|
|
width: 7rem;
|
|
line-height: 7rem;
|
|
margin-right: -1.5rem;
|
|
align-self: stretch;
|
|
height: auto;
|
|
text-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
span.icon.primary.thumb {
|
|
margin-left: -1.5rem;
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
span.primary.overflow {
|
|
margin-left: -4.5rem;
|
|
margin-right: 0;
|
|
}
|
|
|
|
span.icon.bubble {
|
|
border-radius: 5rem;
|
|
font-size: 2.25rem;
|
|
user-select: none;
|
|
-moz-user-select: none;
|
|
height: 5rem;
|
|
}
|
|
|
|
span.icon.bubble img:not(.emoji) {
|
|
border-radius: 5rem;
|
|
}
|
|
|
|
span.icon.bubble.space:not(:has(img)),
|
|
span.icon.bubble.space img:not(.emoji) {
|
|
border-radius: 2rem;
|
|
}
|
|
|
|
span.icon.bubble>i,
|
|
span.icon.bubble>a>i {
|
|
font-size: 3rem;
|
|
line-height: 5rem;
|
|
}
|
|
|
|
ul.list li span.icon.small {
|
|
height: 4rem;
|
|
line-height: 3.5rem;
|
|
font-size: 0;
|
|
/* Only display the first letter */
|
|
flex: 0 0 4rem;
|
|
margin-left: 1rem;
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
ul.list li span.icon.small img.emoji {
|
|
width: 1.75rem;
|
|
height: 4rem;
|
|
}
|
|
|
|
ul.list li span.icon.small:not(.bubble)>i {
|
|
font-size: 3rem;
|
|
line-height: 3rem;
|
|
}
|
|
|
|
span.icon.small.bubble:first-letter,
|
|
span.icon.small.bubble>i,
|
|
span.icon.small.bubble>a>i {
|
|
font-size: 2.25rem;
|
|
line-height: 4rem;
|
|
}
|
|
|
|
span.icon.bubble.status,
|
|
span.icon.bubble.stories {
|
|
border-radius: 0;
|
|
mask-size: 100%;
|
|
mask-origin: content-box;
|
|
mask-repeat: no-repeat;
|
|
}
|
|
|
|
span.icon.bubble.stories {
|
|
mask-origin: fill-box;
|
|
background: linear-gradient(to top right, var(--p-orange), var(--p-pink));
|
|
transition: transform 0.2s ease-in-out;
|
|
}
|
|
|
|
span.icon.bubble.stories.seen {
|
|
background: none;
|
|
background-color: rgba(var(--movim-font), 0.25);
|
|
}
|
|
|
|
span.icon.bubble.stories:active {
|
|
transform: scale(.95);
|
|
}
|
|
|
|
span.icon.bubble.status:not(.offline):not(.composing):not([data-counter]):not(.location) {
|
|
mask-image: url(../img/avatar_mask.svg);
|
|
-webkit-mask-origin: unset;
|
|
mask-origin: unset;
|
|
}
|
|
|
|
span.icon.bubble.stories.composing,
|
|
span.icon.bubble.stories[data-counter]:not(.composing):not(.location) {
|
|
mask-image: url(../img/avatar_mask_notifs_stories.svg);
|
|
}
|
|
|
|
span.icon.bubble.stories:not(.composing):not([data-counter]):not(.location) {
|
|
mask-image: url(../img/avatar_mask_stories.svg);
|
|
-webkit-mask-origin: unset;
|
|
mask-origin: unset;
|
|
}
|
|
|
|
span.icon.bubble.status.online.stories:not(.composing):not([data-counter]):not(.location) {
|
|
mask-image: url(../img/avatar_mask_stories_online.svg);
|
|
}
|
|
|
|
span.icon.bubble.status.dnd:not(.composing):not([data-counter]):not(.location) {
|
|
mask-image: url(../img/avatar_mask_dnd.svg);
|
|
}
|
|
|
|
span.icon.bubble.status.dnd.stories:not(.composing):not([data-counter]):not(.location) {
|
|
mask-image: url(../img/avatar_mask_dnd_stories.svg);
|
|
}
|
|
|
|
span.icon.bubble.status.away:not(.composing):not([data-counter]):not(.location) {
|
|
mask-image: url(../img/avatar_mask_away.svg);
|
|
}
|
|
|
|
span.icon.bubble.status.away.stories:not(.composing):not([data-counter]):not(.location) {
|
|
mask-image: url(../img/avatar_mask_away_stories.svg);
|
|
}
|
|
|
|
span.icon.bubble.status.xa:not(.composing):not([data-counter]):not(.location) {
|
|
mask-image: url(../img/avatar_mask_xa.svg);
|
|
}
|
|
|
|
span.icon.bubble.status.xa.stories:not(.composing):not([data-counter]):not(.location) {
|
|
mask-image: url(../img/avatar_mask_xa_stories.svg);
|
|
}
|
|
|
|
span.icon.bubble.status.location {
|
|
mask-image: url(../img/avatar_mask_location.svg);
|
|
}
|
|
|
|
span.icon.bubble.status.location.stories {
|
|
mask-image: url(../img/avatar_mask_location_stories.svg);
|
|
}
|
|
|
|
span.icon span.counter,
|
|
span.icon[data-counter]:after,
|
|
span.icon.composing:after,
|
|
span.icon.status:after {
|
|
content: '';
|
|
display: block;
|
|
min-width: 2rem;
|
|
height: 2rem;
|
|
font-size: 1.5rem;
|
|
line-height: 2rem;
|
|
right: calc(50% - 2.75rem);
|
|
top: calc(50% + 0.5rem);
|
|
position: absolute;
|
|
transition: border-radius 0.25s var(--standard-easing);
|
|
border-radius: 2em;
|
|
background-color: rgb(var(--movim-element-action));
|
|
box-shadow: var(--elevation-0);
|
|
}
|
|
|
|
span.icon.status.offline:not([data-counter]):after {
|
|
display: none;
|
|
}
|
|
|
|
span.icon span.counter,
|
|
span.icon[data-counter]:after,
|
|
span.icon.composing:after {
|
|
padding: 0 0.25rem;
|
|
min-width: 1.5rem;
|
|
box-shadow: var(--elevation-1);
|
|
}
|
|
|
|
/* Counter */
|
|
|
|
span.icon[data-counter]:after {
|
|
border-radius: 0.5rem;
|
|
content: attr(data-counter);
|
|
}
|
|
|
|
span.icon[data-counter].symbol:after {
|
|
font-family: 'Material Symbols';
|
|
}
|
|
|
|
/* Composing */
|
|
|
|
span.icon.composing:after {
|
|
content: '…';
|
|
line-height: 1rem;
|
|
font-size: 2rem;
|
|
font-weight: bold;
|
|
border-radius: 0.5rem;
|
|
animation: fadeText 1.5s infinite;
|
|
}
|
|
|
|
/* Weird bug */
|
|
span.icon.small.status:after {
|
|
border-radius: 2rem;
|
|
}
|
|
|
|
span.icon.small span.counter,
|
|
span.icon.small.composing:after {
|
|
top: 2.25rem;
|
|
}
|
|
|
|
span.icon.small.status:after {
|
|
top: 2.4rem;
|
|
min-width: 1.5rem;
|
|
height: 1.5rem;
|
|
right: calc(50% - 2.1rem);
|
|
}
|
|
|
|
main ul li .control>i {
|
|
margin-left: 0;
|
|
}
|
|
|
|
/* Counter */
|
|
|
|
span.icon span.counter {
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
span.icon span.counter:empty {
|
|
display: none;
|
|
}
|
|
|
|
span.icon span.counter>i {
|
|
margin-left: 0.1rem;
|
|
margin-right: 0.1rem;
|
|
}
|
|
|
|
/* Text icon */
|
|
i.icon-text {
|
|
font-size: 2.5rem;
|
|
margin: 0 0.25rem;
|
|
line-height: 3rem;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* Tiny icon */
|
|
p span.icon.tiny {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
display: inline-block;
|
|
margin-right: 0.5rem;
|
|
vertical-align: text-top;
|
|
font-size: 1rem;
|
|
line-height: 2rem;
|
|
}
|
|
|
|
p span.icon.tiny:not(:first-child) {
|
|
margin-left: 0.75rem;
|
|
}
|