@import 'lib/bootstrap';

/* Customized Variables for Bootstrap */
$gray-base: black;
$gray-transparent: rgba($gray-base,.8);
$brand-primary-darker: rgb(57, 146, 171);
$brand-success: rgb(41, 177, 106);
$brand-info: rgb(76, 194, 228);
$brand-danger: rgb(241, 83, 68);
$font-family-sans-serif: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
$border-radius-large: 8px;
$border-radius-small: 4px;
$caret-width-base: 5px;
$dropdown-bg: lighten($gray-base, 20%);
$navbar-inverse-bg: rgba(0, 0, 0, .8);
$label-color: rgb(255, 255, 255);
$label-link-hover-color: rgb(255, 255, 255);
$well-bg: lighten($gray-base, 90%);
$well-border: transparent;
$badge-color: rgb(255, 255, 255);
$badge-link-hover-color: rgb(255, 255, 255);
$badge-bg: $brand-danger;
$badge-active-bg: rgb(255, 255, 255);
$badge-line-height: 1.25;

/* Other brand colors */
$brand-gold: #F1B444;
$brand-gold-darker: #B58733;
$gray-90: lighten($gray-base, 10%);
$gray-85: lighten($gray-base, 15%);
$gray-80: lighten($gray-base, 20%);
$gray-70: lighten($gray-base, 30%);
$gray-60: lighten($gray-base, 40%);
$gray-50: lighten($gray-base, 50%);
$gray-40: lighten($gray-base, 60%);
$gray-20: lighten($gray-base, 80%);
$gray-10: lighten($gray-base, 90%);
$gray-5: lighten($gray-base, 95%);
$brand-primary: #4CC2E4;

/* Grid size (mirrors Bootstraps) */
$screen-sm-min: 768px;
$screen-xs-max: $screen-sm-min - 1;
$screen-md-min: 992px;
$screen-sm-max: $screen-md-min - 1;
$screen-lg-min: 1200px;
$screen-md-max: $screen-lg-min - 1;


/* Mixin that prefixes any CSS rule */
@mixin vendor-prefix($property, $argument) {
  -webkit-#{$property}: #{$argument};
  -ms-#{$property}: #{$argument};
  -moz-#{$property}: #{$argument};
  -o-#{$property}: #{$argument};
  #{$property}: #{$argument};
}

/* header */
header {
    .navbar-form {
        margin-bottom: 0px;
    }
    .btn.search-button {
        padding: 0px 10px 0px 15px;
        font-size: 27px;
        background-color: rgba(0, 0, 0, 0);
        border-radius: 0px;
        color: $gray-40;
        &:hover {
            color: $gray-10;
        }
    }
}

/* footer */
footer {
    background-color: $gray-5;
    position: relative;
    strong { color:inherit; }
    h1 {
        font-size: 2.5em;
        color: $brand-primary-darker;
    }
    h2 {
        text-transform: uppercase;
        color:$gray-50;
        font-size: 1em;
        font-weight: bold;
    }
}
footer ul.nav li > a {
    font-size:1em;
    margin-left: -15px;
}
footer ul.nav li > a:hover {
    background-color: $gray-20;
}
footer .copyright_text {
    margin-top: 25px;
}

.page {
    margin-bottom: 2em;
}

/*
 * position anchors of fragment links slightly above their targets
 */
.fragment-anchor {
    display: block;
    position: relative;
    bottom: 50px;
}

/*
********* Modifications to Bootstrap ***********
*/
button.btn, a.btn {
    border-radius: 0;
    background-color: $brand-primary;
    color: black;
    border: 0;
}
button.btn:hover, a.btn {
    color: black;
}
h1 {
    color: $brand-gold-darker;
    font-weight: normal;
}
h2 {
    color: $gray-50;
    font-size: 18px;
}
.badge {
    font-size: 12px;
    margin-top: -14px;
    padding: 1px 5px;
}
.blue-divider {
    width:100%;
    height:4px;
    background-color: $brand-primary;
}

/* misc */
.vertical-center-parent {
    position: relative;
    width: 100%;
    height: 100%;
    .vertical-center-child {
        position: absolute;
        top: 50%;
        left: 50%;
        @include vendor-prefix(transform, translate(-50%,-50%));
    }
}
.whole-page-content {
    min-height: 300px;
    height: 60%;
    margin: auto;
}
.not-found, .deprecated {
    .vertical-center-child {
        width: 100%;
    }
}
.not-found-header {
    text-align: center;
}
.not-found-redirect {
    margin-bottom: 20px;
    text-align: center;
    display: none;
    em {
        text-decoration: underline;
    }
}

/* fixing prettyprint formatting */
pre.prettyprint {
    padding: 10px !important;
    font-size: 13px !important;
    border: 1px solid #cccccc !important;
}
code.prettyprint {
    border: none !important;
}

/* improving inline quotes styling */
code {
    background-color: #c9dddf;
    color: #000000;
}

/* algolia search formatting */
.algolia-docsearch-suggestion--category-header, .algolia-docsearch-suggestion {
    font-family: "Raleway", Helvetica, Arial, sans-serif !important;
}

.algolia-docsearch-suggestion--category-header {
    background-color: #262626   !important;
    font-size: 16px             !important;
    font-weight: bold           !important;
    line-height: 30px           !important;
}

.algolia-docsearch-suggestion {
    font-size: 14px     !important;
    font-weight: 300    !important;
}

@media (max-width: $screen-xs-max) {
    #header-search-form {
        display: none;
    }
}

#header-search-field {
    border-radius: 4px !important;
}

.platform-icon {
    width: 22px;
    height: 22px;
}

.platform-icon.android {
    width: 18px;
}

.platform-icon.electron {
    width: 21px;
}

.cdv-var-type {
    display: inline-block;
    font-size: 1.2rem;
    padding: 5px;
    border-radius: 5px;
    height: 25px;

    background-color: #bfbfbf;
    color: #333333;

    &.number {
        background-color: #3ce4c5;
        color: #333333;
    }

    &.string {
        background-color: #3ccde4;
        color: #333333;
    }

    &.boolean {
        background-color: #3c78e4;
        color: #ffffff;
    }

    &.object {
        background-color: #3c51e4;
        color: #ffffff;
    }

    &.float {
        background-color: #7c3ce4;
        color: #ffffff;
    }

    &.array {
        background-color: #b33ce4;
        color: #333333;
    }
}

@import 'home';
@import 'blog';
@import 'plugins';
@import 'docs';
@import 'contribute';
@import 'contact';
@import 'artwork';
@import 'team';