boldsupport
5/13/2016 - 1:27 PM

bold-compare.css

/*

------------------------------------  WARNING  ------------------------------------
        This file will be overwritten and should not be edited directly.
        In order to edit custom CSS for Bold Product Compare you should:
            - Log into your Shopify Admin Panel
            - Go to Apps --> Installed --> Product Compare
            - Go to Display Settings
------------------------------------  WARNING  ------------------------------------

*/




/*** WIDGET ***/

.bold-compare-widget {
    background:#FFFFFF;
    border:1px solid #DDDDDD;
    min-width:160px;
    position:fixed;
    bottom:0;
    right:25px;
    z-index:100;
    text-align:center;
}

/* bold-compare-bottomleft :: display feature to move widget to the bottom left */
.bold-compare-widget.bold-compare-bottomleft {
    right:auto;
    left:5px;
}

/* bold-compare-horizontalwidget :: display feature to make the widget horizontal */
.bold-compare-widget.bold-compare-horizontalwidget .bold-compared-products {
    display:flex;
    justify-content:center;
}

.bold-compare-widget.bold-compare-horizontalwidget .bold-compare-product {
    width:100px;
}

.bold-compare-widget.bold-compare-horizontalwidget .bold-compare-product > a {
    width:100px;
    padding:0 5px;
}

.bold-compare-widget:not(.bold-compare-horizontalwidget) .bold-compare-product > a {
    max-width:200px;
    margin:0 auto;
}

.bold-compare-widget.bold-compare-horizontalwidget .bold-compare-product:first-child {
    border-left:0;
}

.bold-compare-widget .bold-compare-img {
    min-height:50px;
}

.bold-compared-products {
    min-width: 150px;
    max-height:500px;
    overflow-y:auto;
}

.bold-title {
    font-size:18px;
    background:#FFFFFF;
    color:#555555;
    font-weight:bold;
    text-align:center;
    cursor:pointer;
    position:relative;
    padding:0 25px;
    white-space:nowrap;
}

.bold-title:after {
    content:"-";
    display:block;
    padding:3px;
    color:rgba(0,0,0,.7);
    background:#fff;
    border:1px solid rgba(0,0,0,.1);
    border-radius:3px;
    height:15px;
    font-weight:normal;
    font-family:Arial,sans-serif;
    position:absolute;
    right:3px;
    top:8px;
    line-height:5px;
    font-size:20px;
}

.bold-compare-collapsed .bold-title:after {
    content:"+";
    line-height:8px;
    font-size:14px;
}

.bold-compare-remove {
    display:block;
    padding:1px;
    border:1px solid rgba(0,0,0,.1);
    background:#fff;
    color:rgba(0,0,0,.7);
    border-radius:3px;
    width:15px;
    height:15px;
    font-weight:normal;
    font-family:Arial,sans-serif;
    position:absolute;
    right:3px;
    top:3px;
    line-height:13px;
    font-size:18px;
    cursor:pointer;
}

button.compare_btn {
    font-family: Helvetica, Arial, sans-serif;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    display: inline-block;
    height: 36px;
    line-height: 36px;
    border: none;
    margin: 10px 0 0;
    padding: 0 20px;
    font-weight: 700;
    font-size: 13px;
    text-transform: none;
    margin: 5px;
}

button.compare_btn,
.bold-compare-remove:hover,
.bold-title:hover:after,
.bold-compare-collapsed .bold-title:after {
    background:#F45B4F;
    color:#FFFFFF;
}

.bold-compared-products {
    border-top:1px solid #DDDDDD;
}

.bold-compare-product {
    border-bottom:1px solid #DDDDDD;
    text-align:center;
    padding:10px 0 5px;
    position:relative;
    font-size:14px;
}

.bold-compare-product a {
    display:block;
    color:#F45B4F;
    font-size:18px;
}

.bold-compare-product span {
    display:block;
}

.bold-compare-product img {
    max-width:50px;
    max-height:50px;
    display:block;
    margin:0 auto 4px;
}

.bold_compare_checkbox input {
    margin-right:5px;
}

div.bold_compare_button {
    display:inline-block;
}

.bold-compare-widget div.error {
    display: none;
    background-color: rgba(255,0,0,0.05);
    border-bottom: 1px solid rgba(0,0,0,.2);
    color: red;
    font-size: 12px;
    padding: 0.5em;
}





/*** SPECS TABLE ***/

table.bold_spec_grid {
    width: 100%;
}

table.bold_spec_grid thead,
table.bold_spec_grid thead tr,
table.bold_spec_grid thead th,
table.bold_spec_grid thead td {
    background:#677E87;
    color:#FFFFFF;
    font-size:16px;
    font-weight: bold;
}

table.bold_spec_grid tbody tr:nth-child(odd) {
    background-color: #FFFFFF;
    color:#000000;
}

table.bold_spec_grid tbody tr:nth-child(even) {
    background-color: #F5F5F5;
    color:#000000;
}

table.bold_spec_grid,
table.bold_spec_grid th,
table.bold_spec_grid td {
    padding-top:5px;
    padding-bottom:5px;
    padding-left:10px;
    padding-right:10px;
    text-align: left;
    border: none;
    border-collapse: collapse;
}

table.bold_spec_grid {
    margin: 0px;
}

table.bold_spec_grid tbody {
    font-size:16px;
}




/*** COMPARE PAGE ***/

table.bold_compare_table tr.row-product-thumb  td.text-center {
    padding: 2%;
}

table.bold_compare_table {
    border:1px solid #DDDDDD;
    font-size:16px;
    width:100%;
    margin:0px;
}

table.bold_compare_table a {
    color:#F45B4F;
}

table.bold_compare_table thead,
table.bold_compare_table thead tr,
table.bold_compare_table thead th,
table.bold_compare_table thead td {
    background: #677E87;
    color: #FFFFFF;
    font-weight: bold;
}

table.bold_compare_table tbody {
    color: #000000;
}

table.bold_compare_table,
table.bold_compare_table th,
table.bold_compare_table td {
    text-align: left;
    padding: 3px 10px;
    border: none;
    border-collapse: collapse;
}

table.bold_compare_table tr {
    border:1px solid #DDDDDD;
}

table.bold_compare_table tr td:first-child {
    padding-left: 0px;
    width: 25%;
}

table.bold_compare_table tbody tr:nth-child(odd) {
    background-color:#FFFFFF;
    color:#000000;
}
table.bold_compare_table tbody tr:nth-child(even) {
    background-color:#F5F5F5;
    color:#000000;
}

table.bold_compare_table tbody tr.hover:hover {
    background-color:#E6F1FC;
    color:#000000;
}

table.bold_compare_table tr th,
table.bold_compare_table tr td {
    padding-top:15px;
    padding-right:15px;
    padding-bottom:15px;
    padding-left:15px;
    border-right:1px solid #DDDDDD;
    text-align: center;
}

table.bold_compare_table tbody td.text-center {
    text-align-last: center;
}

table.bold_compare_table tbody td.text-center {
    vertical-align: bottom;
}

table.bold_compare_table .btn {
    background:#F45B4F;
    color:#FFFFFF;
}