Skip to content

Instantly share code, notes, and snippets.

@bluemango
Created November 22, 2011 15:18
Show Gist options
  • Save bluemango/1385907 to your computer and use it in GitHub Desktop.
Save bluemango/1385907 to your computer and use it in GitHub Desktop.
Zendesk CSS using ScreenSteps Live Sidebar
body { background-color: #1E2732; padding: 0 8px; }
div#page a.image-link:hover { text-decoration: none; }
#screensteps-content-wrapper { margin-bottom: 20px; padding-top:20px;}
#screensteps-content-wrapper #screensteps-title-area { padding: 0; border:0;}
#screensteps-content-wrapper ol, #screensteps-content-wrapper ul { margin: 1em 0px; padding-left: 40px;}
div#screensteps-content-wrapper h1 { font-size: 24px; font-weight: normal; margin: 11px 0 7px 20px; word-wrap: break-word; color: #555555; }
#screensteps-content-wrapper h1.manual { line-height: 30px;}
#screensteps-content-wrapper h1.lesson { margin-left: 0;}
#screensteps-content-wrapper #screensteps-breadcrumb { padding-left: 0px; margin-left:0px; margin-right:5px; font-size: 12px; margin-bottom: 15px;}
#screensteps-content-wrapper #screensteps-breadcrumb a { text-decoration: none; font-size: 12px;}
div#screensteps-content-wrapper div#screensteps-main-content-wrapper { margin-right: 258px; background-color: #F4F4F4; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; padding: 9px 8px 20px; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;}
div#screensteps-content-wrapper div#screensteps-main-content-wrapper:after { content: "."; display:inline-block; display: block; height: 0; clear: both; visibility: hidden; overflow: visible;}
#screensteps-content-wrapper #screensteps-search { background-color: white; margin: 0; padding: 10px 20px; border: 2px solid #E9E9E9; border-bottom: 0; border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0;}
#screensteps-content-wrapper #screensteps-search p.search-form { background-color: inherit; background-image: none; padding-left: 0; padding-right: 0;}
#screensteps-content-wrapper #screensteps-search p.search-form { *background-color: transparent;}
div#screensteps-main-content #screensteps-search form { width:auto; background: none; border-width: 0;}
div#screensteps-main-content #screensteps-search form input.search-field { width: 500px; font-size: 20px; background: url("//zendesk.com/images/searchinput.gif") no-repeat scroll -205px 50% #FFFFFF; border: 1px solid #A8A8A8; padding: 5px; padding-left: 30px; vertical-align: middle; float: none; height: auto; line-height: normal; color: black; }
div#screensteps-main-content #screensteps-search form input.search-submit { font-size: 20px; margin: 0 0 0 5px; padding: 6px 10px 5px; vertical-align: middle; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: url("//zendesk.com/images/button-bg.gif") repeat-x scroll left bottom #FEFFFE; border-color: #DDD #CCC #CCC #DDD; color: #555; border-style: solid; border-width: 1px; cursor: pointer; display: inline-block; font-family: Arial, "Lucida Grande"; position: relative; float: none; width: auto; height: 36px; text-indent: 0;}
/*#screensteps-search form a.reset-search { display: none;} */
div#screensteps-search div.search-results { border:0; padding: 10px 0;}
div#screensteps-main-content #screensteps-inner-content .manual { background-position: 0 0;}
div#screensteps-main-content #screensteps-inner-content .bucket { background-position: 0 0;}
#screensteps-content-wrapper #screensteps-inner-content .asset-list li {background: url("/images/icon-book.png") no-repeat 0px 0px;}
#screensteps-document * { font-size: 13px; }
#screensteps-document .screensteps-next-prev-navigation ul li * { font-size: 10px;}
#screensteps-document .description { padding-bottom: 15px;}
#screensteps-document p { line-height: 140%;}
#screensteps-document p + p { margin-top: 1.5em;}
#screensteps-document h2 { margin-bottom: 1em;}
#screensteps-steps {background: #fff; border: 1px solid #dedede; border-top-width: 1px; padding: 35px 20px 35px 20px; line-height: 140%; border-radius: 4px; -moz-border-radius: 4px;-webkit-border-radius: 4px;}
#screensteps-description { border:0 ;}
#screensteps-description div.screensteps-next-prev-navigation { margin-top: -13px; }
#screensteps-content-wrapper div.screensteps-next-prev-navigation ul { padding-left: 0;}
#comments-wrapper #comments-count {font-weight: normal;}
#add-comment h3 { margin: 1.5em 0;}
div#screensteps-content-wrapper div#screensteps-main-content-wrapper div#screensteps-inner-content { padding: 15px 0; border: none; background-color: inherit; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; padding: 20px; border: 2px solid #E9E9E9; border-top: 0; -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; background-color: #FFFFFF;}
div#screensteps-content-wrapper div#screensteps-sidebar { width: 241px; float: right;}
#screensteps-sidebar h3 { font-weight: bold; font-size: 20px;}
div#screensteps-sidebar-widget p { margin: 10px 0;}
div#screensteps-sidebar div.screensteps-sidebar-widget#screensteps-rss { background-color: transparent;}
#screensteps-sidebar #sidebar-chapters ul, #screensteps-sidebar .tags ul#tags { margin-bottom: 0; float:none;}
#screensteps-sidebar #sidebar-chapters li a, #screensteps-sidebar .tags ul#tags li a { border-bottom: 0; padding-left: 0;}
#screensteps-sidebar #sidebar-comments p#comments-count { margin-bottom: 8px;}
div#screensteps-sidebar #sidebar-message { border: 0;}
#screensteps-content-wrapper #screensteps-sidebar #screensteps-manual-pdf {margin-bottom:1.5em;}
#screensteps-content-wrapper #screensteps-sidebar h4 {margin:16px 0;}
/* #screensteps-content-wrapper #screensteps-sidebar #google-translator table {margin-left: -12px;}
#screensteps-content-wrapper.lesson #screensteps-sidebar #sidebar-search { background-color: transparent; margin-left: -12px !important;} */
#screensteps-content-wrapper #screensteps-sidebar ol.procedures > li { padding-left:0;}
#screensteps-content-wrapper #screensteps-sidebar .procedures li.procedure-chapter {list-style-position: outside; margin-left: 22px;}
#screensteps-content-wrapper #screensteps-sidebar .procedures li.procedure-chapter li { list-style-position: inside; margin-left: -10px;}
#screensteps-content-wrapper #screensteps-sidebar ol.procedures li.procedure-lesson.here { background-color: #0064CD; margin: 10px -22px 10px -44px; padding: 10px 22px 10px 58px; color:white;}
#screensteps-content-wrapper #screensteps-sidebar ol.procedures li.procedure-lesson.here a { font-weight: bold; color: white;}
#screensteps-sidebar .procedures ol.procedure-chapter-lessons li { padding-left: 25px;}
/*Test*/
#screensteps-content-wrapper.left-sidebar #screensteps-main-content-wrapper {
margin-left: 250px;
}
div#screensteps-sidebar div#sidebar-chapters ul {
background-color: whiteSmoke;
}
#screensteps-sidebar #sidebar-chapters li a, #screensteps-sidebar .tags ul#tags li a {
font-size: 14px;
text-decoration: none;
display: block;
padding: 8px 8px 8px 10px;
margin: 0;
border-top: 1px solid #F3F3F3;
background: #EDEDED;
background: -moz-linear-gradient(top, #F2F2F2 0%, #E9E9E9 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F2F2F2), color-stop(100%,#E9E9E9));
border-bottom: 1px solid #D8D8D8;
}
#screensteps-sidebar #sidebar-chapters li a:hover, #screensteps-sidebar .tags ul#tags li a:hover {background: #d7d7d7; background-image: -moz-linear-gradient(top, #d2d2d2 0%, #DBDBDB 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d2d2d2), color-stop(100%,#dbdbdb)); border-top-color: #bbb;}
#screensteps-sidebar #sidebar-chapters li a:hover span.chapter-count, #screensteps-sidebar .tags ul#tags li a:hover span.tag-count {color: #fff;}
#screensteps-sidebar #sidebar-search input:focus { border-color: transparent; box-shadow: none;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment