init
This commit is contained in:
nnduc
@@ -0,0 +1,312 @@
|
||||
/* 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;
|
||||
}
|
||||
Reference in New Issue
Block a user