New design (#14)
This commit is contained in:
konrad
Gitea
parent
de6104dda6
commit
e094b654e2
51 changed files with 2828 additions and 551 deletions
268
src/vikunja.scss
268
src/vikunja.scss
|
|
@ -1,263 +1,9 @@
|
|||
*, *:hover, *:active, *:focus{
|
||||
outline: none;
|
||||
}
|
||||
@import 'styles/theme';
|
||||
@import 'styles/general';
|
||||
|
||||
@import '../node_modules/bulmaswatch/lumen/variables';
|
||||
@import "../node_modules/bulma/bulma";
|
||||
@import '../node_modules/bulmaswatch/lumen/overrides';
|
||||
@import 'styles/tasks';
|
||||
@import 'styles/teams';
|
||||
@import 'styles/fullpage';
|
||||
|
||||
@import url('/fonts/fonts.css');
|
||||
|
||||
*, *:focus, *:active{
|
||||
outline: none;
|
||||
}
|
||||
|
||||
body {
|
||||
background: url('../public/images/llama.svg') no-repeat bottom right fixed darken(#fff, 7%);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5,h6{
|
||||
font-family: 'Quicksand', sans-serif;
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
|
||||
/* Logout-icon */
|
||||
.logout-icon {
|
||||
margin-right: 0.85em !important;
|
||||
}
|
||||
|
||||
/* Logo */
|
||||
.logo {
|
||||
|
||||
padding-left: 2rem !important;
|
||||
|
||||
img {
|
||||
max-height: 3rem !important;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Buttons icons */
|
||||
.button .icon.is-small {
|
||||
margin-right: 0.05rem !important;
|
||||
}
|
||||
|
||||
/* List active link */
|
||||
.menu-list a.router-link-active{
|
||||
background: darken(#fff, 5%);
|
||||
}
|
||||
|
||||
/* menu buttons */
|
||||
.button-bottom {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.navbar-menu .navbar-item .icon{
|
||||
margin: 0 0.5em;
|
||||
}
|
||||
|
||||
/* Namespaces list */
|
||||
.namespaces-lists{
|
||||
.menu-label {
|
||||
font-size: 1em;
|
||||
font-weight: 400;
|
||||
min-height: 2.5em;
|
||||
padding-top: 0.3em;
|
||||
}
|
||||
|
||||
/* Namespace settings */
|
||||
.nsettings{
|
||||
vertical-align: middle;
|
||||
float: right;
|
||||
margin-left: 0.5rem;
|
||||
min-width: 2.648em;
|
||||
color: rgb(74, 74, 74);
|
||||
}
|
||||
}
|
||||
|
||||
.bigbuttons{
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.card{
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.buttonright {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.tasks.noborder{
|
||||
margin: 1rem -0.5rem;
|
||||
}
|
||||
|
||||
.tasks {
|
||||
margin-top: 1rem;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
|
||||
.task {
|
||||
display: block;
|
||||
padding: 0.5rem 1rem;
|
||||
border-bottom: 1px solid darken(#fff, 10%);
|
||||
|
||||
label{
|
||||
width: 96%;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
|
||||
.tasktext {
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.settings{
|
||||
float: right;
|
||||
width: 4%;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.task:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.taskedit{
|
||||
min-height: calc(100% - 1rem);
|
||||
margin-top: 1rem;
|
||||
|
||||
.subtasks {
|
||||
input {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.button {
|
||||
float:right;
|
||||
}
|
||||
}
|
||||
|
||||
.reminder-input{
|
||||
margin: 0;
|
||||
|
||||
&.overdue input{
|
||||
color: $red;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $red;
|
||||
vertical-align: sub;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 90%;
|
||||
border: none;
|
||||
|
||||
&:focus {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fancy Checkboxes
|
||||
.fancycheckbox {
|
||||
display: inline-block;
|
||||
padding-right: 5px;
|
||||
padding-top: 3px;
|
||||
|
||||
.check {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
transform: translate3d(0, 0, 0);
|
||||
|
||||
&:hover svg {
|
||||
stroke: $primary;
|
||||
}
|
||||
|
||||
svg {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
fill: none;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
stroke: #c8ccd4;
|
||||
stroke-width: 1.5;
|
||||
transform: translate3d(0, 0, 0);
|
||||
transition: all 0.2s ease;
|
||||
|
||||
path {
|
||||
stroke-dasharray: 60;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
|
||||
polyline {
|
||||
stroke-dasharray: 22;
|
||||
stroke-dashoffset: 66;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type=checkbox]:checked + .check svg {
|
||||
stroke: $primary;
|
||||
}
|
||||
|
||||
input[type=checkbox]:checked + .check svg path {
|
||||
stroke-dashoffset: 60;
|
||||
transition: all 0.3s linear;
|
||||
}
|
||||
|
||||
input[type=checkbox]:checked + .check svg polyline {
|
||||
stroke-dashoffset: 42;
|
||||
transition: all 0.2s linear;
|
||||
transition-delay: 0.15s;
|
||||
}
|
||||
}
|
||||
@import 'styles/fancycheckbox';
|
||||
@import 'styles/tooltip';
|
||||
Reference in a new issue