tuxwebror/app/assets/stylesheets/users.scss
2018-12-21 19:06:39 +01:00

163 lines
2.5 KiB
SCSS

// Place all the styles related to the Posts controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
@import "src/variables";
header {
height: 30px;
line-height: 30px;
font-size: 2em;
nav {
height: 30px;
line-height: 30px;
& > .navbar-brand {
justify-content: center;
margin-left: auto;
margin-right: auto;
font-family: 'Ubuntu Mono', monospace;
text-decoration: none;
font-size: 2em;
}
}
}
#content {
padding-top: 40px;
h1.title{
color: $blanc_immacule
}
.card {
border-radius: 6px;
overflow: hidden;
margin: 0 auto;
min-height: 255px;
word-wrap: break-word;
box-shadow: 0 0 15px 0 $hovered_shadow;
.header {
height: 50px;
.avatar {
width: 80px;
height: 100%;
position: relative;
margin: 0 auto;
img {
display: block;
border-radius: 50%;
position: absolute;
bottom: -42px;
border: 4px solid $blanc_immacule;
}
}
}
.card-body {
padding: 30px;
.user-info {
padding-top: 20px;
.username {
font-size: 18px;
font-weight: 600;
}
.created_at {
font-size: .8em;
color: #787485;;
}
.block_code {
background: #2f3136;
border-radius: 5px;
border: 2px solid $block_code--border;
margin-top: 6px;
padding: .5em;
color: $block_code--color;
font-weight: 300;
& strong {
font-weight: 900;
color: $block_code--strong-color;
}
}
}
}
.actions {
position: absolute;
bottom: 30px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
.button {
padding: 13px 17px;
color: $blanc_immacule;
border-radius: 100px;
border-color: $bleu-violet;
transition: opacity .2s;
&:hover {
opacity: 0.7;
}
}
}
}
.user-card {
border-radius: 10px;
padding: 1%;
background: $blanc_immacule;
margin: 0 auto;
.header {
img {
border-radius: 50%;
width: 200px;
}
.username {
font-size: 2em;
font-weight: 600;
}
}
}
.subcard_action {
font-size: 1rem;
white-space: nowrap;
user-select: none;
a {
align-items: center;
display: flex;
justify-content: center;
padding: 0 .75em;
font-size: 1.2em;
}
ul {
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
li {
align-items: center;
display: flex;
&:first-child a {
padding-left: 0;
}
&+li::before {
color: $grey-light;
content: "|";
}
}
}
}
}