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;
}
