Commit 90e37378 authored by Evonne Cheung's avatar Evonne Cheung Committed by Robert Lyon
Browse files

Improved color contrast for accessibility (Bug #1281877)



Design changes from Evonne

Change-Id: Ie43b7bd277efdd310011602cad83e091f56372c9
Signed-off-by: default avatarJono Mingard <jonom@catalyst.net.nz>
parent b7063ffa
......@@ -29,7 +29,8 @@ ul.colnav li a:active {
#internal,
#general,
#fileimagevideo,
#external {
#external,
#select-theme {
background-color: #d8deea;
border-color: #c6cedd;
}
\ No newline at end of file
}
......@@ -8,7 +8,7 @@
/******************** Body ********************/
body, body#micro {
background: #ccdce7 url(../images/background.gif) repeat-x top left;
color: #474220;
color: #211C00;
}
/******************** General headings ********************/
h1,
......@@ -25,16 +25,15 @@ h6 {
}
/******************** General text ********************/
a, a:visited, a:link, a:active {
color: #6e8e00;
color: #567000;
text-decoration: none;
}
a:hover, a:focus {
color: #84aa00;
text-decoration: underline;
}
/* some common listing text styles */
.title {
color: #474220;
color: #211C00;
}
/******************** Tables ********************/
thead th {
......@@ -61,7 +60,7 @@ th,
th label,
#files_filebrowser_agreement label,
.uploadform label {
color: #66879F;
color: #42637B;
}
/******************** Buttons ********************/
/* Buttons to override with colour */
......@@ -101,7 +100,7 @@ input#files_filebrowser_upload,
input#designskinform_submit,
input#cancel_designskinform_submit {
border-color: #51732f;
background: url(../images/btn_bkgd.png) repeat-x 0 50%;
background: url(../images/btn_bkgd.png) #51732f repeat-x 0 50%;
color: #FFFFFF;
}
/* hover for buttons */
......@@ -213,8 +212,9 @@ ul.groupuserstatus li .submit input.submit:active {
}
/* buttons that look like links */
.linkbtn,
#userview .user-icon .linkbtn {
color: #6e8e00;
#userview .user-icon .linkbtn,
ul.actionlist li.notbtn a {
color: #567000;
text-decoration: none;
}
/******************** Pagination ********************/
......@@ -269,14 +269,15 @@ div.pagination a {
border-right: 1px solid #4C711D;
border-left: 1px solid #AFBB87;
}
.main-nav li a:hover, .main-nav li a:focus {
color: #e4ffb4;
.main-nav li.selected a:hover,
.main-nav li.selected a:focus {
color: #797d00;
}
.main-nav li.selected a,
.main-nav li.selected a:link,
.main-nav li.selected a:visited,
.main-nav li.selected a:active {
color: #4C711D;
color: #335804;
background: #cacaca url(../images/mainnav-active.gif) repeat-x 0 0;
border-right: 1px solid #d6d6d6;
border-left: 1px solid #c7c7c7;
......@@ -287,6 +288,14 @@ div.pagination a {
.main-nav li:first-child a:active {
border-left: 0;
}
.main-nav li a:hover,
.main-nav li a:focus {
color: #E4FFB4;
}
.main-nav li.selected a:hover,
.main-nav li.selected a:focus {
color: #335804;
}
/******************** Sub navigation ********************/
#sub-nav {
font-weight: bold;
......@@ -296,12 +305,15 @@ div.pagination a {
#sub-nav li a:link,
#sub-nav li a:visited,
#sub-nav li a:active {
color: #474220;
color: #211C00;
border-right: 1px solid #b1b1b1;
border-left: 1px solid #dddddd;
}
#sub-nav li a:hover {
color: #7e7327;
#sub-nav li a:hover,
#sub-nav li.selected a:hover,
#sub-nav li a:focus,
#sub-nav li.selected a:focus {
color: #335804;
}
#sub-nav li.selected a,
#sub-nav li.selected a:link,
......@@ -333,8 +345,11 @@ div.pagination a {
border-left: 0;
border-right: 0;
}
.main-nav .dropdown-sub li a:hover, .main-nav .dropdown-sub li a:focus {
color: #4C711D;
.main-nav .dropdown-sub li a:hover,
.main-nav .dropdown-sub li.selected a:hover,
.main-nav .dropdown-sub li a:focus,
.main-nav .dropdown-sub li.selected a:focus {
color: #335804;
background: #d5d5d5;
border-top: 1px solid #e8e8e8;
border-bottom: 1px solid #7d7d7d;
......@@ -346,7 +361,7 @@ div.pagination a {
.main-nav .dropdown-sub li.selected a:visited,
.main-nav .dropdown-sub li.selected a:active {
background: #CACACA;
color: #333333;
color: #335804;
border-top: 1px solid #d6d6d6;
border-bottom: 1px solid #c7c7c7;
border-left: 0;
......@@ -421,9 +436,6 @@ div.pagination a {
border-bottom: 1px solid #d2dcb2;
background: #ecf3d4;
}
.rd-navmenu .main-nav ul li.selected {
background: #f5f9e7;
}
.rd-navmenu .main-nav ul li span {
display: block;
}
......@@ -436,9 +448,19 @@ div.pagination a {
border: 0;
display: block;
}
.rd-navmenu .main-nav li a:hover {
.rd-navmenu .main-nav li a:hover,
.rd-navmenu .main-nav li a:focus {
color: #568e0e;
}
.rd-navmenu .main-nav ul li.selected {
background: #f5f9e7;
}
.rd-navmenu .main-nav ul li.selected a {
color: #211C00;
}
.rd-navmenu .main-nav ul li.selected li a {
color: #43651a;
}
/* expanded navigation */
.rd-navmenu .nav-expand ul li {
display: block;
......@@ -482,11 +504,6 @@ div.pagination a {
background: none;
width: auto;
}
.rd-navmenu .nav-expand .rd-subnav li a:hover,
.rd-navmenu .nav-expand .dropdown-sub li a:hover {
background: none;
border: 0;
}
.rd-navmenu .nav-expand .rd-subnav li.selected a,
.rd-navmenu .nav-expand .rd-subnav li.selected a:link,
.rd-navmenu .nav-expand .rd-subnav li.selected a:visited,
......@@ -495,10 +512,21 @@ div.pagination a {
.rd-navmenu .nav-expand .dropdown-sub li.selected a:link,
.rd-navmenu .nav-expand .dropdown-sub li.selected a:visited,
.rd-navmenu .nav-expand .dropdown-sub li.selected a:active {
font-weight: bold;
color: #333333;
background: none;
border: 0;
text-decoration: underline;
}
.rd-navmenu .nav-expand .rd-subnav li a:hover,
.rd-navmenu .nav-expand .rd-subnav li a:focus,
.rd-navmenu .nav-expand .rd-subnav li.selected a:hover,
.rd-navmenu .nav-expand .rd-subnav li.selected a:focus,
.rd-navmenu .nav-expand .dropdown-sub li a:hover,
.rd-navmenu .nav-expand .dropdown-sub li a:focus,
.rd-navmenu .nav-expand .dropdown-sub li.selected a:hover,
.rd-navmenu .nav-expand .dropdown-sub li.selected a:focus {
background: none;
border: 0;
}
/* js fallback for 768px or less */
@media screen and (max-width: 768px) {
......@@ -554,13 +582,10 @@ div.pagination a {
.no-js .main-nav li a:visited,
.no-js .main-nav li a:active {
background: none;
color: #4C711D;
color: #43651a;
border: 0;
display: block;
}
.no-js .main-nav li a:hover {
color: #568e0e;
}
.no-js .main-nav li.selected a,
.no-js .main-nav li.selected a:link,
.no-js .main-nav li.selected a:visited,
......@@ -568,6 +593,12 @@ div.pagination a {
background: none;
border: 0;
}
.no-js .main-nav li a:hover,
.no-js .main-nav li a:focus,
.no-js .main-nav li.selected a:hover,
.no-js .main-nav li.selected a:focus {
color: #568e0e;
}
/* responsive sub nav */
.no-js .main-nav .rd-subnav,
.no-js .main-nav .dropdown-sub {
......@@ -606,13 +637,7 @@ div.pagination a {
border: 0;
background: none;
width: auto;
color: #4C711D;
}
.no-js .main-nav .rd-subnav li a:hover,
.no-js .main-nav .dropdown-sub li a:hover {
background: none;
border: 0;
color: #568e0e;
color: #43651a;
}
.no-js .main-nav .rd-subnav li.selected a,
.no-js .main-nav .rd-subnav li.selected a:link,
......@@ -622,11 +647,23 @@ div.pagination a {
.no-js .main-nav .dropdown-sub li.selected a:link,
.no-js .main-nav .dropdown-sub li.selected a:visited,
.no-js .main-nav .dropdown-sub li.selected a:active {
font-weight: bold;
color: #333333;
background: none;
border: 0;
text-decoration: underline;
}
.no-js .main-nav .rd-subnav li a:hover,
.no-js .main-nav .rd-subnav li a:focus,
.no-js .main-nav .rd-subnav li.selected a:hover,
.no-js .main-nav .rd-subnav li.selected a:focus,
.no-js .main-nav .dropdown-sub li a:hover,
.no-js .main-nav .dropdown-sub li a:focus,
.no-js .main-nav .dropdown-sub li.selected a:hover,
.no-js .main-nav .dropdown-sub li.selected a:focus {
background: none;
border: 0;
color: #568e0e;
}
.no-js .main-nav li:hover .dropdown-sub {
display: block !important;
}
......@@ -668,7 +705,7 @@ ul.in-page-tabs li a:active,
ul.in-page-tabs li input.linkbtn,
ul.in-page-tabs li button.linkbtn,
ul.searchtab li span.inactive {
color: #1E6297;
color: #1c5c8f;
background: none;
border-left: 1px solid #FFFFFF;
border-top: 0;
......@@ -679,11 +716,6 @@ ul.searchtab li span.inactive {
-moz-border-radius: 0;
border-radius: 0;
}
ul.in-page-tabs li a:hover,
ul.in-page-tabs li input:hover,
ul.in-page-tabs li button:hover {
color: #7E7327;
}
ul.in-page-tabs li a.current-tab,
ul.in-page-tabs li a.current-tab:link,
ul.in-page-tabs li a.current-tab:visited,
......@@ -697,6 +729,17 @@ ul.in-page-tabs li button.current-tab {
border-right: 1px solid #d1d1d1;
border-bottom: 0;
}
ul.in-page-tabs li a:hover,
ul.in-page-tabs li a:focus,
ul.in-page-tabs li input:focus,
ul.in-page-tabs li button:focus {
color: #7E7327;
background: #d1d1d1;
}
ul.in-page-tabs li a.current-tab:hover,
ul.in-page-tabs li a.current-tab:focus {
color: #7E7327;
}
ul.in-page-tabs li:first-child a,
ul.in-page-tabs li:first-child a.current-tab {
border-left: 0;
......@@ -753,16 +796,13 @@ ul.in-page-tabs li:first-child a.current-tab {
.rd-navmenu ul.in-page-tabs li a:active,
.rd-navmenu ul.in-page-tabs li input.linkbtn {
background: #e0e8ee;
color: #1e6297;
color: #1c5c8f;
border-left: 0;
border-top: 1px solid #FFFFFF;
border-right: 0;
border-bottom: 1px solid #d1d1d1;
display: block;
}
.rd-navmenu ul.in-page-tabs li a:hover {
background: #cbd7e0;
}
.rd-navmenu ul.in-page-tabs li a.current-tab,
.rd-navmenu ul.in-page-tabs li a.current-tab:link,
.rd-navmenu ul.in-page-tabs li a.current-tab:visited,
......@@ -775,6 +815,16 @@ ul.in-page-tabs li:first-child a.current-tab {
border-right: 0;
border-bottom: 1px solid #6a8091;
}
.rd-navmenu ul.in-page-tabs li a:hover,
.rd-navmenu ul.in-page-tabs li a:focus,
.rd-navmenu ul.in-page-tabs li a.current-tab:hover,
.rd-navmenu ul.in-page-tabs li a.current-tab:focus,
.rd-navmenu ul.in-page-tabs li input.linkbtn:hover,
.rd-navmenu ul.in-page-tabs li input.linkbtn:focus,
.rd-navmenu ul.in-page-tabs li input.current-tab:hover,
.rd-navmenu ul.in-page-tabs li input.current-tab:focus {
background: #cbd7e0;
}
/* js fallback for page tabs */
@media screen and (max-width: 768px) {
.no-js .rd-tab-title {
......@@ -814,16 +864,13 @@ ul.in-page-tabs li:first-child a.current-tab {
.no-js ul.in-page-tabs li a:active,
.no-js ul.in-page-tabs li input.linkbtn {
background: #e0e8ee;
color: #1e6297;
color: #1c5c8f;
border-left: 0;
border-top: 1px solid #FFFFFF;
border-right: 0;
border-bottom: 1px solid #d1d1d1;
display: block;
}
.no-js ul.in-page-tabs li a:hover {
background: #cbd7e0;
}
.no-js ul.in-page-tabs li a.current-tab,
.no-js ul.in-page-tabs li a.current-tab:link,
.no-js ul.in-page-tabs li a.current-tab:visited,
......@@ -836,6 +883,16 @@ ul.in-page-tabs li:first-child a.current-tab {
border-right: 0;
border-bottom: 1px solid #6a8091;
}
.no-js ul.in-page-tabs li a:hover,
.no-js ul.in-page-tabs li a:focus,
.no-js ul.in-page-tabs li a.current-tab:hover,
.no-js ul.in-page-tabs li a.current-tab:focus,
.no-js ul.in-page-tabs li input.linkbtn:hover,
.no-js ul.in-page-tabs li input.linkbtn:focus,
.no-js ul.in-page-tabs li input.current-tab:hover,
.no-js ul.in-page-tabs li input.current-tab:focus {
background: #cbd7e0;
}
}
/* override universal search result tabs */
ul.searchtab li span.inactive {
......@@ -860,9 +917,6 @@ ul.searchtab li span.inactive {
margin: 0;
text-align: center;
}
.rd-navmenu ul.searchtab li a:hover {
color: #7E7327;
}
.rd-navmenu ul.searchtab li a.current-tab,
.rd-navmenu ul.searchtab li a.current-tab:link,
.rd-navmenu ul.searchtab li a.current-tab:visited,
......@@ -874,6 +928,12 @@ ul.searchtab li span.inactive {
border-right: 1px solid #d1d1d1;
border-bottom: 0;
}
.rd-navmenu ul.searchtab li a:hover,
.rd-navmenu ul.searchtab li a:focus,
.rd-navmenu ul.searchtab li a.current-tab:hover,
.rd-navmenu ul.searchtab li a.current-tab:focus {
color: #7E7327;
}
.rd-navmenu ul.searchtab li:first-child a {
border-left: 0;
}
......@@ -891,19 +951,12 @@ ul.searchtab li span.inactive {
.sideblock h3 a:hover {
color: #267bbd;
}
/* Sidebar profile */
#sb-profile ul ul a,
#sb-profile ul ul a:link,
#sb-profile ul ul a:visited,
#sb-profile ul ul a:active {
color: #7f9d16;
}
/* Sidebar quota/group quota bar */
#quota_used {
color: #3986c3;
color: #42637B;
}
#quota_total {
color: #7f9d16;
color: #567000;
}
/* Sidebar tags */
#sb-tags {
......
......@@ -41,10 +41,14 @@ ul.colnav li.selected span {
#internal,
#general,
#fileimagevideo,
#external {
#external,
#select-theme {
background-color: #78d9ff;
border-color: #78cff1;
}
#select-theme {
color: #333333;
}
.blocktype {
background: #f0fbff;
border-color: #eaf3f7;
......
......@@ -38,7 +38,8 @@ ul.colnav li a:active {
#internal,
#general,
#fileimagevideo,
#external {
#external,
#select-theme {
background-color: #dcdfe9;
border-color: #cbd3ec;
}
......
htdocs/theme/raw/static/images/folderrow.png

951 Bytes | W: | H:

htdocs/theme/raw/static/images/folderrow.png

423 Bytes | W: | H:

htdocs/theme/raw/static/images/folderrow.png
htdocs/theme/raw/static/images/folderrow.png
htdocs/theme/raw/static/images/folderrow.png
htdocs/theme/raw/static/images/folderrow.png
  • 2-up
  • Swipe
  • Onion skin
......@@ -364,13 +364,13 @@ div.warning,
.unvalidated,
.postdetails {
font-size: 0.917em;
color: #888888;
color: #707070;
}
.nowrap {
white-space: nowrap;
}
.dull {
color: #888888;
color: #707070;
}
/* some common listing text styles */
.title,
......@@ -538,8 +538,7 @@ form {
}
/* required */
.requiredmarker {
color: #FF0000;
font-weight: normal;
color: #EE0000;
}
/* description */
.pieform td.description {
......@@ -1230,7 +1229,7 @@ div.pagination .disabled {
white-space: nowrap;
}
div.pagination .results {
color: #838383;
color: #707070;
padding: 3px 0;
line-height: 1.167em;
}
......@@ -1303,7 +1302,7 @@ div.rel {
/******************** Header ********************/
/* skip to content link */
.skiplink {
background-color: #f3f7ec;
background-color: #EEEEEE;
display: block;
padding: 5px 10px;
position: absolute;
......@@ -2188,7 +2187,7 @@ a.persona-button:after {
}
#file_dropzone_container .dz-message {
font-size: 2em;
color: #888888;
color: #707070;
}
/* edit row background */
tr.editrow,
......@@ -2200,7 +2199,7 @@ tr#files_filebrowser_edit_row td {
}
/* folder row background */
tr.folder td {
background: #E3E3E3 url(../images/folderrow.png) repeat-x 0 0;
background: #EEEEEE url(../images/folderrow.png) repeat-x 0 0;
}
/* folder row being moved */
tr.folderhover td {
......@@ -3857,7 +3856,7 @@ ul.searchtab li span.inactive {
}
.mytags .tagfreq {
font-weight: normal;
color: #888888;
color: #707070;
}
.mytags .selected {
font-weight: bold;
......
......@@ -31,7 +31,8 @@ ul.colnav li a:active {
#internal,
#general,
#fileimagevideo,
#external {
#external,
#select-theme {
background-color: #fbcd50;
border-color: #ebc254;
}
......
......@@ -31,7 +31,8 @@ ul.colnav li a:active {
#internal,
#general,
#fileimagevideo,
#external {
#external,
#select-theme {
background-color: #ecd2ee;
border-color: #dfc9e1;
}
\ No newline at end of file
......@@ -266,7 +266,7 @@ ul.colnav li.selected span {
}
.blocktype .blocktypelink {
display: block;
color: #474220;
color: #211C00;
cursor: inherit;
}
.blocktype .blocktypelink:hover, .blocktype .blocktypelink:focus {
......@@ -1039,6 +1039,7 @@ img.license-icon {
}
.plan_incomplete {
background: #FEE7E7;
color: #333333;
}
td.completed,
td.incomplete {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment