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: 20px;
53 @buttonTextFontSize: 17px;
56 @defaultPanelWidth: 320px;
60 @maxMessageHeight: 500px;
61 @maxMessageWidth: 500px;
64 @import "../../lib/font-awesome/less/font-awesome.less";
65 @import "../../lib/font-onyx/lib/Icon.less";
68 font-family: @baseFont;
69 font-size: @baseFontSize;
70 background-color: @white;
74 bottom: 4px !important;
87 .xv-invisible-wrapper {
92 // This gives them 4 lines of description
93 .xv-limit-description {
96 -webkit-line-clamp: 4;
97 -webkit-box-orient: vertical;
101 /* Setting this as min-width overrides enyo-narrow 100% */
102 width: @defaultPanelWidth;
103 // TODO: replace with textured background?
104 background-color: @white;
105 .box-shadow(-2px -2px 6px rgba(0,0,0,0.20));
109 Media query for responsive design. This adapts to smaller
112 @media (max-width: 480px) {
122 margin-bottom: -4px !important;
132 -webkit-overflow-scrolling: touch;
147 .xv-error, .xv-negative {
152 Default button bar with margins and border-radius
164 background: @button-gray;
166 font-size: @buttonFontSize;
168 &[class^="icon-"]:before, &[class*=" icon-"]:before {
169 vertical-align: middle;
173 font-size: @buttonTextFontSize;
176 background: @slate-blue;
191 .xv-parameter-title {
201 background: @header-gray;
202 min-width: @defaultPanelWidth;
208 max-height: @maxMessageHeight;
209 max-width: @maxMessageWidth;
212 &.xv-groupbox-popup {
213 .xv-workspace-container > .xv-workspace > .xv-workspace-panel;
224 .xv-my-account-popup {
225 background-color: @white;
232 margin: 0 auto 0 auto;
241 background-color: @white;
243 .xv-groupbox > *:last-child {
253 .xv-comment-box-repeater {
256 .xv-comment-box-label {
262 text-overflow: ellipsis;
264 .xv-comment-box-textblock {
270 /* Resets the margin/padding value for blockquote tag in comments */
272 margin: 0 15px 10px 15px;
277 .icon-folder-open-alt, .icon-calendar, .icon-sort, .icon-angle-up, .icon-angle-down {
279 vertical-align: middle;
292 border: #eee 2px solid;
295 .xv-documents-picker-label {
297 padding: 16px 8px 8px 8px;
301 .xv-documents-picker {
307 // TODO: replace this image with font
310 url(../../../../../../assets/checkbox.png)
322 /* This is for styling the moved items in the more toolbar */
327 .icon-folder-open-alt, .icon-calendar, .icon-sort, .icon-angle-up, .icon-angle-down, .icon-save {
329 vertical-align: middle;
333 height: @toolbarHeight;
335 background: @header-gray;
338 .onyx-icon-button, .onyx-popup-decorator {
346 color: @light-orange;
351 .onyx-popup-decorator {
352 // cancel the margin that
353 // is on the icon if there's a menu
370 .xv-toolbar-label, .xv-search {
371 width: @searchLength;
381 @import "mixins.less";
383 @import "navigator.less";
384 @import "startup.less";
385 @import "workspace.less";
386 @import "model-decorator.less";
387 @import "picker.less";
389 @import "dashboard.less";
391 @import "pullout.less";
392 @import "relations.less";
393 @import "address.less";
394 @import "search.less";