mastofeed-iframe-embed/stylesrc/base.scss

187 lines
2.9 KiB
SCSS

$bg: #fff !default;
$bg2: darken($bg, 6) !default;
$fg: #000 !default;
$dim: lighten($fg, 50) !default;
$dimmer: darken($bg2, 10) !default;
$link: #09c !default;
html,
body {
background-color: $bg;
font-family: 'Roboto', roboto, Arial, sans-serif;
color: $fg;
font-weight: lighter;
overflow-x:hidden;
font-size:100%;
word-break: break-word;
}
* {
margin: 0;
padding: 0;
}
a,
a * {
color: $link;
}
.meta {
//padding: 1rem;
background-color: $bg2;
}
.header{
display:flex;
background-size:cover;
min-height:8rem;
color:$fg;
.header-left,.header-right{
margin:0;
}
.header-left{
min-width:8rem;
position:relative;
text-align:center;
background:transparentize($bg,0.7);
.avatar{
width: 6rem;
height: 6rem;
position:relative;
top:calc(50% - 3rem);
}
}
.header-right{
flex-grow:1;
font-size:0.9rem;
padding:0.9rem;
background:transparentize($bg,0.15);
}
}
.item {
padding: 1rem;
border-top: solid 1px $dimmer;
}
.item-content,
.cw,
.title {
font-size: 1.1rem;
font-weight:lighter;
}
.item-content *,.cw{
margin: 1rem 0;
line-height:1.4rem;
}
.item-title,
.date,
.author-fullname {
color: $dim;
font-size: 0.9rem;
}
.date{
margin: 1rem 0 0 0;
}
.author {
display: flex;
margin: 1rem 0;
}
.author-info {
margin: 0 1rem;
display: flex;
flex-direction: column;
justify-content: space-around;
.author-displayname {
font-size: 1.2rem;
color: $fg;
text-decoration: none;
display: block;
font-weight: bolder;
}
}
.avatar {
width: 3rem;
height: 3rem;
border: none;
border-radius: 10%;
&.circular{
border-radius: 100%;
}
}
.enclosures {
padding: 0.5em 0;
display: flex;
flex-wrap:wrap;
flex-direction: row;
overflow: hidden;
}
.enclosure{
display:flex;
flex: 1 1 auto;
width:50%;
display: inline-block;
border: none;
max-height: 12rem;
}
a.enclosure{
cursor: zoom-in;
}
.enclosure>*{
flex: 1 1 auto;
width:100%;
height:100%;
object-fit: cover;
}
.meta .title{
font-weight:bold;
}
.hidden{
display:none;
}
.button{
padding: 0.5rem 1rem;
border: none;
margin: 1rem;
border-radius: 0.5rem;
display: inline-block;
text-decoration: none;
background:$link;
color:$fg;
font-weight:400;
cursor: pointer;
text-transform: uppercase;
user-select: none;
}
label.button{
padding: 0.25rem 0.5rem;
margin:0.4rem;
background:$dimmer;
color:$bg;
font-size:0.8rem;
}
// checkbox hack stuff
input[type=checkbox] {
position: absolute;
left: -9999px;
}
input[type=checkbox]:checked ~ label::after{
content:" Less";
}
input[type=checkbox]:not(:checked) ~ label::after{
content:" More";
}
input[type=checkbox]:not(:checked) ~ div{
display:none;
}