Product Comparison CSS file linked from: https://support.boldcommerce.com/hc/en-us/articles/115004189806-Reinstall-Product-Comparison-on-a-New-Theme
/*
------------------------------------ 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;
}