seba
/
k4ever
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

oh hai. i edited all your templates and introduced less stylesheets

Browse Source
master
Konrad Mohrfeldt 13 years ago
parent 28ade73b47
commit 456465a67e
10 changed files with 1128 additions and 620 deletions
Show Stats Download Patch File Download Diff File

10
k4ever/buyable/templates/buyables/product_list.html
Unescape View File

@ -1,7 +1,7 @@
{% load thumbnail %} {% load thumbnail %}
{% if buyables %} {% if buyables %}
<table class="showitem"> <table class="itemList">
<tbody> <tbody>
{% for buyable in buyables %} {% for buyable in buyables %}
<tr> <tr>
@ -11,23 +11,23 @@
<td class="name"><a href="/store/show/{{ buyable.id }}">{{ buyable.name }}</a></td> <td class="name"><a href="/store/show/{{ buyable.id }}">{{ buyable.name }}</a></td>
<td class="actions"> <td class="actions">
{% if buyable.hasDeposit %} {% if buyable.hasDeposit %}
<a class="buyButton includingPrice" href="/store/buy/{{ buyable.id }}" <a class="button buy" href="/store/buy/{{ buyable.id }}"
title="Kaufen (Ohne Pfand)"> title="Kaufen (Ohne Pfand)">
<span><span>{{ buyable.price|floatformat:2 }}€</span></span> <span><span>{{ buyable.price|floatformat:2 }}€</span></span>
</a> </a>
<a class="buyButton includingDeposit includingPrice" <a class="button buy inclDeposit"
href="/store/buy/{{ buyable.id }}/with/deposit" title="Kaufen (Mit Pfand)"> href="/store/buy/{{ buyable.id }}/with/deposit" title="Kaufen (Mit Pfand)">
<span><span>{{ buyable.price|floatformat:2 }}€ / {{ buyable.deposit|floatformat:2 }}€</span></span> <span><span>{{ buyable.price|floatformat:2 }}€ / {{ buyable.deposit|floatformat:2 }}€</span></span>
</a> </a>
<a class="buyButton onlyDeposit includingPrice" <a class="button buy onlyDeposit"
href="/store/buy/{{ buyable.id }}/only/deposit" title="Kaufen (Nur Pfand)"> href="/store/buy/{{ buyable.id }}/only/deposit" title="Kaufen (Nur Pfand)">
<span><span>{{ buyable.deposit|floatformat:2 }}€</span></span> <span><span>{{ buyable.deposit|floatformat:2 }}€</span></span>
</a> </a>
{% else %} {% else %}
<a class="buyButton includingPrice" href="/store/buy/{{ buyable.id }}" <a class="button buy" href="/store/buy/{{ buyable.id }}"
title="Kaufen"> title="Kaufen">
<span><span>{{ buyable.price|floatformat:2 }}€</span></span> <span><span>{{ buyable.price|floatformat:2 }}€</span></span>
</a> </a>

95
k4ever/buyable/templates/buyables/showItem.html
Unescape View File

@ -3,70 +3,45 @@
{% block "content" %} {% block "content" %}
<p><a href="/store/">Zur Liste aller Items</a></p> <a href="/store/">Zur Liste aller Items</a>
{% if item %} {% if item %}
<table class="showitem" width="40%"> <div class="singleItem" >
<tr> <div class="productImage">
<td>
<table width="100%">
<tr>
<td colspan="2" align="center">
<div style="font-size:large">{{ item.name }}</div>
<img src="{% thumbnail item.image 400x400 %}"> <img src="{% thumbnail item.image 400x400 %}">
</td> </div>
</tr> <div class="productMeta">
<tr> <div>
<th> <h2>{{ item.name }}</h2>
Kategorie{{ item.buyableType.all.count|pluralize:"n"}}:</th>
<td> <h3>Kaufen</h3>
<div class="actions clearAfter">
<a class="button buy" href="/store/buy/{{ item.id }}/">
<span><span>{{ item.price|floatformat:2 }}€</span></span>
</a>
<a class="button buy inclDeposit" href="/store/buy/{{ item.id }}/with/deposit/">
<span><span>{{ item.price|floatformat:2 }}€ / {{ item.deposit|floatformat:2 }}€</span></span>
</a>
<a class="button buy onlyDeposit"
href="/store/buy/{{ item.id }}/only/deposit/">
<span><span>{{ item.deposit|floatformat:2 }}€</span></span>
</a>
</div>
<h3>Beschreibung</h3>
<div class="description">"{{ item.description }}"</div>
<h3>Kategorie{{ item.buyableType.all.count|pluralize:"n"}}</h3>
<ul>
{% for type in item.buyableType.all %} {% for type in item.buyableType.all %}
{{ type }} <br/> <li>{{ type }}</li>
{% endfor %} {% endfor %}
</td> </ul>
</tr> </div>
<tr> </div>
<th> </div>
Preis:
</th>
<td>
{{ item.price|floatformat:2 }} € {% if item.hasDeposit %}(+ Pfand {{ item.deposit|floatformat:2 }} €) {% endif %}
</td>
</tr>
<tr>
<td colspan="2" align="center" style="padding:15px;font-style:italic">
"{{ item.description }}"
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%">
<tr>
<td width="33%">
{% if item.hasDeposit %}
<a class="button" href="/store/buy/{{ item.id }}/with/deposit/">Kaufen - {{ item.price|floatformat:2 }} € <br/>+ {{ item.deposit|floatformat:2 }} € Pfand</a>
{% else %}
&nbsp;
{% endif %}
</td>
<td width="34%">
<a class="button" href="/store/buy/{{ item.id }}/">Kaufen - {{ item.price|floatformat:2 }} €<br/>{% if item.hasDeposit %} (Ohne Pfand){% endif %}</a>
</td>
<td width="33%">
{% if item.hasDeposit %}
<a class="button" href="/store/buy/{{ item.id }}/only/deposit/">Kaufen <br/>nur {{ item.deposit|floatformat:2 }} € Pfand</a>
{% else %}
&nbsp;
{% endif %}
</td>
</tr>
</table>
</td>
</tr>
</table>
{% else %} {% else %}
No item found :( Produkt wurde nicht gefunden
{% endif %} {% endif %}
{% endblock %} {% endblock %}

9
k4ever/main/templates/base.html
Unescape View File

@ -18,17 +18,24 @@
<body{%block bodyargs %}{%endblock%}> <body{%block bodyargs %}{%endblock%}>
<div id="header"> <div id="header">
<div class="search"> <div class="search">
<div>
{% if user.is_authenticated %} {% if user.is_authenticated %}
{% include "main/search-form.html" %} {% include "main/search-form.html" %}
{% endif %} {% endif %}
</div> </div>
<div class="base_nav"> </div>
<div class="navigation">
<h1>Kasse</h1> <h1>Kasse</h1>
<nav>
{% if user.is_authenticated %} {% if user.is_authenticated %}
{% include "main/navigation-login.html" %} {% include "main/navigation-login.html" %}
{% else %} {% else %}
{% include "main/navigation.html" %} {% include "main/navigation.html" %}
{% endif %} {% endif %}
</nav>
{% if user.is_authenticated %}
<span class="balance">Kontostand: {{ user.get_profile.balance|floatformat:2 }} €</span>
{% endif %}
</div> </div>
</div> </div>
<div class="content"> <div class="content">

3
k4ever/main/templates/main/navigation-login.html
Unescape View File

@ -1,4 +1,4 @@
<ul> <ul role="navigation sitemap">
<li><a href="/">Home</a></li> <li><a href="/">Home</a></li>
<li><a href="/store/">Einkaufen</a></li> <li><a href="/store/">Einkaufen</a></li>
<li><a href="/transaction/">Konto</a></li> <li><a href="/transaction/">Konto</a></li>
@ -9,4 +9,3 @@
{% endif %} {% endif %}
<li><a href="/user/logout/">Abmelden</a></li> <li><a href="/user/logout/">Abmelden</a></li>
</ul> </ul>
<span class="balance">Kontostand: {{ user.get_profile.balance|floatformat:2 }} €</span>

10
k4ever/main/templates/main/product_list.html
Unescape View File

@ -1,7 +1,7 @@
{% load thumbnail %} {% load thumbnail %}
{% if buyables %} {% if buyables %}
<table width=100% class="showitem"> <table class="itemList">
<tbody> <tbody>
{% for buyable in buyables %} {% for buyable in buyables %}
<tr> <tr>
@ -11,13 +11,13 @@
<td class="name"><span>{{ buyable.buyable__name }}</span> {% if buyable.num_buys %}({{ buyable.num_buys }} mal gekauft){% endif %}</td> <td class="name"><span>{{ buyable.buyable__name }}</span> {% if buyable.num_buys %}({{ buyable.num_buys }} mal gekauft){% endif %}</td>
<td class="actions"> <td class="actions">
{% if buyable.buyable__deposit > 0 %} {% if buyable.buyable__deposit > 0 %}
<a class="buyButton includingPrice" href="/store/buy/{{ buyable.buyable__id }}" title="Kaufen (Ohne Pfand)"><span><span>{{ buyable.buyable__price|floatformat:2 }}€</span></span></a> <a class="button buy" href="/store/buy/{{ buyable.buyable__id }}" title="Kaufen (Ohne Pfand)"><span><span>{{ buyable.buyable__price|floatformat:2 }}€</span></span></a>
<a class="buyButton includingDeposit includingPrice" href="/store/buy/{{ buyable.buyable__id }}/with/deposit" title="Kaufen (Mit Pfand)"><span><span>{{ buyable.buyable__price|floatformat:2 }} € / {{ buyable.buyable__deposit|floatformat:2 }}€</span></span></a> <a class="button buy inclDeposit" href="/store/buy/{{ buyable.buyable__id }}/with/deposit" title="Kaufen (Mit Pfand)"><span><span>{{ buyable.buyable__price|floatformat:2 }}€ / {{ buyable.buyable__deposit|floatformat:2 }}€</span></span></a>
{% if includeDeposit %} {% if includeDeposit %}
<a class="buyButton onlyDeposit" href="/store/buy/{{ buyable.buyable__id }}/only/deposit" title="Kaufen (Nur Pfand)"><span><span>{{ buyable.buyable__deposit|floatformat:2 }}€</span></span></a> <a class="button buy onlyDeposit" href="/store/buy/{{ buyable.buyable__id }}/only/deposit" title="Kaufen (Nur Pfand)"><span><span>{{ buyable.buyable__deposit|floatformat:2 }}€</span></span></a>
{% endif %} {% endif %}
{% else %} {% else %}
<a class="buyButton" href="/store/buy/{{ buyable.buyable__id }}" title="Kaufen"><span><span>{{ buyable.buyable__price|floatformat:2 }}€</span></span></a> <a class="button buy" href="/store/buy/{{ buyable.buyable__id }}" title="Kaufen"><span><span>{{ buyable.buyable__price|floatformat:2 }}€</span></span></a>
{% endif %} {% endif %}
</td> </td>
</tr> </tr>

3
k4ever/main/templates/main/search-form.html
Unescape View File

@ -1,6 +1,3 @@
<form method="get" action="#">
<input placeholder="Suche und kaufe..." class="autocomplete" <input placeholder="Suche und kaufe..." class="autocomplete"
type="search" name="search_term" value="Lade Daten..." type="search" name="search_term" value="Lade Daten..."
disabled="disabled" /> disabled="disabled" />
<input type="submit" value="Suchen" />
</form>

16
k4ever/main/templates/main/startpage.html
Unescape View File

@ -2,7 +2,7 @@
{% block "content" %} {% block "content" %}
{% if allMostDrinks or allMostSnacks %} {% if allMostDrinks or allMostSnacks %}
<table class="showlists"> <table class="itemListContainer">
<thead> <thead>
<tr> <tr>
<td role="presentation">&nbsp;</td> <td role="presentation">&nbsp;</td>
@ -14,25 +14,25 @@
<tbody> <tbody>
<tr> <tr>
<th scope="row">Getränke</th> <th scope="row">Getränke</th>
<td style="vertical-align:top"> <td>
{% include "main/product_list.html" with buyables=allMostDrinks %} {% include "main/product_list.html" with buyables=allMostDrinks %}
</td> </td>
<td style="vertical-align:top"> <td>
{% include "main/product_list.html" with buyables=usersMostDrinks %} {% include "main/product_list.html" with buyables=usersMostDrinks %}
</td> </td>
<td style="vertical-align:top"> <td>
{% include "main/product_list.html" with buyables=usersLastDrinks %} {% include "main/product_list.html" with buyables=usersLastDrinks %}
</td> </td>
</tr> </tr>
<tr style="border-top: 2px solid #ECECEC"> <tr>
<th scope="row">Snacks</th> <th scope="row">Snacks</th>
<td style="vertical-align.top"> <td>
{% include "main/product_list.html" with buyables=allMostSnacks %} {% include "main/product_list.html" with buyables=allMostSnacks %}
</td> </td>
<td style="vertical-align:top"> <td>
{% include "main/product_list.html" with buyables=usersMostSnacks %} {% include "main/product_list.html" with buyables=usersMostSnacks %}
</td> </td>
<td style="vertical-align:top"> <td>
{% include "main/product_list.html" with buyables=usersLastSnacks %} {% include "main/product_list.html" with buyables=usersLastSnacks %}
</td> </td>
</tr> </tr>

2
k4ever/main/templates/registration/loginForm.html
Unescape View File

@ -16,7 +16,7 @@
<p>{{ form.password.label_tag }} {{ form.password }}</p> <p>{{ form.password.label_tag }} {{ form.password }}</p>
</fieldset> </fieldset>
<input type="submit" value="Anmelden" /> <input type="submit" class="button" value="Anmelden" />
<input type="hidden" name="next" value="{{ next }}" /> <input type="hidden" name="next" value="{{ next }}" />
</form> </form>

749
k4ever/media/css/style.css
Unescape View File

@ -1,135 +1,218 @@
/* THOSE ARE JUST TEMPORARYLY, I CHANGE THEM LATER INTO LOCAL RESOURCES */ @import "http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700.css";
/* OR DOES SHE?! */
@import "http://fonts.googleapis.com/css?family=Ubuntu:400,700.css";
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700); /* IF IM NOT A .LESS FILE DO NOT EDIT ME, BUT EDIT THE LESS FILE INSTEAD :) */
@import url(http://fonts.googleapis.com/css?family=Istok+Web:400,700); /*
* k4ever less stylesheet
/* jQuery Theme */ *
/* @import url(jquery-ui-1.8.10.custom.css); */ * @author Theresa Enghardt <theresa@freitagsrunde.org>
* @author Konrad Mohrfeldt <konrad.mohrfeldt@farbdev.org>
/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html */
-------------------------------------------------------------- */ /* these should be replaced by local ones. i’m to lazy. anyone?
some help: http://www.fontsquirrel.com/fontface/generator */
html, body, div, span, applet, object, iframe, /* this is a css style reset. there’s much discussion if something like this
h1, h2, h3, h4, h5, h6, p, blockquote, pre, is helpful and appropriate. well... it’s here for now, so please don’t
a, abbr, acronym, address, big, cite, code, change anything in the following block */
del, dfn, em, font, img, ins, kbd, q, s, samp, html,
small, strike, strong, sub, sup, tt, var, body,
b, u, i, center, div,
dl, dt, dd, ol, ul, li, span,
fieldset, form, label, legend, applet,
table, caption, tbody, tfoot, thead, tr, th, td { 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; background: transparent;
border: 0; border: 0;
margin: 0; margin: 0;
padding: 0; padding: 0;
vertical-align: baseline; vertical-align: baseline;
} }
ol, ul, li {
a:focus { list-style: none;
outline: none;
} }
a:focus, input:focus {
.content { outline: none;
margin: 5px;
} }
body { body {
line-height: 1; line-height: 1;
} }
h1, h2, h3, h4, h5, h6, th {
clear: both;
font-weight: bold;
text-align: center;
margin-bottom: 10px;
/* Sans-Serif? Srsly???
font-family: "Istok Web", inherit; */
}
ol, ul, li {
list-style: none;
}
blockquote { blockquote {
quotes: none; quotes: none;
} }
blockquote:before, blockquote:after { blockquote:before, blockquote:after {
content: ''; content: '';
content: none; content: none;
} }
del { del {
text-decoration: line-through; text-decoration: line-through;
} }
/* tables still need 'cellspacing="0"' in the markup */
table { table {
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; border-spacing: 0;
} }
a img { a img {
border: none; border: none;
} }
a {
/* GENERAL SETTINGS */ text-decoration: none;
color: inherit;
}
/* end of the css style reset block. feel free to change things */
body { body {
background: white;
font: 11px "Open Sans", Tahoma, Verdana, Arial, sans-serif; font: 11px "Open Sans", Tahoma, Verdana, Arial, sans-serif;
} }
h1,
p { margin-bottom: 7px; } h2,
h3,
h4,
h5,
h6,
th {
clear: both;
font-weight: bold;
margin: 0;
font-family: "Ubuntu", inherit;
color: #007bba;
}
h2 {
border-bottom: 1px solid #007bba;
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;
}
.content {
padding: 5px;
}
.content a {
color: #3398cc;
}
.content a:hover {
color: white;
background-color: #3398cc;
}
input { input {
padding: 2px 5px; padding: 2px 5px;
border: 1px solid #E5E5E5; border: 1px solid #E5E5E5;
background: none repeat scroll 0 0 #FBFBFB; background: url("img/404") white;
} }
input[type="text"]:focus, input[type="search"]:focus, input[type="password"]:focus {
input[type=text]:focus, input[type=search]:focus, input[type=password]:focus {
background: #FAFFBD; background: #FAFFBD;
} }
p {
/* HEADER */ margin-bottom: 7px;
}
#header { #header {
margin-bottom: 20px; margin-bottom: 20px;
background: #333; position: relative;
}
#header > div {
padding: 5px 10px;
}
#header .search {
height: 40px;
position: relative;
z-index: 2;
background-color: #111111;
background-image: -webkit-gradient(linear, left top, left bottom, from(#666666), to(#111111)); background-image: -webkit-gradient(linear, left top, left bottom, from(#666666), to(#111111));
background-image: -webkit-linear-gradient(top, #666666, #111111); background-image: -webkit-linear-gradient(top, #666666, #111111);
background-image: -moz-linear-gradient(top, #666666, #111111); background-image: -moz-linear-gradient(top, #666666, #111111);
background-image: -ms-linear-gradient(top, #666666, #111111); background-image: -ms-linear-gradient(top, #666666, #111111);
background-image: -o-linear-gradient(top, #666666, #111111); background-image: -o-linear-gradient(top, #666666, #111111);
background-image: linear-gradient(top, #666666, #111111); background-image: linear-gradient(top, #666666, #111111);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666', EndColorStr='#111111'); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666', EndColorStr='#111111');
-moz-box-shadow: 0 3px 8px 0 black;
-webkit-box-shadow: 0 3px 8px 0 black;
box-shadow: 0 3px 8px 0 black;
} }
#header .search > div {
#header > div { background: url("img/logo.png") 0 center no-repeat transparent;
padding: 5px 10px; height: 100%;
}
#header .search {
background: url("img/logo.png") 10px center no-repeat transparent;
height: 40px;
} }
#header .search input {
#header .search input[type='search'] {
width: 300px; width: 300px;
height: 30px; height: 30px;
}
#header .search form {
float: right; float: right;
line-height: 40px;
} }
#header .search ul.ui-autocomplete {
#header .base_nav { background: white;
background: #3398cc; width: 298px;
border-width: 0 1px 1px 1px;
border-style: solid;
border-color: black;
z-index: 100;
}
#header .search ul.ui-autocomplete li.ui-menu-item {
display: table-row;
}
#header .search ul.ui-autocomplete li.ui-menu-item:hover, #header .search ul.ui-autocomplete li.ui-menu-item.focus {
color: white;
background-image: -webkit-gradient(linear, left top, left bottom, from(#32bbef), to(#3398cc)); background-image: -webkit-gradient(linear, left top, left bottom, from(#32bbef), to(#3398cc));
background-image: -webkit-linear-gradient(top, #32bbef, #3398cc); background-image: -webkit-linear-gradient(top, #32bbef, #3398cc);
background-image: -moz-linear-gradient(top, #32bbef, #3398cc); background-image: -moz-linear-gradient(top, #32bbef, #3398cc);
@ -137,323 +220,233 @@ input[type=text]:focus, input[type=search]:focus, input[type=password]:focus {
background-image: -o-linear-gradient(top, #32bbef, #3398cc); background-image: -o-linear-gradient(top, #32bbef, #3398cc);
background-image: linear-gradient(top, #32bbef, #3398cc); background-image: linear-gradient(top, #32bbef, #3398cc);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#32bbef', EndColorStr='#3398cc'); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#32bbef', EndColorStr='#3398cc');
-moz-box-shadow: 0 0 5px #666666;
-webkit-box-shadow: 0 0 5px #666666;
box-shadow: 0 0 5px #666666;
}
#header .search ul.ui-autocomplete li.ui-menu-item a span {
line-height: 1;
vertical-align: top;
}
#header .search ul.ui-autocomplete li.ui-menu-item a span img {
height: 50px;
}
#header .search ul.ui-autocomplete li.ui-menu-item a#ui-active-menuitem.ui-corner-all div {
color: #FF0084;
}
#header .search ul.ui-autocomplete li.ui-menu-item a.ui-corner-all span {
display: table-cell;
}
#header .search ul.ui-autocomplete .preview, #header .search ul.ui-autocomplete .buy, #header .search ul.ui-autocomplete .meta {
height: 50px;
padding: 5px;
font-size: 10px;
}
#header .search ul.ui-autocomplete .preview {
width: 50px;
overflow: hidden;
text-align: center;
vertical-align: middle;
}
#header .search ul.ui-autocomplete .buy {
vertical-align: middle;
width: 50px;
}
#header .search ul.ui-autocomplete .focus .buy {
background-image: url("img/alt.png");
background-repeat: no-repeat;
background-position: 2px center;
}
#header .search ul.ui-autocomplete .focus .buy.lock {
background-image: url("img/buy.png");
}
#header .search ul.ui-autocomplete .focus .buy.lock.load, #header .search ul.ui-autocomplete .focus .buy.load {
background-image: url("img/load.gif");
}
#header .search ul.ui-autocomplete .focus .buy.lock.success, #header .search ul.ui-autocomplete .focus .buy.success {
background-image: url("img/success.png");
}
#header .search ul.ui-autocomplete .focus .buy.lock.failure, #header .search ul.ui-autocomplete .focus .buy.failure {
background-image: url("img/failure.png");
}
#header .search ul.ui-autocomplete .meta {
width: 210px;
}
#header .search ul.ui-autocomplete .meta:first-line {
font-weight: bold;
}
#header .navigation {
text-transform: uppercase; text-transform: uppercase;
color: white; color: white;
border-bottom: 2px solid black; border-bottom: 2px solid black;
padding-top: 10px; padding-top: 10px;
-moz-box-shadow: 0 3px 8px 0 black inset; position: relative;
-webkit-box-shadow: 0 3px 8px 0 black inset; z-index: 1;
box-shadow: 0 3px 8px 0 black inset; background-color: #3398cc;
background-image: -webkit-gradient(linear, left top, left bottom, from(#32bbef), to(#3398cc));
background-image: -webkit-linear-gradient(top, #32bbef, #3398cc);
background-image: -moz-linear-gradient(top, #32bbef, #3398cc);
background-image: -ms-linear-gradient(top, #32bbef, #3398cc);
background-image: -o-linear-gradient(top, #32bbef, #3398cc);
background-image: linear-gradient(top, #32bbef, #3398cc);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#32bbef', EndColorStr='#3398cc');
} }
#header .navigation > * {
#header .base_nav h1 {
color: white;
display: inline-block; display: inline-block;
margin: 0 20px 0 0;
padding: 5px 0 0 0;
vertical-align: middle; vertical-align: middle;
line-height: 1;
text-shadow: 0 -1px #777;
} }
#header .navigation h1 {
#header .base_nav ul { color: white;
display: inline-block; margin: 0 20px 0 0;
vertical-align: middle; text-shadow: 0 -1px #777777;
} }
#header .navigation li {
#header .base_nav ul li {
display: inline-block; display: inline-block;
font-weight: bold; font-weight: bold;
margin-right: 10px; margin-right: 10px;
} }
#header .navigation li a {
#header .base_nav a {
text-align: center;
//background: #3398cc;
display: block; display: block;
text-align: center;
vertical-align: middle; vertical-align: middle;
text-decoration: none;
color: inherit;
padding: 10px 15px; padding: 10px 15px;
margin: 3px 0; margin: 3px 0;
-webkit-border-radius: 20px; -webkit-border-radius: 20px;
-moz-border-radius: 20px; -moz-border-radius: 20px;
border-radius: 20px; border-radius: 20px;
-webkit-transition: background .2s; /* useful if you don't want a bg color from leaking outside the border: */
} -moz-background-clip: padding;
-webkit-background-clip: padding-box;
#header .base_nav a:hover { background-clip: padding-box;
-webkit-transition: background .2s; -webkit-transition: background .2s, box-shadow .2s;
-moz-transition: background .2s, box-shadow .2s;
-ms-transition: background .2s, box-shadow .2s;
-o-transition: background .2s, box-shadow .2s;
transition: background .2s, box-shadow .2s;
}
#header .navigation li a:hover {
background: white; background: white;
color: #339DD1; color: #3398cc;
-webkit-box-shadow: 0 1px 0 0 #777 inset; -moz-box-shadow: 0 1px 0 0 #777777 inset;
-moz-box-shadow: 0 1px 0 0 #777 inset; -webkit-box-shadow: 0 1px 0 0 #777777 inset;
box-shadow: 0 1px 0 0 #777 inset; box-shadow: 0 1px 0 0 #777777 inset;
} -webkit-transition: background .2s, box-shadow .2s;
-moz-transition: background .2s, box-shadow .2s;
span.balance { -ms-transition: background .2s, box-shadow .2s;
-o-transition: background .2s, box-shadow .2s;
transition: background .2s, box-shadow .2s;
}
#header .navigation .balance {
float: right; float: right;
display: block;
padding: 10px 0; padding: 10px 0;
margin: 3px 0; margin: 3px 0;
} }
/* LOGIN FORM */
form.login { form.login {
width: 300px; width: 300px;
margin: 60px auto; margin: 60px auto;
border: 1px solid #e5e5e5;
padding: 20px;
-moz-box-shadow: 1px 1px 2px #eaeaea; -moz-box-shadow: 1px 1px 2px #eaeaea;
-webkit-box-shadow: 1px 1px 2px #eaeaea; -webkit-box-shadow: 1px 1px 2px #eaeaea;
box-shadow: 1px 1px 2px #eaeaea; box-shadow: 1px 1px 2px #eaeaea;
border: 1px solid #E5E5E5;
padding: 20px;
} }
form.login label { form.login label {
display: block; display: block;
margin-top: 10px; margin-top: 10px;
margin-bottom: 3px; margin-bottom: 3px;
} }
form.login input { form.login input {
font-size: 24px; font-size: 20px;
width: 97%; width: 97%;
padding: 5px 3px;
} }
form.login .button {
form.login input[type=submit] { margin: 12px auto 0;
display: block; float: none;
width: 303px; width: 70%;
margin-top: 25px;
padding: 5px 8px;
background: #333;
color: #eee;
text-shadow: 0px 1px 0px black;
font-size: 140%;
font-weight: bold;
border: none;
border-top: 1px solid #444;
border-radius: 3px;
outline: 0 none;
-webkit-box-shadow: 0px 1px 1px black;
-moz-box-shadow: 0px 1px 1px black;
box-shadow: 0px 1px 1px black;
}
form.login input[type=submit]:hover,
form.login input[type=submit]:active {
background: #2790B0;
border-color: #5c94cb;
color: white;
} }
table.itemList {
/* NOTIFICATIONS */
div.error, div.notice, div.success {
border-top: 1px solid #DDD;
padding: 0.6em 0.8em;
position: fixed;
bottom: 0;
width: 100%; width: 100%;
} }
table.itemList tbody tr:nth-child(even) td.name, table.itemList tbody tr:nth-child(even) td.actions {
div.error h2, div.notice h2, div.success h2 { background-color: #e5e5e5;
font-size: 100%;
font-weight: bold;
margin-bottom: 10px;
}
div.error {
background: #FBE3E4;
color: #8A1F11;
border-color: #FBC2C4;
}
div.error a { color:#8A1F11; }
div.notice {
background: #FFF6BF;
color: #514721;
border-color: #FFD324;
} }
table.itemList td, table.itemList th {
div.notice a { color:#514721; }
div.success{
background: #E6EFC2;
color: #264409;
border-color: #C6D880;
}
div.success a { color:#264409; }
.content table ul li strong {
width: 200px;
display: block;
float: left;
}
ul.ui-autocomplete {
background: white;
width: 298px;
border-width: 0 1px 1px 1px;
border-style: solid;
border-color: black;
}
html body div#header div.search ul.ui-autocomplete li.ui-menu-item a#ui-active-menuitem.ui-corner-all div {
color: #FF0084;
}
html body div#header div.search ul.ui-autocomplete li.ui-menu-item {
display: table-row;
}
html body div#header div.search ul.ui-autocomplete li.ui-menu-item a.ui-corner-all span {
display: table-cell;
}
html body div#header div.search ul.ui-autocomplete li.ui-menu-item:hover,
html body div#header div.search ul.ui-autocomplete li.ui-menu-item.focus {
background-color: #2790B0;
color: white;
}
.search li.ui-menu-item a spa {
line-height: 1;
vertical-align: top;
}
.search li.ui-menu-item a span img {
height: 50px;
}
.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; vertical-align: middle;
width: 50px;
}
.focus .buy {
background-image: url(img/alt.png);
background-repeat: no-repeat;
background-position: 2px center;
}
.focus .buy.lock {
background-image: url(img/buy.png);
} }
table.itemList th {
.focus .buy.lock.load, font-size: 20px;
.focus .buy.load { text-align: center;
background-image: url(img/load.gif);
}
.focus .buy.lock.success,
.focus .buy.success {
background-image: url(img/success.png);
}
.focus .buy.lock.failure,
.focus .buy.failure {
background-image: url(img/failure.png);
}
.meta {
width: 210px;
}
.meta:first-line {
font-weight: bold;
} }
table.itemList td {
table.showitem { padding-bottom: 10px;
border: 0 none;
border-collapse: collapse;
width: 100%;
} }
table.itemList td.productImage {
table.showitem td.productImage {
width: 80px; width: 80px;
text-align: center; text-align: center;
} }
table.itemList td.productImage img {
table.showitem td.productImage img {
max-width: 100%; max-width: 100%;
max-height: 64px; max-height: 64px;
} }
table.itemList td.name {
table.showitem th {
font-size: 20px;
text-align:center;
}*/
table.showitem td.name {
padding: 0 10px; padding: 0 10px;
} }
table.itemList td.name span {
table.showitem td.name span {
display: block; display: block;
font-weight: bold; font-weight: bold;
} }
table.itemList td.name a {
table.showitem td.name a {
display: block; display: block;
font: 20px "Istok Web", inherit; font: 20px "Ubuntu", inherit;
text-decoration: none; text-decoration: none;
color: inherit;
font-weight: bold; font-weight: bold;
} }
table.itemListContainer {
table.showitem tbody tr:nth-child(even) td.name, width: 100%;
table.showitem tbody tr:nth-child(even) td.actions {
background-color: #ececec;
}
table.showitem td, table.showitem th {
vertical-align: middle;
}
table.showitem tr td {
padding-bottom: 10px;
} }
table.itemListContainer td, table.itemListContainer th {
table.showlists td, table.showlists th {
vertical-align: middle; vertical-align: middle;
} }
table.itemListContainer th {
table.showlists { font-size: 20px;
border: 0 none;
width:100%
} }
table.itemListContainer th[scope="row"] {
table.showlists th[scope="row"] {
width: 20px; width: 20px;
padding: 0;
margin: 0;
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg); -webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg); -ms-transform: rotate(270deg);
-o-transform: rotate(270deg); -o-transform: rotate(270deg);
transform: rotate(270deg); transform: rotate(270deg);
} }
table.itemListContainer > tbody > tr:first-child ~ tr > td {
a.buyButton { padding-top: 50px;
}
.singleItem {
width: 820px;
margin: 0 auto;
}
.singleItem .productImage, .singleItem .productMeta {
float: left;
width: 400px;
}
.singleItem .productImage {
text-align: center;
}
.singleItem .productImage img {
max-width: 80%;
}
.singleItem .productMeta {
margin-left: 20px;
}
.singleItem .actions {
padding-bottom: 5px;
}
.singleItem .actions a {
margin-top: 0;
}
.button {
display: block; display: block;
padding: 5px 10px; padding: 5px 10px;
margin: 10px 10px 15px 0; margin: 10px 10px 15px 0;
@ -463,8 +456,16 @@ a.buyButton {
border-radius: 6px; border-radius: 6px;
float: left; float: left;
z-index: 2; z-index: 2;
text-decoration: none; color: white;
background-color: #111111;
border: 0 none;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
/* 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;
background-image: -webkit-gradient(linear, left top, left bottom, from(#666666), to(#111111)); background-image: -webkit-gradient(linear, left top, left bottom, from(#666666), to(#111111));
background-image: -webkit-linear-gradient(top, #666666, #111111); background-image: -webkit-linear-gradient(top, #666666, #111111);
background-image: -moz-linear-gradient(top, #666666, #111111); background-image: -moz-linear-gradient(top, #666666, #111111);
@ -472,80 +473,66 @@ a.buyButton {
background-image: -o-linear-gradient(top, #666666, #111111); background-image: -o-linear-gradient(top, #666666, #111111);
background-image: linear-gradient(top, #666666, #111111); background-image: linear-gradient(top, #666666, #111111);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666', EndColorStr='#111111'); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666', EndColorStr='#111111');
-moz-box-shadow: 0 1px 3px 0 black; -moz-box-shadow: 0 1px 3px 0 black;
-webkit-box-shadow: 0 1px 3px 0 black; -webkit-box-shadow: 0 1px 3px 0 black;
box-shadow: 0 1px 3px 0 black; box-shadow: 0 1px 3px 0 black;
} }
.button.buy {
a.buyButton.includingPrice { -webkit-border-radius: 6px 6px 0 0;
border-bottom-right-radius: 0; -moz-border-radius: 6px 6px 0 0;
border-bottom-left-radius: 0; border-radius: 6px 6px 0 0;
} /* useful if you don't want a bg color from leaking outside the border: */
-moz-background-clip: padding;
.content a.buyButton:hover { -webkit-background-clip: padding-box;
background-image: -webkit-gradient(linear, left top, left bottom, from(#555555), to(#000000)); background-clip: padding-box;
background-image: -webkit-linear-gradient(top, #555555, #000000);
background-image: -moz-linear-gradient(top, #555555, #000000);
background-image: -ms-linear-gradient(top, #555555, #000000);
background-image: -o-linear-gradient(top, #555555, #000000);
background-image: linear-gradient(top, #555555, #000000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#555555', EndColorStr='#000000');
} }
.button.buy > span {
a.buyButton:active {
-moz-box-shadow: 0 1px 3px 0 black, 0 1px 3px 0 black inset;
-webkit-box-shadow: 0 1px 3px 0 black, 0 1px 3px 0 black inset;
box-shadow: 0 1px 3px 0 black, 0 1px 3px 0 black inset;
}
a.buyButton.includingDeposit > span {
background-image: url("img/payment_deposit.png");
min-width: 65px;
}
a.buyButton.onlyDeposit > span {
background-image: url("img/deposit.png");
}
a.buyButton > span {
display: block; display: block;
height: 100%; height: 100%;
min-width: 32px; min-width: 32px;
background: url("img/payment.png") no-repeat center center transparent; background: url("img/payment.png") no-repeat center center transparent;
} }
.button.buy > span > span {
.content a {
color: #3398CC;
text-decoration: none;
}
.content a:hover {
color: white;
background: #3398CC;
}
.content a.button {
display: block;
margin-top: 7px;
padding: 0 10px;
text-align: center;
}
a.buyButton > span > span {
position: absolute; position: absolute;
bottom: -15px; bottom: -15px;
left: 0; left: 0;
display: block; display: block;
width: 100%; width: 100%;
z-index: 1; z-index: 1;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
background-color: #3398cc; background-color: #3398cc;
color: white; color: white;
font-size: 10px;
line-height: 15px;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
/* 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;
-moz-box-shadow: 0 1px 3px 0 black, 0 1px 1px 0 black inset; -moz-box-shadow: 0 1px 3px 0 black, 0 1px 1px 0 black inset;
-webkit-box-shadow: 0 1px 3px 0 black, 0 1px 1px 0 black inset; -webkit-box-shadow: 0 1px 3px 0 black, 0 1px 1px 0 black inset;
box-shadow: 0 1px 3px 0 black, 0 1px 1px 0 black inset; box-shadow: 0 1px 3px 0 black, 0 1px 1px 0 black inset;
} }
.button.buy.onlyDeposit > span {
background-image: url("img/deposit.png");
}
.button.buy.inclDeposit > span {
background-image: url("img/payment_deposit.png");
min-width: 65px;
}
.button:hover {
background-color: #000000 !important;
background-image: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#000000));
background-image: -webkit-linear-gradient(top, #333333, #000000);
background-image: -moz-linear-gradient(top, #333333, #000000);
background-image: -ms-linear-gradient(top, #333333, #000000);
background-image: -o-linear-gradient(top, #333333, #000000);
background-image: linear-gradient(top, #333333, #000000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#333333', EndColorStr='#000000');
}
.button:active {
-moz-box-shadow: 0 1px 3px 0 black, 0 1px 3px 0 black inset;
-webkit-box-shadow: 0 1px 3px 0 black, 0 1px 3px 0 black inset;
box-shadow: 0 1px 3px 0 black, 0 1px 3px 0 black inset;
}

543
k4ever/media/css/style.less
Unescape View File

@ -0,0 +1,543 @@
/* IF IM NOT A .LESS FILE DO NOT EDIT ME, BUT EDIT THE LESS FILE INSTEAD :) */
/*
* k4ever less stylesheet
*
* @author Theresa Enghardt <theresa@freitagsrunde.org>
* @author Konrad Mohrfeldt <konrad.mohrfeldt@farbdev.org>
*/
/* these should be replaced by local ones. i’m to lazy. anyone?
some help: http://www.fontsquirrel.com/fontface/generator */
@import "http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700.css";
@import "http://fonts.googleapis.com/css?family=Ubuntu:400,700.css";
/* this is a css style reset. there’s much discussion if something like this
is helpful and appropriate. well... it’s here for now, so please don’t
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;
}
.content {
padding: 5px;
a {
color: @clrMediumBlue;
&:hover {
color: white;
background-color: @clrMediumBlue;
}
}
}
input {
padding: 2px 5px;
border: 1px solid #E5E5E5;
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;
> 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("img/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 {
color: white;
.vertical-linear-gradient(@clrLightBlue, @clrMediumBlue);
.box-shadow(0 0 5px @clrMediumGrey);
}
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("img/alt.png");
background-repeat: no-repeat;
background-position: 2px center;
}
.focus .buy.lock {
background-image: url("img/buy.png");
}
.focus .buy.lock.load,
.focus .buy.load {
background-image: url("img/load.gif");
}
.focus .buy.lock.success,
.focus .buy.success {
background-image: url("img/success.png");
}
.focus .buy.lock.failure,
.focus .buy.failure {
background-image: url("img/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;
.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;
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;
height: 32px;
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;
background: url("img/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("img/deposit.png");
}
&.inclDeposit > span {
background-image: url("img/payment_deposit.png");
min-width: 65px;
}
}
&: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");
}
}
Write Preview
Loading…
Cancel
Save