mirror of https://github.com/movim/movim
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
185 lines
3.3 KiB
185 lines
3.3 KiB
/* 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 img {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
img.icon.thumb {
|
|
margin: auto;
|
|
transform: translateY(-1rem);
|
|
display: block;
|
|
max-width: 100%;
|
|
object-fit: cover;
|
|
position: relative;
|
|
}
|
|
|
|
@media screen and (min-width: 800px) {
|
|
img.icon.thumb:before {
|
|
position: absolute;
|
|
width: 100%;
|
|
background-color: rgb(var(--movim-background-main));
|
|
top: 0;
|
|
left: 0;
|
|
font-family: 'Material Icons';
|
|
content: 'image';
|
|
color: rgba(var(--movim-font), 0.5);
|
|
line-height: 6rem;
|
|
font-size: 3rem;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
span.icon.primary.thumb {
|
|
width: 7rem;
|
|
line-height: 7rem;
|
|
margin-left: -1.5rem;
|
|
align-self: stretch;
|
|
height: auto;
|
|
text-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
ul.fill li span.icon.primary.thumb {
|
|
margin-left: 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 > 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 span.counter,
|
|
span.icon.composing:after,
|
|
span.icon.status:after {
|
|
content: '';
|
|
display: block;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
right: calc(50% - 2.75rem);
|
|
top: 3rem;
|
|
position: absolute;
|
|
|
|
border-radius: 2em;
|
|
background-color: #DDD;
|
|
box-shadow: -0.1rem -0.1rem 0.5rem rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
/* Weird bug */
|
|
span.icon.small.status:after {
|
|
border-radius: 2rem;
|
|
}
|
|
|
|
span.icon.small span.counter,
|
|
span.icon.small.composing:after,
|
|
span.icon.small.status:after {
|
|
top: 2.25rem;
|
|
}
|
|
|
|
main ul li .control > i {
|
|
margin-left: 0;
|
|
}
|
|
|
|
/* Counter */
|
|
|
|
span.icon span.counter:empty {
|
|
display: none;
|
|
}
|
|
|
|
span.icon.composing:after,
|
|
span.icon span.counter {
|
|
z-index: 1;
|
|
font-size: 1.5rem;
|
|
line-height: 2rem;
|
|
border-radius: 0.5rem;
|
|
width: auto;
|
|
min-width: 1.5rem;
|
|
padding: 0 0.25rem;
|
|
height: auto;
|
|
box-shadow: -0.1rem -0.1rem 0.5rem rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
span.icon span.counter > i {
|
|
margin-left: 0.1rem;
|
|
margin-right: 0.1rem;
|
|
}
|
|
|
|
/* Composing */
|
|
|
|
span.icon.composing:after {
|
|
content: '…';
|
|
line-height: 1rem;
|
|
z-index: 1;
|
|
font-size: 2rem;
|
|
height: 2rem;
|
|
font-weight: bold;
|
|
animation: fadein 0.2s, fadetext 1.5s infinite;
|
|
}
|