You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
k4ever/k4ever/media/css/style.less

689 lines
12 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

/* IF IM NOT A .LESS FILE DO NOT EDIT ME, BUT EDIT THE LESS FILE INSTEAD :)
@see http://lesscss.org/ */
/*
* This file is part of k4ever, a point-of-sale system
* Contact............ <k4ever@lists.someserver.de>
* Website............ http://k4ever.someserver.de/
* Bug tracker........ http://k4ever.someserver.de/report
*
* Licensed under GNU Affero General Public License v3 or later
*/
@import "fonts.css";
@import "jquery.gritter.css";
/* this is a css style reset. theres much discussion if something like this
is helpful and appropriate. well... its here for now, so please dont
change anything in the following block */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
background: transparent;
border: 0;
margin: 0;
padding: 0;
vertical-align: baseline;
}
ol, ul, li { list-style: none; }
a:focus, input:focus { outline: none; }
body { line-height: 1; }
blockquote { quotes: none; }
blockquote:before, blockquote:after { content: ''; content: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }
a img { border: none; }
a { text-decoration: none; color: inherit; }
/* end of the css style reset block. feel free to change things */
// less functions
.vertical-linear-gradient(@startColour, @endColour) {
background-image: -webkit-gradient(linear, left top, left bottom, from(@startColour), to(@endColour));
background-image: -webkit-linear-gradient(top, @startColour, @endColour);
background-image: -moz-linear-gradient(top, @startColour, @endColour);
background-image: -ms-linear-gradient(top, @startColour, @endColour);
background-image: -o-linear-gradient(top, @startColour, @endColour);
background-image: linear-gradient(top, @startColour, @endColour);
filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr='@{startColour}', EndColorStr='@{endColour}')";
}
.box-shadow(@args) {
-moz-box-shadow: @args;
-webkit-box-shadow: @args;
box-shadow: @args;
}
.border-radius(@args) {
-webkit-border-radius: @args;
-moz-border-radius: @args;
border-radius: @args;
/* useful if you don't want a bg color from leaking outside the border: */
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.transition(@args) {
-webkit-transition: @args;
-moz-transition: @args;
-ms-transition: @args;
-o-transition: @args;
transition: @args;
}
.rotate(@degrees) {
-webkit-transform: rotate(@degrees);
-moz-transform: rotate(@degrees);
-ms-transform: rotate(@degrees);
-o-transform: rotate(@degrees);
transform: rotate(@degrees);
}
// end less functions
// less variables
// folders
@fldImages: "img";
@fldFonts: "font";
// colours
@clrDarkGrey: #111111;
@clrMediumGrey: #666666;
@clrMediumLightGrey: #e5e5e5;
@clrLightGrey: #eaeaea;
@clrLightBlue: #32bbef;
@clrMediumBlue: #3398cc;
@clrDarkBlue: #007bba;
// fonts
@ftText: "Open Sans", Tahoma, Verdana, Arial, sans-serif;
@ftHeadlines: "Ubuntu", inherit;
// end less variables
body {
background: white;
font: 11px @ftText;
}
h1, h2, h3, h4, h5, h6, th {
clear: both;
font-weight: bold;
margin: 0;
font-family: @ftHeadlines;
color: @clrDarkBlue;
}
h2 {
border-bottom: 1px solid @clrDarkBlue;
margin-bottom: 10px;
}
h3 {
margin: 3px 0 5px 0;
}
.clear {
clear: both;
}
.clearAfter:after {
content: ".";
height: 0;
float: none;
visibility: hidden;
clear: both;
display: block;
}
a {
color: @clrMediumBlue;
&:hover {
color: white;
background-color: @clrMediumBlue;
}
}
.content {
padding: 5px;
}
input, select {
padding: 2px 5px;
border: 1px solid #E5E5E5;
/* hack for webkit-based browser to hide borders */
background: url("@{fldImages}/404") white;
}
input {
&[type="text"], &[type="search"], &[type="password"] {
&:focus {
background: #FAFFBD;
}
}
}
p {
margin-bottom: 7px;
}
#header {
margin-bottom: 20px;
position: relative;
z-index: 100;
> div {
padding: 5px 10px;
}
.search {
height: 40px;
position: relative;
z-index: 2;
background-color: @clrDarkGrey;
.vertical-linear-gradient(@clrMediumGrey, @clrDarkGrey);
.box-shadow(0 3px 8px 0 black);
> div {
background: url("@{fldImages}/logo.png") 0 center no-repeat transparent;
height: 100%;
}
input {
width: 300px;
height: 30px;
float: right;
}
ul.ui-autocomplete {
background: white;
width: 298px;
border-width: 0 1px 1px 1px;
border-style: solid;
border-color: black;
z-index: 100;
li.ui-menu-item {
display: table-row;
&:hover, &.focus {
.vertical-linear-gradient(@clrLightBlue, @clrMediumBlue);
.box-shadow(0 0 5px @clrMediumGrey);
a {
color: white !important;
}
}
a {
span {
line-height: 1;
vertical-align: top;
img {
height: 50px;
}
}
&#ui-active-menuitem.ui-corner-all div {
color: #FF0084;
}
&.ui-corner-all span {
display: table-cell;
}
}
}
.preview, .buy, .meta {
height: 50px;
padding: 5px;
font-size: 10px;
}
.preview {
width: 50px;
overflow: hidden;
text-align: center;
vertical-align: middle;
}
.buy {
vertical-align: middle;
width: 50px;
}
.focus .buy {
background-image: url("@{fldImages}/alt.png");
background-repeat: no-repeat;
background-position: 2px center;
}
.focus .buy.lock {
background-image: url("@{fldImages}/buy.png");
}
.focus .buy.lock.load,
.focus .buy.load {
background-image: url("@{fldImages}/load.svg");
}
.focus .buy.lock.success,
.focus .buy.success {
background-image: url("@{fldImages}/success.png");
}
.focus .buy.lock.failure,
.focus .buy.failure {
background-image: url("@{fldImages}/failure.png");
}
.meta {
width: 210px;
}
.meta:first-line {
font-weight: bold;
}
}
}
.navigation {
text-transform: uppercase;
color: white;
border-bottom: 2px solid black;
padding-top: 10px;
position: relative;
z-index: 1;
background-color: @clrMediumBlue;
.vertical-linear-gradient(@clrLightBlue, @clrMediumBlue);
> * {
display: inline-block;
vertical-align: middle;
}
h1 {
color: white;
margin: 0 20px 0 0;
text-shadow: 0 -1px #777;
}
li {
display: inline-block;
font-weight: bold;
margin-right: 10px;
a {
display: block;
text-align: center;
vertical-align: middle;
padding: 10px 15px;
margin: 3px 0;
color: white;
.border-radius(20px);
.transition(~"background .2s, box-shadow .2s");
&:hover {
background: white;
color: @clrMediumBlue;
.box-shadow(0 1px 0 0 #777 inset);
.transition(~"background .2s, box-shadow .2s");
}
}
}
.balance {
float: right;
display: block;
padding: 10px 0;
margin: 3px 0;
}
}
}
form.login {
width: 300px;
margin: 60px auto;
border: 1px solid @clrMediumLightGrey;
padding: 20px;
.box-shadow(1px 1px 2px @clrLightGrey);
label {
display: block;
margin-top: 10px;
margin-bottom: 3px;
}
input {
font-size: 20px;
width: 97%;
padding: 5px 3px;
}
.button {
margin: 12px auto 0;
float: none;
width: 70%;
}
}
table.itemList {
width: 100%;
tbody tr:nth-child(even) {
td.name, td.actions {
background-color: @clrMediumLightGrey;
}
}
td, th {
vertical-align: middle;
}
th {
font-size: 20px;
text-align: center;
}
td {
padding-bottom: 10px;
&.productImage {
width: 80px;
text-align: center;
a:hover {
background: transparent;
}
img {
max-width: 100%;
max-height: 64px;
}
}
&.name {
padding: 0 10px;
span {
display: block;
font-weight: bold;
}
a {
display: block;
font: 20px @ftHeadlines;
text-decoration: none;
font-weight: bold;
}
}
}
}
table.itemListContainer {
width: 100%;
td, th {
vertical-align: middle;
}
th {
font-size: 20px;
&[scope="row"] {
width: 20px;
.rotate(270deg);
}
}
> tbody > tr:first-child ~ tr > td{
padding-top: 50px;
}
}
.singleItem {
width: 820px;
margin: 0 auto;
.productImage, .productMeta {
float: left;
width: 400px;
}
.productImage {
text-align: center;
img {
max-width: 80%;
}
}
.productMeta {
margin-left: 20px;
}
.actions {
padding-bottom: 5px;
a {
margin-top: 0;
}
}
}
.button {
display: block;
padding: 5px 10px;
margin: 10px 10px 15px 0;
position: relative;
text-align: center;
border-radius: 6px;
float: left;
z-index: 2;
color: white;
background-color: @clrDarkGrey;
border: 0 none;
.border-radius(6px);
.vertical-linear-gradient(@clrMediumGrey, @clrDarkGrey);
.box-shadow(0 1px 3px 0 black);
&.buy {
.border-radius(6px 6px 0 0);
> span {
display: block;
height: 100%;
min-width: 32px;
height: 32px;
background: url("@{fldImages}/payment.png") no-repeat center center transparent;
> span {
position: absolute;
bottom: -15px;
left: 0;
display: block;
width: 100%;
z-index: 1;
background-color: #3398cc;
color: white;
font-size: 10px;
line-height: 15px;
.border-radius(0 0 6px 6px);
.box-shadow(~"0 1px 3px 0 black, 0 1px 1px 0 black inset");
}
}
&.onlyDeposit > span{
background-image: url("@{fldImages}/deposit.png");
}
&.inclDeposit > span {
background-image: url("@{fldImages}/payment_deposit.png");
min-width: 65px;
}
&.locked > span {
background: url("@{fldImages}/locked.png") no-repeat center 0;
}
}
&:hover {
background-color: darken(@clrDarkGrey, 20%) !important;
.vertical-linear-gradient(darken(@clrMediumGrey, 20%), darken(@clrDarkGrey, 20%));
}
&:active {
.box-shadow(~"0 1px 3px 0 black, 0 1px 3px 0 black inset");
}
}
.viewControl {
border-bottom: 1px solid @clrDarkBlue;
margin-bottom: 18px;
padding-bottom: 7px;
h2, h3, h4, h5 {
&:after {
content: ": ";
}
}
> * {
display: inline-block;
float: none;
vertical-align: middle;
margin: 0 10px 0 0;
}
}
.textData {
thead, tfoot {
background-color: @clrDarkGrey;
th {
font-weight: bold;
color: white;
}
}
tr {
&:nth-child(even) td {
background-color: @clrLightGrey;
}
&:hover td {
background-color: darken(@clrLightGrey, 30%);
}
}
th, td {
padding: 7px 30px;
vertical-align: middle;
text-align: center;
}
}
.icon {
display: block;
height: 24px;
width: 24px;
text-indent: -10000px;
background-position: 0 0;
background-repeat: no-repeat;
margin: 0 auto;
&.approved {
background-image: url("@{fldImages}/approved.png");
}
&.pending {
background-image: url("@{fldImages}/pending.png");
}
&.cash {
background-image: url("@{fldImages}/cash.png");
}
&.transfer {
background-image: url("@{fldImages}/transfer.png");
}
&.cashIn {
background-image: url("@{fldImages}/cashIn.png");
}
&.cashOut {
background-image: url("@{fldImages}/cashOut.png");
}
}
.transaction {
padding: 0 30px;
> * {
float: none;
display: block;
}
input[type="text"], select {
font-size: 16px;
}
}
.notice, .error, .ok {
position: fixed;
bottom: 0;
left: -5px;
width: 100%;
border-style: solid;
border-width: 1px 0 0 0;
padding: 7px 15px;
margin-top: 10px;
font-weight: bold;
h2 {
font-size: 14px;
color: inherit;
border-bottom: 0;
}
}
.notice {
background-color: #FFF6BF;
border-color: #FFD324;
color: #514721;
}
.error {
background: #FBE3E4;
color: #8A1F11;
border-color: #FBC2C4;
}
.ok {
background: #E6EFC2;
color: #264409;
border-color: #C6D880;
}