css for improved visual accessibility of Spaz Theme

PirateSLT's Avatar

PirateSLT

24 Sep, 2012 03:43 PM

I have just found Spaz, really like it and the Spaz theme in particular but the fonts were just too small for me to be able to use the interface comfortably.

I have had a go at modifying the User css and this seems to work reasonably well - suggestions for further improvements would be most welcome!

Best wishes,

Liz


/* User CSS Overrides */

/* END BASIC OVERRIDES FROM EXAMPLE ON SPAZ SITE */

/* override the status text size */
div.timeline-entry .status-text {
  font-size:150%;
}

/* change the font everywhere */
body, div.timeline-entry .status-text {
  font-family:Palatino, Georgia, Serif;
}

/* increase the size of the entrybox font */
#entrybox {
  font-size:150%;
}

/* always hide messages from a particular user */
div.timeline-entry[data-user-screen_name="scobleizer"] {
  display:none;
}

/* make replies REALLY stand out */
div.timeline-entry.reply, div.timeline-entry.reply .status-source {
  background:#DE531C;
  color:white !important;
}
div.timeline-entry.reply a:link, div.timeline-entry.reply .clickable {
  color:yellow;
}

/* END BASIC OVERRIDES FROM EXAMPLE ON SPAZ SITE */

/* TOOLTIPS OVERRIDE */

/*
Tooltips, those little popup messages that appear when you float over links and some other junk
*/
#tooltip {
    position: fixed;
    display: none;
    max-width: 600px;
    background: -webkit-gradient(
        linear, left top, left bottom,
        from(rgba(87,90,71, 0.95)), to(rgba(36,37,26, 0.95)),
        color-stop(0.5, rgba(49, 49, 49, 0.95))
    );
    border: 1px solid rgba(38, 38, 38, 0.95);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
    color: #fff;
    font-size: 15px;
    opacity: 1;
}
#tooltip > :first-child {
    padding: 5px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    -webkit-border-radius: 3px;
}
#tooltip h3, #tooltip div {
    margin: 0;
    font-weight: normal;
    font-size: inherit;
}
#tooltip div.latest {
    margin: 1em 0 0;
}
#tooltip .tooltip-user-image {
    float: right;
    width: 24px;
    height: 24px;
    margin: 0 0 0 10px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
}
#tooltip .website-title {
    margin: 0 0 1em;
}
#tooltip .website-title:empty {
    margin: 0;
}



/*** Root/context/popup menus ***/
/* NOTE: These will eventually be replaced by SpazMenu; see next section. */
/* (May be replaced with native OS versions in the future) */

div.outerbox {
    margin-left: -1px; /* Indent submenus */
    padding:0;
    background: transparent;
}
div.context-menu {
    position: fixed;
    display: none;
    z-index: 1010;
}
ul.popup-menu {
    display: none;
}
div.outerbox,
div.context-menu,
ul.popup-menu {
    opacity: 0.95;
}
#root-menu-div ul,
div.context-menu ul,
ul.popup-menu {
    margin: 0;
    padding: 4px 0;
    background: #f9f9f9;
    border: 1px solid #dfdfdf;
    border-radius: 4px;
    -webkit-border-radius: 4px;
}
#root-menu-div ul {
    border-top-left-radius: 0;
    -webkit-border-top-left-radius: 0;
}
#root-menu-div ul li a,
div.context-menu ul li,
ul.popup-menu li {
    margin: 0;
    padding: 2px 15px 2px 20px;
    background: transparent;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    border-radius: 0;
    -webkit-border-radius: 0;
    color: #000;
    cursor: default;
    font-size: 15px;
    list-style: none;
    text-decoration: none;
}
#root-menu-div ul li a:hover,
div.context-menu ul li:hover,
ul.popup-menu li:hover {
    background: -webkit-gradient(
        linear, left top, left bottom, from(#668BF4), to(#2B64F0));
    border-top-color: #5C83EA;
    border-bottom-color: #1D58E7;
    color: #fff;
}
#root-menu-div hr {/* divider */
    width:100%;
    border-bottom: 1px solid #dfdfdf;
}

/*** Menus ***/

div.spaz-menu {
    position: absolute;
    display: none;
    margin: 0;
    width: auto;
    margin-right: 20px; /* Margin away from viewport's right edge */
    padding: 4px 0;
    background: -webkit-gradient(
        linear, left top, right bottom,
        from(rgba(32,32,32,.95)),
        to(rgba(16,16,16,.95)),
        color-stop(0.20, rgba(48,48,48,.90)),
        color-stop(0.36, rgba(32,32,32,.90))
    );
    border: 1px solid #000000;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.75);
    cursor: default;
    z-index: 99999;
}
div.spaz-menu#tools-menu,
div.spaz-menu#user-menu {
    white-space: nowrap;
}
div.spaz-menu#tools-menu {
    margin-right: 14px;
}
div.spaz-menu#user-menu {
    margin-right: 31px;
}
div.spaz-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: auto;
}
div.spaz-menu ul > li {
    list-style: none;
}
li.spaz-menu-item {
    margin: 0px;
    border: solid transparent;
    border-width: 1px 0;
    font-size: 15px;
    color:#FFF;
}
li.spaz-menu-item:hover {
    background: -webkit-gradient(
        linear, left top, left bottom, from(#666699), to(#444466));
    color: #fff;
}
li.spaz-menu-item span {
    display: block;
    padding: 2px 15px 2px 20px;
}
li.spaz-menu-item.selected span {
    background: transparent url(../images/menu-checkmark.png) 6px -87px no-repeat;
}
li.spaz-menu-item.selected:hover span {
    background-position: 6px -87px;
}
div.spaz-menu#entrybox-shorten-menu li.spaz-menu-item {
    white-space: nowrap;
}
div.spaz-menu ul li.separator {
    margin: 5px 1px;
    border-top: 1px solid #666666;
    border-bottom: 1px solid #222222;
}

/* END TOOLTIPS OVERRIDE */

/* PAGINATION OVERRIDE */

/*** Pagination ***/

div.loadmore-panel {
    margin: 0;
    padding: 10px;
    background: -webkit-gradient(
        linear, left top, left bottom,
        from(rgba(32,32,32, 1)),
        to(rgba(16,16,16, 1)),
        color-stop(0.1, rgba(49, 49, 49, 1)),
        color-stop(0.6, rgba(24,24,24, 1))
    );
    border-top: 1px solid #000000;
    text-align: center;
}
div.loadmore-panel input[type=button] {
    height: 46px;
    margin: 0;
    padding: 0 1em;
    background: -webkit-gradient(
        linear, left top, left bottom,
        from(rgba(58,60,44, 1)), to(rgba(58,60,44, 1)),
        color-stop(0.1, rgba(87,90,71, 1)),
        color-stop(0.6, rgba(58,60,44, 1))
    );
    border: 1px solid rgba(16,16,16, 1);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    font-size: 24px;
    color: #fff;
    cursor: default;
    white-space: nowrap;
    
}
div.loadmore-panel input[type=button]:active {
    background: -webkit-gradient(
        linear, left top, left bottom,
        from(rgba(58,60,44, 1)), to(rgba(58,60,44, 1)),
        color-stop(0.6, rgba(87,90,71, 1)),
        color-stop(0.1, rgba(58,60,44, 1))
    );
    border: 2px solid rgba(32,32,32, 1);
}

/* END PAGINATION OVERRIDE */

/+ PANEL MENU OVERRIDE */
/*
The panelmenu appears at the top of each timeline
*/
.panelmenu {
    position: relative;
    background-color:#111100;
    padding:2px;
    height:54px;
    background: -webkit-gradient(
        linear, left top, left bottom,
        from(rgba(32,32,32, 1)),
        to(rgba(16,16,16, 1)),
        color-stop(0.1, rgba(49, 49, 49, 1)),
        color-stop(0.6, rgba(24,24,24, 1))
    );
    box-shadow:           0 0 10px rgba(0, 0, 0, 0.25);
      -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
    z-index: 1; /* = div.timeline-subtitle z-index */
}
.panelmenu form {
    position: relative;
    margin: 0 2px;
    padding: 1px 0 0;
    line-height: 18px;
    text-align: left;
}
.panelmenu form input,
.panelmenu form button {
    font-size: 15px;
    font-weight: normal;
    margin: 2px 0;
}
.panelmenu form button {
    width: 90px;
    height: 22px;
    padding: 0;
    background: -webkit-gradient(linear, left top, left bottom, from(#3A3C2C), to(#24251A));
    border: 1px solid rgba(16,16,16, 1);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    color: #fff;
    cursor: default;
    white-space: nowrap;
}
.panelmenu form button[id^="refresh-"] {
    position: relative;
    width: 60px;
    color: transparent;
}
.panelmenu form button[id^="refresh-"]:before {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: transparent url(../images/refresh-white.png) center center no-repeat;
    content: ""; /* Forces background to be used */
}
.panelmenu form button:active {
    background: -webkit-gradient(linear, left top, left bottom, from(#24251A), to(#3A3C2C));
    border: 2px solid rgba(32,32,32, 1);
}
#panel-friends .panelmenu #view-friends:after,
#panel-userlists .panelmenu #view-userlists:after,
#panel-public .panelmenu #trends-public:after,
#panel-search .panelmenu #search-saved:after,
#panel-followerslist .panelmenu #view-followerslist:after {
    content: ' \025BE'; /* Down-pointing triangle */
}
#panel-public .panelmenu form #trends-public,
#panel-search .panelmenu form #search-saved {
    width: 100px;
}
#panel-search .panelmenu form #search-help {
    width: 60px;
}
#panel-search .panelmenu form #search-go {
    display: none;
    /* Allows for making the text input wider. Hit Enter to
    search instead. */
}
#panel-search .panelmenu form #search-help {
    float: right;
    margin-right: 0;
}
.panelmenu form input[type=text] {
    float: right;
    width: 150px;
    height: 19px;
    margin-top: 3px;
    padding: 0;
    background: transparent;
    border: 0;
    border-image: url(../images/search-input.png) 0 9 0 18 repeat repeat;
    -webkit-border-image: url(../images/search-input.png) 0 9 0 18 repeat repeat;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    border-width: 0 9px 0 18px;
    color: #828282;
}
body:not(.active) .panelmenu form input[type=text] {
    border-image: url(../images/search-input-inactive.png) 0 9 0 18 repeat repeat;
    -webkit-border-image: url(../images/search-input-inactive.png) 0 9 0 18 repeat repeat;
}
.panelmenu form input[type=text]:focus {
    color: #0f0f0f;
}
#panel-user .panelmenu form input[type=text],
#panel-favorites .panelmenu form input[type=text],
#panel-public .panelmenu form input[type=text] {
    width: 150px;
}
/*
For use if "Trends" menu is visible:
#panel-public .panelmenu form input[type=text] {
width: 180px;
}
*/
#panel-search .panelmenu form input[type=text] {
    float: none;
    width: 82%;
}
/* END PANEL MENU OVERRIDE */

/* PREFERENCES OVERRIDE */

/*** Preferences ***/

#panel-prefs .timeline-wrapper {
/*  border-top: 1px solid #646464;*/
}
body:not(.active) #panel-prefs .timeline-wrapper {
/*  border-top-color: #a9a9a9;*/
}
#prefs-form {
    margin: 0;
    padding: 0 0 10px;
    background: -webkit-gradient(
        linear, left top, left bottom,
        from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)),
        color-stop(0.95, rgba(0, 0, 0, 0.125)));
        /* Fake shadow below form */
    font-size:15px;
    color:#FFF;
}

/*
The Prefs form contains a collapsible panel group Spry widget
*/
#prefsCPG, .CollapsiblePanelGroup {
}
#prefs-form .CollapsiblePanel {
    margin: 0;
}
#panel-prefs .CollapsiblePanelOpen:last-child {
    border-bottom: 1px solid #333333;
}
#prefs-form .CollapsiblePanelClosed {
}

/*
The tab is the clickable title that opens and closes the panel
*/
#prefs-form h2.CollapsiblePanelTab {
    background: -webkit-gradient(
        linear, left top, left bottom,
        from(rgba(32,32,32, 1)),
        to(rgba(16,16,16, 1)),
        color-stop(0.1, rgba(49, 49, 49, 1)),
        color-stop(0.6, rgba(24,24,24, 1))
    );
    border-top: 1px solid #000000;
    border-bottom: 1px solid #333333;
    color: #CCCCCC;
    cursor: pointer;
    font-size: 1.125em;
    padding:.5em;
}
#prefs-form h2.CollapsiblePanelTabHover, #prefs-form h2.CollapsiblePanelTabOpen {
    color: #FFFFFF;
}
#prefs-form h2.CollapsiblePanelTab:active {
    background: -webkit-gradient(
        linear, left top, left bottom,
        from(rgba(32,32,32, 1)),
        to(rgba(16,16,16, 1)),
        color-stop(0.1, rgba(49, 49, 49, 1)),
        color-stop(0.6, rgba(24,24,24, 1))
    );
    border-top: 1px solid #000000;
    border-bottom: 1px solid #333333;
    color: #FFFFFF;
}
#prefs-form h2.CollapsiblePanelTab strong {
    display: block;
    padding: 0.25em 0 0.25em 20px;
    background: transparent url(../images/disclosure-triangles.png) 4px -14px no-repeat;
}
form#prefs-form h2.CollapsiblePanelTab:active strong,
#prefs-form .CollapsiblePanelOpen h2.CollapsiblePanelTab strong {
    background-position: 4px -94px;
}

/*
Form content -- fieldsets, legends, and controls. `div.prefs` affects
both the primary prefs form and the form popbox(es).
*/
div.prefs #prefs-form .CollapsiblePanelContent {
    clear: both;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: -webkit-gradient(
        linear, left top, left bottom, from(#444444), to(#333333)
    );
    color:#FFFFFF;
}
div.prefs fieldset {
    margin: 8px;
    padding: 0;
    overflow: auto; /* Wrap children's margins */
    background:-webkit-gradient(
        linear, left top, left bottom,
        from(#111111), to(#333333), color-stop(0.75, #222222));
    border-radius: 8px;
    -webkit-border-radius: 8px;
    border: 0;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.8);
    -webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.8);
}
div.prefs legend {
    float: left;
    width: 100%;
    margin: 0 0 8px;
    padding: 4px 0;
    background: -webkit-gradient(
        linear, left top, left bottom, from(#444444), to(#333333));
    border-top-left-radius: 6px;
    -webkit-border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    border-bottom: 1px solid #666666;
    color: #EEEEEE;
    cursor: default;
    font-size: 15px;
    font-weight: bold;
    text-indent: 12px;
}
div.prefs div.formrow {
    clear: both;
    margin: 8px 0;
    padding: 0 12px;
}
div.prefs label {
    display: block;
}
div.prefs .relaunch-required {
    color: #c00;
}
div.prefs #account-list-fieldset div.formrow.cta {
    padding: 76px 0;
    text-align: center;
}
div.prefs #account-list-fieldset div.formrow.controls {
    overflow: hidden;
    height: 26px;
    /* Clips the extra pixel from the border between buttons */
}
div.prefs #account-list-fieldset div.formrow.controls input[name=add-account] {
    margin-right: 0;
/*  padding: 0 6px 0 1px;*/
    border-right-width: 0;
    border-top-right-radius: 0;
    -webkit-border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    
}
div.prefs #account-list-fieldset div.formrow.controls input[name=del-account] {
    margin-left: -4px;
/*  padding: 0 1px 0 6px;*/
    border-left-width: 0;
    border-top-left-radius: 0;
    -webkit-border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    -webkit-border-bottom-left-radius: 0;
}
div.prefs ul#account-list {
    width: 100%;
    height: 143px;
    overflow: auto;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 2px;
    -webkit-border-radius: 2px;
    list-style: none;
}
div.prefs ul#account-list li {
    border-top: 1px solid transparent;
}
div.prefs ul#account-list li:first-child {
    border-top-left-radius: 1px;
    -webkit-border-top-left-radius: 1px;
    border-top-right-radius: 1px;
    -webkit-border-top-right-radius: 1px;
}
div.prefs ul#account-list li:last-child {
    border-bottom-left-radius: 1px;
    -webkit-border-bottom-left-radius: 1px;
    border-bottom-right-radius: 1px;
    -webkit-border-bottom-right-radius: 1px;
}
div.prefs ul#account-list li.selected {
    background: -webkit-gradient(
        linear, left top, left bottom, from(#64A6DB), to(#0A71BB));
    border-top-color: #519BD6;
}
body:not(.active) ul#account-list li.selected {
    background: -webkit-gradient(
        linear, left top, left bottom, from(#989797), to(#666));
    border-top-color: #7f7e7e;
}
div.prefs ul#account-list li > span {
    display: block;
    padding: 4px 0 6px 30px;
    color: #000;
    cursor: default;
    line-height: 24px;
}
div.prefs ul#account-list li.current > span {
    background: transparent url(../images/accounts-current.png)
    10px 10px no-repeat;
}
div.prefs ul#account-list li.selected > span {
    color: #f0f0f0;
    font-weight: bold;
}
div.prefs ul#account-list li.current.selected > span {
    background-position: 10px -30px;
}
div.prefs ul#account-list li .image {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin: 0 0.5em 0 0;
    background: transparent 0 0 no-repeat;
    background-size: 24px 24px;
    -webkit-background-size: 24px 24px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    text-indent: -9999em;
}


/*** Preferences > Controls ***/

div.prefs input[type=text],
div.prefs input[type=password] {
    width: 96%;
    padding: 4px;
    background: #fff url(../images/text-input-bg.png) 0 0 no-repeat;
    border-top: 0;
    border-left: 0;
    border-right: 1px solid #c3c3c3;
    border-bottom: 1px solid #ddd;
}
div.prefs input[type=checkbox] {
    display: none;
}
div.prefs input[type=checkbox] + label {
    display: inline-block;
    height: auto;
    min-height: 14px;
    padding: 0 0 0 20px;
    background: transparent url(../images/checkbox.png) 0 -100px no-repeat;
}
div.prefs input[type=checkbox]:checked + label {
    background-position: 0 -150px;
}
div.prefs input[type=checkbox] + label:active {
    background-position: 0 -200px;
}
div.prefs input[type=checkbox]:checked + label:active {
    background-position: 0 -250px;
}
div.prefs option {
    font-size: 16px;
}
div.prefs input[type=button],
div.prefs input[type=submit],
#popbox-content-drafts div.content ul li div.controls input {
    font-size: 15px;
    border: 1px solid #333;
    padding: 4px 10px;
    color: #FFF;
    font-size: 15px;
    line-height: 16px;
    background: #24251A;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    box-shadow: 0px 1px 2px rgba(0,0,0,.5);
    -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,.5);
    text-shadow: #000 0px 1px 0px;
    background: -webkit-gradient(linear, left top, left bottom, from(#3A3C2C), to(#24251A));
}
div.prefs input[type=button]:active,
div.prefs input[type=submit]:active,
#popbox-content-drafts div.content ul li div.controls input:active {
    background: -webkit-gradient(linear, left top, left bottom, from(#24251A), to(#3A3C2C));
}
div.prefs input[type=button][disabled],
div.prefs input[type=submit][disabled] {
    background: -webkit-gradient(
        linear, left top, left bottom,
        from(rgba(58,60,44, 1)), to(rgba(58,60,44, 1)),
        color-stop(0.1, rgba(87,90,71, 1)),
        color-stop(0.6, rgba(58,60,44, 1))
    );
    border: 1px solid rgba(16,16,16, 1);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    color: #AAA;
}
input[type=text]#prefs-user-stylesheet {
    width: 80px;
}
input[type=text]#network-refreshinterval {
    width: 20px;
}
input[type=text]#dock-refreshinterval {
    width: 30px;
}
input[type=text]#window-alpha {
    width: 30px;
    text-align: right;
}
#prefs-user-stylesheet-button,
#prefs-user-stylesheet-edit,
#prefs-user-stylesheet-clear {
    margin: 2px 0 0;
    font-size: 15px;
}

/*** Preferences > Footer ***/

#prefs-form div.formrow.footer {
    margin: 0;
    padding: 20px 10px;
    background: -webkit-gradient(
        linear, left top, left bottom, from(#333333), to(#222222));
    border-top: 1px solid #222222;
    border-bottom: 1px solid #111111;
    text-align: right;
}
#prefs-form div.formrow.footer p.prefs-relaunch {
    margin: 0;
}
#prefs-form div.formrow.footer p.prefs-update {
    float: right;
    display: inline-block;
    margin: 0.5em 0 0 0.25em;
}
#prefs-form div.formrow.footer p.prefs-open-folder {
    display: inline-block;
    margin: 0.5em 0 0;
}
#prefs-form div.formrow.footer p input[type=button]:active {
/*  border-image: url(../images/buttons/large-active.png) 0 11 0 11 repeat repeat;
    -webkit-border-image: url(../images/buttons/large-active.png) 0 11 0 11 repeat repeat;*/
}
#prefs-form div.formrow.footer p.prefs-update input#prefs-update-button {
    padding:.7em;
    font-size: 16px;
}
#prefs-form div.formrow.footer p.prefs-open-folder input#prefs-open-folder {
    padding:.7em;
    font-size: 16px;
}

/* END PREFERENCES OVERRIDE */

/* SPAZ TIMELINE ENTRY OVERRIDE v2*/

div.user {
    position: relative;
    float: left;
    width: 150px;
    padding: 5px 3px 0 0;
    overflow: visible;
    text-align: center;
}

div.user-screen-name {
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
  1. 1 Posted by gizmo on 14 Nov, 2012 03:17 AM

    gizmo's Avatar

    Where does a user defined css go? Is it just called User.css?

    Thanks.

  2. 2 Posted by PirateSLT on 14 Nov, 2012 11:35 PM

    PirateSLT's Avatar

    Hi gizmo,

    I can't remember - but these references might help:

    http://help.getspaz.com/kb/desktop/user-css-overrides

    and

    http://help.getspaz.com/kb/desktop/preferences

  3. 3 Posted by gizmo on 15 Nov, 2012 01:18 AM

    gizmo's Avatar

    Unfortunately I'm not running the desktop/air version. WIth the Enyo1.0 framework you can run it without air.

    I guess I can download the desktop version and see what the directory path is and see if added something similar will work.

    gizmo

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac