☰

Habitica AAA contrast

Increases contrast to WCAG AAA everywhere possible/feasible

  1. /* ==UserStyle==
  2. @name           Habitica AAA contrast
  3. @namespace      https://gf.qytechs.cn/users/662334
  4. @version        0.5.0
  5. @description    Increases contrast to WCAG AAA everywhere possible/feasible
  6. @author         citrusella
  7. @license        CC-BY-SA-4.0
  8. @supportURL     https://habitica.com/profile/2d6ef231-50b4-4a22-90e7-45eb97147a2c
  9. @preprocessor   stylus
  10. @advanced       checkbox oldstyletiers "Use alternate tier coloring (colored outlines also differentiated by look of outline, dark display name (except staff/mods), adjusted for contrast)" 0
  11. ==/UserStyle== */
  12.  
  13. @-moz-document domain("habitica.com") {
  14.     .icons {
  15.         color: rgb(91, 87, 99) !important
  16.     }
  17.     .markdown a,.filter-panel .tags-header a,.notification-bold-blue,a.standard-link, a:not([href]):not([tabindex]).standard-link,.int {
  18.         color: #1A5E82 !important
  19.     }
  20.     a {
  21.         color: #004C9E
  22.     }
  23.     .markdown a {
  24.         text-decoration: underline dotted
  25.     }
  26.     .badge-purple,.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
  27.         background: #681DEE
  28.     }
  29.     .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
  30.         border-color: #681DEE
  31.     }
  32.     .collapse-checklist,.btn-show-more,.btn-show-more .button-text,#stats .gear-label,.category-label:not(.category-label-green):not(.category-label-blue):not(.category-label-purple),h4:not(.markdown):not(.popover-content-title):not(.popover-title-only),#buy-quest-modal .balance,#buy-quest-modal span,#buy-modal .balance,#buy-modal span,#avatar-modal .sub-menu-item:not(.active) {
  33.         color: #514C57 !important
  34.     }
  35.     .btn-show-more,.info-item .progress {
  36.         border: 1px solid #514C57
  37.     }
  38.     .pet-progress-background {
  39.         border: 1px solid #514C57;
  40.         height: 6px
  41.     }
  42.     .pet-progress-bar,.toggle-switch-inner::before:not(.drawer-tab-container) {
  43.         background-color: #1A9166;
  44.     }
  45.     .task-disabled-daily-todo-control-content .task-title,.task-disabled-daily-todo-control-content .task-notes,.checklist-item-done,#avatar-modal .customize-menu .menu-container:not(.active),.empty-messages h2,.empty-messages .envelope svg {
  46.         color: #7A7484/*#000*/ !important /*"unimportant" grey*/
  47.     }
  48.     code {
  49.         color: #AB145A
  50.   }
  51.     .due-overdue,.btn-filters-danger,.challenge.broken,.str,.delete-task-item,.badge-equip.is-equipped:hover .unequip-icon {
  52.         color: #B4080C !important
  53.     }
  54.     .btn-filters-secondary,.card-body .time,.action:not(.activeLike),.action .svg-icon:not(.activeLike),.chat-row textarea,.dropdown-item .small-text,.card .guild-bank,.challenge .owner-item,.profile .member-details .small-text,.name,.info .info-item,.small,.gem-text,.text-outtro,.box .details,.empty-messages p,.sub-new-message-row .guidelines,.empty-messages h3 {
  55.         color: #5B5763 !important /*important grey*/
  56.     }
  57.     .diamond-btn .svg-icon:not(.btn-success .svg-icon) {
  58.         color: #5B5763 !important /*important grey*/
  59.     }
  60.     footer.expanded,footer.expanded h3,footer.expanded a,footer.expanded .logo,.badge:not(.badge-count):not(.badge-purple):not(.badge-pin):not(.badge-star):not(.badge-item) {
  61.         color: #4A464F !important
  62.     }
  63.     .social-circle,.btn-contribute {
  64.         background-color: #4a464f !important
  65.     }
  66.     .create-btn.open .svg-icon,#purple-footer .btn-contribute,#purple-footer .social-circle .svg-icon {
  67.         color: #fff !important
  68.     }
  69.     .svg-icon.heart path {
  70.         fill: #FAD9D9 !important
  71.     }
  72.     .action:not(.activeLike) .svg-icon path,.challenge .member-count .svg-icon path,.box .member-icon path,.action-dropdown .dots:not(:hover) svg path {
  73.         fill: #5B5763 !important
  74.     }
  75.     .activeLike .svg-icon {
  76.         color: #681DEE !important
  77.     }
  78.     .activeLike .svg-icon path {
  79.         fill: #681DEE !important
  80.     }
  81.     .notification-remove .svg-icon path,.slider-button .svg-icon path {
  82.         stroke: #5B5763
  83.     }
  84.     .drawer-help-text .svg-icon path {
  85.         fill: #BEBBC3
  86.     }
  87.     .sleep .pause-button {
  88.         background-color: #4f2a93 !important
  89.     }
  90.     .sidebar .section {
  91.         border-top: 1px solid #6D6975 !important
  92.     }
  93.     .section:last-of-type {
  94.         border-bottom: 1px solid #6D6975 !important
  95.     }
  96.     .bg-health {
  97.         background: #F86064 !important
  98.     }
  99.     .message-count.top-count {
  100.         background-color: #ED0B10 !important
  101.     }
  102.     .badge-count,.message-count.top-count-gray,.create-btn.open[data-v-55748a62] {
  103.         background: #5C5763 !important;
  104.         color: #fff !important
  105.     }
  106.     #achievements .counter.badge,#allocation .counter.badge {
  107.         background-color: #973D00 !important;
  108.         color: #fff !important
  109.     }
  110.     .featured-label {
  111.         background-color: #864A0E !important
  112.     }
  113.     .btn-success,.category-label-green {
  114.         background: #126547 !important
  115.     }
  116.     .no-quest-section h4,.no-quest-section {
  117.         color: #6E6977 !important
  118.     }
  119.     .toggle-switch-inner::after {
  120.         background-color: #6E6977 !important
  121.     }
  122.     .challenge .challenge-prize {
  123.         background: rgba(36,204,143,.15) !important;
  124.     }
  125.     .challenge .number, .challenge .challenge-prize .label,.challenge .challenge-prize .value,.purchase-set span.price,#avatar-modal .gem-lock span,#avatar-modal #backgrounds .purchase-background span.price {
  126.         color: #005737 !important
  127.     }
  128.     .challenge .muted .value,.challenge .muted .svg-icon {
  129.         opacity: .75 !important
  130.     }
  131.     .challenge .muted .label {
  132.         opacity: .91 !important
  133.     }
  134.     .category-label-blue,.btn-info,.topbar-dropdown-item .message-count,.badge-equip.is-equipped {
  135.         background: #1B5E81
  136.     }
  137.     .btn-danger,.btn-danger.disabled {
  138.         background: #AD1E1E
  139.     }
  140.     .btn-danger.disabled {
  141.         opacity: .77
  142.     }
  143.     .card .gold .member-count,.con {
  144.         color: #814D02 !important
  145.     }
  146.     .card .silver .member-count {
  147.         color: #595959 !important
  148.     }
  149.     .card .member-count {
  150.         color: #864A0E !important
  151.     }
  152.     .claim-bottom-message,.group-plan-static p,.group-plan-static small,.stats-label {
  153.         color: #58545F !important
  154.     }
  155.     .claim-bottom-message .claim-color {
  156.         color: #195B7E !important
  157.     }
  158.     .claim-bottom-message .unclaim-color {
  159.         color: #AE080C !important
  160.     }
  161.     .challenge .owner-item a:not([class*="tier"]) {
  162.         color: #0056B3
  163.     }
  164.     .challenge .meta-item,#allocation .box .points,#avatar-modal .customize-menu .menu-container:not(.active) {
  165.         color: #5C5763 !important
  166.     }
  167.     .btn-warning {
  168.         background-color: #715400
  169.     }
  170.     [class*="tier"] path,.col-4.staff path {
  171.         stroke-opacity: 0.82 !important
  172.     }
  173.     .mentioned-icon {
  174.         background-color: #7E55FF !important
  175.     }
  176.     .drawer-content {
  177.         color: #E8E8EA
  178.     }
  179.     #purple-footer {
  180.         background-color: #e1e0e3
  181.     }
  182.     .topbar .topbar-item.active:not(:hover) {
  183. 	    -webkit-box-shadow: 0 -4px 0 #936DD6 inset !important;
  184. 	    box-shadow: inset 0 -4px 0 #936DD6 !important;
  185.     }
  186.     .topbar:not(.white-header),nav.navbar:not(.white-header) {
  187. 	    background: #432874 !important
  188.     }
  189.     .task-worst-modal-bg {
  190.         background: #AD1E1E !important
  191.     }
  192.     .task-bad-modal-headings {
  193.         color: #401A00 !important
  194.     }
  195.     #task-modal input:active:not(:disabled), #task-modal input:focus:not(:disabled), #task-modal input:hover:not(:disabled), #task-modal textarea:active:not(:disabled), #task-modal textarea:focus:not(:disabled), #task-modal textarea:hover:not(:disabled) {
  196. 	    background-color: #fff;
  197.     }
  198.     #task-modal input, #task-modal textarea {
  199.         background-color: hsla(0,0%,100%,.75);
  200.     }
  201.     .task-neutral-control-inner-habit {
  202. 	    background: rgba(121,75,0,.46) !important;
  203.     }
  204.     .task-neutral-control-bg .habit-control:hover {
  205. 	    background: rgba(121,75,0,.8) !important; /*.71*/
  206.     }
  207.     .task-bad-control-inner-habit {
  208. 	    background: rgba(127,51,0,.26) !important;
  209.     }
  210.     .task-bad-control-bg .habit-control:hover {
  211. 	    background: rgba(127,51,0,.56) !important;
  212.     }
  213.     .spell .mana {
  214.         color: #16506E !important;
  215.     }
  216.     .alert-info {
  217.         color: #0C535F !important;
  218.     }
  219.     .drawer-content .item-label,.popover-body .popover-content-attr-cell.label {
  220.         color: #E9E8EA !important;
  221.     }
  222.     .modal-body .popover-content-attr-cell.key,.modal-body .popover-content-attr-cell.label {
  223.         opacity: 1
  224.     }
  225.     .popover-content-attr-cell.green {
  226.         color: #A7F8DB !important;
  227.     }
  228.     .badge-star:not(.item-selected-badge) {
  229.         color: #97929E !important;
  230.     }
  231.     .badge-star.item-selected-badge {
  232.         background: #2FA3AE !important;
  233.     }
  234.     .pricing .dollar,.pricing .number,.pricing .plus,.muted,.pricing {
  235.         color: #76707F !important;
  236.     }
  237.     .iconalert-success::before {
  238.         background-color: #17875E
  239.     }
  240.     .iconalert-success {
  241.         background-color: #126547
  242.     }
  243.     .text-muted {
  244.         color: #50565C !important
  245.     }
  246.     .outer-option-background.none .option .sprite[data-v-5d0229fc] {
  247. 	    opacity: .7;
  248.     }
  249.     .white-header {
  250. 	    background: #fff !important;
  251. 	    background-color: #fff !important;
  252.     }
  253.     .sidebar .section-info path {
  254.         fill: #514C57
  255.     }
  256.     
  257.     
  258.     
  259.     
  260.     
  261.     
  262.     
  263.     
  264.     
  265.     
  266.     
  267.     
  268.     
  269.     
  270.     
  271.     if oldstyletiers {
  272.           [class*="tier"]:not(.svg-icon):not(.no-tier):not(.tier8):not(.tier9):not(.face-avatar) {
  273.               color: #4e4a57 !important;
  274.               width: auto !important;
  275.               text-indent: 8px;
  276.               border-radius: 6px;
  277.               padding-right: 8px;
  278.    }
  279.           /*.tier1 .svg-icon,.tier2 .svg-icon,.tier3 .svg-icon,.tier4 .svg-icon,.tier5 .svg-icon,.tier6 .svg-icon,.tier7 .svg-icon,.tier10 .svg-icon,.leader .svg-icon:empty,.tier1 ~ .svg-icon,.tier2 ~ .svg-icon,.tier3 ~ .svg-icon,.tier4 ~ .svg-icon,.tier5 ~ .svg-icon,.tier6 ~ .svg-icon,.tier7 ~ .svg-icon,.tier10 ~ .svg-icon {
  280.               display: none !important;
  281.    }*/
  282.           .tier8 .svg-icon,.tier9 .svg-icon {
  283.               margin-left: 0.15em !important;
  284.    }
  285.           /*.tier8 .svg-icon g,.tier9 .svg-icon g,.staff .svg-icon g,.moderator .svg-icon g {
  286.               fill: #FFF !important;
  287.    }*/
  288.           .tier1 {
  289.               border: 2px dotted #c42870 !important;
  290.    }
  291.           .tier2 {
  292.               border: 2px dotted #B93030 !important;
  293.    }
  294.           .tier3 {
  295.               border: 2px dashed #d70e14 !important;
  296.    }
  297.           .tier4 {
  298.               border: 2px dashed #c24d00 !important;
  299.    }
  300.           .tier5 {
  301.               border: 2px double #9e650f !important;
  302.    }
  303.           .tier6 {
  304.               border: 2px double #2b8363 !important;
  305.    }
  306.           .tier7 {
  307.               border: 3px double #007DBC !important;
  308.    }
  309.           .moderator,.tier8,.section-body .moderator {
  310.               border: 3px solid #130EAD !important;
  311.               color: #130EAD !important
  312.    }
  313.          .staff,.tier-list .staff,.tier9,.leader .tier9,.section-body .staff:not(.moderator) {
  314.               border: 3px solid #6133b4 !important;
  315.               color: #44006d !important;
  316.    }
  317.          .tier8:not(.face-avatar),.tier9:not(.face-avatar) {
  318.               width: auto !important;
  319.               text-indent: 8px;
  320.               border-radius: 6px;
  321.               padding-right: 8px;
  322.    }
  323.          .section-body .staff {
  324.               width: auto !important;
  325.               text-indent: 2px;
  326.               border-radius: 6px;
  327.               padding-right: 8px;
  328.    }
  329.          .tier-list .npc,.tier10,.col-4.staff.moderator.bailey {
  330.               border: 3px solid #000 !important;
  331.    }
  332.          .staff .title {
  333.               color: #44006d !important;
  334.    }
  335.          .moderator .title {
  336.               color: #130EAD !important;
  337.    }
  338.          .conversation .user {
  339.              height: auto !important;
  340.          }
  341.   } else {
  342.          .col-4.staff,.tier-list li {
  343.               background: #fff !important
  344.    }
  345. }
  346. }
  347. @-moz-document url("https://contact.habitica.com") {
  348.     .form-control,textarea,::placeholder {
  349.         color: white !important;
  350.     }
  351.     .form-control option:disabled {
  352.         color: #9AA2AA !important
  353.     }
  354.     .btn-primary {
  355.         background-color: #0072ED !important;
  356.         border-color: #0072ED !important
  357.     }
  358.     .btn-primary:hover {
  359.         background-color: #0056B2 !important;
  360.         border-color: #0052b6 !important
  361.     }
  362. }

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址