Skip to content

Instantly share code, notes, and snippets.

@darkwebdev
Created January 9, 2014 13:10
Show Gist options
  • Save darkwebdev/8333886 to your computer and use it in GitHub Desktop.
Save darkwebdev/8333886 to your computer and use it in GitHub Desktop.
CSS (generated from SCSS) from debug version of Kinofé client. All comments removed.
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
display: block;
}
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body,
figure {
margin: 0;
}
a:focus {
outline: thin dotted;
}
a:active,
a:hover {
outline: 0;
}
h1, h2, h3, h4 {
margin: 0;
font-weight: normal;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
img {
border: 0;
}
svg:not(:root) {
overflow: hidden;
}
button,
input,
select,
textarea {
font-family: inherit;
font-size: 100%;
margin: 0;
}
button,
input {
line-height: normal;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
button[disabled],
input[disabled] {
cursor: default;
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0;
}
input[type="search"] {
-webkit-appearance: textfield;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
textarea {
overflow: auto;
vertical-align: top;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ol, ul {
padding: 0;
list-style: none;
}
body {
overflow-y: scroll;
margin: 0;
font: 14px Arial, sans-serif;
color: #666666;
background: #fafafa url(../images/noise.png);
}
h2,
h3 {
margin: 0;
font-weight: bold;
}
h1 {
margin: 0 auto 0;
width: 83px;
height: 30px;
}
h2 {
margin-top: 2px;
text-align: center;
font-size: 8px;
letter-spacing: 1.6px;
text-indent: 1px;
}
h3 {
font-size: 16px;
color: #222222;
}
p,
ul.list li {
line-height: 20px;
}
.link {
cursor: pointer;
text-decoration: underline;
}
.main-header {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-top: 13px;
height: 61px;
border-bottom: 1px solid #dfe6e6;
}
.icon-sprite, .icon-disc, .icon-logo, .icon-settings, .icon-sticker, .icon-theater {
background: url('../images/icon-sfb581001bc.png') no-repeat;
}
.icon-disc {
background-position: 0 0;
}
.icon-logo {
background-position: 0 -54px;
}
.icon-settings {
background-position: 0 -93px;
}
.icon-sticker {
background-position: 0 -169px;
}
.icon-theater {
background-position: 0 -131px;
}
.img-replace {
display: block;
overflow: hidden;
white-space: nowrap;
text-indent: 100%;
}
.icon-settings {
position: absolute;
top: 17px;
left: 10px;
height: 30px;
width: 40px;
cursor: pointer;
}
.icon-theater {
position: absolute;
top: 17px;
right: 10px;
height: 30px;
width: 40px;
cursor: pointer;
}
.film-list {
margin: 0;
padding: 0;
list-style: none;
font-weight: bold;
}
.film-list._busy {
background: rgba(200, 200, 200, 0.2);
}
.film-list .film {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: block;
position: relative;
padding: 10px;
min-height: 124px;
border-bottom: 1px solid #dfe6e6;
color: #666666;
cursor: pointer;
}
.film-list .film:hover {
background: rgba(0, 0, 0, 0.05);
}
.film-list .film .seen {
position: absolute;
bottom: 10px;
right: 10px;
}
.film-list .film .info {
margin: 3px 0 0 94px;
}
.film-list .film .year {
display: block;
margin-top: 5px;
font-size: 12px;
}
.film-list .film .janre-list {
font-size: 8px;
margin-top: 8px;
}
.film-list .film .janre-list li {
display: inline-block;
margin: 0 4px 4px 0;
padding: 3px 6px 2px 7px;
text-transform: uppercase;
letter-spacing: 0.6px;
border: 1px solid #ff5a00;
border-color: rgba(255, 90, 0, 0.5);
border-radius: 3px;
cursor: pointer;
}
.film-list .film .janre-list li:hover {
background: rgba(255, 90, 0, 0.1);
}
.film-list .film .shelf {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100%;
text-decoration: none;
}
.film-list .film .shelf:before {
content: '';
position: absolute;
left: 16px;
top: 12px;
height: 89px;
width: 10px;
border: 1px solid #d5d5de;
border-color: rgba(0, 0, 0, 0.1);
}
.film-list .film .shelf:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
content: '';
position: absolute;
height: 5px;
width: 80px;
left: 12px;
top: 103px;
background: #fff;
background: white -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0.1)), color-stop(100%, rgba(0, 0, 0, 0.1)));
background: white -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1));
background: white -moz-linear-gradient(top, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1));
background: white -o-linear-gradient(top, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1));
background: white linear-gradient(top, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1));
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
border: 1px solid #d3d3d3;
border-color: rgba(0, 0, 0, 0.06);
border-radius: 1px;
}
.film-list .film .shelf img {
margin: 12px 27px;
}
.film-list .film .shelf .rating {
position: absolute;
left: 20px;
top: 20px;
width: 36px;
height: 20px;
line-height: 20px;
text-align: center;
font-size: 15px;
color: #fff;
}
.details {
background: #222222;
}
.details .back {
cursor: pointer;
}
.details .content {
margin: 20px;
color: #999999;
}
.details .details-img {
display: block;
margin: auto;
}
.details h2 {
margin: 1.5em 0;
font-size: 16px;
font-weight: bold;
color: #fff;
}
.details li {
margin-left: 1em;
list-style: initial;
}
.sidebar {
background: #222222;
}
.sidebar .content {
margin: 50px auto;
text-align: center;
}
.sidebar h2 {
font-size: 16px;
font-weight: bold;
color: #fff;
}
.sidebar .auth-list li {
line-height: 32px;
font-size: 16px;
color: #fff;
text-decoration: none;
cursor: pointer;
}
.panel {
display: none;
position: fixed;
overflow-y: auto;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment