konrad
7d2bd192ab
All checks were successful
continuous-integration/drone/push Build is passing
Use fancy checkbox for archiving namespace Show is archived badge for namespaces Fix is archived badge in navigation bar Add check to filter out archived lists or namespaces Show if a list is archived in menu Hide edit task if the list is archived Hide marking tasks as done if the list is archived Show is archived message on list Add archiving a list Add archiving a namespace Co-authored-by: kolaente <k@knt.li> Reviewed-on: #73
375 lines
6.8 KiB
SCSS
375 lines
6.8 KiB
SCSS
.navbar {
|
|
z-index: 2;
|
|
|
|
@each $name, $pair in $colors {
|
|
$color: nth($pair, 1);
|
|
$color-invert: nth($pair, 2);
|
|
|
|
&.is-#{$name} {
|
|
border-color: darken($color, 5);
|
|
}
|
|
}
|
|
.navbar-dropdown {
|
|
box-shadow: $navbar-dropdown-boxed-shadow;
|
|
top: 101%;
|
|
}
|
|
}
|
|
|
|
.navbar.main-theme {
|
|
background: $light-background;
|
|
z-index: 5 !important;
|
|
|
|
@media screen and (max-width: $desktop) {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
@media screen and (max-width: $tablet) {
|
|
.navbar-brand {
|
|
// This prevents the user icon from snapping to the left into the menu button
|
|
width: 0;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 640px) { // Magic number to hide the username if it would take too much space otherwise
|
|
.user {
|
|
width: 7em;
|
|
|
|
.username {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.hero {
|
|
.navbar {
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
@each $name, $pair in $colors {
|
|
$color: nth($pair, 1);
|
|
$color-invert: nth($pair, 2);
|
|
|
|
&.is-#{$name} {
|
|
.navbar {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
@include touch {
|
|
.navbar-menu {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.navbar-menu .navbar-item .icon{
|
|
margin: 0 0.5em;
|
|
}
|
|
|
|
.navbar{
|
|
z-index: 4 !important;
|
|
}
|
|
|
|
.app-container {
|
|
.namespace-container{
|
|
background: $vikunja-nav-background;
|
|
z-index: 6;
|
|
color: $vikunja-nav-color;
|
|
padding: 0;
|
|
transition: all $transition;
|
|
position: fixed;
|
|
bottom: 0;
|
|
top: $navbar-height + 0.75rem;
|
|
overflow-x: auto;
|
|
width: 17vw;
|
|
|
|
@media screen and (max-width: $tablet) {
|
|
padding: 0 0 1em;
|
|
left: -147vw;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 70vw;
|
|
|
|
&.is-active {
|
|
left: 0;
|
|
}
|
|
}
|
|
|
|
.show-archived-check {
|
|
width: 100%;
|
|
text-align: right;
|
|
|
|
span {
|
|
vertical-align: super;
|
|
}
|
|
}
|
|
|
|
.menu{
|
|
.menu-label {
|
|
font-size: 1em;
|
|
font-weight: 700;
|
|
font-weight: bold;
|
|
font-family: $vikunja-font;
|
|
color: $grey;
|
|
font-weight: 500;
|
|
min-height: 2.5em;
|
|
padding-top: $navbar-padding * 0.3;
|
|
padding-left: $navbar-padding;
|
|
|
|
display: block;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.menu-label, .menu-list a {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
span {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.is-archived {
|
|
font-size: 0.75em;
|
|
border: 1px solid $grey;
|
|
color: $grey !important;
|
|
padding: 2px 4px;
|
|
border-radius: 3px;
|
|
font-family: $vikunja-font;
|
|
min-width: 60px;
|
|
display: block;
|
|
margin-left: 3px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.menu-label .is-archived {
|
|
min-width: 85px;
|
|
}
|
|
|
|
.nsettings{
|
|
float: right;
|
|
padding: 10px 0.3em 0;
|
|
}
|
|
|
|
.menu-label,.nsettings,.menu-list a{
|
|
color: $vikunja-nav-color;
|
|
}
|
|
|
|
.checkinput {
|
|
display: none;
|
|
}
|
|
|
|
.checkinput:checked + .more-container {
|
|
.menu-list.can-be-hidden {
|
|
opacity: 1;
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
.checkinput:not(:checked) + .more-container .hidden-hint {
|
|
opacity: 1;
|
|
height: auto;
|
|
}
|
|
|
|
.hidden-hint {
|
|
display: block;
|
|
opacity: 0;
|
|
height: 0;
|
|
text-align: center;
|
|
color: $grey;
|
|
cursor: pointer;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
.menu-list {
|
|
&.can-be-hidden {
|
|
transition: all $transition;
|
|
height: 0;
|
|
overflow: hidden;
|
|
opacity: 0;
|
|
}
|
|
|
|
li {
|
|
height: 44px;
|
|
}
|
|
|
|
a {
|
|
padding: 0.75em .5em 0.75em $navbar-padding * 1.5;
|
|
transition: all 0.2s ease;
|
|
|
|
-webkit-border-radius: 0;
|
|
-moz-border-radius: 0;
|
|
border-radius: 0;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
border-left: $vikunja-nav-selected-width solid transparent;
|
|
|
|
.icon {
|
|
color: lighten($vikunja-nav-color, 20);
|
|
height: 1rem;
|
|
vertical-align: middle;
|
|
padding-bottom: 4px;
|
|
padding-right: 0.5em;
|
|
}
|
|
|
|
&.router-link-active {
|
|
color: $primary;
|
|
border-left: $vikunja-nav-selected-width solid darken($primary, 5%);
|
|
.icon {
|
|
color: $primary;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
background: $white;
|
|
border-left: $vikunja-nav-selected-width solid darken($primary, 3%);
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.logo {
|
|
display: none;
|
|
|
|
@media screen and (max-width: $tablet) {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.top-menu {
|
|
margin: $navbar-padding / 2 0 $navbar-padding;
|
|
|
|
.menu-list {
|
|
li {
|
|
font-weight: 500;
|
|
font-family: $vikunja-font;
|
|
}
|
|
|
|
a {
|
|
padding-left: 2em;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.navbar .user{
|
|
padding: 1em 0.5em 0;
|
|
|
|
span {
|
|
font-family: $vikunja-font;
|
|
}
|
|
|
|
.avatar {
|
|
-webkit-border-radius: 100%;
|
|
-moz-border-radius: 100%;
|
|
border-radius: 100%;
|
|
vertical-align: middle;
|
|
height: 40px;
|
|
}
|
|
|
|
.logout-icon {
|
|
color: lighten($black, 10);
|
|
|
|
.icon {
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.dropdown-trigger .button {
|
|
background: none;
|
|
|
|
&:focus:not(:active), &:active{
|
|
outline: none !important;
|
|
-webkit-box-shadow: none !important;
|
|
-moz-box-shadow: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
}
|
|
|
|
.dropdown-menu {
|
|
.dropdown-content {
|
|
box-shadow: 0.3em 0.3em 0.8em darken($light, 6);
|
|
}
|
|
}
|
|
}
|
|
|
|
.mobilemenu-hide-button,.mobilemenu-show-button{
|
|
display: none;
|
|
position: fixed;
|
|
z-index: 31;
|
|
font-weight: bold;
|
|
font-size: 2em;
|
|
color: $dark;
|
|
&:hover, &:focus{
|
|
color: darken($dark, 20);
|
|
}
|
|
}
|
|
|
|
.mobilemenu-hide-button{
|
|
color: $dark;
|
|
&:hover, &:focus{
|
|
color: $dark;
|
|
}
|
|
}
|
|
|
|
.mobile-overlay{
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: rgba(250,250,250,0.8);
|
|
z-index: 5;
|
|
opacity: 0;
|
|
transition: all $transition;
|
|
}
|
|
|
|
@media screen and (max-width: $tablet) {
|
|
.mobilemenu-hide-button{
|
|
display: block;
|
|
top: 1vh;
|
|
right: 4vh;
|
|
}
|
|
|
|
.mobilemenu-show-button{
|
|
display: block;
|
|
top: 1vh;
|
|
left: 4vh;
|
|
}
|
|
|
|
.mobile-overlay{
|
|
display: block;
|
|
opacity: 1;
|
|
}
|
|
|
|
.navbar.is-dark .navbar-brand > .navbar-item{
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
|
|
.logout-icon {
|
|
margin-right: 0.85em !important;
|
|
}
|
|
|
|
.menu-bottom-link {
|
|
width: 100%;
|
|
color: $grey-light;
|
|
text-align: center;
|
|
display: block;
|
|
margin: 1em 0;
|
|
font-size: .8em;
|
|
}
|