overte/scripts/system/html/css/marketplaces.css

/*
//
//  Copyright 2016 High Fidelity, Inc.
//
//  Distributed under the Apache License, Version 2.0.
//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
*/

/*
    CSS  rules copied from edit-style.css.
    Edit-style.css is not used in its entirety because don't want custom scrollbars; default scrollbar styling is used in order
    to match other marketplace pages.
*/

@font-face {
    font-family: Raleway-Regular;
    src: url(../../../../resources/fonts/Raleway-Regular.ttf),  /* Windows production */
         url(../../../../fonts/Raleway-Regular.ttf),  /* OSX production */
         url(../../../../interface/resources/fonts/Raleway-Regular.ttf);  /* Development, running script in /HiFi/examples */
}

@font-face {
    font-family: Raleway-Bold;
    src: url(../../../../resources/fonts/Raleway-Bold.ttf),
         url(../../../../fonts/Raleway-Bold.ttf),
         url(../../../../interface/resources/fonts/Raleway-Bold.ttf);
}

@font-face {
    font-family: Raleway-SemiBold;
    src: url(../../../../resources/fonts/Raleway-SemiBold.ttf),
         url(../../../../fonts/Raleway-SemiBold.ttf),
         url(../../../../interface/resources/fonts/Raleway-SemiBold.ttf);
}

@font-face {
    font-family: FiraSans-SemiBold;
    src: url(../../../../resources/fonts/FiraSans-SemiBold.ttf),
         url(../../../../fonts/FiraSans-SemiBold.ttf),
         url(../../../../interface/resources/fonts/FiraSans-SemiBold.ttf);
}

* {
    margin: 0;
    padding: 0;
}

body {
    padding: 21px 21px 21px 21px;

    color: #afafaf;
    background-color: #404040;
    font-family: Raleway-Regular;
    font-size: 15px;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    overflow-x: hidden;
    overflow-y: auto;
}

input[type=button] {
    font-family: Raleway-Bold;
    font-size: 13px;
    text-transform: uppercase;
    vertical-align: top;
    height: 28px;
    min-width: 120px;
    padding: 0px 18px;
    margin-right: 6px;
    border-radius: 5px;
    border: none;
    color: #fff;
    background-color: #000;
    background: linear-gradient(#343434 20%, #000 100%);
    cursor: pointer;
}

input[type=button].blue {
    color: #fff;
    background-color: #1080b8;
    background: linear-gradient(#00b4ef 20%, #1080b8 100%);
}


/*
    Marketplaces-specific CSS.
*/

body {
    background: white;
    padding: 0 0 0 0;
    font-family:Raleway-SemiBold;
}
.marketplaces-container {
    display: inline-block;
    color: black;
    width: 94%;
    margin-left: 3%;
    height: 100%;
}
.marketplaces-title {
    margin-top: 45px;
    margin-bottom: 20px;
}
.marketplaces-intro-text {
    margin-bottom: 30px;
}
.marketplace-tile {
    float:left;
    width: 100%;
    margin-bottom: 25px;
}
.marketplace-tile-first-column {
    text-align: center;
    float: left;
    width: 33%;
}
.marketplace-tile-second-column {
    float: left;
    margin-left:4%;
    width: 62%;
}
.exploreButton {
    font-size: 16px !important;
    width: 200px !important;
    height: 45px !important;
    margin-top: 20px;
    margin-bottom: 30px;
}
.tile-divider {
    width: 100%;
    margin-left: 0%;
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid lightgrey;
    margin: 1em 0;
    padding: 0;
    margin-bottom: 30px;
}
.marketplace-tile-description {
    margin-top: 15px;
    margin-bottom: 30px;
}
.marketplace-tile-image {
    margin-top:15px;
    max-width: 256px;
    height: 128px;
    margin-bottom:60px;
    -webkit-box-shadow: -1px 4px 16px 0px rgba(0, 0, 0, 0.48);
    -moz-box-shadow: -1px 4px 16px 0px rgba(0, 0, 0, 0.48);
    box-shadow: -1px 4px 16px 0px rgba(0, 0, 0, 0.48);
}
.marketplace-clara-steps {
    padding-left: 15px;
}
.marketplace-clara-steps > li {
    margin-top: 5px;
}

#marketplace-navigation {
    width: 100%;
    height: 50px;
    background: #00b4ef;
    position: fixed;
    bottom: 0;
}
#marketplace-navigation .glyph {
    /*
    // Target look but can't use font in injected script.
    font-family: HiFi-Glyphs;
    font-size: 40px;
    margin-left: 20px;
    */
    font-family: sans-serif;
    font-size: 24px;
    margin-left: 20px; 
    margin-right: 3px; 
    color: #fff;
    line-height: 50px;
}
#marketplace-navigation .text {
    color: #fff;
    font-size: 18px;
    line-height: 50px;
    vertical-align: top;
    position: relative;
    top: 1px;
}
#marketplace-navigation input {
    position: absolute;
    right: 20px;
    margin-top: 12px;
    padding-left: 15px;
    padding-right: 15px;
}

@media (max-width:768px) {
    .marketplace-tile-first-column {
        float: left;
        width: 100%;
    }
    .marketplace-tile-second-column {
        float: left;
        width: 100%;
    }
    .exploreButton-holder {
        width:100%;
        text-align:center;
    }
    .tile-divider {
        width:  100%;
        margin-left: 0;
    }
    .marketplace-tile-image {
        margin-bottom: 15px;
    }
}