2 To compile this .less file to .css:
3 lessc screen.less > ../stylesheets/screen.css
4 Use -compress for a compressed .css with no comments
10 @bright-orange: #ff6529;
15 @dark-slate-blue: #1a4f77;
16 @lightest-gray: #efefef;
17 @button-gray: #e1e1e1;
24 @header-gray: #505050;
35 @light-orange: #ff9c00;
36 @item-hilite-background: #226b9a;
38 @text-shadow: fade(#222, 45%);
41 @control-bg: @header-gray;
45 @baseFont: 'Helvetica Neue', Helvetica, 'Nimbus Sans L', Arial, sans-serif;
46 @groupboxFont: "Lucida Sans Unicode", "Lucida Grande", arial, sans-serif;
47 @startupFont: Segoe UI, Prelude Medium, Helvetica, Verdana, sans-serif;
51 @totalsFontSize: 14px;
52 @buttonFontSize: 17px;
55 @defaultPanelWidth: 320px;
60 @import "../../lib/font-awesome/less/font-awesome.less";
61 @import "../../lib/font-onyx/lib/Icon.less";
64 font-family: @baseFont;
65 font-size: @baseFontSize;
66 background-color: @white;
70 bottom: 4px !important;
83 .xv-invisible-wrapper {
88 // This gives them 4 lines of description
89 .xv-limit-description {
92 -webkit-line-clamp: 4;
93 -webkit-box-orient: vertical;
97 /* Setting this as min-width overrides enyo-narrow 100% */
98 width: @defaultPanelWidth;
99 // TODO: replace with textured background?
100 background-color: @white;
101 .box-shadow(-2px -2px 6px rgba(0,0,0,0.20));
105 Media query for responsive design. This adapts to smaller
108 @media (max-width: 480px) {
118 margin-bottom: -4px !important;
128 -webkit-overflow-scrolling: touch;
143 .xv-error, .xv-negative {
148 Default button bar with margins and border-radius
159 background: @button-gray;
163 font-size: @buttonFontSize;
164 font-family: @baseFont;
167 background: @slate-blue;
182 .xv-parameter-title {
192 background: @header-gray;
196 min-width: @defaultPanelWidth;
200 &.xv-groupbox-popup {
201 .xv-workspace-container > .xv-workspace > .xv-workspace-panel;
212 .xv-my-account-popup {
213 background-color: @white;
220 margin: 0 auto 0 auto;
229 background-color: @white;
231 .xv-groupbox > *:last-child {
241 .xv-comment-box-repeater {
244 .xv-comment-box-label {
250 text-overflow: ellipsis;
252 .xv-comment-box-textblock {
258 /* Resets the margin/padding value for blockquote tag in comments */
260 margin: 0 15px 10px 15px;
265 .icon-folder-open-alt, .icon-calendar, .icon-sort, .icon-angle-up, .icon-angle-down {
267 vertical-align: middle;
280 border: #eee 2px solid;
283 .xv-documents-picker-label {
285 padding: 16px 8px 8px 8px;
289 .xv-documents-picker {
295 // TODO: replace this image with font
298 url(../../../../../../assets/checkbox.png)
310 /* This is for styling the moved items in the more toolbar */
315 .icon-folder-open-alt, .icon-calendar, .icon-sort, .icon-angle-up, .icon-angle-down, .icon-save {
317 vertical-align: middle;
321 height: @toolbarHeight;
323 background: @header-gray;
326 .onyx-icon-button, .onyx-popup-decorator {
334 color: @light-orange;
339 .onyx-popup-decorator {
340 // cancel the margin that
341 // is on the icon if there's a menu
358 .xv-toolbar-label, .xv-search {
359 width: @searchLength;
369 @import "mixins.less";
371 @import "navigator.less";
372 @import "startup.less";
373 @import "workspace.less";
374 @import "model-decorator.less";
375 @import "picker.less";
377 @import "dashboard.less";
379 @import "pullout.less";
380 @import "relations.less";
381 @import "address.less";
382 @import "search.less";