CSS Skins: Clean variable highlight


/*Change this variable to alter the link and button highlight colours in one go*/
:root {  --main-highlight-color: #02c0ce;}



.page .page-content {background-color: #f3f6f8!important;}
body{font-family: Roboto,sans-serif!important;
font-size: .875rem!important;
line-height: 1.5!important;
color: #313a46!important;
text-align: left;!important}

.page-header {background-color: #f3f6f8!important; color:#313a46!important;}

.page-utilities {background-color: #f3f6f8!important;}

.app-menu .app-menu_content .main-menu {
background-color: #fff!important;
padding: 4px 0!important;
width: 240px!important;
}
.app-menu {
background-color: #fff!important;}

.app-menu .app-menu_content .sub-menu {
width: 20%!important;
background-color: #fff!important;}

.app-menu:not(.has-custom-text-color) .app-menu_content .menu-items .menu-item.active, .app-menu:not(.has-custom-text-color) .app-menu_content .menu-items .menu-item:hover {
color: var(--main-highlight-color)!important;
}
.app-menu .app-menu_content .main-menu .menu-items .menu-item {line-height: 40px!important;}
.app-menu .app-menu_content .menu-items .menu-item .item-badge {background-color: #fff!important;}
.app-menu .app-menu_content {color: #6e768e!important;}
.group-container .group-head {background-color: #f3f6f8!important;}

.app-menu .app-menu_content .sub-menu .workspaces-menu.active-workspace, .app-menu .app-menu_content .sub-menu .workspaces-menu.workspaces-list {opacity: 0.05;}
.app-menu .app-menu_content .sub-menu:hover .workspaces-menu.active-workspace, .app-menu .app-menu_content .sub-menu:hover .workspaces-menu.workspaces-list {transition-timing-function: ease-in-out;transition-duration:1s!important;opacity: 1;}

.list-section .list-content .list-head .item-cell:first-of-type, .list-section .list-content .list-head .item-cell:last-of-type, .list-section .list-content .list-body .list-item:last-of-type .item-cell:first-of-type, .list-section .list-content .list-body .list-item:last-of-type .item-cell:last-of-type:not(:first-child) {
border-radius: 0px!important;}

.page:not(.no-mainMenu) .list-section:not(.cards-view) .list-content {
padding: 10px!important;
background-color: #fff!important;
border-radius: 4px!important;
}
.page:not(.no-mainMenu) .list-section:not(.cards-view) .list-content .list-body .list-item:last-of-type .item-cell {border-bottom: 1px solid #edf2f7!important;}

.group-container .group-content .list-section.cards-view {
background-color: #f3f6f8!important;}

.page-content .list-section .list-content .list-body .list-item.has-color-tag .cell-title {
border-left: 0px solid!important;}
.page-content .list-section .list-content .list-body .list-item.has-color-tag .cell-title:hover {
border-left: 7px solid!important;
border-left-color: inherit!important;}

.group-head .custom-field .custom-field-content .field-background {
background-color: var(--main-highlight-color)!important;}

.button.button-green {background-color: var(--main-highlight-color)!important;}
.page-header .content>.content-block.block_create-new .button:first-of-type {
border-right: 1px solid #f3f6f8!important;
}

.app-menu>svg {display:none;}

.progress-bar .progress-bar-indicator {
background-color:  var(--main-highlight-color)!important;}
.progress-bar {width: 200px!important;background-color: #f3f6f8!important;}

.custom-field .custom-field-content.has-color-tag .field-title {color:#fff!important;}

/*Project Tasks page*/
.tasks-cards-view .tasks-board .tasks-container-content .tasks-container-wrapper .tasks-groups-wrapper .tasks-groups .tasks-group-wrapper .tasks-group .tasks-group-content {background-color: #ffffff!important;}
.tasks-container .tasks-groups .add-task .add-task-input {  background-color:  var(--main-highlight-color)!important;}
.tasks-container .fieldset>.fieldset-content .fieldset-label .fieldset-label-content {color: #ffffff!important;}
.tasks-container ::placeholder {
-webkit-text-security: none;
color: #fff!important;}

.task .task-link .task-link-head .task-checkbox input[type=checkbox]:checked+span {
border-color: var(--main-highlight-color)!important;
background-color: var(--main-highlight-color)!important;}

.tasks-cards-view .tasks-container-content .tasks-container-wrapper .tasks-groups-wrapper .tasks-groups .tasks-group-wrapper .tasks-group .tasks-group-content .tasks-group-body .task {
border: 1px solid #f3f6f8!important;
margin-bottom: 10px!important;
}

.task:first-of-type .task-link, .task:first-of-type .task-link .task-cover, .task:last-of-type .task-link, .task:last-of-type .task-link .task-cover {border-bottom-left-radius: 0px!important;
border-bottom-right-radius: 0px!important;
border-top-left-radius: 0px!important;
border-top-right-radius: 0px!important;
}



.task .task-link.has-color-tag {
border-left: 2px solid;
margin-left: -2px;
}

.tasks-cards-view .tasks-container-content .tasks-container-wrapper .tasks-groups-wrapper .tasks-groups .tasks-group-wrapper .tasks-group .tasks-group-content {
border-radius: 4px!important;
border-width: 3px!important;}




#Plutio Widgets#