Better usability for Nextcloud

You need the Custom CSS Plugin:
1) Apps -> Search: “css” -> Install “Custom CSS”
2) Go to Settings -> Design, scroll down to the custom CSS input field
3) Paste the css modification

Minifed Code:

*{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif!important}body header#header{height:56px!important;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);transition:all .3s cubic-bezier(.25,.8,.25,1)}#content{padding-top:56px}#app-navigation{top:56px;background-color:#fafafa}.detailCallInfoContainer{background-color:#f5f5f5}.multiselect__content-wrapper{min-width:230px;min-height:350px;box-shadow:0 19px 38px rgba(0,0,0,.3),0 15px 12px rgba(0,0,0,.22)}.multiselect__content-wrapper *{opacity:1!important}.multiselect__content-wrapper li.multiselect__element{padding:2px 5px!important}.multiselect__content-wrapper li.multiselect__element:hover{background-color:#f3f3f3!important}.multiselect[data-v-fa73a1d] .multiselect__content-wrapper li>span:not(.multiselect__option--disabled):hover::before{opacity:.1!important}.multiselect[data-v-fa73a1d] .multiselect__content-wrapper li>span{padding:2px 8px!important}#appmenu li.hidden{display:unset}#appmenu #more-apps{display:none!important}#appmenu li span{opacity:1;text-overflow:unset}#appmenu li svg{margin-bottom:14px;transition:none}#appmenu:hover li svg{transform:none}#app-navigation>ul>li>a,#app-navigation>ul>li>ul>li>a{font-weight:500;font-size:14px;font-family:sans-serif;text-shadow:none}#app-navigation>ul>li.app-navigation-caption{font-size:14px;font-weight:700;opacity:1}#appmenu li a{width:70px!important;opacity:1}#header .header-right>div>.menutoggle,#header .header-right>form>.menutoggle{opacity:1}#nextcloud{border-right:1px solid rgba(245,245,245,.5)}#notification{background-color:#ff7272;opacity:1}.app-mail{font-family:sans-serif}.app-content-list{max-width:450px}div#reply-composer{border-top:7px double var(--color-primary-element);padding-top:20px}div#reply-composer::before{content:'Antworten:';padding:30px;font-size:24px;font-weight:700}div#reply-composer{background-color:#f5f5f5}input.to.recipient-autocomplete{color:var(--color-primary-element);font-weight:700}label.to-label.transparency{font-weight:bolder;color:#5d5d5d;opacity:1}.transparency{opacity:1}input#forward-button{position:absolute;top:20px;right:20px;z-index:500}.app-content-list-item-details.date{opacity:1}.app-content-list .app-content-list-item .app-content-list-item-line-two,.app-content-list .app-content-list-item>.app-content-list-item-menu>[class*=' icon-'],.app-content-list .app-content-list-item>.app-content-list-item-menu>[class^=icon-],.app-content-list .app-content-list-item>[class*=' icon-'],.app-content-list .app-content-list-item>[class^=icon-]{opacity:.7}#app-navigation>ul>.navigation-account>.folders>li>a{opacity:.7;font-weight:500}blockquote{color:#111!important}#chatView .comment{border-top:1px solid #e2e2e2}ul#spreedme-room-list{background-color:#f5f5f5}input#select-participants::placeholder{opacity:1;color:#000;font-weight:500}.newCommentRow.comment{background-color:#fafafa;padding-top:6px;margin-bottom:0!important;padding-bottom:10px}

Full Code:

/*
    BETTER USABILITY FOR NEXTCLOUD
    VERSION 1.2.3
*/


/* Override fonts */

* {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}


/* Navbar */

body header#header {
    height: 56px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}

#content {
    padding-top: 56px;
}

#app-navigation {
    top: 56px;
    background-color: #fafafa;
}

.detailCallInfoContainer {
    background-color: whitesmoke;
}


/* Dropdowns */
.multiselect__content-wrapper {
    min-width: 230px;
    min-height: 350px;
    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
}

.multiselect__content-wrapper * {
    opacity: 1 !important;
}

.multiselect__content-wrapper li.multiselect__element {
    padding: 2px 5px !important;
}

.multiselect__content-wrapper li.multiselect__element:hover {
    background-color: #f3f3f3 !important;
}
.multiselect[data-v-fa73a1d] .multiselect__content-wrapper li > span:not(.multiselect__option--disabled):hover::before {
    opacity: 0.1 !important;
}
.multiselect[data-v-fa73a1d] .multiselect__content-wrapper li > span {
    padding: 2px 8px !important;
}


/* WATCH: disable collapse menu */

#appmenu li.hidden {
    display: unset;
}

#appmenu #more-apps {
    display: none !important;
}


/* Navigation labels */

#appmenu li span {
    opacity: 1;
    text-overflow: unset;
}

#appmenu li svg {
    margin-bottom: 14px;
    transition: none;
}

#appmenu:hover li svg {
    transform: none;
}

#app-navigation>ul>li>a,
#app-navigation>ul>li>ul>li>a {
    font-weight: 500;
    font-size: 14px;
    font-family: sans-serif;
    text-shadow: none;
    /*color: #444;*/
    /*line-height: 40px;
    min-height: 40px;*/
}

#app-navigation>ul>li.app-navigation-caption {
    font-size: 14px;
    font-weight: bold;
    /*color: #01b368;*/
    opacity: 1;
}

#appmenu li a {
    width: 70px !important;
    opacity: 1;
}

#header .header-right>div>.menutoggle,
#header .header-right>form>.menutoggle {
    opacity: 1;
}

#nextcloud {
    border-right: 1px solid rgba(245, 245, 245, .5);
}

#notification {
    background-color: #ff7272;
    opacity: 1;
}


/* Email */

.app-mail {
    font-family: sans-serif;
}

.app-content-list {
    max-width: 450px;
}

div#reply-composer {
    border-top: 7px double var(--color-primary-element);
    ;
    padding-top: 20px;
}

div#reply-composer::before {
    content: 'Antworten:';
    padding: 30px;
    font-size: 24px;
    font-weight: bold;
}

div#reply-composer {
    background-color: whitesmoke;
}

input.to.recipient-autocomplete {
    color: var(--color-primary-element);
    ;
    font-weight: bold;
}

label.to-label.transparency {
    font-weight: bolder;
    color: #5d5d5d;
    opacity: 1;
}

.transparency {
    opacity: 1;
}

input#forward-button {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 500;
}

.app-content-list-item-details.date {
    opacity: 1;
}

.app-content-list .app-content-list-item .app-content-list-item-line-two,
.app-content-list .app-content-list-item>[class^='icon-'],
.app-content-list .app-content-list-item>.app-content-list-item-menu>[class^='icon-'],
.app-content-list .app-content-list-item>[class*=' icon-'],
.app-content-list .app-content-list-item>.app-content-list-item-menu>[class*=' icon-'] {
    opacity: 0.7;
}

#app-navigation>ul>.navigation-account>.folders>li>a {
    opacity: 0.7;
    font-weight: 500;
}

blockquote {
    color: #111 !important;
}


/* CHAT / TALK */

#chatView .comment {
    border-top: 1px solid #e2e2e2;
}

#chatView .comment:nth-child(odd) {}

ul#spreedme-room-list {
    background-color: whitesmoke;
}

input#select-participants::placeholder {
    opacity: 1;
    color: black;
    font-weight: 500;
}

.newCommentRow.comment {
    background-color: #fafafa;
    padding-top: 6px;
    margin-bottom: 0px !important;
    padding-bottom: 10px;
}

Leave a Reply

Your email address will not be published. Required fields are marked *