WCAG 2.0 contrast accessible text and controls - Edit Toolbar, Page Settings, and Add Content

edit_toolbar-page_settings_add-content.css

/* 1. Edit Toolbar */

/*edit toolbar text and icons
compliant color: #575757
background color: #FEFEFE

CSS:*/
div#ccm-toolbar>ul>li>a {
    color: #575757;
}



/* 2. Page Settings Panels */

/*page settings > section text
compliant color: #ACBAD4
background color: #2a2c30

CSS:*/
div#ccm-panel-page menu li a, div#ccm-panel-compose-page menu li a {
    color: #ACBAD4;
}

/*CSS change to compliment compliant color:
background-color: #18191B;*/

div#ccm-panel-page menu li a:hover, div#ccm-panel-compose-page menu li a:hover {
    background-color: #18191B;
}

/*page settings button (active) text and icon
compliant color: #0E4883
background color: #E4E4E4

CSS:*/
div#ccm-toolbar>ul>li>a.ccm-launch-panel-active, div#ccm-toolbar>ul>li>a.ccm-launch-panel-active:hover {
    color: #0E4883;
}

/*page settings back arrow
compliant color: #AAACB3
background color: #202226

CSS:*/
div#ccm-panel-page a.ccm-panel-back, div#ccm-panel-compose-page a.ccm-panel-back {
    color: #AAACB3;
}

/*page settings > devices > device text
compliant color: #A5B8C0
background color: #272a2e

CSS:*/
div.ccm-menu-device-set .ccm-panel-devicelist-device>a {
    color: #A5B8C0 !important;
}

/*CSS change to compliment compliant color:
background-color: #18191B;*/

div.ccm-menu-device-set .ccm-panel-devicelist-device>a:hover {
    background-color: #18191B;
}

/*page settings > versions > version text
compliant color: #AEC2DA
background color: #303136

CSS:*/
#ccm-panel-page #ccm-panel-page-versions table td {
    color: #AEC2DA;
}

/*page settings > versions > checkbox
compliant border color: #C0C0C0
background color: #303136

CSS:*/
div#ccm-panel-page input.ccm-flat-checkbox {
    border: 1px solid #C0C0C0;
}

/*page settings > versions > "delete" text
compliant color: #B9BDD7
background color: #303136

CSS:*/
#ccm-panel-page #ccm-panel-page-versions table thead th button.disabled {
    color: #B9BDD7;
}

/*page settings > versions > "newer/older" text
compliant color: #BEC0C8
compliant border color: #BEC0C8
background color: #303136

CSS:*/
div#ccm-panel-page .pager li a {
    color: #BEC0C8;
    border: 1px solid #BEC0C8;
}

/*CSS change to compliment compliant color:*/
div#ccm-panel-page .pager li a:hover {
    background: #151619;
}

/*page settings > versions > menu arrow
compliant color: #A8BAD2
background color: #2b2c31

CSS:*/
#ccm-panel-page #ccm-panel-page-versions table td a.ccm-panel-page-versions-version-menu {
    color: #A8BAD2;

}

/*page settings > attributes > attribute text
compliant color: #A5B8C0
background color: #272a2e

CSS:*/
#ccm-panel-page section#ccm-menu-page-attributes ul li a {
    color: #A5B8C0;
}

/*CSS change to compliment compliant color:
background-color: #18191B;*/

#ccm-panel-page section#ccm-menu-page-attributes ul li a:hover {
    background-color: #18191B;
}

/*page settings > attributes > magnifying glass
compliant color: #C5C5C5
background color: #333539

CSS:*/
div.ccm-panel-header-search i.fa-search {
    color: #C5C5C5;
}

/*page settings > attributes > search placeholder text
compliant color: #C5C5C5
background color: #333539

CSS:*/
#ccm-panel-header-search-input::-webkit-input-placeholder {
   color: #C5C5C5 !important;
}

#ccm-panel-header-search-input:-moz-placeholder {
   color: #C5C5C5 !important;
}

#ccm-panel-header-search-input::-moz-placeholder {
   color: #C5C5C5 !important;
}

#ccm-panel-header-search-input:-ms-input-placeholder {
   color: #C5C5C5 !important;
}

/*page settings > design> "page template", "theme",  template text
compliant color: #89989A
background color: #000

CSS:*/
div#ccm-panel-page .list-group .list-group-item {
    color: #89989A;
}

/*page settings > design > "page template", checkbox border
compliant color: #A6A6A6
background color: #171C22

CSS:*/
div#ccm-panel-page input.ccm-flat-radio {
    border: 1px solid #A6A6A6;
}

/*page settings > design> "customize" text
compliant color: #E6E6E6
background color: #0f41ac

CSS:*/
div#ccm-panel-page-design-themes div.ccm-page-design-theme-thumbnail.list-group-item.ccm-page-design-theme-thumbnail-selected>span>i span.ccm-page-design-theme-customize a {
    color: #E6E6E6;
}

/*page settings > design> "expand/collapse" text
compliant color: #A8A9B1
background color: #171C22

CSS:*/
div#ccm-panel-page .list-group .list-group-item.list-group-item-collapse, div#ccm-panel-compose-page .list-group .list-group-item.list-group-item-collapse {
    color: #A8A9B1;
}

/*page settings > design> "expand/collapse" arrow open
compliant border-color: #AEAEAE
background color: #171C22

CSS:*/
div#ccm-panel-page .list-group.ccm-panel-list-group-item-expanded a.list-group-item-collapse span:after, div#ccm-panel-compose-page .list-group.ccm-panel-list-group-item-expanded a.list-group-item-collapse span:after {
    border-color: transparent transparent #AEAEAE transparent;
}

/*page settings > design> "expand/collapse" arrow open
compliant border-color: #A5A7AE
background color: #171C22

CSS:*/
div#ccm-panel-page .list-group .list-group-item.list-group-item-collapse span:after, div#ccm-panel-compose-page .list-group .list-group-item.list-group-item-collapse span:after {
    border-color: #A5A7AE transparent transparent transparent;

}

/*page settings > design> customize theme > section text
compliant color: #A4ADCA
background color: #202225

CSS:*/
#ccm-panel-page-design-customize div.ccm-panel-page-design-customize-style-set h5 {
    color: #A4ADCA;
}

/*page settings > design> customize theme > section down arrow
compliant border-color: #AEAEAE
background color: #202225

CSS:*/
#ccm-panel-page-design-customize div.ccm-panel-page-design-customize-style-set h5.ccm-panel-page-design-customize-style-set-collapse:after {
    border-color: #AEAEAE transparent transparent transparent;
    border-width: 6px 6px 0px 6px;
    border-style: solid;
}
/**** border-width is broken, it should be:
border-width: 6px 6px 0px 6px;*/

/*page settings > design> customize theme > section up arrow
compliant border-color: #AEAEAE
background color: #202225

CSS:*/
#ccm-panel-page-design-customize div.ccm-panel-page-design-customize-style-set h5.ccm-panel-page-design-customize-style-set-expand:after {
    border-color: transparent transparent #AEAEAE transparent;
    border-width: 0px 6px 6px 6px;
    border-style: solid;
}
/**** border-width is broken, it should be:
border-width: 6px 6px 0px 6px;*/

/*page settings > design> customize theme > section item text
compliant color: #ACB8D4
background color: #2A2C30

CSS:*/
#ccm-panel-page-design-customize div.ccm-panel-page-design-customize-style-set ul li {
    color: #ACB8D4;
}



/* 3. Add Content Panels */

/*add content > dropdown text
compliant color: #9FB2B8
background color: #202226

CSS:*/
div#ccm-panel-add-block div.ccm-panel-header-accordion nav span {
    color: #9FB2B8;
}

/*add content > dropdown arrow
compliant color: #9CAFB6
background color: #202226

CSS:*/
div#ccm-panel-add-block div.ccm-panel-header-accordion nav ul.ccm-panel-header-accordion-dropdown:after {
    border-color: #9CAFB6 transparent;
}

/*** magnifying glass CSS is covered by page_setting_panels.css*/

/*add content > block > search placeholder text
compliant color: #C5C5C5
background color: #333539

CSS:*/
div.ccm-panel-header-search input::-webkit-input-placeholder {
   color: #C5C5C5 !important;
}

div.ccm-panel-header-search input:-moz-placeholder {
   color: #C5C5C5 !important;
}

div.ccm-panel-header-search input::-moz-placeholder {
   color: #C5C5C5 !important;
}

div.ccm-panel-header-search input:-ms-input-placeholder {
   color: #C5C5C5 !important;
}

/*add content > clipboard > block name
compliant color: #97A4BB
background color: #0F1825

CSS:*/
div#ccm-panel-add-clipboard-block-list>div.ccm-panel-add-clipboard-block-item div.block-name {
    color: #97A4BB;
}

/*add content > clipboard > blocks
compliant color: #BDC5DA
background color: #343639

CSS:*/
div#ccm-panel-add-clipboard-block-list>div.ccm-panel-add-clipboard-block-item div.blocks {
    color: #BDC5DA;
}

/*add content > stacks > stack name
compliant color: #97A4BB
background color: #0f1825

CSS:*/
div#ccm-panel-add-block-stack-list>div.ccm-panel-add-block-stack-item>div.stack-name {
  color: #97A4BB;
}

/*add content > stacks > block count
compliant color: #97B6DF
background color: #202834

CSS:*/
div#ccm-panel-add-block-stack-list>div.ccm-panel-add-block-stack-item div.blocks>div.block-count {
    color: #97B6DF;
}

/*add content > stacks > block name
compliant color: #A2A7C8
background color: #1c1e21

CSS:*/
div#ccm-panel-add-block-stack-list>div.ccm-panel-add-block-stack-item div.blocks>div.block>div.block-name {
    color: #A2A7C8;
}