Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on May 2nd, 2012  |  syntax: None  |  size: 12.90 KB  |  hits: 50  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. //bootstrap
  2. .clearfix {
  3.     zoom: 1;
  4.         &:after
  5.         {
  6.         display: block;
  7.         visibility: hidden;
  8.         height: 0;
  9.         clear: both;
  10.         content: ".";
  11.         }
  12. }
  13.  
  14. // Border Radius
  15. .border-radius(@radius: 5px) {
  16.     -moz-border-radius: @radius;
  17.     border-radius: @radius;
  18. }
  19.  
  20. // Drop shadows
  21. .box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  22.     -webkit-box-shadow: @shadow;
  23.     -moz-box-shadow: @shadow;
  24.     box-shadow: @shadow;
  25. }
  26.  
  27. #gradient {
  28.     .horizontal(@startColor: #555, @endColor: #333) {
  29.       background-color: @endColor;
  30.       background-repeat: no-repeat;
  31.       background-image: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor));
  32.       background-image: -webkit-linear-gradient(right center, @startColor, @endColor);
  33.       background-image: -moz-linear-gradient(right center, @startColor, @endColor);
  34.       background-image: -o-linear-gradient(left,  @startColor,  @endColor);
  35.       background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor));
  36.       filter: e(%("progid:DXImageTransform.Microsoft.Gradient(StartColorStr='%d', EndColorStr='%d', GradientType=1)",@startColor,@endColor));
  37.       -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorStr='%d', EndColorStr='%d', GradientType=1))",@startColor,@endColor);
  38.     }
  39.     .vertical(@startColor: #555, @endColor: #333) {
  40.       background-color: @endColor;
  41.       background-repeat: no-repeat;
  42.       background-image: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
  43.       background-image: -webkit-linear-gradient(@startColor, @endColor);
  44.       background-image: -moz-linear-gradient(@startColor, @endColor);
  45.       background-image: -o-linear-gradient(top,  @startColor,  @endColor);
  46.       background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
  47.       filter: e(%("progid:DXImageTransform.Microsoft.Gradient(StartColorStr='%d', EndColorStr='%d', GradientType=0)",@startColor,@endColor));
  48.       -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorStr='%d', EndColorStr='%d', GradientType=0))",@startColor,@endColor);
  49.     }
  50.     .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) {
  51.       background-color: @endColor;
  52.       background-repeat: no-repeat;
  53.       background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
  54.       background-image: -webkit-linear-gradient(@startColor, color-stop(@colorStop, @midColor), @endColor);
  55.       background-image: -moz-linear-gradient(@startColor, color-stop(@midColor, @colorStop), @endColor);
  56.     }
  57.   }
  58.  
  59. //variables
  60. @light-gray: #f2f2f2;
  61. @link-color: #00b3ee;
  62. @header-size: 36px;
  63. //@base-color: #68B7D8;
  64. //@base-color: #ef4444;
  65. @base-color: #394ba0;
  66. //@base-color: #82c341;
  67. //@base-color: #009f75;
  68.  
  69. body {
  70.         background-color: @light-gray;
  71.         font-family: Verdana, Helvetica, Arial, Sans-Serif;
  72.         margin:0;
  73.         padding:0;
  74.         color:#666;
  75.         font-size: 75%;
  76.         line-height: 1.5;
  77.         position:relative;
  78. }
  79.  
  80. a {
  81.         color: textcontrast(@base-color, @base-color, lighten(@base-color, 10%));
  82.         text-decoration:underline;
  83.        
  84.         &:visited {
  85.                 color: darken(@base-color, 5%);
  86.         }
  87.        
  88.         &:hover {
  89.                 color: darken(@base-color, 10%);
  90.         }
  91. }
  92.  
  93. /* Headings
  94. ------------------------------------*/
  95.  
  96. h1 { font-size:@header-size; }
  97. h2 { font-size:@header-size - 8px; }
  98. h3 { font-size:@header-size - 14px; }
  99. h4 { font-size:@header-size - 18px; }
  100. h5 { font-size:@header-size - 21px; }
  101. h6 { font-size:@header-size - 23px; }
  102.  
  103. h1, h2, h3, h4, h5, h6                          { position: relative; }
  104. h1, h2                                                          { line-height: 36px; margin-bottom: 18px; }
  105. h1, h2, h3, h4                                          { margin-top: 18px; }
  106. h3, h4, h5, h6                                          { line-height: 18px; }
  107.  
  108. p { font-size: 13px; line-height: 18px; position: relative;  }
  109.  
  110. /* Page Elements
  111. --------------------------------------------*/
  112.  
  113. .ribbon
  114. {
  115.     position:absolute;
  116.     height:10px;
  117.     width:100%;
  118.     background-color:fadeout(@base-color,90%);
  119.     top:0;
  120. }
  121.  
  122. .wrapper
  123. {
  124.     width:1000px;
  125.     margin:0 auto;
  126.     background-color:#fff;
  127.         .box-shadow(0 0 10px rgba(0,0,0,0.25));
  128. }
  129.  
  130. #header
  131. {
  132.     .clearfix;
  133.     padding:20px 30px;    
  134. }
  135.    
  136. #title
  137. {
  138.     float:left;      
  139. }
  140.  
  141. #logindisplay
  142. {
  143.     float:right;
  144. }
  145.  
  146. #navigation
  147. {
  148.     #gradient > .vertical(@base-color, darken(@base-color, 5%));
  149.     .box-shadow(0 1px 2px rgba(0,0,0,0.25));
  150.     .clearfix;
  151.     padding:0 20px;
  152.     border: solid 1px darken(@base-color, 10%);
  153.     border-bottom:solid 1px darken(@base-color, 35%);
  154.    
  155.     a
  156.     {
  157.         color:textcontrast(@base-color, darken(@base-color, 30%), #f2f2f2);
  158.         text-shadow: 1px 1px textcontrast(@base-color, lighten(@base-color, 15%), darken(@base-color, 20%));
  159.         text-decoration:none;
  160.         font-size:20px;
  161.         float:left;
  162.         padding:10px;
  163.         font-weight:normal;
  164.     }
  165. }
  166.  
  167. #footer
  168. {
  169.     background-color:#f3f3f3;
  170.     padding:10px;
  171.     text-align:center;
  172.     margin-top:20px;
  173. }
  174.  
  175. /* FORM LAYOUT ELEMENTS  
  176. ----------------------------------------------------------*/
  177. fieldset
  178. {
  179.     border:1px solid #ddd;
  180.     padding:0 1.4em 1.4em 1.4em;
  181.     margin:0 0 1.5em 0;
  182. }
  183.  
  184. legend
  185. {
  186.     font-size:1.2em;
  187.     font-weight: bold;
  188. }
  189.  
  190. textarea
  191. {
  192.     min-height: 75px;
  193. }
  194.  
  195. input[type="text"]
  196. {
  197.     width: 200px;
  198.     border: 1px solid #CCC;
  199.     margin-right: 5px;
  200. }
  201.  
  202. input[type="password"]
  203. {
  204.     width: 200px;
  205.     border: 1px solid #CCC;
  206. }
  207.  
  208. /* Table
  209. -------------------------------------*/
  210. table
  211. {
  212.     border-collapse: collapse;
  213.    
  214.     td {
  215.         padding: 5px;  
  216.         border: solid 1px #e8eef4;  
  217.     }
  218.    
  219.     th {
  220.         #gradient > .vertical(@base-color, lighten(@base-color, 5%));
  221.         color:textcontrast(@base-color, darken(@base-color, 30%), #f2f2f2);
  222.         font-weight:bold;
  223.         padding: 6px 5px;
  224.         text-align: left;
  225.     }
  226. }
  227. /* Widget
  228. -------------------------------*/
  229.  
  230. #layoutContainer, #widgetContainer
  231. {
  232.     ul
  233.     {
  234.         li
  235.         {
  236.             float:left;
  237.             cursor:pointer;
  238.             list-style-type:none;
  239.             width:150px;
  240.             text-align:center;
  241.             padding:5px 0;
  242.         }
  243.        
  244.         &.chosen
  245.         {
  246.             background-color:#e2e2e2;
  247.         }
  248.     }
  249.    
  250.     h3
  251.     {
  252.         span
  253.         {
  254.             font-weight:normal;
  255.             font-size:12px;
  256.         }
  257.        
  258.         &.inactive
  259.         {
  260.             color:#999;
  261.         }
  262.     }
  263.    
  264.     &.active
  265.     {
  266.         background-color:#f2f2f2;
  267.         padding:10px;
  268.     }
  269.    
  270.     .layoutName, .widgetName
  271.     {
  272.         text-align:center;
  273.         font-size:12px;
  274.         color:#999;
  275.     }
  276. }
  277.  
  278. .active, .preview
  279. {
  280.     h3
  281.     {
  282.         margin-bottom:0px;
  283.         color:#666;
  284.     }
  285.    
  286.     &.active
  287.     {
  288.         background-color:#f2f2f2;
  289.         padding:10px;
  290.     }
  291. }
  292.  
  293. #template
  294. {
  295.     .widget_container
  296.     {
  297.         position:relative;
  298.     }
  299.    
  300.     .dragNotice
  301.     {
  302.         position:absolute;
  303.         top:44%;
  304.         width:100%;
  305.         text-align:center;
  306.         font-size:20px;
  307.         font-weight:bold;
  308.         color:#999;
  309.     }
  310.    
  311.     .widget_container
  312.     {
  313.         min-height: 400px;
  314.         background:#ddd url('images/grid_transparent.png') repeat;
  315.         box-shadow:inset 0px 0px 0px 1px #ccc;
  316.         -moz-box-shadow:inset 0px 0px 0px 1px #ccc;
  317.         -webkit-box-shadow:inset 0px 0px 0px 1px #ccc;
  318.     }
  319.    
  320.      .grid_1,  .grid_2,  .grid_3,
  321.      .grid_4,  .grid_5,  .grid_6,
  322.      .grid_7,  .grid_8,  .grid_9,
  323.      .grid_10,  .grid_11,  .grid_12,
  324.      .grid_13,  .grid_14,  .grid_15,
  325.      .grid_16
  326.      {
  327.         margin-top:10px;
  328.         margin-bottom:10px;
  329.      }    
  330. }
  331.    
  332. .widget_drop
  333. {
  334.     height:100px;
  335.     background:#FFFFCC url('images/drop.png') center center no-repeat;
  336.     border:3px dashed #D4D581;
  337. }
  338.    
  339. .widget_toolbar
  340. {
  341.     text-align:center;
  342.     position:relative;
  343.     background-color:#ccc;
  344.     cursor:move;
  345.     padding:10px;
  346. }
  347.    
  348. .widget_toolbar .close
  349. {
  350.     position:absolute;
  351.     left:10px;
  352.     color:Red;
  353.     cursor:pointer;
  354. }
  355.  
  356. .widget_container .editWidget, .widget_container .editContent
  357. {
  358.     text-align:right;
  359.     display:block;
  360. }
  361.  
  362. .field
  363. {
  364.     margin-bottom:10px;
  365.     padding:10px;
  366.     background-color:#f2f2f2;
  367.     display:inline-block;
  368.    
  369.     .label
  370.     {
  371.         float:left;
  372.         font-weight:bold;
  373.         color:#666;
  374.         margin-right:20px;
  375.         font-size:15px;
  376.     }
  377.    
  378.     .input
  379.     {
  380.         float:left;
  381.     }
  382.    
  383.     .description
  384.     {
  385.         clear:both;
  386.         padding-top:5px;
  387.         color:#999;
  388.     }
  389. }
  390.  
  391. /* Styles for validation helpers
  392. -----------------------------------------------------------*/
  393. .field-validation-error
  394. {
  395.     display:block;
  396.     color: #ff0000;
  397. }
  398.  
  399. .field-validation-valid
  400. {
  401.     display: none;
  402. }
  403.  
  404. .input-validation-error
  405. {
  406.     border: 1px solid #ff0000;
  407.     background-color: #ffeeee;
  408. }
  409.  
  410. .validation-summary-errors
  411. {
  412.     font-weight: bold;
  413.     color: #ff0000;
  414. }
  415.  
  416. .validation-summary-valid
  417. {
  418.     display: none;
  419. }
  420.  
  421. /* DISPLAY & EDITOR
  422. ----------------------------------------------------------*/
  423. .display-label,
  424. .editor-label
  425. {
  426.     margin: 1em 0 0 0;
  427.     font-weight:bold;
  428. }
  429.  
  430. .display-field,
  431. .editor-field
  432. {
  433.     margin:0.5em 0 0 0;
  434. }
  435. .editor-label:after
  436. {
  437.     content:":";
  438. }
  439. .display-label:after
  440. {
  441.     content:":";
  442. }
  443. .editor-field .info
  444. {
  445.     font-size: smaller;
  446.     font-style: italic;
  447.     color: #999999;
  448. }
  449. .editor-field ul li
  450. {
  451.     list-style-type:none;
  452. }
  453. .text-box
  454. {
  455.     width: 25em;
  456. }
  457.  
  458. .text-box.multi-line
  459. {
  460.     height: 6.5em;
  461. }
  462.  
  463. .tri-state
  464. {
  465.     width: 6em;
  466. }
  467.  
  468. /* MISC
  469. ----------------------------------------------------------*/
  470. .modal
  471. {
  472.     display:none;  
  473. }
  474.  
  475. .topLevelMessage
  476. {
  477.     margin-bottom:20px;
  478. }
  479.  
  480. .help-description {
  481.     font-size: smaller;
  482.     font-style: italic;
  483.     color: #999999;
  484. }
  485.  
  486.  
  487. /* MENUS
  488. ----------------------------------------------------------*/
  489. .submenu ul
  490. {
  491.     margin-bottom:20px;
  492.    
  493.     li {
  494.         display: inline;
  495.         list-style: none;
  496.         padding-right:10px;
  497.     }
  498. }
  499.  
  500. .actionmenu {
  501.     text-align:right;
  502.     ul {
  503.         margin-bottom:0px;  
  504.     }
  505.     li {
  506.         display: inline;
  507.     }
  508. }
  509.  
  510. /* TOAST
  511. ----------------------------------------------------------*/
  512. .toast-container {
  513.         width: 280px;
  514.         z-index: 9999;
  515. }
  516.  
  517.  
  518. * html .toast-container {
  519.         position: absolute;            
  520. }
  521.  
  522. .toast-item {
  523.         height: auto;
  524.         background: #333;
  525.     opacity: 0.9;
  526.         -moz-border-radius: 10px;
  527.         -webkit-border-radius: 10px;
  528.         color: #eee;
  529.         padding-top: 20px;
  530.         padding-bottom: 20px;
  531.         padding-left: 6px;
  532.         padding-right: 6px;
  533.         font-size: 14px;
  534.         border: 2px solid #999;
  535.         display: block;
  536.         position: relative;
  537.         margin: 0 0 12px 0;
  538. }
  539.  
  540. .toast-item p {
  541.     text-align: left;
  542.     margin-left: 50px;
  543. }
  544.  
  545. .toast-item-close {
  546.     background:url(images/close.gif);
  547.     width:22px;
  548.     height:22px;
  549.     position: absolute;
  550.     top:7px;
  551.     right:7px;
  552. }
  553.  
  554. .toast-item-image {
  555.     width:32px;
  556.     height: 32px;
  557.     margin-left: 5px;
  558.     margin-right: 10px;
  559.     float:left;
  560. }
  561.  
  562. .toast-item-image-notice {
  563.     background:url(images/notice.png);
  564. }
  565.  
  566. .toast-item-image-success {
  567.     background:url(images/success.png);
  568. }
  569.  
  570. .toast-item-image-warning {
  571.     background:url(images/warning.png);
  572. }
  573.  
  574. .toast-item-image-error {
  575.     background:url(images/error.png);
  576. }
  577.  
  578.  
  579. /**
  580.  * toast types
  581.  *
  582.  * pattern: toast-type-[value]
  583.  * where 'value' is the real value of the plugin option 'type'
  584.  *
  585.  */
  586. .toast-type-notice {
  587.     color: white;    
  588. }
  589.  
  590. .toast-type-success {
  591.     color: white;    
  592. }
  593.  
  594. .toast-type-warning {
  595.     color: white;
  596.     border-color: #FCBD57;
  597. }
  598.  
  599. .toast-type-error {
  600.     color: white;
  601.     border-color: #B32B2B;
  602. }
  603.  
  604. /**
  605.  * positions
  606.  *
  607.  * pattern: toast-position-[value]
  608.  * where 'value' is the real value of the plugin option 'position'
  609.  *
  610.  */
  611. .toast-position-top-right {
  612.     position: fixed;
  613.     top: 20px;
  614.     right: 20px;
  615. }
  616.  
  617. .toast-position-center {
  618.     position: absolute;
  619.     left: 50%;
  620.     margin-left: -140px;
  621.     margin-top: -40px;
  622.     top: 50%;
  623. }
  624.  
  625. .toast-position-middle-bottom {
  626.     position: absolute;
  627.     left: 50%;
  628.     margin-left: -140px;
  629.     margin-top: -40px;
  630.     top: 75%;
  631. }
  632.  
  633.  
  634. /* LOAD MASK
  635. ----------------------------------------------------------*/
  636. .loadmask {
  637.     z-index: 100;
  638.     position: absolute;
  639.     top:0;
  640.     left:0;
  641.     -moz-opacity: 0.5;
  642.     opacity: .50;
  643.     filter: alpha(opacity=50);
  644.     background-color: #CCC;
  645.     width: 100%;
  646.     height: 100%;
  647.     zoom: 1;
  648. }
  649. .loadmask-msg {
  650.     z-index: 20001;
  651.     position: absolute;
  652.     top: 0;
  653.     left: 0;
  654.     border:1px solid #6593cf;
  655.     background: #c3daf9;
  656.     padding:2px;
  657. }
  658. .loadmask-msg div {
  659.     padding:5px 10px 5px 25px;
  660.     background: #fbfbfb url('images/loading.gif') no-repeat 5px 5px;
  661.     line-height: 16px;
  662.         border:1px solid #a3bad9;
  663.     color:#222;
  664.     font:normal 11px tahoma, arial, helvetica, sans-serif;
  665.     cursor:wait;
  666. }
  667. .masked {
  668.     overflow: hidden !important;
  669. }
  670. .masked-relative {
  671.     position: relative !important;
  672. }
  673. .masked-hidden {
  674.     visibility: hidden !important;
  675. }
  676.  
  677. /* USER SEARCH
  678. ----------------------------------------------------------*/
  679. #userSearch_ResultsWrapper table tr th{
  680.     white-space:nowrap;
  681. }
  682.  
  683. #userSearch_ResultsWrapper table tr.highlight {
  684.     background-color: #eee;
  685. }
  686.  
  687. #userSearch_ResultsWrapper table tr.selected {
  688.     background-color: #CCCCCC;
  689. }
create a new version of this paste RAW Paste Data