stylez

dark css style orverrides for sites i use

zendesk/style.css


/*
urls on the domain: zendesk.com
 */
@-moz-document domain("zendesk.com") {
    body, select, input, textarea, .LRcm, .section.ticket .notice p.pre, .c-tab__list { /*Default Text Colour*/
        color: #cdd3d9;
    }

    a {
        color: #b79aff;
    }

    a:hover {
        color: #d0bdfd;
    }

    * {
        scrollbar-color: dark;
        color-scheme: dark;
    }

    #main_navigation {
        background-color: #01486a;
    }

    .c-tab__list__item.c-tab__list__item.is-selected {
        color: #f3f3f3;
    }

    .workspace.apps:not(.ticket_editor_app),
    .section.ticket .notice {
        background-color: #222;
        border-color: #222;
    }
    .app_view_outer iframe {
        filter: invert(100);
    }
    .zendesk-editor--rich-text-container, .hTlUQN {
        border-color: #333;
    }
    .hTlUQN, .workspace.apps:not(.ticket_editor_app) header {
        background-color: #333;
    }
    .cuvZGr, .jhXecZ {
        background: #222 !important;
    }


    .comment_input_wrapper article {
        background-color: #222 !important;
    }

    .gpwwwm { /*Get Started/Breadcrumbs*/
          background-color: #3c3c3c;
    }

    .cWfxTc { /*Get Started/Breadcrumbs Text - Active*/
        color: #97d0ff;
    }

    .lmBAXU { /*Get Started/Breadcrumbs Text*/
        color: #c6dbec;
    }

    .indicators {
        background-color: #303636;
        color: #c6dbec;
    }

    .indicators h4 > span {
        color: #b9b9b9;
    }

    .indicators ul {
        background-color: #242424;
        border: 1px solid #40646c;
    }

    .indicators .cell-value {
        color: #94bedf;
    }

    .indicators .cell-title {
        color: #a4a9ad;
    }

    .LRd { /*Ticket Tab Background*/
        background: #202020;
    }

    .LRe { /*Ticket Tab Border*/
        border-bottom: 1px solid rgb(0 0 0);
    }

    .LRx { /*Ticket Add Button*/
        background-color: #1a2026;
        color: #97d3ef;
    }

    /*
    .LRex {
        background-color: #15719d;
    }

    .LRex:hover {
        background-color: #183847;
    }
    */

    .main_panes > header, .workspace > header { /*Ticket Top Bar (Info)*/
        background-color: #33373a;
        border-bottom: 1px #1f2020 solid;
    }

    .kWHJfL { /*Top bar Box Text Color*/
        color: #bdc5cb;
    }

    .kWHJfL:hover {
        color: #92bddd;
    }

    .fxWzfx > svg, .fxWzfx .sc-uJMKN { /*Top Bar Ticket Icon*/
        color: #aec1cf;
    }

    .LRau { /*Inactive Ticket Background*/
        background-color: #313131;
    }
    .LRau:hover {
        background-color: #344351;
    }
    .LRat { /*Inactive Ticket Border*/
        border-right: 1px solid #2b2c2c;
    }
    .LRas { /*Inactive Ticket Border*/
        border-bottom: 1px solid #292a2a;
    }

    .crEjqd { /*Empty Ticket View Text*/
        color: #bde0ff;
    }

    .crEjqd:hover {
        color: #fafdff;
    }

    .hNmglM { /*Ticket View Text*/
        color: #ebebeb;
    }

    .hNmglM:hover {
        color: #fdf8f8;
    }

    .VxCKy { /*Ticket View Text Selected*/
        color: #ebebeb;
        background-color: #3a4d5c;
    }

    .VxCKy:hover {
        color: #fdf8f8;
        background-color: #3a4d5c;
    }

    .iSiqOr { /*Suspended Tickets View Text*/
        color: #ffc41d;
    }

    .iSiqOr:hover {
        color: #fbd979;
    }

    .fwJsWA { /*Suspended Tickets View Text Selected*/
        background-color: #3a4d5c;
        color: #ffc41d;
    }

    .fwJsWA:hover {
        background-color: #3a4d5c;
        color: #fbd979;
    }

    .hjUPxu { /*Tickets View Manage Views Icon*/
        color: #bde1ff;
    }

    .hjUPxu:hover {
        color: #c9e2f7;
    }

    .cBuFak { /*Tickets View Manage Views Text*/
        color: #a7d1f3;
    }

    .cBuFak:hover {
        color: #d8e8f5;
    }

    .LRdx { /*Ticket View Left Border*/
        border-left: 1px solid #1d1f20;
    }

    .pane.right.views { /*Right Pane*/
        background: #212325;
    }

    .jydokf { /*Ticket Pane Ticket Title*/
        color: #9eb1c1;
    }

    .jydokf:hover {
        color: #9cd4ff;
    }

    .csyHXp { /*Ticket Pane Text*/
        color: #c5c5c5;
    }

    .fiNJsl th { /*Ticket Pane Table Header*/
        background-color: #2e2e2e;
    }

    .fNgTOj { /*Ticket Pane Table Header Separator*/
        border-bottom: 1px solid #1d1e1e;
        background-color: #2e3133;
    }

    .eaItv { /*Ticket Pane Table Ticket Separator*/
        border-bottom: 1px solid #595c5e;
    }

    .cqCcXs > * { /*Drop-down Add Background*/
        background-color: #242424;
        border-color: #3a5562 !important;
    }

    .fuogUH { /*Drop Down Add Title*/
        color: #bdd5e9;
    }

    .kFsGWG { /*Drop Down Add Text*/
        color: #b7c1c9;
    }

    .fsZyAV { /*Drop Down Add Separator*/
        border-bottom: 1px solid #6e6e6e;
    }

    .kqHPFE { /*Top Search Box*/
        background-color: #373f44;
        color: #96a2ab;
    }

    .bLWiol { /*Top Search Box Hover*/
        background-color: #505a5e;
        color: #79858f;
    }

    .hKneHq > div:not(:focus-within) > svg { /*Top Search Box Magnifying Glass*/
        color: #d9e1e9;
    }

    #branding_header {
        background: #202020;
    }

    .c-product-tray__icon-RrAhc { /*Product Tray Icon*/
        color: #93a3b3;
    }

    .c-product-tray__icon-RrAhc:hover { /*Product Tray Icon*/
        color: #b2c6d9;
    }

    .pane.left.section { /*Left Pane*/
        background: #1c1b1b;
        border-color: #6f6a6a;
    }

    .split_pane.collapsible .pane.left { /*Left Pane Border*/
        border-right: 1px solid #696b6c;
    }

    section.filters .left header h1, section.user_filters .left header h1, section.incidents .left header h1 { /*Left Pane Dropdown Title*/
        color: #b6d0e5;
    }

    .caret { /*Dropdown Caret*/
        border-top: 4px solid #9fc4e1;
        opacity: 0.5;
    }

    .action_button { /*Dropdown Action Button*/
        color: #aec8dd;
    }

    .filters > .pane.left ul.filters li.selected, .user_filters > .pane.left ul.filters li.selected, .user > .pane.left ul.filters li.selected { /*Customers Page Selected Option*/
        background-color: #3b4854;
        color: #b0bcc7;
    }

    .filters > .pane.left ul.filters li a, .user_filters > .pane.left ul.filters li a, .user > .pane.left ul.filters li a { /*Customers Page Option*/
        color: #d3d3d3;
    }

    .fdCpKu th { /*Customer Table Header*/
        background-color: #222222;
    }

    .LRcy { /*Dashboard Text*/
        color: #b5bdc3;
    }

    h4.list-heading { /*Tickets Requiring Attention Background*/
        background-color: #2b3138;
        border-bottom: 1px solid #5c5c5c;
    }

    .link {
        color: #a1c3df;
    }

    .activities .item { /*Dashboard Activity Log Background*/
        background-color: #04101a;
        border: 1px solid #344046;
    }

    .activities .item:hover {
        background-color: #061929;
        border-color: #418eb3;
    }

    .activities .description { /*Dashboard Activity Log Description*/
        color: #a2ceed;
    }

    .activities .description strong {
        color: #eceff1;
    }

    .activities .comment_value { /*Dashboard Activity Log Comment*/
        color: #a9b0b7;
    }

    .LRay { /*Dashboard Text*/
        color: #bfc2c5;
    }

    .LRcf { /*Dashboard Table Borders*/
        border-color: #545454;
        border-left: none;
        border-right: none;
    }

    .btn {
        background-color: #2a2a2a;
        border-color: #5e5e5e;
        color: #cad1d7;
        box-shadow: inset 0 1px 0 #838383;
    }

    .btn:hover {
        background-color: #181818;
        border-color: #6f6f6f;
        color: #c3d7e8;
        box-shadow: inset 0 1px 0 #8d8c8c;
    }

    .LRcn { /*Dashboard Ticket Text*/
        color: #a7aaad;
    }

    .LRdv { /*Dashboard Ticket Border*/
        border-color: #3d3e3e;
    }

    .LRdb { /*Dashboard Ticket Priority Background*/
        background-color: #060607;
    }

    .LRep { /*Active Ticket Tab Border*/
        border-right: 1px solid #515454;
    }


    .LReo { /*Active Ticket Tab Border*/
        border-bottom: 1px solid #515454;
    }

    .LRea, .LReb, .LRec, .LRed, .LRee, .LRef, .LReg, .LReh, .LRei, .LRej, .LRek, .LRel, .LRem, .LRen, .LReo, .LRep, .LReq, .LRer, .LRes, .LRet, .LReu, .LRev, .LRew, .LRex, .LRey, .LRez  { /*I have no idea why so many of these appear on the dashboard but this is the best I can do.*/
        border-color: #363636;
        background-color: #212325;
    }

    .LRea:hover, .LReb:hover, .LRec:hover, .LRed:hover, .LRee:hover, .LRef:hover, .LReg:hover, .LReh:hover, .LRei:hover, .LRej:hover, .LRek:hover, .LRel:hover, .LRem:hover, .LRen:hover, .LReo:hover, .LRep:hover, .LReq:hover, .LRer:hover, .LRes:hover, .LRet:hover, .LReu:hover, .LRev:hover, .LRew:hover, .LRex:hover, .LRey:hover, .LRez:hover  { /*I have no idea why so many of these appear on the dashboard but this is the best I can do.*/
        border-color: #444;
        background-color: #2c2f31;
    }


    .eFRLap { /*Ticket Updated Box*/
        border: 1px solid #2c2c2c;
        background-color: #383838;
        color: #d3d3d3;
    }

    .eFRLap .sc-kjoXOD { /*Ticket Updated Box Text*/
        color: #dbebf7;
    }

    .mast { /*Ticket Header*/
        background: #212222;
        border-bottom: 1px solid #565656;
    }

    .section.ticket { /*Ticket Background*/
        background: #161616;
    }

    .mast .source { /*Ticket Source Text*/
        color: #afbcc9;
    }

    .mast .source a.email { /*Ticket Source Email*/
        color: #84c4ff;
    }

    .kSGOZQ { /*Ticket Title Border*/
        border: 1px solid #545454;
    }

    .mast .editable input {  /*Ticket Title Text*/
        color: #70aee0;
    }

    .grHctT { /*Ticket Title Background*/
        background-color: #121111;
    }

    .event .header .actor .name a { /*Ticket Employee Name*/
        color: #72abd9;
    }

    .event { /*Ticket Event Border*/
        border-top: 1px solid #424242;
    }

    .section.ticket .tab-controls-container { /*Ticket Header Bottom Border*/
        border-bottom: 1px solid #363636;
    }

    .main_panes > .pane.right, .workspace > .pane.right { /*Ticket Pane Separator Border*/
        border-left: 1px solid #101010;
    }

    .bThaFB { /*Ticket Footer Border*/
        border-top: 1px solid #4a4a4a;
        border-left: 1px solid #4a4a4a;
    }

    .hbFKRW { /*Ticket Footer Background*/
        border-top-color: #4f4f4f;
        background-color: #031520;
    }

    .kQrlnT { /*Stay on Ticket Dropdown Link*/
        color: #7e8f9b;
    }

    .eFJONy { /*Ticket Footer Macro Box*/
        border: 1px solid #3e3e3e;
        background-color: #121111;
        color: #a0a9b1;
    }

    .ticket-sidebar .property_box { /*Ticket Side Border Separator*/
        border-bottom: 1px solid #494f54;
    }

    .form_field label { /*Ticket Side Label*/
        color: #afbdc9;
    }

    .kqHPFE { /*Ticket Side Box Border*/
        border: 1px solid #56595a;
    }

    .current_collaborators .zd-tag-menu-root, .user-picker-menu-base .zd-tag-menu-root { /*Ticket Side CC Box Background*/
        background-color: #0c0c0c;
    }

    .ticket .form_field.highlight_update:not(.fr-focus).checkbox-field, .ticket .form_field.highlight_update:not(.fr-focus).requester .zd-searchmenu-base, .ticket .form_field.highlight_update:not(.fr-focus).problem_id .zd-searchmenu-base, .ticket .form_field.highlight_update:not(.fr-focus) .zd-tag-menu-root, .ticket .form_field.highlight_update:not(.fr-focus) .zd-selectmenu-base, .ticket .form_field.highlight_update:not(.fr-focus) .ui-state-default, .ticket .form_field.highlight_update:not(.fr-focus) textarea, .ticket .form_field.highlight_update:not(.fr-focus) > input:not([type=checkbox]) { /*Currently Added CC*/
        background-color: #060606;
    }

    .bKHxqZ { /*Ticket Hover Popup*/
        border: 1px solid rgb(62 62 62);
        background-color: #0a0a0a;
        color: #a3b1bb;
    }

    .jsEQmk:disabled, .jsEQmk[aria-disabled="true"] { /*Ticket Left Disabled Box*/
        border-color: #418fdd;
        background-color: #0c2536;
        color: #e8f0f5;
    }

    .zd-tag-menu-root { /*Ticket Side Tag Box*/
        background-color: #0c0c0c;
        border: 1px solid #525252;
    }

    .fGPLUj { /*Ticket Side Text Box*/
        border: 1px solid rgb(64 69 72);
        background-color: #0c0c0c;
        color: #a5b6c5;
    }

    .zd-tag-item a {
        color: #b1bfcb;
    }

    .zd-tag-item {
        background-color: #1b445c;
        border: 1px solid #1e6ea3;
        color: #b1bfcb;
    }

    .bYrRLL { /*Ticket Side Small Label Colour*/
        color: #97abbb;
    }

    .comment_input textarea { /*Comment Box Text*/
        color: #cacbcd;
    }

    .classic_input, .ember-text-field, .ember-text-area { /*Comment Box Border*/
        border: 1px solid #606060;
    }

    .markdown_preview {
        border: 1px solid #5950a3; /*Comment Box Preview Border*/
    }

    .comment_input .btn { /*Comment Box Button*/
        background: #3d748f;
        border: 1px solid #606060;
        color: #e1ebf3;
    }

    .comment_input .btn:hover { /*Comment Box Button*/
        background: #254555;
        border: 1px solid #118f8e;
        color: #f4f6f7;
    }

    .event.regular .header .meta .comment_menu .dropdown-toggle { /*Event Details Button*/
        background: #3d748f;
        border: 1px solid #606060;
        color: #e1ebf3;
    }

    .event.regular:hover .header .meta .comment_menu .dropdown-toggle { /*Event Details Button*/
        background: #254555;
        border: 1px solid #118f8e;
        color: #f4f6f7;
    }

    .comment_input:not(.is-public) textarea { /*Comment Box Internal/Private*/
        background: #281f03;
        border: 1px solid #7e6113;
    }

    .event:not(.is-public) .comment { /*Comment Box Preview Internal/Private*/
        background-color: #281f03;
        border: 1px solid #7e6113;
        color: #cacbcd;
    }

    .comment_input .hint { /*Comment Hint*/
        color: #a5b3c1;
    }

    .markdown_info { /*Comment Markdown Info Box*/
        border: 1px solid #3a3939;
        border-top: 1px dotted #4b6a7e;
        background-color: #282828;
        color: #68737D;
    }

    .LRdn { /*Ticket Side Active Tab*/
        background-color: #234c74;
    }

    .LRcw { /*Ticket Side Tabs Bottom Border*/
        border-bottom: 1px solid #646666;
    }

    .LRdj { /*Ticket Side Tab Border/Separator*/
        border-right-color: #585c5e;
    }

    .LRci {
        background-color: #202020;
    }

    .LRci:hover {
        background-color: #272626;
    }

    .main_panes > header .pane .btn, .workspace > header .pane .btn { /*Ticket Breadcrumbs*/
        background-color: #0c0c0c;
        border: 1px solid #424242;
    }

    .main_panes > header .pane .btn, .workspace > header .pane .btn:hover {
        background-color: #2b2a2a;
        border: 1px solid #535353;
    }

    .main_panes > header .pane .btn:active, .main_panes > header .pane .btn.active, .main_panes > header .pane .btn:hover, .workspace > header .pane .btn:active, .workspace > header .pane .btn.active, .workspace > header .pane .btn:hover { /*Ticket Breadcrumbs - Ticket*/
        background-color: #5389bf;
        color: #ebedef;
    }

    .zendesk-editor--rich-text-comment pre, .markdown_formatting pre, .markdown_preview pre, .event .comment pre, .zd-comment.zd-comment-pre-styled pre { /*Ticket Code Block*/
        background-color: #000000;
        border: 1px solid #505050;
        color: #dfdcdc;
    }

    .zendesk-editor--rich-text-comment code, .markdown_formatting code, .markdown_preview code, .event .comment code, .zd-comment.zd-comment-pre-styled code { /*Ticket Code Box*/
        border: 1px solid #0d60b3;
        background-color: #131414;
    }

    code { /*Ticket Code Box Text*/
        color: #b5c0c9;
    }

    .navigation-item { /*User Navigation Text*/
        color: #98b9d3;
    }

    .navigation-item:hover { /*User Navigation Text*/
        color: #b3d7f3;
    }

    .left.pane .log { /*User Left Side Log Text*/
        color: #7aa4c5;
    }

    .left.pane .log > span {
        color: #8e9ba7;
    }

    .LRgj:hover { /*User List Hover*/
        background-color: #0c273e;
    }

    .property_box { /*User Left Side Boxes*/
        background: #111212;
        border: 1px #303030 solid;
    }

    .details.property_box .property.delim { /*User Left Side Boxes Border/Separator*/
        border-bottom: 1px solid #444546;
    }

    .details.property_box label { /*User Left Side Boxes Labels*/
        color: #8996a3;
    }

    .zd-selectmenu-base-content { /*User Left Side Boxes Input Text*/
        color: #9dc4e3;
    }

    .details.property_box .item { /*User Left Side Boxes Input Email*/
        color: #3ea4fb;
    }

    .details.property_box .item div:hover {
        color: #61b3f9;
    }

    .LRiy { /*Event Tooltip Border*/
        border: 1px solid #3a3a3a;
    }

    .LRar { /*Event Tooltip Background*/
        background-color: #212325;
    }

    .left.pane .customer_context { /*Customer Pane Background*/
        background: #151616;
    }

    .fOXntI { /*Highlighted Interaction Background*/
        background: #0f304a;
    }

    .usDjf { /*Interaction Text Title*/
        color: #7ebdef;
    }

    .fsGtgB { /*Interaction Text*/
        color: #96a5b3;
    }

    .cbzHrO { /*User Notes Text Box*/
        border: 1px solid #313232;
        background-color: #000;
        color: #2f3941;
    }

    .fHpudY { /*Ticket Attachment Box Background*/
        background: #343434;
    }

    .cXYbMy { /*Ticket Attachment Box*/
        display: inline-block;
        background: #000000;
        border-width: 1px;
        border-style: solid;
        border-color: #4e4e4e;
    }

    .hwtaGG { /*Ticket Attachment Box Text*/
        color: #8c949b;
    }

    .cXYbMy:hover > [data-test-id="attachment-thumbnail-label"] > [data-test-id="attachment-thumbnail-name"] { /*Ticket Attachment Box Text Hover*/
        color: #b5bec6
    }

    .kNvvaB > * { /*Ticket Dropdown Background Lower*/
        border: 1px solid #4a4a4a;
        background-color: #1e1e1e;
    }

    .cCKWMv { /*Ticket Dropdown Box While Lower*/
        background-color: #323232;
    }

    .ticket_collision { /*Also Viewing This Ticket Text*/
        color: #94afc5;

    }

    .event.is-new { /*New Ticket Event Background*/
        background-color: #081d2e;
    }

    .workspace.search { /*Search Page Background*/
        background-color: #212325;
    }

    .cDJdQS th { /*Search Page Table Header Background*/
        background-color: #0f1012;
    }

    .modal { /*Modal for Suspended Tickets*/
        background-color: #1e1e20;
        border: 1px solid rgb(0 0 0 / 30%);
    }

    .modal-footer, .bulk-footer { /*Footer*/
        border-left: 1px solid #343434;
    }

    .modal-footer { /*Modal Footer for Suspended Tickets*/
        background-color: #303030;
        border-top: 1px solid #4a4a4a;
        box-shadow: inset 0 1px 0 #000;
    }

    .modal-header { /*Modal for Suspended Tickets Header*/
        border-bottom: 1px solid #686868;
    }

    .suspended-ticket-modal .modal-body table { /*Modal for Suspended Tickets Body Table Font*/
        color: #d6e7f7;
    }

    .suspended-ticket-modal .modal-body table tr:last-child th, .suspended-ticket-modal .modal-body table tr:last-child td { /*Modal for Suspended Tickets Body Table Border*/
        border-bottom: 1px solid #545454;
    }

    .table th, .table td { /*Table Borders*/
        border-top: 1px solid #666;
    }

    .iJfgYz { /*Assignee Dropdown Title Colour Hover*/
        color: #9eb1c1;
    }

    .jXYWAQ { /*Assignee Dropdown Title Colour*/
        color: #bfe1fb;
    }

    .dcJcWE { /*Assignee Assign to*/
        color: #c9dae7;
    }

    .fEGTjd { /*Assignee Assign to Hover*/
        color: #acb9c3;
    }

    .cCKWMv { /*Textbox Text*/
        color: #919699 !important;
    }

    ul.attachments li { /*Ticket Attachment Box -- Before Sent*/
        background-color: #213854;
    }

    .merge-holder .merge_window { /*Ticket Merge Window*/
        background-color: #141414;
        color: #d3dce5;
    }

    .merge-holder .merge_window .ticket_date { /*Merge Main Text*/
        color: #aabac9;
    }

    .merge-holder .merge_window .ticket_card .card_header h3 { /*Merge Ticket Title*/
        color: #cad4dd;
    }

    .merge-holder .merge_window .user_card, .merge-holder .merge_window .ticket_card { /*Merge Ticket Card*/
        border: 5px solid #2e2e2e;
        box-shadow: 1px 1px 1px 1px #303030;
    }

    .liuBOZ { /*Search Textbox Text*/
        border: none #404040;
        color: #c1c5c9;
    }

    .imIcfQ, .giXica { /*Search Textbox Hover*/
        background-color: #000000;
    }

    .bikSHg { /*Selection Buttons*/
        background-color: #212325;
    }

    .LRgd { /*Ticket Tab Random*/
        border-bottom: 1px solid #000000;
    }
    .LRdg { /*Ticket Tab Random*/
        background-color: #313336;
    }
    .LRav:hover { /*Ticket Tab Random*/
        background-color: #27282b;
    }

}

Download

raw zip tar