zeroclickinfo-goodies/share/goodie/calculator/calculator.css

/* Typography */

.zci--calculator,
.zci--calculator .tile__ctrl__btn,
.zci--calculator .tile__ctrl__toggle,
.zci--calculator .tile__skip-calc {
    font-family: "DDG_ProximaNova", "DDG_ProximaNova_UI_0", "DDG_ProximaNova_UI_1", "DDG_ProximaNova_UI_2", "DDG_ProximaNova_UI_3", "DDG_ProximaNova_UI_4", "DDG_ProximaNova_UI_5", "DDG_ProximaNova_UI_6", "Proxima Nova", "Helvetica Neue", "Helvetica", "Segoe UI", "Nimbus Sans L", "Liberation Sans", "Open Sans", FreeSans, Arial, sans-serif;
}


/* Show UI when CSS is loaded */

.zci--calculator .tile--calculator {
    display: block !important;
    outline: none;
}


/* Layout */

.zci--calculator .zci__body {
    padding-left: 0px;
}

.zci--calculator .tile__calc {
    height: 352px;
}

.zci--calculator .tile__calc__col {
    height: 251px;
    width: 35%;
    max-width: 295px; /* half width of search box */
    float: left;
    display: inline-block;
    border-bottom: 1px solid #c8c8c8;
    box-sizing: border-box;
}


/* Tabs */

.zci--calculator .tile__calc .tile__tabs {
    box-sizing: border-box;
    -webkit-touch-callout: none;
}

/* Allow user-select on history tab */
.zci--calculator .tile__tab__sci,
.zci--calculator .tile__tab__basic {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/* Controllers */

.zci--calculator .tile__calc .tile__ctrl__btn,
.zci--calculator .tile__calc .tile__ctrl__toggle {
    float: left;
    position: relative;
    box-sizing: border-box;
    height: 50px;
}


/* Toggle */

.zci--calculator .tile__calc .tile__ctrl__toggle {
    width: 50%;
    padding: 15px 0;
    margin: 0;
    background: #ebebeb;
    border: 1px solid #c8c8c8;
    border-bottom: 0;
    border-right: 0;
    color: #2e2e2e;
    font-size: 0.8em;
    text-align: center;
}


/* The switch - the box around the slider */

.zci--calculator .tile__ctrl__toggle-indicator {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 14px;
}

.zci--calculator .tile__ctrl__toggle-indicator input {
    display: none;
}

.zci--calculator .tile__ctrl__toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.zci--calculator .tile__ctrl__toggle-slider:before {
    position: absolute;
    content: "";
    height: 15px;
    width: 15px;
    left: 1px;
    bottom: 0px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:focus+.tile__ctrl__toggle-slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked+.tile__ctrl__toggle-slider:before {
    -webkit-transform: translateX(23px);
    -ms-transform: translateX(23px);
    transform: translateX(23px);
}

.zci--calculator .tile__ctrl__toggle-slider.tile__ctrl__round-icon {
    border-radius: 34px;
    margin: 3px 0;
    padding: 7px 0;
}

.zci--calculator .tile__ctrl__toggle-slider.tile__ctrl__round-icon:before {
    border-radius: 50%;
}


/* Buttons */

.zci--calculator .tile__calc .tile__ctrl__btn {
    width: 25%;
    padding: 0;
    margin: 0;
    background: #fff;
    border: 1px solid #c8c8c8;
    border-bottom: 0;
    border-right: 0;
    color: #2e2e2e;
    text-align: center;
    font-size: 1.6em;
}

.zci--calculator .tile__calc .tile__ctrl--double {
    width: 50%;
}

.zci--calculator .tile__calc .tile__ctrl--ops,
.zci--calculator .tile__calc .tile__tab__sci .tile__ctrl__btn {
    background: #ebebeb;
    font-weight: lighter;
}

.zci--calculator .tile__calc .tile__ctrl--important {
    background: #ffd90b;
    font-family: "DDG_ProximaNova_UI_0", "DDG_ProximaNova_UI_1", "DDG_ProximaNova_UI_2", "DDG_ProximaNova_UI_3", "DDG_ProximaNova_UI_4", "DDG_ProximaNova_UI_5", "DDG_ProximaNova_UI_6", "Proxima Nova", "Helvetica Neue", "Helvetica", "Segoe UI", "Nimbus Sans L", "Liberation Sans", "Open Sans", FreeSans, Arial, sans-serif;
    font-weight: lighter;
    font-size: 2em;
    padding-bottom: 0.1em;
}


/* Ctrl (Button, Toggle) */

.zci--calculator .tile__calc .tile__ctrl__btn,
.zci--calculator .tile__calc .tile__ctrl__toggle {
    cursor: pointer;
}

.zci--calculator .tile__calc .tile__ctrl__btn:focus,
.zci--calculator .tile__calc .tile__ctrl__toggle:focus,
.zci--calculator .tile__calc .tile__ctrl__btn:active,
.zci--calculator .tile__calc .tile__ctrl__toggle:active {
    outline: none;
}

.no-touch .tile__calc .tile__ctrl__btn:hover,
.no-touch .tile__calc .tile__ctrl__toggle:hover {
    background-color: #dadada;
}

.zci--calculator .tile__calc .tile__ctrl__btn:active,
.zci--calculator .tile__calc .tile__ctrl__toggle:active {
    background-color: #cacaca;
}

.no-touch .tile__calc .tile__ctrl--important:hover {
    background-color: #ddc750;
}

.zci--calculator .tile__calc .tile__ctrl--important:active {
    background-color: #c8a900;
}


/* Accessibility skip handle */

.zci--calculator .tile__calc .tile__skip-calc {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    z-index: -9999;
    background: #e8e8e8;
    border: 0;
    padding: 0.3em 0.8em;
    font-size: 1em;
    margin: 1px;
}

.zci--calculator .tile__calc .tile__skip-calc:focus {
    pointer-events: all;
    opacity: 1;
    z-index: 1;
}


/* Input trap */

.zci--calculator .tile__calc .tile__input-trap {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    height: 1px;
    width: 1px;
    z-index: -9999;
}


/* Display */

.zci--calculator .tile__calc .tile__display {
    background: #fff;
    border: 1px solid #c8c8c8;
    border-bottom: 0;
    padding: 0.8em;
    box-sizing: border-box;
    width: 70%;
    max-width: 590px; /* Match width of search box */
    border-right: 0;
    height: 100px;
    position: relative;
    box-shadow: inset -1px -1px 0px #fff, inset 1px 1px 0px #fff;
    transition: box-shadow 0.3s;
    /* Text overflow */
    text-align: right;
    overflow: hidden;
    white-space: nowrap;
}

.zci--calculator .tile__calc .tile__display:hover {
    box-shadow: inset -1px -1px 0px #999, inset 1px 1px 0px #999;
}

.zci--calculator .tile__calc .tile__display.selected {
    box-shadow: inset -1px -1px 0px #61a0c7, inset 1px 1px 0px #61a0c7;
}

.zci--calculator .tile__calc .tile__display:focus {
    outline: none;
}

.zci--calculator .tile__calc .tile__display__aside--wrap {
    position: relative;
    overflow: hidden;
    height: 1.3em;
}

.zci--calculator .tile__calc .tile__display__main,
.zci--calculator .tile__calc .tile__display__aside {
    display: block;
}

.zci--calculator .tile__calc .tile__display__aside {
    font-size: 1.1em;
    letter-spacing: 0.025em;
    color: #909090;
    font-weight: lighter;
    position: absolute;
    right: 0;
}

.zci--calculator .tile__calc .tile__display__main {
    color: #101010;
    font-weight: lighter;
    font-size: 2.5em;
    letter-spacing: -0.05em;
    padding-right: 0.05em;
    cursor: default;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    outline: 0;
    float: right;
}

.zci--calculator .tile__calc .tile__display__main .pseudoBrace {
    color: #d3d3d3;
}

/* Formula presentation: Big */

.zci--calculator .tile__calc .tile__display__main sup {
    top: -0.8em;
    left: 0.1em;
    padding-right: 0.2em;
}

.zci--calculator .tile__calc .tile__display__main .formula__placeholder {
    color: #909090;
}


/* Formula presentation: Small */

.zci--calculator .tile__calc .tile__display__aside sup {
    top: -0.8em;
}


/* Calc display options */

.zci--calculator .tile__calc .tile__options {
    bottom: 0.4em;
    padding: 0 0.8em;
    width: 100%;
    right: 0;
    left: 0;
    position: absolute;
    display: table;
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.zci--calculator .tile__calc .tile__option {
    transition: width 0.5s;
    font-size: 0.8em;
    width: auto;
    text-align: center;
    display: table-cell;
    color: #9e9e9e;
    width: 50%;
    font-weight: 200;
    letter-spacing: 0.03em;
}

.tile__calc .tile__option span {
    cursor: pointer;
    padding: 0.2em 0.5em;
    margin: -0.5em;
}

.zci--calculator .tile__calc .tile__option--active {
    color: #54a3bb;
    font-weight: 400;
}

.tile__calc .tile__option--active span {
    cursor: default;
}

.zci--calculator .tile__calc .tile__option__sci {
    text-align: left;
}

.zci--calculator .tile__calc .tile__option__basic {
    text-align: right;
}

.zci--calculator .tile__calc .tile__option__history {
    display: none;
    text-align: right;
}

.zci--calculator .tile__calc .tile__option:hover {
    text-decoration: none;
}


/* History tab */

.zci--calculator .tile__calc .tile__history {
    width: 30%;
    background-color: #f9f9f9;
    position: relative;
    margin-top: -100px;
    padding: 0;
    border: 1px solid #ccc;
    height: 351px;
    overflow-x: hidden;
    overflow-y: auto;
    transition: all 0.3s;
}

.zci--calculator .tile__calc .tile__history--hidden {
    width: 0px;
}


/* History item */

.zci--calculator .tile__calc .tile__past-calc {
    box-sizing: border-box;
    padding: 0.4em 0.6em 0.4em;
    height: 50px;
    border-bottom: 1px solid #ccc;
    background-color: #fff;
    cursor: pointer;
    text-align: right;
    font-size: 1.1em;
    overflow: hidden;
    transition: 0.5s all;
}

.zci--calculator .tile__calc .tile__past-calc.tile__past-calc--hidden {
    height: 0px;
    padding-top: 0;
    padding-bottom: 0;
}


/******************/
/* TEXT SIZE ADJS */
/******************/


/* Largest */

.set-text--largest .tile__calc .tile__display__main {
    font-size: 2em;
    font-weight: 400;
}

.set-text--largest .tile__calc .tile__past-calc {
    padding: 0.2em 0.4em;
}

.set-text--largest .tile__calc .zci--calculator .zci__main--detail {
    max-width: 61.9em;
}

.set-text--largest .tile__calc .tile__past-result {
    margin-top: -0.2em;
}

.zci--calculator .tile__calc .tile__past-calc:hover {
    background: #eee;
}

.zci--calculator .tile__calc .tile__past-formula {
    display: block;
    color: #aaa;
    font-weight: 100;
    font-size: 0.8em;
}

.zci--calculator .tile__calc .tile__past-result {
    font-weight: 700;
    color: #191919;
    font-size: 1.2em;
    display: inline-block;
}


/* Big Widescreens >= 1200px (Default) */

.zci--calculator .zci__main {
    max-width: 60em;
}


/*****************/
/* MEDIA QUERIES */
/*****************/

/* Monitors with MQs >= 960 */

@media only screen and (min-width: 60em) {
    .zci--calculator .tile__calc .tile__options {
        bottom: -1em;
    }
}


/* Tablets <= 960 */

@media only screen and (max-width: 60em) {
    /* show only one calc tab */
    .zci--calculator .tile__calc .tile__tabs {
        overflow: hidden;
    }
    .zci--calculator .tile__calc .tile__calc__col {
        width: 295px;
    }
    /* default: basic tab */
    .zci--calculator .tile__calc .tile__tabs .tile__tab__sci {
        margin-left: -295px;
    }
    .zci--calculator .tile__calc .tile__display {
        max-width: 295px;
    }
    .zci--calculator .zci__main--detail {
        max-width: 43.8em;
    }
    .zci--calculator .tile__calc .tile__history {
        max-width: 295px;
        transition: width 0.6s;
        position: absolute;
    }
    /* show 3 tab options */
    .zci--calculator .tile__calc .tile__display__main {
        margin-top: -0.2em;
    }
    .zci--calculator .tile__calc .tile__display .tile__options {
        margin-top: 0em;
    }
    .zci--calculator .tile__calc .tile__display .tile__option {
        float: left;
    }
    .zci--calculator .tile__calc .tile__display .tile__option__sci {
        text-align: left;
    }
    .zci--calculator .tile__calc .tile__display .tile__option__basic {
        text-align: right;
    }
}


/* Mobiles <= 740 */

@media only screen and (max-width: 43.8em) {

    .zci--calculator .tile__calc .tile__display {
        width: 50%;
    }

    .zci--calculator .tile__calc .tile__calc__col {
        width: 50%;
    }

    .zci--calculator .tile__calc .tile__history {
        max-width: 260px;
    }
}


/* Custom <= 660 */

@media only screen and (max-width: 37.4em) {
    .tile--calculator {
        width: 100%;
        box-sizing: border-box;
    }
    .zci--calculator .tile__calc {
        overflow: hidden;
        width: 100%;
    }
    .zci--calculator .tile__calc .tile__display {
        width: 100%;
        max-width: none;
        border-right: 1px solid #d8d8d8;
    }
    .zci--calculator .tile__calc .tile__tabs {
        width: 300%;
        position: relative;
        left: -100%;
        /* default: basic tab */
        transition: left 0.7s;
    }
    .zci--calculator .tile__calc .tile__tabs.tile__tabs--single-basic {
        left: -100%;
    }
    .zci--calculator .tile__calc .tile__tabs.tile__tabs--single-sci {
        left: 0;
    }
    .zci--calculator .tile__calc .tile__tabs.tile__tabs--single-history {
        left: -200%;
    }
    .zci--calculator .tile__calc .tile__calc__col {
        width: 33.33%;
        max-width: 33.33%;
        border-right: 1px solid #ccc;
    }
    .zci--calculator .tile__calc .tile__tabs .tile__tab__sci:first-child {
        margin-left: 0;
    }
    .zci--calculator .tile__calc .tile__history {
        position: relative;
        margin-left: 0;
        margin-top: 0;
        width: 100%;
        height: 251px;
    }
    /* 3 tab options */
    .zci--calculator .tile__calc .tile__display .tile__option {
        width: 33%;
    }
    .zci--calculator .tile__calc .tile__display .tile__option__basic {
        text-align: center;
    }
    .zci--calculator .tile__calc .tile__display .tile__option__history {
        display: table-cell;
    }
    .is-mobile .zci--calculator .zci__body {
        padding-left: 2px;
        padding-right: 0;
    }
}


/* Custom >= 660  & Tablets <= 960 */

@media only screen and (min-width: 37.4em) and (max-width: 60em) {
    .zci--calculator .tile__tabs.tile__tabs--single-sci .tile__tab__basic {
        width: 0;
    }
    .zci--calculator .tile__tabs.tile__tabs--single-sci .tile__tab__sci {
        margin-left: 0;
    }
    .zci--calculator .tile__tabs.tile__tabs--single-basic .tile__tab__basic {}
}

@media only screen and (max-width: 21em) {
    .is-mobile .zci--calculator .zci__body {
        padding-right: 0px;
        margin-left: 0;
        padding-left: 1px;
    }
}


/* Small mobiles <= 310 */

@media only screen and (max-width: 19.375em) {
    .zci--calculator .tile__calc .tile__history {
        position: relative;
        margin-top: 0;
    }
}

/*
 * DARK THEME
 */

.dark-bg .zci--calculator .tile__calc .tile__ctrl__btn {
    background: #2B2B2B;
    border: 1px solid #414141;
    color: #fdfdfd;
}

.dark-bg .zci--calculator .tile__calc .tile__ctrl__btn:hover {
    background: rgba(88, 88, 88, 0.75);
}

.dark-bg .zci--calculator .tile__calc .tile__ctrl--ops,
.dark-bg .zci--calculator .tile__calc .tile__tab__sci .tile__ctrl__btn {
    background: #111;
    font-weight: lighter;
}

.dark-bg .zci--calculator .tile__calc .tile__ctrl--ops:hover,
.dark-bg .zci--calculator .tile__calc .tile__tab__sci .tile__ctrl__btn:hover {
    background: rgba(17, 17, 17, 0.7);
}

.dark-bg .zci--calculator .tile__calc .tile__ctrl__toggle {
    background: #111;
    border: 1px solid #414141;
    color: #fdfdfd;
}

.dark-bg .zci--calculator .tile__ctrl__toggle-slider {
    background: #2B2B2B;
}

.dark-bg .zci--calculator .tile__calc .tile__display__main {
    background: #2B2B2B;
}

.dark-bg .zci--calculator .tile__calc .tile__ctrl--important {
    background: rgb(220, 140, 0);
}

.dark-bg .zci--calculator .tile__calc .tile__ctrl--important:hover {
    background: rgba(220, 140, 0, 0.7);
}

.dark-bg .zci--calculator .tile__calc .tile__display {
    background: #2B2B2B;
    border: 1px solid #414141;
    box-shadow: none;
}

.dark-bg .zci--calculator .tile__calc .tile__display__main {
    color: #fdfdfd;
}

.dark-bg .zci--calculator .tile__calc .tile__display.selected {
    box-shadow: inset -1px -1px 0px #61a0c7, inset 1px 1px 0px #61a0c7;
}

.dark-bg .zci--calculator .tile__calc__col {
    border-bottom: none;
}

/* history */

.dark-bg .zci--calculator .tile__calc .tile__history {
    background-color: #111;
    border: 1px solid #414141;
}

.dark-bg .zci--calculator .tile__calc .tile__past-calc {
    background: #2B2B2B;
}

.dark-bg .zci--calculator .tile__calc .tile__past-result {
    color: #fdfdfd;
}

.dark-bg .zci--calculator .tile__calc .tile__past-calc {
    border-bottom: 1px solid #414141;
}

.dark-bg .zci--calculator .tile__calc .tile__past-calc:hover {
    background: #111;
}