local-it/vikunja-frontend
Archived
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Design improvments (closes #4)

Browse source
This commit is contained in:
kolaente 2018-11-06 16:53:32 +01:00
parent 23dc41b501
commit 95b8178496
Signed by untrusted user who does not match committer: konrad
GPG key ID: F40E70337AB24C9B
11 changed files with 370 additions and 141 deletions
Download patch file Download diff file Expand all files Collapse all files

98
src/vikunja.scss
View file

@ -13,7 +13,7 @@
}
body {
background: url('../public/images/background.jpg') fixed repeat #f5f5f5;
background: url('../public/images/llama.svg') no-repeat bottom right fixed darken(#fff, 7%);
min-height: 100vh;
}
@ -22,73 +22,6 @@ h1,h2,h3,h4,h5,h6{
font-weight: 400 !important;
}
/* spinner */
.fullscreen-loader-wrapper {
position: fixed;
background: rgba(250,250,250,0.8);
z-index: 5;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
width: 78%;
height: 100%;
margin: -1em auto;
}
.full-loader-wrapper{
background: rgba(250,250,250,0.8);
position: absolute;
width: 78%;
height: 100%;
margin: -1em auto;
}
.half-circle-spinner, .half-circle-spinner * {
box-sizing: border-box;
}
.half-circle-spinner {
width: 60px;
height: 60px;
border-radius: 100%;
position: relative;
left: calc(50% - 30px);
top: calc(50% - 30px);
}
.half-circle-spinner .circle {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%;
border: calc(60px / 10) solid transparent;
}
.half-circle-spinner .circle.circle-1 {
border-top-color: #4CAF50;
animation: half-circle-spinner-animation 1s infinite;
}
.half-circle-spinner .circle.circle-2 {
border-bottom-color: #4CAF50;
animation: half-circle-spinner-animation 1s infinite alternate;
}
@keyframes half-circle-spinner-animation {
0% {
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
/* Logout-icon */
.logout-icon {
padding-right: 2em !important;
@ -191,4 +124,33 @@ h1,h2,h3,h4,h5,h6{
.settings{
float: right;
color: rgb(74, 74, 74);
}
.column.container {
padding:0;
.box.shadow {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
box-shadow: 2px 2px 5px lighten(#000, 85%);
}
}
/* Loading spinner */
.loader-container {
&.is-loading {
position: relative;
pointer-events: none;
opacity: 0.5;
&:after {
@include loader;
position: absolute;
top: calc(50% - 2.5em);
left: calc(50% - 2.5em);
width: 5em;
height: 5em;
border-width: 0.25em;
}
}
}