mirror of
https://github.com/openfoodfoundation/openfoodnetwork
synced 2026-02-13 23:37:47 +00:00
a971b62068
We had a very prominent footer showing how to get in contact with the local instance people but most users need to get in contact with the enterprise they are buying from. So removing all those details and replacing them by a simple "powered by" line will hopefully direct attention to the shop's contact details.
446 lines
7.0 KiB
SCSS
446 lines
7.0 KiB
SCSS
@import '../admin/variables';
|
|
|
|
/* -------------------------------------
|
|
* GLOBAL
|
|
*------------------------------------- */
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.collapse {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
-webkit-font-smoothing: antialiased;
|
|
-webkit-text-size-adjust: none;
|
|
width: 100% !important;
|
|
height: 100%;
|
|
}
|
|
|
|
/* -------------------------------------
|
|
* ELEMENTS
|
|
*------------------------------------- */
|
|
|
|
a {
|
|
color: #0096ad;
|
|
}
|
|
|
|
.btn {
|
|
text-decoration: none;
|
|
color: #FFF;
|
|
background-color: #666;
|
|
padding: 10px 16px;
|
|
font-weight: bold;
|
|
margin-right: 10px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
}
|
|
|
|
p.callout {
|
|
padding: 15px;
|
|
background-color: #e1f0f5;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.callout a {
|
|
font-weight: bold;
|
|
color: #0096ad;
|
|
}
|
|
|
|
p.notice {
|
|
font-style: italic;
|
|
font-size: 12px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.powered-by-ofn {
|
|
background-color: #ebebeb;
|
|
padding: .5em;
|
|
text-align: center;
|
|
}
|
|
|
|
table.social {
|
|
background-color: #ebebeb;
|
|
|
|
&.white-bg {
|
|
background-color: white !important;
|
|
border: 1px solid #ebebeb;
|
|
}
|
|
|
|
&.fullwidth {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
table.order-summary {
|
|
border-collapse: separate;
|
|
border-spacing: 0px 10px;
|
|
|
|
tbody tr td {
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
}
|
|
|
|
thead tr th {
|
|
background-color: #f2f2f2;
|
|
border-bottom: 1px solid black;
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
|
|
h4 {
|
|
margin-top: 15px;
|
|
}
|
|
}
|
|
|
|
tfoot {
|
|
tr:first-child td {
|
|
border-top: 1px solid black;
|
|
padding-top: 5px;
|
|
}
|
|
|
|
tr td {
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.text-right {
|
|
text-align: right;
|
|
}
|
|
|
|
.social .soc-btn {
|
|
padding: 3px 7px;
|
|
font-size: 12px;
|
|
margin-bottom: 10px;
|
|
text-decoration: none;
|
|
color: #FFF;
|
|
font-weight: bold;
|
|
display: block;
|
|
text-align: center;
|
|
}
|
|
|
|
a {
|
|
&.fb {
|
|
background-color: #3B5998 !important;
|
|
}
|
|
|
|
&.tw {
|
|
background-color: #1daced !important;
|
|
}
|
|
|
|
&.gp {
|
|
background-color: #DB4A39 !important;
|
|
}
|
|
|
|
&.li {
|
|
background-color: #0073b2 !important;
|
|
}
|
|
|
|
&.ms {
|
|
background-color: #000 !important;
|
|
}
|
|
|
|
&.ig {
|
|
background-color: #fb3958 !important;
|
|
}
|
|
}
|
|
|
|
.sidebar .soc-btn {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
img.float-right {
|
|
float: right;
|
|
display: block;
|
|
}
|
|
|
|
del.quantity_was {
|
|
color: #757575;
|
|
}
|
|
|
|
/* -------------------------------------
|
|
* HEADER
|
|
*------------------------------------- */
|
|
|
|
table.head-wrap {
|
|
width: 100%;
|
|
}
|
|
|
|
.header.container table td {
|
|
&.logo {
|
|
padding: 15px;
|
|
}
|
|
|
|
&.label {
|
|
padding: 15px;
|
|
padding-left: 0px;
|
|
}
|
|
}
|
|
|
|
/* -------------------------------------
|
|
* BODY
|
|
*------------------------------------- */
|
|
|
|
table {
|
|
&.body-wrap {
|
|
width: 100%;
|
|
}
|
|
|
|
&.footer-wrap {
|
|
width: 100%;
|
|
clear: both !important;
|
|
}
|
|
}
|
|
|
|
/* -------------------------------------
|
|
* FOOTER
|
|
*------------------------------------- */
|
|
|
|
.footer-wrap .container td.content p {
|
|
border-top: 1px solid rgb(215, 215, 215);
|
|
padding-top: 15px;
|
|
font-size: 10px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* -------------------------------------
|
|
* TYPOGRAPHY
|
|
*------------------------------------- */
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
|
line-height: 1.1;
|
|
margin-bottom: 15px;
|
|
color: #000;
|
|
}
|
|
|
|
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
|
|
font-size: 60%;
|
|
color: #6f6f6f;
|
|
line-height: 0;
|
|
text-transform: none;
|
|
}
|
|
|
|
h1 {
|
|
font-weight: 200;
|
|
font-size: 44px;
|
|
}
|
|
|
|
h2 {
|
|
font-weight: 200;
|
|
font-size: 37px;
|
|
}
|
|
|
|
h3 {
|
|
font-weight: 500;
|
|
font-size: 27px;
|
|
}
|
|
|
|
h4 {
|
|
font-weight: 500;
|
|
font-size: 23px;
|
|
}
|
|
|
|
h5 {
|
|
font-weight: 900;
|
|
font-size: 17px;
|
|
}
|
|
|
|
h6 {
|
|
font-weight: 900;
|
|
font-size: 14px;
|
|
text-transform: uppercase;
|
|
color: #999;
|
|
}
|
|
|
|
.collapse {
|
|
margin: 0 !important;
|
|
}
|
|
|
|
p, ul {
|
|
margin-bottom: 10px;
|
|
font-weight: normal;
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
p {
|
|
&.lead {
|
|
font-size: 17px;
|
|
}
|
|
|
|
&.last {
|
|
margin-bottom: 0px;
|
|
}
|
|
}
|
|
|
|
ul {
|
|
li {
|
|
margin-left: 5px;
|
|
list-style-position: inside;
|
|
}
|
|
|
|
&.sidebar {
|
|
background: #ebebeb;
|
|
display: block;
|
|
list-style-type: none;
|
|
|
|
li {
|
|
display: block;
|
|
margin: 0;
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: #666;
|
|
padding: 10px 16px;
|
|
|
|
/* font-weight:bold; */
|
|
margin-right: 10px;
|
|
|
|
/* text-align:center; */
|
|
cursor: pointer;
|
|
border-bottom: 1px solid #777777;
|
|
border-top: 1px solid #FFFFFF;
|
|
display: block;
|
|
margin: 0;
|
|
|
|
&.last {
|
|
border-bottom-width: 0px;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6, p {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* -------------------------------------
|
|
* SIDEBAR
|
|
*------------------------------------- */
|
|
|
|
/* ---------------------------------------------------
|
|
* RESPONSIVENESS
|
|
* Nuke it from orbit. It's the only way to be sure.
|
|
*------------------------------------------------------ */
|
|
|
|
/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
|
|
|
|
.container {
|
|
display: block !important;
|
|
max-width: 600px !important;
|
|
margin: 0 auto !important;
|
|
|
|
/* makes it centered */
|
|
clear: both !important;
|
|
}
|
|
|
|
/* This should also be a block element, so that it will fill 100% of the .container */
|
|
|
|
.content {
|
|
padding: 15px;
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
display: block;
|
|
|
|
table {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/* Let's make sure tables in the content area are 100% wide */
|
|
|
|
/* Odds and ends */
|
|
|
|
.column {
|
|
width: 300px;
|
|
float: left;
|
|
|
|
tr td {
|
|
padding: 15px;
|
|
}
|
|
}
|
|
|
|
.pad {
|
|
tr td {
|
|
padding: 15px;
|
|
}
|
|
}
|
|
|
|
.column-wrap {
|
|
padding: 0 !important;
|
|
margin: 0 auto;
|
|
max-width: 600px !important;
|
|
}
|
|
|
|
.column table {
|
|
width: 100%;
|
|
}
|
|
|
|
.social .column {
|
|
width: 280px;
|
|
min-width: 279px;
|
|
float: left;
|
|
}
|
|
|
|
/* Be sure to place a .clear element after each set of columns, just to be safe */
|
|
|
|
.clear {
|
|
display: block;
|
|
clear: both;
|
|
}
|
|
|
|
/* -------------------------------------------
|
|
* PHONE
|
|
* For clients that support media queries.
|
|
* Nothing fancy.
|
|
*-------------------------------------------- */
|
|
@media only screen and (max-width: 600px) {
|
|
a[class="btn"] {
|
|
display: block !important;
|
|
margin-bottom: 10px !important;
|
|
background-image: none !important;
|
|
margin-right: 0 !important;
|
|
}
|
|
|
|
div[class="column"] {
|
|
width: auto !important;
|
|
float: none !important;
|
|
}
|
|
|
|
table.social div[class="column"] {
|
|
width: auto !important;
|
|
}
|
|
|
|
img.float-right {
|
|
float: none !important;
|
|
}
|
|
}
|
|
|
|
.inline-header {
|
|
display: inline-block;
|
|
margin: 0px;
|
|
}
|
|
|
|
/*
|
|
* Fix overlapping table header on second page of long invoices.
|
|
* Problem description: https://github.com/openfoodfoundation/openfoodnetwork/issues/1738
|
|
* Solution: https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1770#issuecomment-73530576
|
|
*/
|
|
thead { display: table-header-group }
|
|
tfoot { display: table-row-group }
|
|
tr { page-break-inside: avoid }
|