API tools faq
paste
Grawl

maki-nails.less

Grawl
Jan 19th, 2012
139
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 13.43 KB | None | 0 0
raw download clone embed print report
  1. /*
  2. Theme Name:     Maki-Nails
  3. Theme URI:      http: //maki-nails.ru/
  4. Description:    Theme for Maki-Nails salon
  5. Author:         Grawl
  6. Author URI:     http: //grawl.ru
  7. Template:       twentyeleven
  8. Version:        0.1.0
  9. */
  10.  
  11. @import url("../twentyeleven/style.css");
  12. @import 'elements';
  13. /* @group mixins */
  14.     .menu-red {
  15.         color: white !important;
  16.         background: #CC0F16; /* Show a solid color for older browsers */
  17.         background: -moz-linear-gradient(#EE1920, #C50E14);
  18.         background: -o-linear-gradient(#EE1920, #C50E14);
  19.         background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EE1920), to(#C50E14)); /* Older webkit syntax */
  20.         background: -webkit-linear-gradient(#EE1920, #C50E14);
  21.     }
  22.     .menu-white {
  23.         color: black;
  24.         background: #f9f9f9; /* Show a solid color for older browsers */
  25.         background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
  26.         background: -o-linear-gradient(#f9f9f9, #e5e5e5);
  27.         background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
  28.         background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
  29.     }
  30.     .menu-black {
  31.         color: white;
  32.         background: #222; /* Show a solid color for older browsers */
  33.         background: -moz-linear-gradient(#252525, #0a0a0a);
  34.         background: -o-linear-gradient(#252525, #0a0a0a);
  35.         background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a)); /* older webkit syntax */
  36.         background: -webkit-linear-gradient(#252525, #0a0a0a);
  37.     }
  38.     .gradient-white-flash {
  39.         /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  40.         background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  41.         background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%); /* FF3.6+ */
  42.         background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
  43.         background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
  44.         background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
  45.         background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%); /* IE10+ */
  46.         background: linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%); /* W3C */
  47.         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-8 */
  48.     }
  49.     .gradient-nofitication {
  50.         background: #e67081; /* Old browsers */
  51.         /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  52.         background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNlNjcwODEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNjMzAwMWUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  53.         background: -moz-linear-gradient(top,  #e67081 50%, #c3001e 50%); /* FF3.6+ */
  54.         background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#e67081), color-stop(50%,#c3001e)); /* Chrome,Safari4+ */
  55.         background: -webkit-linear-gradient(top,  #e67081 50%,#c3001e 50%); /* Chrome10+,Safari5.1+ */
  56.         background: -o-linear-gradient(top,  #e67081 50%,#c3001e 50%); /* Opera 11.10+ */
  57.         background: -ms-linear-gradient(top,  #e67081 50%,#c3001e 50%); /* IE10+ */
  58.         background: linear-gradient(top,  #e67081 50%,#c3001e 50%); /* W3C */
  59.         filter: ~'progid:DXImageTransform.Microsoft.gradient( startColorstr="#e67081", endColorstr="#c3001e",GradientType=0 )'; /* IE6-8 */
  60.     }
  61.     @animation-name: pulse;
  62.     .animation-keyframes {
  63.         0% { opacity: 1 }
  64.         50% { opacity: 0 }
  65.         100% { opacity: 1 }
  66.         }
  67.     @-webkit-keyframes pulse { .animation-keyframes; }
  68.     @-moz-keyframes pulse { .animation-keyframes; }
  69.     @-ms-keyframes pulse { .animation-keyframes; }
  70.     @-o-keyframes pulse { .animation-keyframes; }
  71.     @keyframes pulse { .animation-keyframes; }
  72.     .animation-make {
  73.         -webkit-animation: @animation-name 1s infinite;
  74.         -moz-animation: @animation-name 1s infinite;
  75.         -ms-animation: @animation-name 1s infinite;
  76.         animation: @animation-name 1s infinite;
  77.         }
  78. /* @end */
  79. /* @group fonts */
  80.     @font-face {
  81.         font-family: 'Thin';
  82.         src: url('library/fonts/HelveticaNeue-Thin.ttf');
  83.         font-weight: 300;
  84.     }
  85.     @thin: 'Helvetica Neue Light', 'Helvetica Light', 'Segoe UI', 'Thin', Arial, sans-serif;
  86.     @font-face {
  87.         font-family: 'Ultra';
  88.         src: url('library/fonts/HelveticaNeue-UltraLight.ttf');
  89.         font-weight: 200;
  90.     }
  91.     @ultra: 'Helvetica Neue UltraLight', 'Helvetica Light', 'Segoe UI Light', 'Ultra', Arial, sans-serif !important;
  92. /* @end */
  93. body {
  94.     background:
  95.         url('images/bg-maki-gray-left-corner.png') top left no-repeat,
  96.         url('images/bg-maki-gray-right-corner.png') top right no-repeat,
  97.         url('images/bg-maki-gray-left-bottom-corner.png') bottom left no-repeat,
  98.         url('images/bg-maki-gray-right-bottom-corner.png') bottom right no-repeat
  99.         #e2e2e2;
  100.     min-width: 320px;
  101.     overflow-x: hidden;
  102.     font-family: 1em @thin !important;
  103. }
  104. header#branding {
  105.     background: url('images/bg-maki-red.png') top right no-repeat;
  106.     display: inline-block;
  107.     width: 100%;
  108.     padding-bottom: 0;
  109.     margin-bottom: -6px;
  110.     z-index: 500;
  111.     }
  112.     #logo {
  113.         background: url('images/logo.png');
  114.         width: 270px;
  115.         height: 177px;
  116.         margin: 10px 0 20px 30px;
  117.         float: left;
  118.             a {
  119.                 width: 270px;
  120.                 height: 159px;
  121.                 display: block;
  122.             }
  123.         }
  124.     #title {
  125.         float: right;
  126.         margin: 90px 130px 0 0;
  127.         position: relative;
  128.             h1 {
  129.                 font-family: @ultra;
  130.                 font-size: 3em;
  131.                 font-weight: 100;
  132.                 text-transform: lowercase;
  133.                 line-height: 1em;
  134.             }
  135.             .quotescollection_randomquote {
  136.                 text-align: right;
  137.                     p {
  138.                         margin: 0;
  139.                             q {
  140.                                 position: relative;
  141.                                 left: 1em;
  142.                                 font-style: italic;
  143.                                 color: #d9232b;
  144.                             }
  145.                             cite {
  146.                                 position: relative;
  147.                                 right: 2em;
  148.                                 color: gray;
  149.                                 line-height: 1em;
  150.                             }
  151.                     }
  152.             }
  153.     }
  154.     #actions {
  155.         position: absolute;
  156.         top: -13px;
  157.         right: -12px;
  158.         width: 148px;
  159.         height: 146px;
  160.         }
  161.         #actions a {
  162.             width: 100%;
  163.             height: 100%;
  164.             display: block;
  165.             background: url('images/actions.png');
  166.             position: relative;
  167.             z-index: 3;
  168.         }
  169.         #lastest-action {
  170.             @size: 60px;
  171.             position: absolute;
  172.             right: 23px;
  173.             bottom: -5px;
  174.             width: @size;
  175.             height: @size;
  176.             background: white;
  177.             font-weight: bold;
  178.             color: white;
  179.             text-align: center;
  180.             z-index: 2;
  181. //          @animation-name: pulse;
  182. //          .animation-make;
  183.             .rounded(50%);
  184.             .box-shadow(0 0 10px rgba(0,0,0,.5));
  185.                 ::before {
  186.                     content: attr(data-time);
  187.                     display: block;
  188.                     position: absolute;
  189.                     height: 37px;
  190.                     width: 50px;
  191.                     padding: 13px 0 0;
  192.                     margin: 5px;
  193.                     .gradient-nofitication;
  194.                     z-index: 1;
  195.                     .rounded(50%);
  196. //                  .animation-make;
  197.                 }
  198.         }
  199. #main {
  200.     position: relative;
  201.     display: inline-block;
  202.     margin: -6px 0;
  203.     padding: 0;
  204.     width: 100%;
  205.     background: url('images/bg-maki-pink-left.png') top left no-repeat;
  206.     z-index: 1;
  207.     }
  208.     #primary {
  209.         padding: 1.625em 0 0;
  210.         background: url('images/bg-maki-pink-right.png') 100% 50px no-repeat;
  211.         min-height: 400px;
  212.             &:before,
  213.             &:after {
  214.                 content: '';
  215.                 display: block;
  216.                 position: absolute;
  217.                 }
  218.             &:before {
  219.                 width: 53px;
  220.                 height: 356px;
  221.                 background: url('images/bg-maki-gray-left-outside.png');
  222.                 top: 54px;
  223.                 left: -53px;
  224.             }
  225.             &:after {
  226.                 width: 92px;
  227.                 height: 399px;
  228.                 background: url('images/bg-maki-gray-right-outside.png');
  229.                 top: 48px;
  230.                 right: -92px;
  231.             }
  232.         }
  233. #secondary {
  234.     margin: 7.2em 7.6% 0 0;
  235.     }
  236.     .widget ul li {
  237.         padding: 0 0 1px;
  238.         }
  239.         .widget a {
  240.             line-height: 23px;
  241.             color: black;
  242.         }
  243. .post-thumbnail,
  244. .wp-post-image,
  245. img[class*="align"],
  246. img[class*="wp-image-"],
  247. #content .gallery .gallery-icon img {
  248.     border: 2px solid #DDD;
  249.     padding: 0;
  250.     display: inline-block;
  251.     position: relative;
  252.     top: -10px;
  253.     line-height: 0.1;
  254. }
  255. .wp-caption.alignleft {
  256.     margin-right: 0.618em;
  257. }
  258. #access {
  259.     .menu-red;
  260.     .box-shadow(rgba(0, 0, 0, 0.4) 0px 1px 2px inset);
  261.     font-weight: 400;
  262.         li:hover > a, a:focus {
  263.             .menu-white;
  264.             .box-shadow(rgba(0, 0, 0, 0.4) 0px 1px 2px inset);
  265.             }
  266.         ul ul a {
  267.             border: 0;
  268.             }
  269.         .sub-menu {
  270.             .box-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
  271.                 li:hover {
  272.                     .gradient-white-flash;
  273.                         > a {
  274. //                          background: url('images/bg-maki-red.png') top right no-repeat;
  275.                             box-shadow: none;
  276.                         }
  277.                     }
  278.             }
  279.         }
  280.         li[class*="current"] > a {
  281.             font-weight: bold;
  282.             color: red;
  283.             position: relative;
  284.             &:before {
  285.                 @size: 5px;
  286.                 content: '';
  287.                 display: block;
  288.                 position: absolute;
  289.                 bottom: -2px;
  290.                 left: 45%;
  291.                 border-left: @size solid transparent;
  292.                 border-right: @size solid transparent;
  293.                 border-bottom: @size solid white;
  294.             }
  295.         }
  296. .singular.page .hentry {
  297.     padding: 0;
  298. }
  299. .singular .entry-meta .edit-link a {
  300.     top: 30px;
  301. }
  302. .entry-content img {
  303.     max-width: 100%;
  304. }
  305. .iPad {
  306.     width: 416px;
  307.     height: 317px;
  308.     background: url('images/iPad.png');
  309.     padding: 37px 0 0 43px;
  310.     margin: 0 0 20px;
  311.     }
  312.     .nivo-directionNav a {
  313.         background: transparent !important;
  314.         }
  315.         a.nivo-nextNav {
  316.             right: -35px !important;
  317.         }
  318.         a.nivo-prevNav {
  319.             left: -35px !important;
  320.         }
  321. #supplementary {
  322.     color: #b0b1b0;
  323.     background: #f9f9f9;
  324.     position: relative;
  325.     z-index: 2;
  326.     a {
  327.         color: #b0b1b0;
  328.         font-weight: normal;
  329.         border-bottom: 1px solid hsl(120, 1%, 89%);
  330.             &:hover {
  331.                 text-decoration: none;
  332.                 border-bottom: 1px solid hsl(120, 1%, 81%);
  333.             }
  334.         }
  335.     p {
  336.         margin-bottom: .2em;
  337.     }
  338.     .widget {
  339.         margin: 0;
  340.         }
  341.         #third.widget-area {
  342.             text-align: right;
  343.         }
  344. }
  345. .dataTables_wrapper {
  346.     min-height: 0 !important;
  347.     }
  348.     .wp-table-reloaded-table-name {
  349.         font-size: 1.4em;
  350.         line-height: 2em;
  351.         margin: 0 !important;
  352.     }
  353.     .wp-table-reloaded-table-description {
  354.         padding: 0 0 10px;
  355.     }
  356.     .wp-table-reloaded tr {
  357.         position: relative;
  358.     }
  359.     .wp-table-reloaded tr:hover td.column-1::before {
  360.         content: '';
  361.         position: absolute;
  362.         left: -15px;
  363.         width: 0;
  364.         height: 0;
  365.         border-top: 10px solid transparent;
  366.         border-bottom: 10px solid transparent;
  367.         border-left: 10px solid #E6E6E6;
  368.     }
  369.     .wp-table-reloaded tr:hover td.column-2::after {
  370.         content: '';
  371.         position: absolute;
  372.         right: -15px;
  373.         width: 0;
  374.         height: 0;
  375.         border-top: 10px solid transparent;
  376.         border-bottom: 10px solid transparent;
  377.         border-right: 10px solid #E6E6E6;
  378.     }
  379.     .wp-table-reloaded tr:hover td {
  380.         background-color: #e2e2e2;
  381.     }
  382. .post-thumbnail,
  383. .wp-post-image,
  384. img[class*="align"],
  385. img[class*="wp-image-"],
  386. #content .gallery .gallery-icon img {
  387.     top: 0;
  388. }
  389. .comment-form-url {
  390.     display: none;
  391. }
  392. .entry-meta {
  393.     .transition(opacity, 0.3s);
  394.     opacity: 0.5;
  395.     }
  396.     .entry-meta:hover {
  397.         .transition(opacity, 0.3s);
  398.         opacity: 1;
  399.     }
  400.     .entry-meta a {
  401.         font-weight: normal;
  402.         color: #666;
  403.     }
  404. #php_widget-3 {
  405.     display: none;
  406. }
  407. /* @group fotorama */
  408. .fotorama__thumbs {
  409.     top: -17px;
  410.     z-index: 5;
  411. }
  412. .fotorama__thumb__dot {
  413.     background-color: white;
  414.     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  415.     filter: ~'progid:DXImageTransform.Microsoft.Alpha(Opacity=20)';
  416.     opacity: 0.2;
  417. }
  418. .b-slide {
  419.     position: absolute !important;
  420.     bottom: 0;
  421.     right: 0;
  422.     padding-bottom: 17px;
  423.     background: rgba(0, 0, 0, .7);
  424.     width: 100%;
  425.     text-align: center;
  426.         a {
  427.             color: white;
  428.             text-decoration: underline;
  429.         }
  430. }
  431. /* @end */
  432. @media (min-width: 320px) and (max-width: 480px) { // iPhone
  433.     body {
  434.         background-image: none;
  435.     }
  436.     header#branding, #primary::before, #primary::after {
  437.         background: transparent;
  438.     }
  439.     #logo {
  440.         margin: 5px 10px;
  441.     }
  442.     #actions {
  443.         top: -18px;
  444.     }
  445.     #title {
  446.         margin: -30px 30px 10px 10px;
  447.         h1 {
  448.             font-size: 2em;
  449.             font-family: @thin;
  450.         }
  451.     }
  452.     .iPad {
  453.         display: none; // не. надо показывать, но без рамки
  454.     }
  455.     #page {
  456.         min-width: 350px;
  457.         overflow: hidden;
  458.     }
  459.     #primary {
  460.         background: transparent;
  461.     }
  462.     aside {
  463.         padding: 0;
  464.     }
  465. }
  466. @media (min-device-width: 768px) and (max-device-width: 1024px) { //iPad
  467.     html {
  468.         width: 1000px;
  469.     }
  470.     body {
  471.         padding: 0 30px;
  472.         width: 940px;
  473.     }
  474.     #page {
  475.         padding-right: 0;
  476.         padding-left: 0;
  477.     }
  478.     #primary {
  479.         ::before, ::after {
  480.             display: none;
  481.         }
  482.     }
  483. }
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!