nfp_sites/app/app.scss

275 lines
4.3 KiB
SCSS
Raw Normal View History

2019-02-20 16:10:37 +00:00
@import './_common';
html {
box-sizing: border-box;
font-size: 16px;
height: 100%;
}
*, *:before, *:after {
box-sizing: inherit;
}
body, h1, h2, h3, h4, h5, h6, p {
margin: 0;
padding: 0;
font-weight: normal;
}
body {
2019-09-14 19:03:38 +00:00
min-height: 100%;
2019-02-20 16:10:37 +00:00
font-family: Arial, Helvetica, sans-serif;
}
button {
font-family: Arial, Helvetica, sans-serif;
}
2019-02-20 16:10:37 +00:00
ol, ul {
list-style: none;
}
img {
max-width: 100%;
height: auto;
}
@keyframes spinner-loader {
to {transform: rotate(360deg);}
}
.loading-spinner:before {
content: '';
box-sizing: border-box;
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin-top: -10px;
margin-left: -10px;
border-radius: 50%;
border: 2px solid #ccc;
border-top-color: #333;
animation: spinner-loader .6s linear infinite;
}
2019-09-14 19:03:38 +00:00
.maincontainer {
background: $main-bg;
color: $main-fg;
2019-09-14 19:03:38 +00:00
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
}
2019-02-20 16:10:37 +00:00
.container {
width: 100%;
display: flex;
flex-direction: column;
}
main {
display: flex;
flex-direction: column;
flex-grow: 2;
}
.error {
font-size: 0.8em;
color: $secondary-dark-bg;
font-weight: bold;
padding-bottom: 20px;
}
2021-02-05 11:50:01 +00:00
.error-wrapper {
flex-grow: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: $border;
padding: 40px 0;
.error {
border: 2px dashed $secondary-dark-bg;
padding: 10px 20px;
font-size: 1em;
}
}
2019-02-20 16:10:37 +00:00
[hidden] { display: none !important; }
article {
display: flex;
flex-direction: column;
flex-grow: 2;
padding: 20px;
header {
display: flex;
flex-direction: column;
margin-bottom: 20px;
h1 {
font-size: 1.4em;
color: $title-fg;
flex-grow: 2;
}
span {
font-size: 0.8em;
color: $meta-fg;
}
}
.content {
display: flex;
flex-direction: column;
h5 {
font-size: 1.0em;
font-weight: bold;
color: $title-fg;
}
}
}
2019-09-13 13:33:10 +00:00
form {
display: flex;
flex-direction: column;
align-items: stretch;
label {
text-align: left;
font-weight: bold;
font-size: 0.8em;
padding: 5px 0 3px;
}
input[type=text],
input[type=password],
2019-10-02 00:16:11 +00:00
input[type=datetime-local],
2019-09-13 13:33:10 +00:00
select,
textarea {
width: 100%;
font-size: 1em;
padding: 0.5em;
margin: 0 0 0.5em;
background: $input-bg;
border: 1px solid $input-border;
color: $input-fg;
2019-09-13 13:33:10 +00:00
outline: none;
&:hover,
&:focus {
border-color: $secondary-bg;
}
}
input[type=submit],
button.submit {
2019-09-13 13:33:10 +00:00
align-self: center;
padding: 0.5em;
margin: 0.5em 0;
min-width: 150px;
border: 1px solid $secondary-bg;
background: $secondary-light-bg;
color: $secondary-light-fg;
height: 31px;
}
2019-09-13 13:33:10 +00:00
button.submit::-moz-focus-inner {
border: 0;
2019-09-13 13:33:10 +00:00
}
}
2019-10-02 00:55:15 +00:00
a, button {
outline: none;
}
button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner {
padding: 0 !important;
border: 0 none !important;
}
2019-10-01 03:45:44 +00:00
@import 'froala';
2019-09-13 13:33:10 +00:00
2019-02-20 16:10:37 +00:00
@import 'menu/menu';
@import 'footer/footer';
2019-02-20 16:10:37 +00:00
@import 'login/login';
2019-02-22 14:53:43 +00:00
@import 'widgets/common';
2019-09-13 13:33:10 +00:00
@import 'pages/page';
@import 'article/article';
@import 'frontpage/frontpage';
.darkmodeon {
.maincontainer {
background: $dark_main-bg;
color: $dark_main-fg;
}
.error {
color: $dark_secondary-dark-bg;
}
2019-10-01 03:45:44 +00:00
.fr-view blockquote {
border-left-color: $dark_main-fg;
color: $dark_main-fg;
}
article.article,
article.login,
article.page {
header {
h1 {
2019-10-01 03:45:44 +00:00
// color: $dark_title-fg;
}
span {
color: $dark_meta-fg;
}
}
.content {
h5 {
color: $dark_title-fg;
}
}
}
2019-10-01 03:45:44 +00:00
.login form {
input[type=text],
input[type=password],
select,
textarea {
background: $dark_input-bg;
border: 1px solid $dark_input-border;
color: $dark_input-fg;
&:hover,
&:focus {
border-color: $dark_secondary-bg;
}
}
input[type=submit] {
border: 1px solid $dark_secondary-bg;
background: $dark_secondary-light-bg;
color: $dark_secondary-light-fg;
&:hover {
background: $dark_secondary-dark-bg;
color: $dark_secondary-dark-fg;
}
}
}
.fr-view {
a { color: $dark_secondary-dark-bg; }
}
}