mirror of https://github.com/mue/mue.git
137 lines
2.1 KiB
SCSS
137 lines
2.1 KiB
SCSS
@import 'scss/variables';
|
|
|
|
.quote {
|
|
font-size: 0.8em;
|
|
text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
|
cursor: initial;
|
|
user-select: none;
|
|
--shadow-shift: 0.125rem;
|
|
color: #fff;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.quoteauthor {
|
|
font-size: 0.9em;
|
|
letter-spacing: 0.5px;
|
|
user-select: none;
|
|
|
|
--shadow-shift: 0.125rem;
|
|
|
|
svg {
|
|
margin-left: 10px;
|
|
filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3));
|
|
}
|
|
}
|
|
|
|
i.material-icons,
|
|
h1.quoteauthor {
|
|
display: inline;
|
|
}
|
|
|
|
.quoteAuthorLink {
|
|
text-decoration: none;
|
|
color: white;
|
|
user-select: none;
|
|
}
|
|
|
|
.author {
|
|
@extend %basic;
|
|
display: flex;
|
|
flex-flow: row;
|
|
height: 70px;
|
|
font-weight: 300;
|
|
margin: 10px;
|
|
}
|
|
|
|
.author-name {
|
|
font-size: clamp(15px, 2.5vw, 0.6em);
|
|
}
|
|
|
|
.author-knownfor {
|
|
font-size: clamp(13px, 2.5vw, 0.4em);
|
|
@include themed() {
|
|
color: t($subColor);
|
|
}
|
|
}
|
|
|
|
.author-license {
|
|
font-size: clamp(8px, 2.5vw, 0.25em);
|
|
@include themed() {
|
|
color: t($subColor);
|
|
}
|
|
}
|
|
|
|
.author img {
|
|
height: 100%;
|
|
width: auto;
|
|
border-radius: 12px 0 0 12px;
|
|
}
|
|
|
|
.author-img {
|
|
@extend %basic;
|
|
height: 100%;
|
|
width: 70px;
|
|
border-radius: 12px 0 0 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-size: cover !important;
|
|
background-repeat: no-repeat !important;
|
|
background-position: initial;
|
|
}
|
|
|
|
.author-content {
|
|
display: flex;
|
|
flex-flow: column;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
padding: 20px;
|
|
}
|
|
|
|
.author-holder {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-flow: column;
|
|
animation: fadeIn 1s;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.quote-buttons {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 20px 20px 20px 0;
|
|
|
|
a {
|
|
display: flex;
|
|
}
|
|
a {
|
|
@include basicIconButton(11px, 1.3rem, ui);
|
|
}
|
|
}
|
|
|
|
.quotediv {
|
|
animation: fadeIn 1s;
|
|
width: 40vw;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
button {
|
|
@include basicIconButton(11px, 1.3rem, ui);
|
|
}
|
|
}
|
|
|
|
.deleteButton {
|
|
height: auto !important;
|
|
@include basicIconButton(11px, 1.3rem, modal);
|
|
}
|