Raw Source Toggle Dropdown

• Minified Source

agatha / Habitica Tags Always Visible Flat Version

// ==UserScript==
// @namespace https://openuserjs.org/users/agatha
// @name Habitica Tags Always Visible Flat Version
// @description Make the tags visible all the time on the Habitica tasks page. Modified for flat aesthetic. Fork of Citrusella's and Alys' Habitica Tags Always Visible https://openuserjs.org/scripts/Alys/Habitica_Tags_Always_Visible
// @copyright 2023 agatha
// @licence MIT
// @version 1.0.0
// @include https://habitica.com/*
// @grant GM_addStyle
// ==/UserScript==

// ==OpenUserJS==
// @author agatha
// ==/OpenUserJS==

GM_addStyle (`
	.tasks-navigation {
		height: 210px !important;
	}

	input.form-control.input-search, input.input-search, textarea.form-control.input-search, textarea.input-search {
		max-width: 80%;
	}

	#app > div.container-fluid > div.sticky > div > div.col-12 > div.row.tasks-navigation > div.col-12.col-md-4.offset-md-4 > div.d-flex > button {
		display: none !important;
	}

	#app > div.container-fluid > div.sticky > div > div.col-12 > div.row.tasks-navigation > div.col-12.col-md-4.offset-md-4 > div.filter-panel > div.filter-panel-footer.clearfix > div.float-right > a {
		display: none
	}

	#app > div.container-fluid > div.sticky > div > div.col-12 > div.row.tasks-navigation > div.col-12.col-md-4.offset-md-4 > div.filter-panel > div.filter-panel-footer.clearfix > div.float-left > a {
		color: #A5A5AC !important;
	}

	#app > div.container-fluid > div.sticky > div > div.col-12 > div.row.tasks-navigation > div.col-12.col-md-4.offset-md-4 > div.filter-panel > div:nth-child(2) > div.tags-header > a {
		color: #A5A5AC !important;
	}

	#app > div.container-fluid > div.sticky > div > div.col-12 > div.row.tasks-navigation > div.col-12.col-md-4.offset-md-4 > div.filter-panel > div:nth-child(1) > div.tags-header > a {
		color: #A5A5AC !important;
	}

	.filter-panel {
		max-height: 170px !important;
		min-height: 85px !important;
		max-width: 99% !important;
		width: 99% !important;
		left: 0px !important;
		z-index: 0 !important;
		overflow-y: scroll !important;
		display: flex !important;
		flex-direction: column !important;
		box-shadow: none !important;

		background-color: #F9F9F9 !important;
		border-radius: 5px !important;

	}

	.filter-panel::-webkit-scrollbar {
		width: 12px;
		height: 12px;
	}

	.filter-panel::-webkit-scrollbar-track {
		background: #EDECEE;
		border-radius: 10px;
	}

	.filter-panel::-webkit-scrollbar-thumb {
		border-radius: 10px;
		background: #ccc;  
	}

	.filter-panel::-webkit-scrollbar-thumb:hover {
		background: #999;  
	}


	.tasks-navigation .tags-list .custom-control {
		padding-left: 0rem !important;
		margin-bottom: 0rem !important;
		margin-left: -.5rem !important;
	}
	.tasks-navigation .tags-list .custom-control-input {
		left: .5rem !important;
	}
	.tasks-navigation .tags-list .custom-control .custom-control-label::before,.tasks-navigation .tags-list .custom-control-input:checked ~ .custom-control-label::before,.tasks-navigation .tags-list .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
		visibility: hidden !important;
	}
	.tasks-navigation .tags-list .custom-control-label::after,.tasks-navigation .tags-list .custom-control-label::before {
		left: 0rem !important;
	}
	.tasks-navigation .tags-list .custom-checkbox .custom-control-input:checked ~ .custom-control-label {

        background-color: #333333;
        border: 1px solid #333333;
        color: #F9F9F9;
		background-color: #4E4A57;
		border: 1px solid #4E4A57;

		background-color: #54504f;
		border: 1px solid #54504f;
	}
	.tasks-navigation .tags-list .custom-control-label {

		border-radius: 12px;
		padding-left: 8px;
		padding-right: 8px;

        color: #54504f;
        border: 1px solid #dbdbdb;
        background-color: #F9F9F9;

        padding-bottom: 0px !important;
        padding-top: 0px !important;
	}

    .tasks-navigation .tags-list .custom-control-label > p {
		margin-top: 4px !important;
		margin-bottom: 4px !important;

    }
	.tasks-navigation .tags-list .col-6 {
		width: auto !important;
		flex: none !important;
		padding: 2px !important;
	}
	.tasks-navigation .tags-list .col-6 .tag-edit-item {
		max-width: 220px !important;
	}
	.tasks-navigation .col-md-4 {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 100% !important;
	}
	.offset-md-4 {
		margin-left: 0.5% !important;
	}
	.modal {
		z-index: 999999999 !important;
	}
	.filter-panel-footer {
		order: 1 !important;
		padding-top: 12px !important;
		padding-bottom: 4px !important;
	}
	.tags-category {
		order: 2 !important;
		padding-top: 6px !important;
		padding-bottom: 4px !important;
	}
	.tags-category.flex-column {
		-webkit-box-orient: horizontal !important;
		-ms-flex-direction: row !important;
		flex-direction: row !important;
	}
	.tags-list.container {
		max-width: 5000px;
	}


    div.sortable-tasks > div > div.task {
		box-shadow: none !important;
		margin-bottom: 7px;
	}


`);


var targetNode = document.querySelector('body');


var callback = function(mutationsList, observer) {
	var tagsButton = document.querySelector("html body div div#app div.container-fluid div div.row.user-tasks-page div.col-12 div.row.tasks-navigation div.col-12.col-md-4.offset-md-4 div.d-flex button.btn.btn-secondary.dropdown-toggle");

	var filterPanel = document.querySelector(".filter-panel");
	if (tagsButton && !filterPanel){ // we have the tagsButton, but don't have our filter-panel
		tagsButton.click(); // this clicks on the "Tags" button to show the panel that contains the list of tags
	}


};

// var tagsButton = document.querySelector("html body div div#app div.container-fluid div div.row.user-tasks-page div.col-12 div.row.tasks-navigation div.col-12.col-md-4.offset-md-4 div.d-flex button.btn.btn-secondary.dropdown-toggle");


var observer = new MutationObserver(callback);
var config = {
	childList: true,
	subtree: true,
};
observer.observe(targetNode, config);