yet-another-blog/frontend/public/css/theme.scss

187 lines
2.8 KiB
SCSS

$header-color: #222;
$button-generic: #1c478a;
body {
margin: 0;
background-color: #111;
color: white;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.header {
background-color: $header-color;
width: 100%;
height: 50px;
display: flex;
flex-direction: row;
padding: 0 10px;
box-sizing: border-box;
margin-bottom: 1rem;
.left {
margin: auto auto auto 0;
font-size: 20px;
height: 100%;
a {
width: inherit;
}
}
.right {
margin: auto 0 auto auto;
height: 100%;
display: flex;
flex-direction: row;
a:hover,
a:focus {
background-color: #333;
}
}
a {
height: 100%;
width: 130px;
margin: auto 0;
display: flex;
text-decoration: none;
transition: background-color ease-in-out 0.1s;
div {
margin: auto;
color: white;
}
}
}
button {
background-color: $button-generic;
border: 0;
border-radius: 5px;
color: white;
cursor: pointer;
}
button:hover,
button:focus {
background-color: #122d57;
}
button.good,
a.good {
background-color: #015b01;
}
button.yellow,
a.yellow {
background-color: #4a4a00;
}
button.bad,
a.bad {
background-color: #8e0000;
}
.page {
width: 1000px;
min-height: 10px;
margin: 0 auto;
.horizontal-button-container {
display: flex;
flex-direction: row;
button,
a {
width: 120px;
min-height: 30px;
text-decoration: none;
// background-color: #222;
display: flex;
margin-right: 5px;
span {
margin: auto;
}
}
button:last-of-type,
a:last-of-type {
margin-right: 0;
}
}
.blog-admin {
margin-bottom: 10px;
}
.pagination {
display: flex;
flex-direction: row;
width: 100%;
margin: 0 auto;
a {
height: 40px;
width: 150px;
margin-right: 5px;
display: flex;
text-decoration: none;
background-color: #222;
span {
margin: auto;
color: white;
font-size: 20px;
}
}
a:last-of-type {
margin-right: 0;
margin-left: 5px;
}
a.disabled {
filter: brightness(50%);
}
.page-list {
flex-grow: 1;
display: flex;
flex-direction: row;
margin-bottom: 50px;
a {
width: 40px;
height: 40px;
display: flex;
text-decoration: none;
background-color: #222;
border-radius: 10px;
margin: 0 10px 0 0;
span {
margin: auto;
color: white;
}
}
a:first-of-type {
margin: auto 10px auto auto;
}
a:last-of-type {
margin: auto auto auto 0;
}
a.active {
background-color: #993d00;
}
}
}
}
.hidden {
display: none !important;
}
@media screen and (max-width: 1010px) {
.page {
width: 95%;
}
}