Skip to content

Instantly share code, notes, and snippets.

@shoowack
Created November 23, 2012 22:15
Show Gist options
  • Select an option

  • Save shoowack/4137538 to your computer and use it in GitHub Desktop.

Select an option

Save shoowack/4137538 to your computer and use it in GitHub Desktop.
Nova baza!!
/**
* Nova baza!!
*/
body {
margin: 0px;
padding: 0px;
background: url(http://dl.dropbox.com/u/3659486/Baza/img/back2.png);
background-size: cover;
}
a:link {color: none; text-decoration: none}
a:hover {text-decoration: underline}
a:visited {color: none; text-decoration: none}
#container {
-webkit-filter: drop-shadow(0px 3px 30px rgba(0,0,0,1));
-moz-filter: drop-shadow(0px 3px 30px rgba(0,0,0,1));
-ms-filter: drop-shadow(0px 3px 30px rgba(0,0,0,1));
-o-filter: drop-shadow(0px 3px 30px rgba(0,0,0,1));
filter: drop-shadow(0px 3px 30px rgba(0,0,0,1));
}
#izbornik {
position: relative;
width: 1970px;
padding: 0px;
list-style: none;
left: 1.3%;
top: 20px;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 110%;
line-height: 0%;
}
#izbornik a {
cursor: pointer;
display: inline-block;
padding: 30px 30px 30px 50px;
float: left;
}
.narudzba, .tjedniplan, .supervizije, .lekture, .arhiva, .avatar, .search {
box-shadow:
0px 1px 0px 0px rgba(255, 255, 255, 1) inset,
0px -100px 100px -110px rgba(0,0,0,.7) inset;
transition: all .3s ease;
text-shadow: 0px 1px 0px rgba(255, 255, 255,1);
}
.aktivni {
background-color: rgba(240, 240, 240, 1) !important;
}
.narudzba {
background:url(http://dl.dropbox.com/u/3659486/Baza/img/narudzbaon.png) no-repeat 17px 15px rgba(221,221,221,1);
border-top-left-radius: 3px;
}
.tjedniplan {
background:url(http://dl.dropbox.com/u/3659486/Baza/img/tjedniplan.png) no-repeat 22px 23px rgba(221,221,221,1);
}
.tjedniplan:hover {
background:url(http://dl.dropbox.com/u/3659486/Baza/img/tjedniplan.png) no-repeat 22px 23px rgba(230, 230, 230, 1);
}
.supervizije {
background:url(http://dl.dropbox.com/u/3659486/Baza/img/tjedniplan.png) no-repeat 22px 23px rgba(221,221,221,1);
}
.supervizije:hover {
background:url(http://dl.dropbox.com/u/3659486/Baza/img/tjedniplan.png) no-repeat 22px 23px rgba(230, 230, 230, 1);
}
.lekture {
background:url(http://dl.dropbox.com/u/3659486/Baza/img/tjedniplan.png) no-repeat 22px 23px rgba(221,221,221,1);
}
.lekture:hover {
background:url(http://dl.dropbox.com/u/3659486/Baza/img/tjedniplan.png) no-repeat 22px 23px rgba(230, 230, 230, 1);
}
.arhiva {
background:url(http://dl.dropbox.com/u/3659486/Baza/img/arhiva.png) no-repeat 20px 23px rgba(221,221,221,1);
}
.arhiva:hover {
background:url(http://dl.dropbox.com/u/3659486/Baza/img/arhiva.png) no-repeat 20px 23px rgba(230, 230, 230, 1);
}
.avatar {
background: rgba(221,221,221,1);
padding-left: 20px !important;
border-top-right-radius: 3px;
}
.avatar:hover {
background:rgba(230, 230, 230, 1);
}
.search {
background:url(http://dl.dropbox.com/u/3659486/Baza/img/arhiva.png) no-repeat 20px 23px rgba(221,221,221,1);
cursor: default !important;
}
#avatar {
background: url(https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-ash3/564928_10150773087885420_1835166314_n.jpg);
background-size: 30px 30px;
position: relative;
width: 30px;
height: 30px;
border-radius: 3px;
float: right;
margin: -15px -10px -15px 20px;
box-shadow:
0 0 0 1px rgba(0,0,0,.2),
0 2px 0 rgba(255,255,255,.5),
0 3px 10px -7px rgba(0,0,0,9) inset;
}
#s{
display: block;
margin: -13px -10px -13px -30px;
-webkit-appearance: none;
-moz-appearance: none;
padding: 2px 5px 2px 15px;
border-radius: 50px;
color: #000;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
height: 25px;
width: 500px;
border: none;
outline: none;
box-shadow:
0 0 0 1px rgba(0,0,0,.2),
0 2px 0 rgba(255,255,255,.5),
0 3px 10px -7px rgba(0,0,0,9) inset;
background: url(http://dl.dropbox.com/u/3659486/Baza/img/search.png) no-repeat 8px 6px #fff;
transition: all .5s ease;
}
#s:hover {
box-shadow:
0px 0px 10px 0px rgba(0, 120, 255, 1),
0 0 0 1px rgba(0,0,0,.2),
0 2px 0 rgba(255,255,255,.5),
0 3px 10px -7px rgba(0,0,0,9) inset;
}
#s::-webkit-input-placeholder {
color: #999;
}
#s:-moz-placeholder {
color: #999;
}
#s::-webkit-search-cancel-button {
-webkit-appearance: none;
height: 16px;
width: 16px;
background: url(http://dl.dropbox.com/u/3659486/Baza/img/cancel.png) no-repeat;
}
.tablica {
position: relative;
width: 98%;
top: 20px;
left: 1%;
background: white;
border-collapse:collapse;
border-radius: 3px;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 90%;
box-shadow:
0px 4px 0px -3px rgba(150,150,150,1),
0px 8px 0px -4px rgba(210,210,210,1),
0px 12px 0px -7px rgba(150,150,150,1),
0px 16px 0px -8px rgba(180,180,180,1);
}
.tablica thead th {border: none; text-align: center;}
.tablica th, td {
border-top: 1px solid #ccc;
text-align: center;
padding: 10px;
}
.tablica th {
text-align: left;
padding: 15px;
cursor: hand !important;
background: #eee;
}
.tablica tr:hover {
background: #eee;
}
.status {min-width:10px; max-width: 20px; width: 20px; border-top-left-radius:3px; border-right: 1px solid rgba(255,120,120,.2)}
.televizija {min-width:65px; max-width: 100px; width: 100px;}
.trajanje {min-width:15px; max-width: 50px; width: 50px;}
.kod {min-width:50px; max-width: 100px; width: 100px;}
.videoskriptaprijevodi {min-width:50px; max-width: 90px; width: 90px;}
.datumi {min-width:60px; max-width: 110px; width: 110px;}
.prevoditelj {min-width:155px; max-width: 210px; width: 210px;}
.telefon {min-width:70px; max-width: 110px; width: 110px;}
.opcije {min-width:95px; max-width: 140px; width: 140px; border-top-right-radius:3px;}
<body>
<div id="container">
<div id="izbornik">
<a class="narudzba aktivni">Narudžba</a>
<a class="tjedniplan">Tjedni plan</a>
<a class="supervizije">Supervizije</a>
<a class="lekture">Lekture</a>
<a class="arhiva">Arhiva</a>
<a class="search"><input type="search" id="s" placeholder="Traži..."></a>
<a class="avatar">Korisnik: Ivan<div id="avatar"></div></a>
</div>
<table class="tablica">
<thead>
<tr>
<th class="status"><img src="http://dl.dropbox.com/u/3659486/Baza/img/rainbow.png"></th>
<th>Naslov</th>
<th>Epizoda</th>
<th class="televizija">Televizija</th>
<th class="trajanje"><img src="http://dl.dropbox.com/u/3659486/Baza/img/saspicom.png"></th>
<th class="trajanje"><img src="http://dl.dropbox.com/u/3659486/Baza/img/bezspice.png"></th>
<th class="kod"><img src="http://dl.dropbox.com/u/3659486/Baza/img/kod.png"></th>
<th class="videoskriptaprijevodi"><img src="http://dl.dropbox.com/u/3659486/Baza/img/video.png"></th>
<th class="videoskriptaprijevodi"><img src="http://dl.dropbox.com/u/3659486/Baza/img/skripta.png"></th>
<th class="datumi">Isporuka</th>
<th class="datumi">TX Date</th>
<th class="datumi">Cro rok</th>
<th class="videoskriptaprijevodi">Prijevodi</th>
<th class="prevoditelj"><img src="http://dl.dropbox.com/u/3659486/Baza/img/prevoditelj.png"></th>
<th class="telefon"><img src="http://dl.dropbox.com/u/3659486/Baza/img/telefon.png"></th>
<th class="opcije"><img src="http://dl.dropbox.com/u/3659486/Baza/img/options.png"></th>
</tr>
</thead>
<tbody>
<tr>
<td class="status"><img src="http://dl.dropbox.com/u/3659486/Baza/img/blue.png"></td>
<td>Seinfeld S1</td>
<td>Episode 1</td>
<td><img src="http://dl.dropbox.com/u/3659486/Baza/img/ap.png"></td>
<td>22</td>
<td>30</td>
<td>473729D</td>
<td>
<img src="http://dl.dropbox.com/u/3659486/Baza/img/da.png">
<img src="http://dl.dropbox.com/u/3659486/Baza/img/da.png">
<img src="http://dl.dropbox.com/u/3659486/Baza/img/da.png">
</td>
<td><img src="http://dl.dropbox.com/u/3659486/Baza/img/ne.png"></td>
<td>02.12.2012</td>
<td>12.12.2012</td>
<td>02.12.2012</td>
<td><img src="http://dl.dropbox.com/u/3659486/Baza/img/da.png"></td>
<td>Odaberi CRO prevoditelja</td>
<td>098 123456</td>
<td>
<img src="http://dl.dropbox.com/u/3659486/Baza/img/download.png">
<img src="http://dl.dropbox.com/u/3659486/Baza/img/upload.png">
<img src="http://dl.dropbox.com/u/3659486/Baza/img/mail.png">
<img src="http://dl.dropbox.com/u/3659486/Baza/img/hitno.png">
<img src="http://dl.dropbox.com/u/3659486/Baza/img/komentar.png">
<img src="http://dl.dropbox.com/u/3659486/Baza/img/trash.png">
</td>
</tr>
<tr>
<td class="status"><img src="http://dl.dropbox.com/u/3659486/Baza/img/blue.png"></td>
<td>Seinfeld S1</td>
<td>Episode 2</td>
<td><img src="http://dl.dropbox.com/u/3659486/Baza/img/rtl.png"></td>
<td>22</td>
<td>30</td>
<td>473729D</td>
<td><img src="http://dl.dropbox.com/u/3659486/Baza/img/da.png"></td>
<td><img src="http://dl.dropbox.com/u/3659486/Baza/img/ne.png"></td>
<td>02.12.2012</td>
<td>12.12.2012</td>
<td>02.12.2012</td>
<td>
<img src="http://dl.dropbox.com/u/3659486/Baza/img/da.png">
<img src="http://dl.dropbox.com/u/3659486/Baza/img/ne.png">
<img src="http://dl.dropbox.com/u/3659486/Baza/img/ne.png">
</td>
<td>Odaberi CRO prevoditelja</td>
<td>098 234567</td>
<td>
<img src="http://dl.dropbox.com/u/3659486/Baza/img/download.png">
<img src="http://dl.dropbox.com/u/3659486/Baza/img/upload.png">
<img src="http://dl.dropbox.com/u/3659486/Baza/img/mail.png">
<img src="http://dl.dropbox.com/u/3659486/Baza/img/hitno.png">
<img src="http://dl.dropbox.com/u/3659486/Baza/img/komentar.png">
<img src="http://dl.dropbox.com/u/3659486/Baza/img/trash.png">
</td>
</tr>
</tbody>
</table>
</div>
</body>
// alert('Hello world!');
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment