Created
December 6, 2011 16:06
-
-
Save kemo/1438723 to your computer and use it in GitHub Desktop.
Pay LESS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Border Radius | |
| .border-radius(@radius: 5px) { | |
| -webkit-border-radius: @radius; | |
| -moz-border-radius: @radius; | |
| border-radius: @radius; | |
| } | |
| // Drop shadows | |
| .box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) { | |
| -webkit-box-shadow: @shadow; | |
| -moz-box-shadow: @shadow; | |
| box-shadow: @shadow; | |
| } | |
| // Transitions | |
| .transition(@transition) { | |
| -webkit-transition: @transition; | |
| -moz-transition: @transition; | |
| -ms-transition: @transition; | |
| -o-transition: @transition; | |
| transition: @transition; | |
| } | |
| // Background clipping | |
| .background-clip(@clip) { | |
| -webkit-background-clip: @clip; | |
| -moz-background-clip: @clip; | |
| background-clip: @clip; | |
| } | |
| /* reset.css */ | |
| html {margin:0;padding:0;border:0;} | |
| body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;} | |
| article, aside, details, figcaption, figure, dialog, footer, header, hgroup, menu, nav, section {display:block;} | |
| body {line-height:1.5;background:white;} | |
| table {border-collapse:separate;border-spacing:0;} | |
| caption, th, td {text-align:left;font-weight:normal;float:none !important;} | |
| table, th, td {vertical-align:middle;} | |
| blockquote:before, blockquote:after, q:before, q:after {content:'';} | |
| blockquote, q {quotes:"" "";} | |
| a img {border:none;} | |
| :focus {outline:0;} | |
| /* typography.css */ | |
| html {font-size:100.01%;} | |
| body {font-size:75%;color:#222;background:#fff;font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;} | |
| h1, h2, h3, h4, h5, h6 {font-weight:normal;color:#111;} | |
| h1 {font-size:3em;line-height:1;margin-bottom:0.5em;} | |
| h2 {font-size:2em;margin-bottom:0.75em;} | |
| h3 {font-size:1.5em;line-height:1;margin-bottom:1em;} | |
| h4 {font-size:1.2em;line-height:1.25;margin-bottom:1.25em;} | |
| h5 {font-size:1em;font-weight:bold;margin-bottom:1.5em;} | |
| h6 {font-size:1em;font-weight:bold;} | |
| h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;} | |
| p {margin:0 0 1.5em;} | |
| .left {float:left !important;} | |
| p .left {margin:1.5em 1.5em 1.5em 0;padding:0;} | |
| .right {float:right !important;} | |
| p .right {margin:1.5em 0 1.5em 1.5em;padding:0;} | |
| a:focus, a:hover {color:#09f;} | |
| a {color:#06c;text-decoration:underline;} | |
| blockquote {margin:1.5em;color:#666;font-style:italic;} | |
| strong, dfn {font-weight:bold;} | |
| em, dfn {font-style:italic;} | |
| sup, sub {line-height:0;} | |
| abbr, acronym {border-bottom:1px dotted #666;} | |
| address {margin:0 0 1.5em;font-style:italic;} | |
| del {color:#666;} | |
| pre {margin:1.5em 0;white-space:pre;} | |
| pre, code, tt {font:1em 'andale mono', 'lucida console', monospace;line-height:1.5;} | |
| li ul, li ol {margin:0;} | |
| ul, ol {margin:0 1.5em 1.5em 0;padding-left:1.5em;} | |
| ul {list-style-type:disc;} | |
| ol {list-style-type:decimal;} | |
| dl {margin:0 0 1.5em 0;} | |
| dl dt {font-weight:bold;} | |
| dd {margin-left:1.5em;} | |
| table {margin-bottom:1.4em;width:100%;} | |
| th {font-weight:bold;} | |
| thead th {background:#c3d9ff;} | |
| th, td, caption {padding:4px 10px 4px 5px;} | |
| tbody tr:nth-child(even) td, tbody tr.even td {background:#e5ecf9;} | |
| tfoot {font-style:italic;} | |
| caption {background:#eee;} | |
| .small {font-size:.8em;margin-bottom:1.875em;line-height:1.875em;} | |
| .large {font-size:1.2em;line-height:2.5em;margin-bottom:1.25em;} | |
| .hide {display:none;} | |
| .quiet {color:#666;} | |
| .loud {color:#000;} | |
| .highlight {background:#ff0;} | |
| .added {background:#060;color:#fff;} | |
| .removed {background:#900;color:#fff;} | |
| .first {margin-left:0;padding-left:0;} | |
| .last {margin-right:0;padding-right:0;} | |
| .top {margin-top:0;padding-top:0;} | |
| .bottom {margin-bottom:0;padding-bottom:0;} | |
| @baseWidth: 30px; | |
| @marginWidth: 10px; | |
| @spanWidth: @baseWidth + @marginWidth; | |
| /* grid.css */ | |
| .container {width:950px;margin:0 auto;} | |
| .column, .span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12, .span-13, .span-14, .span-15, .span-16, .span-17, .span-18, .span-19, .span-20, .span-21, .span-22, .span-23, .span-24 {float:left;margin-right:@marginWidth;} | |
| .last {margin-right:0;} | |
| .span-1 {width:@baseWidth;} | |
| .span-2 {width:@baseWidth + (@spanWidth * 1);} | |
| .span-3 {width:@baseWidth + (@spanWidth * 2);} | |
| .span-4 {width:@baseWidth + (@spanWidth * 3);} | |
| .span-5 {width:@baseWidth + (@spanWidth * 4);} | |
| .span-6 {width:@baseWidth + (@spanWidth * 5);} | |
| .span-7 {width:@baseWidth + (@spanWidth * 6);} | |
| .span-8 {width:@baseWidth + (@spanWidth * 7);} | |
| .span-9 {width:@baseWidth + (@spanWidth * 8);} | |
| .span-10 {width:@baseWidth + (@spanWidth * 9);} | |
| .span-11 {width:@baseWidth + (@spanWidth * 10);} | |
| .span-12 {width:@baseWidth + (@spanWidth * 11);} | |
| .span-13 {width:@baseWidth + (@spanWidth * 12);} | |
| .span-14 {width:@baseWidth + (@spanWidth * 13);} | |
| .span-15 {width:@baseWidth + (@spanWidth * 14);} | |
| .span-16 {width:@baseWidth + (@spanWidth * 15);} | |
| .span-17 {width:@baseWidth + (@spanWidth * 16);} | |
| .span-18 {width:@baseWidth + (@spanWidth * 17);} | |
| .span-19 {width:@baseWidth + (@spanWidth * 18);} | |
| .span-20 {width:@baseWidth + (@spanWidth * 19);} | |
| .span-21 {width:@baseWidth + (@spanWidth * 20);} | |
| .span-22 {width:@baseWidth + (@spanWidth * 21);} | |
| .span-23 {width:@baseWidth + (@spanWidth * 22);} | |
| .span-24 {width:@baseWidth + (@spanWidth * 23); .last; } | |
| .border {padding-right:4px;margin-right:5px;border-right:1px solid #ddd;} | |
| .colborder {padding-right:24px;margin-right:25px;border-right:1px solid #ddd;} | |
| .pull-1 {margin-left:-40px;} | |
| .pull-2 {margin-left:-80px;} | |
| .pull-3 {margin-left:-120px;} | |
| .pull-4 {margin-left:-160px;} | |
| .pull-5 {margin-left:-200px;} | |
| .pull-6 {margin-left:-240px;} | |
| .pull-7 {margin-left:-280px;} | |
| .pull-8 {margin-left:-320px;} | |
| .pull-9 {margin-left:-360px;} | |
| .pull-10 {margin-left:-400px;} | |
| .pull-11 {margin-left:-440px;} | |
| .pull-12 {margin-left:-480px;} | |
| .pull-13 {margin-left:-520px;} | |
| .pull-14 {margin-left:-560px;} | |
| .pull-15 {margin-left:-600px;} | |
| .pull-16 {margin-left:-640px;} | |
| .pull-17 {margin-left:-680px;} | |
| .pull-18 {margin-left:-720px;} | |
| .pull-19 {margin-left:-760px;} | |
| .pull-20 {margin-left:-800px;} | |
| .pull-21 {margin-left:-840px;} | |
| .pull-22 {margin-left:-880px;} | |
| .pull-23 {margin-left:-920px;} | |
| .pull-24 {margin-left:-960px;} | |
| .pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12, .pull-13, .pull-14, .pull-15, .pull-16, .pull-17, .pull-18, .pull-19, .pull-20, .pull-21, .pull-22, .pull-23, .pull-24 {float:left;position:relative;} | |
| .push-1 {margin:0 -40px 1.5em 40px;} | |
| .push-2 {margin:0 -80px 1.5em 80px;} | |
| .push-3 {margin:0 -120px 1.5em 120px;} | |
| .push-4 {margin:0 -160px 1.5em 160px;} | |
| .push-5 {margin:0 -200px 1.5em 200px;} | |
| .push-6 {margin:0 -240px 1.5em 240px;} | |
| .push-7 {margin:0 -280px 1.5em 280px;} | |
| .push-8 {margin:0 -320px 1.5em 320px;} | |
| .push-9 {margin:0 -360px 1.5em 360px;} | |
| .push-10 {margin:0 -400px 1.5em 400px;} | |
| .push-11 {margin:0 -440px 1.5em 440px;} | |
| .push-12 {margin:0 -480px 1.5em 480px;} | |
| .push-13 {margin:0 -520px 1.5em 520px;} | |
| .push-14 {margin:0 -560px 1.5em 560px;} | |
| .push-15 {margin:0 -600px 1.5em 600px;} | |
| .push-16 {margin:0 -640px 1.5em 640px;} | |
| .push-17 {margin:0 -680px 1.5em 680px;} | |
| .push-18 {margin:0 -720px 1.5em 720px;} | |
| .push-19 {margin:0 -760px 1.5em 760px;} | |
| .push-20 {margin:0 -800px 1.5em 800px;} | |
| .push-21 {margin:0 -840px 1.5em 840px;} | |
| .push-22 {margin:0 -880px 1.5em 880px;} | |
| .push-23 {margin:0 -920px 1.5em 920px;} | |
| .push-24 {margin:0 -960px 1.5em 960px;} | |
| .push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12, .push-13, .push-14, .push-15, .push-16, .push-17, .push-18, .push-19, .push-20, .push-21, .push-22, .push-23, .push-24 {float:left;position:relative;} | |
| div.prepend-top, .prepend-top {margin-top:1.5em;} | |
| div.append-bottom, .append-bottom {margin-bottom:1.5em;} | |
| .box {padding:1.5em;margin-bottom:1.5em;background:#e5eCf9;} | |
| hr {background:#ddd;color:#ddd;clear:both;float:none;width:100%;height:1px;margin:0 0 17px;border:none;} | |
| hr.space {background:#fff;color:#fff;visibility:hidden;} | |
| .clearfix:after, .container:after {content:"\0020";display:block;height:0;clear:both;visibility:hidden;overflow:hidden;} | |
| .clearfix, .container {display:block;} | |
| .clear {clear:both;} | |
| /* forms.css */ | |
| fieldset {padding:0 1.4em 1.4em 1.4em;margin:0 0 1.5em 0;border:1px solid #ccc;} | |
| legend {font-weight:bold;font-size:1.2em;margin-top:-0.2em;margin-bottom:1em;} | |
| fieldset, #IE8#HACK {padding-top:1.4em;} | |
| legend, #IE8#HACK {margin-top:0;margin-bottom:0;} | |
| input.span-1, textarea.span-1, input.span-2, textarea.span-2, input.span-3, textarea.span-3, input.span-4, textarea.span-4, input.span-5, textarea.span-5, input.span-6, textarea.span-6, input.span-7, textarea.span-7, input.span-8, textarea.span-8, input.span-9, textarea.span-9, input.span-10, textarea.span-10, input.span-11, textarea.span-11, input.span-12, textarea.span-12, input.span-13, textarea.span-13, input.span-14, textarea.span-14, input.span-15, textarea.span-15, input.span-16, textarea.span-16, input.span-17, textarea.span-17, input.span-18, textarea.span-18, input.span-19, textarea.span-19, input.span-20, textarea.span-20, input.span-21, textarea.span-21, input.span-22, textarea.span-22, input.span-23, textarea.span-23, input.span-24, textarea.span-24 {border-left-width:1px;border-right-width:1px;padding-left:5px;padding-right:5px;} | |
| input.span-1, textarea.span-1 {width:18px;} | |
| input.span-2, textarea.span-2 {width:58px;} | |
| input.span-3, textarea.span-3 {width:98px;} | |
| input.span-4, textarea.span-4 {width:138px;} | |
| input.span-5, textarea.span-5 {width:178px;} | |
| input.span-6, textarea.span-6 {width:218px;} | |
| input.span-7, textarea.span-7 {width:258px;} | |
| input.span-8, textarea.span-8 {width:298px;} | |
| input.span-9, textarea.span-9 {width:338px;} | |
| input.span-10, textarea.span-10 {width:378px;} | |
| input.span-11, textarea.span-11 {width:418px;} | |
| input.span-12, textarea.span-12 {width:458px;} | |
| input.span-13, textarea.span-13 {width:498px;} | |
| input.span-14, textarea.span-14 {width:538px;} | |
| input.span-15, textarea.span-15 {width:578px;} | |
| input.span-16, textarea.span-16 {width:618px;} | |
| input.span-17, textarea.span-17 {width:658px;} | |
| input.span-18, textarea.span-18 {width:698px;} | |
| input.span-19, textarea.span-19 {width:738px;} | |
| input.span-20, textarea.span-20 {width:778px;} | |
| input.span-21, textarea.span-21 {width:818px;} | |
| input.span-22, textarea.span-22 {width:858px;} | |
| input.span-23, textarea.span-23 {width:898px;} | |
| input.span-24, textarea.span-24 {width:938px;} | |
| input[type=text], | |
| input[type=password], | |
| input[type=email], | |
| input[type=url], | |
| input.text, | |
| input.title, | |
| textarea, | |
| select { | |
| background:#fdfdfd; | |
| border: 1px solid #ddd; | |
| border-color:#aaa #ccc #ddd #aaa; | |
| .box-shadow(inset 2px 2px 3px rgba(0, 0, 0, 0.10)); | |
| color:#666; | |
| font-family:Arial; | |
| font-size:14px; | |
| line-height:20px; | |
| margin:0.5em 0; | |
| margin:8px 0; | |
| padding-top:5px; | |
| padding-bottom:5px; | |
| &:focus { | |
| background:#fff; | |
| border-color:#999; | |
| .box-shadow(0 0 3px rgba(0, 0, 0, 0.25)); | |
| color:#111; | |
| } | |
| // Disabled and read-only inputs | |
| &[disabled], | |
| &[readonly] { | |
| background-color: #f5f5f5; | |
| border-color: #ddd; | |
| cursor: not-allowed; | |
| } | |
| } | |
| input.text, input.title {width:300px;padding:5px;} | |
| input.title {font-size:1.5em;} | |
| form.inline {line-height:3;} | |
| form.inline p {margin-bottom:0;} | |
| label { | |
| cursor:pointer; | |
| font-size:14px; | |
| font-weight:bold; | |
| } | |
| select { | |
| option { | |
| padding:0 5px; | |
| &:hover { | |
| background-color:@dark; | |
| } | |
| } | |
| option[selected] { | |
| background-color:#eee; | |
| } | |
| } | |
| textarea { | |
| line-height:24px; | |
| min-height:50px; | |
| padding:5px; | |
| resize:vertical; | |
| width:390px; | |
| } | |
| .error, .alert, .notice, .success, .info {padding:0.8em;margin-bottom:1em;border:2px solid #ddd;} | |
| .error, .alert {background:#fbe3e4;color:#8a1f11;border-color:#fbc2c4;} | |
| .notice {background:#fff6bf;color:#514721;border-color:#ffd324;} | |
| .success {background:#e6efc2;color:#264409;border-color:#c6d880;} | |
| .info {background:#d5edf8;color:#205791;border-color:#92cae4;} | |
| .error a, .alert a {color:#8a1f11;} | |
| .notice a {color:#514721;} | |
| .success a {color:#264409;} | |
| .info a {color:#205791;} | |
| /* Fancy Forms */ | |
| form.fancy { | |
| fieldset { | |
| border:1px solid #ddd; | |
| font-size:14px; | |
| legend { | |
| border:0 none; | |
| color:#444; | |
| font-family:"Lucida Grande","Lucida Sans Unicode",Verdana,Helvetica,Arial,sans-serif; | |
| font-size:11px; | |
| padding:0 10px; | |
| } | |
| p:last-child { | |
| border:0 none; | |
| margin:0; | |
| } | |
| } | |
| input[type="text"], | |
| input[type="email"], | |
| input[type="url"], | |
| input[type="password"], | |
| select, | |
| textarea { | |
| border:1px solid #ddd; | |
| border-color: #7C7C7C #C3C3C3 #DDDDDD; | |
| font-family:Arial, Tahoma, sans-serif; | |
| font-size:14px; | |
| margin:0; | |
| padding:5px 2px; | |
| &:active, | |
| &:focus { | |
| border-color:#888; | |
| } | |
| } | |
| label { | |
| color:#444; | |
| cursor:pointer; | |
| font-size:13px; | |
| font-weight:700; | |
| padding:6px 0; | |
| } | |
| p { | |
| border-bottom:1px solid #eee; | |
| height:auto; | |
| overflow:hidden; | |
| margin:0 0 10px; | |
| padding:10px 0; | |
| } | |
| small { | |
| color:#666; | |
| } | |
| textarea { | |
| resize:vertical; | |
| } | |
| } | |
| /* application.css */ | |
| @bodyBg: #fafafa; | |
| @bright: #01ABE5; | |
| @bright: #6bd; | |
| @dark: #085679; | |
| a { | |
| color:#085679; | |
| text-decoration:none; | |
| } | |
| a.title, .title { | |
| color:#333; | |
| color:#09c; | |
| font-size:16px; | |
| font-weight:700; | |
| &:hover { | |
| color:#666; | |
| color:#39b2e5; | |
| } | |
| } | |
| abbr { | |
| cursor:help; | |
| } | |
| body { | |
| background-color:@bodyBg; | |
| color:#333; | |
| font-size:14px; | |
| position:relative; | |
| } | |
| h1 { | |
| color:#454545; | |
| font-family:"Trebuchet MS", Arial, sans-serif; | |
| font-size:38px; | |
| font-weight:700; | |
| letter-spacing:-1px; | |
| margin:0 0 25px; | |
| /*text-shadow:1px 1px 5px #ccc;*/ | |
| .headline_sub_url { | |
| color:#888; | |
| font-size:26px; | |
| font-weight:400; | |
| &:hover { | |
| color:#bbb; | |
| } | |
| } | |
| } | |
| h2 { | |
| color:#555; | |
| } | |
| h3 { | |
| color:#555; | |
| } | |
| h5 { | |
| color:#aaa; | |
| font-size:12px; | |
| margin:0 0 10px; | |
| text-transform:uppercase; | |
| } | |
| .closable { | |
| position:relative; | |
| .btn.close { | |
| border-color:1px solid #eee; | |
| padding:7px; | |
| position:absolute; | |
| right:0; | |
| top:0; | |
| /*opacity:1;*/ | |
| } | |
| } | |
| noscript { | |
| #noscript-padding { | |
| padding-top:30px; | |
| } | |
| #noscript-warning { | |
| background-color: #a00; | |
| color: #fff; | |
| font-weight: bold; | |
| height:20px; | |
| left: 0; | |
| padding: 5px 0; | |
| position: fixed; | |
| text-align: center; | |
| top: 0; | |
| width: 100%; | |
| z-index: 101; | |
| a { | |
| color:#f00; | |
| text-decoration:underline; | |
| } | |
| } | |
| } | |
| small { | |
| color:#444; | |
| font-family:Tahoma, Verdana, sans-serif; | |
| font-size:11px; | |
| } | |
| table { | |
| color: #777; | |
| font-family: Arial, Helvetica, sans-serif; | |
| font-size: 14px; | |
| font-weight: 400; | |
| thead { | |
| color:#252525; | |
| font-size:12px; | |
| font-weight:700; | |
| tr { | |
| border-bottom:1px solid #ccc; | |
| td { | |
| padding:7px 0; | |
| } | |
| } | |
| } | |
| tbody { | |
| tr { | |
| border-bottom: 1px solid #eee; | |
| &.even, | |
| &:nth-child(even) { | |
| td { | |
| background: #f1f1f1; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| span.pl_pay { | |
| color:#11559c; | |
| } | |
| span.pl_pal { | |
| color:#269ad5; | |
| } | |
| span.star { | |
| color:#c00; | |
| font-weight:700; | |
| } | |
| strong.up { | |
| text-transform:uppercase; | |
| } | |
| ul.fancy { | |
| list-style:none; | |
| margin:0; | |
| padding:0; | |
| li { | |
| a { | |
| display:block; | |
| font-size:13px; | |
| font-weight:700; | |
| &:hover { | |
| background-color:#f5f5f5; | |
| } | |
| } | |
| a.fc { | |
| .transition(.1s linear all); | |
| border-bottom:1px solid #eee; | |
| border-top:1px solid #eee; | |
| color:#777; | |
| font-size:14px; | |
| margin-top:-1px; | |
| padding:6px 10px 6px 30px; | |
| position:relative; | |
| &:hover { | |
| color:#222; | |
| } | |
| &.selected { | |
| background-color: #666; | |
| border:0 none; | |
| color:#fff; | |
| padding:7px 10px 7px 30px; | |
| &:hover { | |
| background-color:#666; | |
| } | |
| } | |
| .ico { | |
| position:absolute; | |
| left:7px; | |
| top:9px; | |
| } | |
| } | |
| ul { | |
| background:#fff; | |
| list-style:none; | |
| margin:0; | |
| padding:0; | |
| li { | |
| a { | |
| color:#666; | |
| font-family:Arial, Helvetica, Verdana, sans-serif; | |
| font-size:14px; | |
| font-weight:400; | |
| padding:4px 0 4px 30px; | |
| &:hover { | |
| color:#333; | |
| } | |
| &.selected { | |
| background-color:#f5f5f5; | |
| color:#000; | |
| font-weight:700; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| .price { | |
| color:#111; | |
| strong { | |
| } | |
| .currency { | |
| color:#aaa; | |
| } | |
| } | |
| ul.tabbed { | |
| @borderBg: #ddd; | |
| border-bottom:2px solid @borderBg; | |
| height:35px; | |
| display:block; | |
| list-style:none; | |
| margin:0 0 20px; | |
| padding:0; | |
| position:relative; | |
| /* | |
| background:#fff; | |
| border:1px solid #eee; | |
| .box-shadow(0 -3px 3px rgba(0, 0, 0, 0.05)); | |
| */ | |
| /* Refactoring begin */ | |
| &.pagination { | |
| li a { | |
| padding-left:10px; | |
| } | |
| } | |
| /* For a list to be tabbed, it has to be contained in a child .tabs container */ | |
| li { | |
| ul { | |
| display:block; | |
| list-style:none; | |
| padding:0; | |
| position:relative; | |
| li { | |
| } | |
| } | |
| ul.tabs { | |
| position:relative; | |
| li { | |
| display:inline; | |
| &.ico_tab { | |
| a { | |
| padding-right:7px; | |
| width:16px; | |
| } | |
| } | |
| a { | |
| border:1px solid #ddd; | |
| border-bottom:2px solid #ddd; | |
| color:#555; | |
| display:block; | |
| float:left; | |
| font-size:13px; | |
| font-weight:700; | |
| height:13px; | |
| line-height:13px; | |
| margin-left:-1px; | |
| margin-top:-1px; | |
| padding:12px 10px 10px 30px; | |
| position:relative; | |
| .transition(0.2s linear all); | |
| z-index:1; | |
| &:hover { | |
| background:@bodyBg; | |
| border-color:#bbb; | |
| color:#111; | |
| z-index:3; | |
| } | |
| &.disabled { | |
| color:#999; | |
| } | |
| &.no_ico { | |
| padding-left:10px; | |
| } | |
| &.selected { | |
| .border-radius(5px 5px 0 0); | |
| /* | |
| .box-shadow(0 -3px 3px rgba(0, 0, 0, 0.03)); | |
| */ | |
| background:@bodyBg; | |
| border-color:#ddd; | |
| border-bottom:0; | |
| color:#111; | |
| margin-top:-5px !important; | |
| padding-bottom:13px; | |
| padding-top:15px; | |
| z-index:2; | |
| .ico { | |
| top:14px; | |
| } | |
| } | |
| .ico { | |
| left:8px; | |
| position:absolute; | |
| top:10px; | |
| } | |
| } | |
| small { | |
| color:#999; | |
| display:block; | |
| float:left; | |
| height:13px; | |
| line-height:13px; | |
| padding:12px 10px; | |
| } | |
| } | |
| } | |
| } | |
| /* Refactoring end */ | |
| li { | |
| ul { | |
| li { | |
| .block { | |
| background:#fff; | |
| border:1px solid #ddd; | |
| display:block; | |
| float:none; | |
| margin:-1px 0 0; | |
| padding:10px; | |
| z-index:5; | |
| } | |
| a.block { | |
| &:hover { | |
| border-color:#bbb; | |
| z-index:10; | |
| } | |
| } | |
| } | |
| &.avatar_wrap { | |
| img.avatar { | |
| height:200px; | |
| width:200px; | |
| } | |
| } | |
| &.pictures { | |
| .border-radius(0 0 5px 5px); | |
| .box-shadow(0 3px 3px rgba(200, 200, 200, 0.25)); | |
| li { | |
| &:last-child { | |
| a { | |
| .border-radius(0 0 5px 5px); | |
| } | |
| } | |
| a { | |
| height:150px; | |
| position:relative; | |
| width:200px; | |
| } | |
| } | |
| } | |
| &.side { | |
| float:left; | |
| margin-right:21px; | |
| width:222px; | |
| .boxed { | |
| .box-shadow(0 3px 3px rgba(200, 200, 200, 0.25)); | |
| } | |
| .boxed:last-child { | |
| margin-bottom:0; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| /* For pages with the tabbed list on the side (200px), content div is #tabbed_content */ | |
| #tabbed_content { | |
| @width: 707px; | |
| width:@width; | |
| textarea.full { | |
| width:@width - 12px; | |
| } | |
| } | |
| .btn { | |
| font-family:"Lucida Grande", Arial, Helvetica, Verdana, sans-serif; | |
| font-size:15px; | |
| font-weight:700; | |
| &:active, | |
| &:focus { | |
| outline: none !important; | |
| } | |
| &.has_ico { | |
| padding:7px 14px 7px 8px; | |
| } | |
| &.large { | |
| font-size:18px; | |
| } | |
| .ico { | |
| float: none; | |
| } | |
| } | |
| .centered { | |
| text-align:center; | |
| } | |
| .light { | |
| color:#777; | |
| } | |
| .serif { | |
| font-family:Georgia, "Times New Roman", serif; | |
| } | |
| #header { | |
| background-color:#085679; | |
| height:89px; | |
| a#header_logo { | |
| display:block; | |
| height:89px; | |
| width:115px; | |
| } | |
| .header_search { | |
| margin:28px 0 0; | |
| padding:0; | |
| .wrap { | |
| background:#fff url("/static/assets/img/header_search.png") 0 0 no-repeat; | |
| height:33px; | |
| width:543px; | |
| input, select, #q_placeholder, .fancySelect { | |
| color:#848484; | |
| font-family:"Trebuchet MS", Arial, sans-serif; | |
| font-size:15px; | |
| float:left; | |
| margin:0; | |
| padding:0; | |
| } | |
| input#q, | |
| label#q_placeholder { | |
| background:transparent; | |
| border:0 none; | |
| .box-shadow(none); | |
| font-weight:400; | |
| height:20px; | |
| line-height:20px; | |
| margin-right:6px; | |
| padding:7px 10px 6px; | |
| width:310px; | |
| } | |
| label#q_placeholder { | |
| cursor:text; | |
| display:block; | |
| height:16px; | |
| overflow:hidden; | |
| } | |
| select { | |
| background-color:transparent; | |
| border:0 none; | |
| .box-shadow(none); | |
| margin:6px 0; | |
| padding:0; | |
| width:170px; | |
| } | |
| .fancySelect { | |
| background-color:transparent; | |
| z-index:100; | |
| .selectBox { | |
| width:145px; | |
| } | |
| ul.dropDown { | |
| border-top:2px solid #ccc; | |
| left:-336px; | |
| top:32px; | |
| width:543px; | |
| z-index:100; | |
| li { | |
| border-right:1px solid #eee; | |
| border-bottom:1px solid #eee; | |
| float:left; | |
| line-height:16px; | |
| padding:6px 5px 5px 30px; | |
| position:relative; | |
| width:145px; | |
| z-index:100; | |
| .ico { | |
| position:absolute; | |
| top:5px; | |
| left:6px; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| #user_bar { | |
| background:@bright/* url("/static/assets/img/user_bar.png") 0 0 repeat-x*/; | |
| height:40px; | |
| margin:0 0 30px; | |
| ul.user_menu { | |
| list-style:none; | |
| margin:0; | |
| padding:0; | |
| li { | |
| border-left:1px solid lighten(@bright, 5%)/*#15a6d8*/; | |
| border-right:1px solid darken(@bright, 5%)/*#0475a3*/; | |
| display:block; | |
| float:left; | |
| height:40px; | |
| margin:0; | |
| padding:0; | |
| position:relative; | |
| /* First-child elements (the ones without the submenu) */ | |
| &.fc { | |
| a { | |
| &:hover { | |
| .box-shadow(inset 0 -2px 6px rgba(255, 255, 255, 0.4)); | |
| background-color:lighten(@bright, 5%); | |
| } | |
| } | |
| } | |
| /* Sub-menu container(s) */ | |
| &.dropdown { | |
| min-width:156px; | |
| z-index:200; | |
| /* Sub-menu */ | |
| ul { | |
| display:block; | |
| margin:0; | |
| padding:0; | |
| li { | |
| border:0; | |
| clear:both; | |
| float:none !important; | |
| &.hiding { | |
| display:none; | |
| } | |
| &.user_li { | |
| a { | |
| font-family:"Trebuchet MS", Arial, sans-serif; | |
| font-size:16px; | |
| height:16px; | |
| line-height:16px; | |
| padding:12px 10px 12px 40px; | |
| position:relative; | |
| img.avatar { | |
| background:#fff; | |
| border:1px solid #ccc; | |
| padding:1px; | |
| position:absolute; | |
| top:5px; | |
| left:5px; | |
| } | |
| } | |
| } | |
| a { | |
| font-size:13px; | |
| min-width:138px; | |
| .transition(0.2s linear all); | |
| &:hover { | |
| background:#eee; | |
| color:#444; | |
| } | |
| } | |
| } | |
| } | |
| &:hover { | |
| ul { | |
| background-color:#fff; | |
| .box-shadow(0 0 10px rgba(0, 0, 0, 0.5)); | |
| li { | |
| &.hiding { | |
| border-bottom:1px solid #eee; | |
| border-top:1px solid #eee; | |
| display:block; | |
| margin-top:-1px; | |
| } | |
| a { | |
| color:#666; | |
| text-shadow:1px 1px 0 #ccc; | |
| &:hover { | |
| color:#111; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| a { | |
| color:#fff; | |
| display:block; | |
| font-size:14px; | |
| font-weight:700; | |
| height:16px; | |
| line-height:16px; | |
| padding:12px 13px 12px 9px; | |
| text-shadow: 0 1px 2px rgba(0, 0, 0, 0.50); | |
| .ico { | |
| float:left; | |
| margin-right:5px; | |
| } | |
| span { | |
| display:block; | |
| float:left; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| #footer { | |
| background:#085679; | |
| border-bottom:3px solid @bright; | |
| border-top:2px solid @bright; | |
| color:#fff; | |
| font-size:14px; | |
| padding:20px 0 0; | |
| text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); | |
| small { | |
| color:#fff; | |
| } | |
| #copyright { | |
| position:absolute; | |
| top:0; | |
| right:0; | |
| text-align:right; | |
| } | |
| .container { | |
| position:relative; | |
| } | |
| } | |
| #footnote { | |
| background-color:#eee; | |
| height:30px; | |
| line-height:30px; | |
| padding:10px 0; | |
| .container { | |
| .right { | |
| text-align:right; | |
| } | |
| } | |
| } | |
| /* Content CSS */ | |
| #content { | |
| min-height:600px; | |
| } | |
| /* Search boxes (categories, list forms, etc.) */ | |
| .boxed { | |
| background:#fff; | |
| border:1px solid #eee; | |
| display:block !important; | |
| margin:-1px 0 20px; | |
| position:relative; | |
| h4 { | |
| border-bottom:2px solid #ddd; | |
| color:#999; | |
| display:block; | |
| font-family:Tahoma, Verdana, sans-serif; | |
| font-size:11px; | |
| font-weight:700; | |
| height:19px; | |
| line-height:19px; | |
| margin:0; | |
| padding:8px; | |
| } | |
| .filter_out { | |
| border-left:1px dotted #eee; | |
| display:block; | |
| height:16px; | |
| width:16px; | |
| padding:10px 9px 9px 10px; | |
| position:absolute; | |
| top:0; | |
| right:0; | |
| z-index:5; | |
| &:hover { | |
| border-style:solid; | |
| } | |
| } | |
| } | |
| ul.categories { | |
| border:1px solid #eee; | |
| list-style:none; | |
| margin:0; | |
| padding:0; | |
| li { | |
| a { | |
| .transition(0.2s linear all); | |
| line-height:21px; | |
| small { | |
| font-size:9px; | |
| font-weight:400; | |
| line-height:21px; | |
| } | |
| &.fc { | |
| background:#fff; | |
| } | |
| } | |
| ul { | |
| li { | |
| a { | |
| background:url("/static/assets/img/subcats.png") 14px 0 no-repeat transparent; | |
| height:18px; | |
| line-height:18px; | |
| .transition(0.4s linear all); | |
| &.selected { | |
| background-position:14px -58px; | |
| } | |
| &:hover { | |
| background-color:#f5f5f5; | |
| background-position:14px -58px; | |
| } | |
| } | |
| } | |
| li:last-child a { | |
| background-position:14px -26px; | |
| &:hover { | |
| background-position:14px -84px; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| /* List forms */ | |
| ul.form_list { | |
| list-style:none; | |
| margin:0 !important; | |
| padding:0; | |
| li { | |
| border-bottom:1px solid #eee; | |
| clear:both; | |
| display:block; | |
| height:auto; | |
| overflow:hidden; | |
| padding:5px 10px 5px 10px; | |
| &.smallpad { | |
| padding:5px; | |
| } | |
| &.not(first-child) { | |
| border-top:1px solid #ddd; | |
| } | |
| label { | |
| color:#888; | |
| font-weight:400; | |
| } | |
| label.main { | |
| color:#666; | |
| font-family:"Trebuchet MS", Arial, sans-serif; | |
| font-weight:700; | |
| } | |
| label.inline { | |
| display:block; | |
| float:left; | |
| margin:5px 0 0; | |
| padding:7px 5px; | |
| } | |
| select { | |
| padding-left: 5px; | |
| padding-right: 5px; | |
| width: 200px; | |
| } | |
| } | |
| } | |
| .results { | |
| .top_bar { | |
| background:#f4f4f4; | |
| } | |
| .price { | |
| font-size:18px; | |
| } | |
| .result { | |
| background-color:@bodyBg; | |
| border-bottom:1px dashed #eee; | |
| height:105px; | |
| padding:10px 10px 10px 150px; | |
| position:relative; | |
| &:nth-child(even), | |
| &.even { | |
| border-color: #ddd; | |
| } | |
| img.item_thumb { | |
| left:0; | |
| position:absolute; | |
| top:10px; | |
| } | |
| .date { | |
| color:#bbb; | |
| float:left; | |
| width:90px; | |
| } | |
| .inf { | |
| float:left; | |
| overflow:hidden; | |
| width:260px; | |
| } | |
| .price { | |
| display:block; | |
| margin-bottom:10px; | |
| text-align:right; | |
| } | |
| } | |
| .result_box, | |
| .result_box .price strong { | |
| .transition(0.25s linear all); | |
| } | |
| .result_box { | |
| border:1px solid #ddd; | |
| display:block; | |
| float:left; | |
| height:60px; | |
| margin:-1px 0 0 -1px; | |
| padding:150px 10px 10px; | |
| position:relative; | |
| text-align:center; | |
| width:155px; | |
| &:active, | |
| &:focus { | |
| background-color:@bodyBg; | |
| } | |
| &:hover { | |
| background:#fff; | |
| .box-shadow(0 0 5px rgba(0,0,0,0.15)); | |
| .price strong { | |
| color:@bright; | |
| } | |
| } | |
| .price { | |
| bottom:1px; | |
| display:block; | |
| position:absolute; | |
| left:1px; | |
| width:174px; | |
| } | |
| .title { | |
| display:block; | |
| max-height:50px; | |
| overflow:hidden; | |
| } | |
| img.item_thumb { | |
| left:10px; | |
| position:absolute; | |
| top:10px; | |
| width:155px; | |
| } | |
| } | |
| .last { | |
| margin-right:0 !important; | |
| } | |
| .result_mini { | |
| border-bottom:1px solid #eee; | |
| clear:both; | |
| padding:8px 0; | |
| .price { | |
| float:right; | |
| } | |
| } | |
| } | |
| #sell_process_bar { | |
| border-bottom:1px solid #ccc; | |
| color:#888; | |
| clear:both; | |
| font-family:"Lucida Grande", Arial, Helvetica, sans-serif; | |
| font-size:20px; | |
| font-weight:700; | |
| height:28px; | |
| line-height:28px; | |
| margin:0 0 25px; | |
| padding:0 0 15px; | |
| text-align:center; | |
| strong { | |
| color:#111; | |
| } | |
| .span-1 { | |
| color:#a1c818; | |
| font-size:28px; | |
| text-shadow: 1px 1px 0 #759212; | |
| } | |
| } | |
| .currency_label { | |
| color: #9b4; | |
| float:left; | |
| font-size: 20px; | |
| font-weight: 700; | |
| margin: 8px 0 0; | |
| text-align: center; | |
| width:40px; | |
| } | |
| #item_form { | |
| #condition_options { | |
| .inner { | |
| label { | |
| font-weight:400; | |
| padding:0 10px 0 0; | |
| &.smaller { | |
| font:11px/14px Tahoma,Arial,sans-serif; | |
| } | |
| } | |
| } | |
| } | |
| #delivery_options { | |
| .option_block { | |
| padding:0 0 10px; | |
| label { | |
| display:block; | |
| small { | |
| color:#999; | |
| font-size:13px; | |
| font-weight:400; | |
| } | |
| } | |
| } | |
| } | |
| .map { | |
| height:400px; | |
| overflow:hidden; | |
| width:630px; | |
| } | |
| } | |
| #pictures_form { | |
| .uploaded_pic { | |
| border-bottom:1px solid #eee; | |
| height:105px; | |
| padding:10px 0; | |
| &:last { | |
| border-bottom:0; | |
| } | |
| img { | |
| float:left; | |
| margin-right:10px; | |
| } | |
| .btn { | |
| float:left; | |
| &.delete_picture { | |
| margin-top:40px; | |
| } | |
| } | |
| } | |
| } | |
| /* fancySelect: Fancy Select boxes */ | |
| .fancySelect { | |
| /* This is the container of the new select element */ | |
| height:33px; | |
| display:inline-block; | |
| line-height:33px; | |
| margin:0; | |
| min-width:200px; | |
| padding:0; | |
| position:relative; | |
| margin:8px 0; | |
| &:hover { | |
| background-position:7px 11px; | |
| } | |
| &.expanded { | |
| .selectBox .ico { | |
| opacity:0.5; | |
| } | |
| } | |
| .selectBox { | |
| .border-radius(3px); | |
| color:#666; | |
| cursor:pointer; | |
| font-size:13px; | |
| height:100%; | |
| padding:0 0 0 30px; | |
| position:relative; | |
| text-shadow:1px 1px 0 #EEEEEE; | |
| width:100%; | |
| &:hover { | |
| color:#444; | |
| text-shadow:1px 1px 0 #ccc; | |
| } | |
| .ico { | |
| position:absolute; | |
| top:9px; | |
| left:6px; | |
| } | |
| } | |
| ul.dropDown { | |
| border-bottom:1px solid #aaa; | |
| .box-shadow(0 4px 4px rgba(0, 0, 0, 0.25)); | |
| top:30px; | |
| left:0; | |
| list-style:none; | |
| margin:0; | |
| padding:0; | |
| position:absolute; | |
| width:100%; | |
| z-index:1000; | |
| -moz-box-sizing:border-box; | |
| -webkit-box-sizing:border-box; | |
| box-sizing:border-box; | |
| li { | |
| background-color:#fff; | |
| cursor:pointer; | |
| font-size:13px; | |
| line-height:21px; | |
| padding:4px; | |
| .transition(0.2s linear all); | |
| &:hover{ | |
| background-color:#eee; | |
| color:#000; | |
| } | |
| } | |
| } | |
| } | |
| #item { | |
| a.buy, a.ask { | |
| font-family:Arial, Helvetica, "Trebuchet MS", sans-serif; | |
| font-size:18px; | |
| padding:15px; | |
| text-align:center; | |
| } | |
| a.buy { | |
| width:150px; | |
| } | |
| a.ask { | |
| margin-right:10px; | |
| width:100px; | |
| } | |
| h1 { | |
| margin-bottom:15px; | |
| } | |
| #item_ajax { | |
| border-bottom:1px solid #eee; | |
| clear:both; | |
| height:auto; | |
| margin:0 0 15px; | |
| overflow:hidden; | |
| padding:0 0 15px; | |
| } | |
| table#details { | |
| td.l { | |
| width:45%; | |
| } | |
| } | |
| .bar { | |
| border-bottom:1px solid #eee; | |
| margin:0 0 15px; | |
| padding:0 0 15px; | |
| } | |
| .description { | |
| font-size:14px; | |
| overflow:hidden; | |
| width:360px; | |
| } | |
| .details { | |
| width:330px; | |
| } | |
| .item_top { | |
| border-bottom:1px solid #eee; | |
| height:50px; | |
| margin:0 0 20px; | |
| padding:0 0 20px; | |
| .price { | |
| font-size:43px; | |
| line-height:43px; | |
| letter-spacing:-1px; | |
| padding:5px 0 0 0; | |
| h5 { | |
| line-height:12px; | |
| letter-spacing:0; | |
| margin:0; | |
| } | |
| } | |
| } | |
| .buy_request { | |
| border-bottom:1px solid #eee; | |
| margin:0 0 10px; | |
| padding:0 0 10px; | |
| button { | |
| &.btn { | |
| margin:0 10px 0 0; | |
| } | |
| } | |
| pre { | |
| margin:10px 0 0; | |
| } | |
| } | |
| } | |
| #profile { | |
| } | |
| .pitch_box { | |
| height:130px; | |
| strong.up { | |
| border-bottom:2px solid #eee; | |
| color:@bright; | |
| display:block; | |
| padding:5px 0; | |
| text-align:center; | |
| } | |
| p { | |
| border-top:1px solid #ddd; | |
| color:#555; | |
| font-family:Verdana,Tahoma,sans-serif; | |
| font-size:11px; | |
| padding:5px 5px 0; | |
| } | |
| } | |
| #index_cfa { | |
| background:url("/static/assets/img/index_cfa.png") no-repeat 0 0; | |
| height:143px; | |
| padding:10px; | |
| position:relative; | |
| text-align:center; | |
| width:330px; | |
| .btn { | |
| .box-shadow(0px 5px 5px rgba(0, 0, 0, 0.25)); | |
| height:50px; | |
| margin-top: 27px; | |
| padding: 22px 26px; | |
| text-align: center; | |
| width: 250px; | |
| &:hover { | |
| .box-shadow(0px 5px 5px rgba(0, 0, 0, 0.35)); | |
| strong { | |
| text-shadow:0 -1px 1px #4f770b; | |
| } | |
| } | |
| small { | |
| color:#4f770b; | |
| text-shadow:none; | |
| } | |
| strong { | |
| font-family:Arial, Tahoma, sans-serif; | |
| font-size:28px; | |
| } | |
| } | |
| } | |
| .message { | |
| border-bottom:2px solid #eee; | |
| clear:both; | |
| height:auto; | |
| margin-bottom:10px; | |
| overflow:hidden; | |
| padding: 0 0 10px; | |
| &.reply { | |
| background-color:#eee; | |
| margin-left:10px; | |
| } | |
| } | |
| #username_form { | |
| #pusher { | |
| margin-left:250px; | |
| position:relative; | |
| } | |
| input#username { | |
| font-size:24px; | |
| font-weight:700; | |
| margin:0 15px 0 0; | |
| padding: 10px 90px 10px 10px; | |
| text-align:right; | |
| width:200px; | |
| } | |
| label#username_label { | |
| color:#B8DC0E; | |
| font-size:24px; | |
| top:8px; | |
| left:210px; | |
| position:absolute; | |
| } | |
| button { | |
| font-size:26px; | |
| margin:0; | |
| width:135px; | |
| } | |
| } | |
| ul.brands_list { | |
| clear:both; | |
| display:block; | |
| height:75px; | |
| list-style:none; | |
| margin:0 0 10px; | |
| padding:0; | |
| li { | |
| display:inline; | |
| a { | |
| border-bottom:2px solid #eee; | |
| display:block; | |
| float:left; | |
| height:50px; | |
| margin-right:10px; | |
| text-align:center; | |
| width:100px; | |
| &.selected { | |
| border-color:#ddd; | |
| } | |
| } | |
| } | |
| } | |
| span.ico { | |
| background:transparent url("/static/assets/famfamfam_sprite_small2.png") no-repeat 0 0; | |
| display:block; | |
| display:inline-block; | |
| float:left; | |
| height:16px; | |
| width:16px; | |
| } | |
| #category_list { | |
| .cat { | |
| background:#fff; | |
| border:1px solid #ccc; | |
| .box-shadow(0 3px 3px rgba(200, 200, 200, .25)); | |
| float:left; | |
| margin-bottom:15px; | |
| margin-right:10px; | |
| width:228px; | |
| a.title { | |
| display:block; | |
| height:16px; | |
| line-height:16px; | |
| margin:0 0 5px; | |
| padding:3px 0 3px 25px; | |
| position:relative; | |
| .ico { | |
| position:absolute; | |
| top:2px; | |
| left:0; | |
| } | |
| } | |
| ul { | |
| li { | |
| a { | |
| color:#777; | |
| display:block; | |
| &.row_trigger { | |
| background:#eee; | |
| border-top:2px solid #ddd; | |
| font-size:12px; | |
| font-weight:700; | |
| padding:4px 0; | |
| text-align:center; | |
| &:hover { | |
| background:#ddd; | |
| color:#222; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| .last { | |
| margin-right:0; | |
| } | |
| } | |
| form.inviter_contacts { | |
| label.contact { | |
| .border-radius(3px); | |
| border:1px solid #ddd; | |
| display:block; | |
| font-weight:400; | |
| height:26px; | |
| line-height:26px; | |
| margin-bottom:1px; | |
| padding:10px; | |
| position:relative; | |
| .transition(.1s linear all); | |
| &:hover{ | |
| background-color:#eee; | |
| } | |
| small { | |
| color:#666; | |
| position:absolute; | |
| right:12px; | |
| top:12px; | |
| } | |
| } | |
| label.checked { | |
| background-color:#eff !important; | |
| border-color:#ade !important; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment