관리-도구

편집 파일: style.scss

/*
Theme Name: galaxy beads
Theme URI: 
Author: Jephjep
Author URI: 
Description: Theme for galaxy beads
Version: 1.0
License: 
License URI:
Tags: 
Text Domain: 
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 - Generic CSS
--------------------------------------------------------------*/

/*--------------------------------------------------------------
1.0 Generic
--------------------------------------------------------------*/
body {
  font-family: 'OpenSansRegular';
  background:transparent;
  margin:0;
  padding:0;
  color:#222222;
  font-size:15px;
  background-color:#f9f9f9;
  min-width:320px;
    h1, h2, h3, h4, h5 {
      text-decoration:none;
      margin:0;
    }
    p {
      margin-top:0;
      margin-bottom:15px;
    }
    .minWidth1024 {
      min-width:1024px;
      width:100%;
    }
    .fleft {
      float:left;
    }
    .fright {
      float:right;
    }
    a {
      text-decoration:none;
      color:#222222;
    }
    .tLeft {
      text-align:left;
    }
    .tRight {
      text-align:right;
    }
    .tCenter {
      text-align:center;
    }
    .cBoth {
      clear:both;
    }
    .posRel {
      position:relative;
    }
    .posAbs {
      position:absolute;
    }
    .scaleMeUp {
      transition: all 0.5s ease 0s;
      -o-transition: all 0.5s ease 0s;
      -moz-transition: all 0.5s ease 0s;
      -webkit-transition: all 0.5s ease 0s;  
    }
    .scaleMeUp:hover {
      transform: scale(1.25, 1.25);
      -o-transform: scale(1.25, 1.25);
      -moz-transform: scale(1.25, 1.25);
      -webkit-transform: scale(1.25, 1.25);    
    }
    .hide {
      display:none;
    }
    .show {
      display:block;
    }
    .showInline {
      display:inline-block;
    }
    .slickBg {
      background-size:cover;
      background-position:center center;
      background-repeat:no-repeat;
    }
    .grabbing { 
        cursor:url('images/grabbing.png') 8 8, move;
    }    
}

// 1.1 
//--------------------------------------------------------------------------
// HEADER / FOOTER CSS
//--------------------------------------------------------------------------
header#masthead {
  background-color:#F9F9F9 !important; 
  height: 60px;
  border-top:2px solid #333;
  
  .headerHolder {
    height:60px;
    max-width:1024px;
    min-width:300px;
    padding:0 10px;
    margin:0 auto;
    
    //.site-branding {
    //  display:none;
    //}
    
    .desktopMenuContainer {
      float:left;
      ul.desktopMenu {  
        margin: 0;
        padding: 0;
        li {  
          float: left;
          list-style: none;
          padding: 0 15px;
          height:60px;
          border-right:1px solid #333;
          a {  
            color: #333;
            margin-top: 15px;
            display: block;
          }
        }
      }
    }    
    .siteSearch {
      float:left;
      clear:none;
      form {
        input[type="search"] {
          padding: 19px 15px 21px 15px;
          font-size: 16px;
          border: none;
          margin-top: 1px;
          width: 280px;
        }
        input[type="submit"] {
          position: relative;
          top: 4px;          
          cursor:pointer;
          padding:10px 25px;
          border:none;  
          background:{
            image:url('images/toolbar_find.png');
            repeat:no-repeat;
            color:transparent;
          }
        }
      }
    }
    ul.siteHeaderCart  {
      float:right;
      margin:0;
      padding:0;
      li {
        border-left:1px solid #333;
        list-style:none;
        padding: 0 15px;
        height:60px;
        float:left;
        a.cartContents {  
          padding: 0;
          display: block;
          color: #333;
          height: 45px;
          padding-top:15px;
          span.count {
            margin:0 15px;
            font-size: 16px;
          }
        }
        a.cart-contents:after {
          position: static !important;
        }
      }
    }
  }
}
// 1.2
//--------------------------------------------------------------------------
// TOP BANNER CSS
//--------------------------------------------------------------------------
.headerBanner {
  background-image:url('images/galaxy-beads-header.png');
  background-size:cover;
  background-position:0px 0px;
  background-repeat:no-repeat;
  .bannerText {
    margin: 0 auto;
    max-width: 960px;
    min-width: 300px;
    padding: 100px 0;
    .topDesign {
      img {
        width: 90px;
        margin-left: 162px;
      }
    }
    a {
      font-size:145px;
      color:#fff;
      font-family: 'karine_aime_les_chocolatsRg';
      text-shadow: 2px 2px 2px #333;
      /*
      span {
        font-size:220px !important;
        display:inline-block;
        margin-right: 6px;
      }
      */
    }
    p {
      text-shadow: 2px 2px 2px #333;
      font-size: 19px;
      color: #fff;
      span {
        display: inline-block;
        border-bottom: 2px solid #fff;
        width: 45px;
        top: -5px;
        position: relative;
      }
    }
  }
}
#content .col-full {
  max-width:100% !important;
}
//--------------------------------------------------------------------
// footer
//--------------------------------------------------------------------
.genericFooterWrapper {
  position:relative;
  .bgGreen, .bgDarkGray {
    position:absolute;
    width:50%;
    height:100%;
  }
  .bgGreen {
    background-color:#03A39F;
    left:0;
    top:0;
  }
  .bgDarkGray {
    background-color:#333 ;
    right:0;
    top:0 ;
  }
  .footerContent {
    height:auto;
    overflow:auto;
    
    max-width:1024px;
    min-width:320px;
    padding:0;
    margin: 0 auto;
    z-index: 1;
    position: relative;    
    
    .contactForm {
      width:30%;
      float:left;
      height:100%;
      padding:40px 2% 50px 1%;
      p {
        font-family: 'dragon_is_comingregular';
        font-size:60px;
        margin-bottom:0;
      }
      form {
        z-index:1;
        img {
          float: left;
          padding-bottom: 5px;
        }
        div {
          line-height:0;
          margin-bottom:5px;
          position:relative;
          text-align:center;
          input[type="text"], input[type="email"], select {    
            padding:0.7%;
            width: 99%;
            height:20px;
            font-family:arial;
            font-size:12px;
            opacity:0.8;
          }
          select {
            height:30px;
          }
          textarea {
            width:100%;
            height:100px;
            font-family:arial;
            font-size:12px;
            opacity:0.8;
          }
          input[type="submit"] {    
            margin-right: -9px;
            padding: 8px 18px;
            background: none repeat scroll 0 0 #ccc;
            border: medium none;
            border-radius: 5px;
            color: #333;
            cursor: pointer;
            font-weight: bold;
          }
          .wpcf7-not-valid-tip {
            position: absolute;
            top: 12px;
            right:7px;
            font-size: 12px;
          }
        }
        .wpcf7-response-output {
          margin: 20px 0 0 0;
          padding: 10px 5px;
          line-height: 21px !important;
        }
      }      
    } 
    // Contact form close tag
    .footerLinks {
      float:right;
      background-color:#333;
      min-height:400px;
      width: 62%;
      padding: 40px 2% 50px 2%;
      color:#fff;
      p.aRr {
        margin-top:40px;
        margin-left:10px;
      }
      .widgetArea {
        aside.widget {   
          float: left;
          color:#fff;
          .widgetTitle {
            font-weight:lighter;
            font-family: 'dragon_is_comingregular';
            font-size:60px;
            margin-bottom:0;
          }
          ul.menu {
            margin:0;
            padding: 0 0 0 10px;
            li.menu-item {
              list-style:none;
              margin-bottom:5px;
              a {
                color:#fff;         
              }  
            }  
          }
        }
        aside#nav_menu-2 {
          width:27%;
        }
        //categories
        aside#nav_menu-3 {
          width:73%;
          margin-right:0 !important;
          ul.menu {
            li.menu-item {
              float:left;
              width:24%;
              padding-right:1%;
            }  
          }          
        }
        //------------------------------------------
      }
    } 
    // FooterLink close tag
  }
}

// 2.0
//--------------------------------------------------------------------------
// STATIC HOMEPAGE CSS
//--------------------------------------------------------------------------

.staticHomePageWrapper {
  //section
  section.unsortedDivisionWrapper {
    max-width:960px;
    min-width:320px;
    margin:0 auto 55px auto;
    .unsortedDivision {
      height:560px;
      position: relative;
      .row {
        height:50%;
        .uDiv {
          background-repeat:no-repeat;
          background-position:center center;
          position:absolute;
          width:33.3%;
          height:280px;
          .textWrap {
            text-align:center;
            margin-top:67px;
            margin-left: 10px;
            margin-right: 10px;
    
            strong {
              font-family: 'karine_aime_les_chocolatsRg';
              font-size:70px;
              font-weight:lighter;
            }
          }
        }        
        .div1 {
          left: -21% !important;
          width: 54.4% !important;
          top:-45px;
          background-color: #FAF8F3;
          .textWrap {
            width: 60%;
            float:right;
          }
        }  
        .div2 {
          background-image:url('images/homepage/style.jpg');
          background-position: 0px 0px !important;
          left:33.4%;
          top:0;
        }  
        .div3 {
          right:0;
          top:0;
        }  
        /*******************/
        .div4 {
          left:0;
          bottom:0;
          background-position-y:-93px;
          background-image:url('images/homepage/smile.jpg');
          width:33.4% !important;
          height:325px !important;
        }  
        .div5 {
          left:33.4%;
          bottom:0;
          background-color:#03A39F;
          .textWrap {
            color:#fff;
          }
        }  
        .div6 {
          right:0;
          bottom:-100px;
          background-image:url('images/homepage/spice.jpg');
          height:380px !important;
        }           
      }
    }
  }  
  .getBeads {
    height: 50px;
    max-width: 960px;
    border-bottom: 2px solid #ccc;
    margin: 0 auto;
    padding: 0 10px;
    min-width: 300px;
  }  
  //section
  section.newArrivalsWrapper {
    overflow:hidden;
    position:relative;
    margin:50px 0;
    .newArrivals {
      margin:0 auto;
      max-width:960px;
      min-width:300px;
      padding:0 10px;
      height: 300px;
      ul { 
        width: 67%; 
        margin: 0;
        padding: 0;
        li {
          text-align:center;
          padding:1%;
          width: 28.3%;
          min-height: 290px;
          float: left;
          list-style: none;
          margin-right:1.5%;
          margin-left:1.5%;
          background-color:#fff;
          position:relative;
          z-index:1;
          .image {
            width:100%;
            height:140px;
            background-size:100% 100%;
            margin-bottom:10px;
          }
          span {
            display:inline-block;
            min-height:40px;
          }
          .rating {
            .star {
              margin-right:1%;
              display:inline-block;
              height:24px;
              width:24px;
              background-image:url('images/rating-score.png');
              background-repeat:no-repeat;
              background-position:-21px 1px;
            }
            .good {
              background-position:1px 1px !important;
            }
          }
          a.linkToShopPage {
            font-size:15px;
            display:inline-block;
            padding:7px 14px;
            background-color:#03A39F;
            color:#fff;
          }
        }
        li:last-of-type {
          margin-right:0 !important;
        }
      }
      .makeYourOwnRosary {
        background-color:#f9f9f9;
        padding-top:65px;
        text-align:center;
        width:32%;
        p {
          
        }
        .shopBtn {
          padding:8px 14px;
          border:2px solid #333;
          display:inline-block;
        }  
      }
    }
    .spacer {
      border-bottom:2px solid #9A9A9B;
      
      max-width:960px;
      min-width:320px;
      
      margin:50px auto 50px auto;
    }
    img.greenBeads {
      position:absolute;
      right:0;
      top:0;
      width: 505px;
    }
    img.rosary {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 272px;
      z-index: -1;
    }
  }
  //section
  section.makeYourOwnWrapper {
    height:auto;
    overflow:auto;
    .fleft {
      width:70%;
      height:400px; 
      background-color:#ccc;
      background-image:url('images/make-your-own-beads.jpg');
      background-size:cover;
      background-position:center center;
    } 
    .fright {
      width:26%;
      padding:0 2%;
      height:400px; 
      background-color:#03A39F;
      text-align:center;
      color:#fff;
      strong {
        margin-top:105px;
        display:inline-block;
        font-family: 'karine_aime_les_chocolatsRg';
        font-size:70px;
        font-weight:lighter;
      }
      p {
        margin:20px 0;
      }
      a.learnMore {
        display:inline-block;
        padding:5px 40px;
        background-color:#eee;
      }
    } 
  }
  //section
  section.thingsYouNeedToKnowWrapper {
    padding:50px 0;
    .thingsYouNeedToKnow {
      max-width:1024px;
      min-width:300px;
      padding:0 10px;
      
      height:580px;   
      margin:0 auto;
      .col {
        border-right: 2px solid #03a39f;
        float: left;
        height: 100%;
        width: 33.1%;
        .row {
          height:50%;
          width:100%;
          .rowContent {
            text-align:center;
            padding:15px;
            img.sampleImage {
              width: 100%;
              margin-bottom: 15px;
              margin-top: 30px;
              a {
              }              
            }
          }
        }
        .row1 {
          border-bottom:2px solid #03a39f;
        }
      }
      .column2 .center {
        text-align:center;
        padding-top:20px;
        span {
          font-family: 'karine_aime_les_chocolatsRg';
          font-size:45px;
          display:inline-block;
        }
        img.sampleImage {
          width: 100%;
          margin-bottom: 15px;
          margin-top: 30px;
        }
      }
      div:last-of-type {
        border-right:none !important;
      }
    }
  }
}

// 3.0
//--------------------------------------------------------------------------
// INNER PAGES CSS
//--------------------------------------------------------------------------
.innerPagesWrapper {
  .pageTitleWrapper {
    max-width:960px;
    min-width:300px;
    padding:3px 10px;
    margin:30px auto 20px auto;
    height:auto;
    overflow:auto;
    
    h2 {
      font-size: 30px;
      line-height: 39px;
      float:left;
    }
    .backToHomePage {
      position:relative;
      z-index:3;
      float:right;
            
      a.backToHome {
        padding:8px 16px;
        display:block;
        i {
          font-size:35px;
          margin-right:5px;
          color:#fff;
        }
        span {
          color: #fff;
          position: relative;
          top: -7px;
        }
      }
      div.gradient {
        z-index:-1;
        top:0;
        left:0;
        position:absolute;
        background-color:#000;
        height:100%;
        width:100%;
        opacity:0.7;
      }
    }    
  }  
  hr {
    margin:0;
  }
  .contentWrapper {
    max-width: 960px;
    min-width: 300px;
    margin: 30px auto;
    height: auto;
    overflow: auto;
    // pages
    .pages {
      
    }
    // blogging pages
    //----------------------------------------------------
    .blogListing {
      article {
        float: left;
        margin-left: 1.5%;
        margin-right: 1.5%;
        margin-bottom:30px;
        width: 30%;
        // entry header
        header.entryHeader {
          
          // artitle title in [ H1 TAG ] if in details page
          // article title are in [ H3 TAG ] if in listing page
          h3.entryTitle {
            font-size:21px;
            margin-bottom:8px;
            font-weight:lighter;
            height:65px;
          }
          div.thumbImage {
            height: 155px;
            width: 100%;
            background-color:#ccc;
            img {
              width:100%;  
              height:100%;
            }
            span.catLink {
            }
          }
        }   
      }      
    }
    //----------------------------------------------------
    .pageDefault {
      padding:0 15px;
    }
    // article details
    //----------------------------------------------------
    .articleDetails {
      padding:0 15px;
      h1.entryTitle {    
        font-size: 30px;
        margin-bottom:8px;
        font-weight:lighter;
      }  
      .pageNavAndComments {
        .postNavigation  {
          margin-bottom:55px;
          height:auto;
          overflow:auto;
          .navPrevious, .navNext {
            float:left;
            padding:5px 1.5%;
            background-color:#333;
            color:#fff;
            a { color:#fff; }
          } 
          .navNext {
            float:right !important;
          }   
        }
        /* Comment list
        ************************/
        ol.commentList {
          li {
            list-style:none;
          }
          li.comment {
            margin-bottom:15px;
            .comment-author {
              img {
                margin-right:6px;
              }
              b {}
              span.says {
                display:none;
              }
            }
            .comment-metadata {
              margin:6px 0;
              a {
                font-style:italic;
              }
            }
            div.comment-content {
              p {
                font-size:13px;
              }
            }
            div.reply {
              margin:6px 0;
              a {
                text-decoration:underline;
                color:#3497D9;
              }
            }
            ol.children {
              margin-top:15px;
              li {
                
              }
            }
          }   
        }
        /* Respond
        ************************/
        #respond {
          h3 {
            margin-bottom:20px;
            a {
              text-decoration:underline;
            }
            #cancel-comment-reply-link {
              display:inline-block;
              padding:3px 8px;
              background-color:#bdc3c7;
              margin-left:15px;
              color:#fff;
            }
          }
          #commentform {
            width:70%;
            padding:20px;
            background-color:#BDC3C7;
          }
        }
      }      
    }
    // entry meta for post date
    //----------------------------------------------------
    div.entryMeta {    
      margin-bottom:13px;
      margin-top: 13px;
      .postedOn {
        background-color:#333;
        padding:5px;
        margin-right:5px;
        time.entryDate {
          color:#fff;
        }
        time.updated {
          display:none;
        }
      }
    }    
  }
  // pagination
  //----------------------------------------------------
  div.navigation {
    text-align:center;
    padding-bottom:30px;
    ul {
      
      li {
        display:inline-block;
        a {
          font-size:18px;
          padding:0 6px;
        }
      }
      li.active {
        border-bottom:2px solid #222222;
      }
    }
  }  
}