debshots/app/assets/stylesheets/my.scss

312 lines
No EOL
4.3 KiB
SCSS

// -------------- debshots ---------------------------
$page-background: #f2f2f2;
$footer-background: #333333;
$footer-text-color: #b3b3b3;
body
{
background-color: $page-background;
}
#teaser
{
// Leave some space between topbar and teaser on the home page
padding-top: 20px;
h1
{
// Larger "We have screenshots!" teaser title
font-weight: 700;
}
}
.top-bar .name
{
// Display the site name in a larger font
font-size: 26px;
padding: 8px 5px 3px 0;
color: #babdb6;
// Extra space around the Linux distribution's logo
img
{
padding: 0 5px;
}
}
header
{
// Draw a colored line below the navigation topbar
border-bottom: 5px solid $debian_color;
}
// ------- Footer - format as table cell to allow vertical centering
/*@import "compass/layout/sticky-footer";*/
/*@include sticky-footer(40px, "#wholepage");*/
html, body {
height: 100%;
}
// Wrapper that makes the page 100% high so the start page looks entirely filled
#wholepage
{
height: 100%;
}
#footer
{
background-color: $footer-background;
display: table;
width: 100%;
p
{
display: table-cell;
padding: 0 20px;
color: $footer-text-color;
vertical-align: middle;
text-align: center;
font-size: 80%;
}
a
{
color: $footer-text-color;
font-weight: bolder;
}
}
// Leave some room after the topbar
#content
{
padding-top: 5px;
}
// Screenshot thumbnail image with name and description
.thumbnail
{
padding-top: 5px !important;
padding-bottom: 5px !important;
border-radius: 10px;
margin-bottom: 10px;
text-align: center;
line-height: 120%;
&:hover
{
background-color: #d0d0d0;
}
.pkgname
{
font-weight: 700;
}
.pkgdescription
{
font-size: 80%;
}
}
// Vertical icon bar in package view
#sidebar
{
text-align: center;
// Text over a group of icons
.caption
{
padding-bottom: 5px;
color: black;
}
// An icon
.item
{
padding-bottom: 10px;
}
// Leave space after the last icon in a group
.space
{
padding-bottom: 20px;
}
}
// List view
.row .listview
{
// Leave vertical space and draw a line between package rows
border-bottom: 2px solid #d0d0d0;
padding-bottom: 20px;
margin-bottom: 20px;
img.screenshot
{
width: 100%;
}
}
.row .gridview
{
img.screenshot
{
width: 100%;
}
}
.pkgname
{
font-size: 130%;
font-weight: 700;
padding-bottom: 5px;
line-height: 120%;
}
/*.pkgdetails
{
.description
{
font-size: 150%;
color: #808080;
padding-bottom: 10px;
}
.longdescription
{
font-size: 90%;
line-height: 120%;
padding-bottom: 5px;
}
.rating
{
padding-top: 5px;
vertical-align: bottom;
}
.commentcount
{
padding-left: 20px;
}
}
*/
.grid-thumbnail
{
height: 125px;
}
// Avoid painting links to detail packages in the primary color
a.black
{
color: black;
}
.gray
{
color: #808080;
}
.packagepage
{
h1
{
margin-bottom: 0;
}
.subtitle
{
font-size: 120%;
color: #808080;
}
.imgcaption
{
text-align: center;
}
.bigpanel
{
background-color: white;
border-radius: 10px;
padding: 1em 1em 0.1em 1em;
margin-bottom: 1em;
}
.comment
{
font-size: 90%;
.summary
{
font-weight: 700;
}
.author
{
text-align: right;
color: #808080;
font-style: italic;
}
}
form.comment
{
border: 2px solid #a0a0a0;
background-color: white;
border-radius: 10px;
padding: 10px;
margin-bottom: 10px;
.summary input,textarea
{
margin-bottom: 0;
}
// Hide most elements in a comment input form.
// They get shown once the summary field is typed into.
.content,.author,.submit
{
display: none;
}
}
}
.ratingbar
{
background-color: $progress-bar-color;
width: 10em;
display: inline-block;
padding: 2px;
text-align: left;
color: white;
text-transform: uppercase;
font-size: 0.8em;
font-weight: bolder;
.meter
{
background-color: $primary-color;
padding: 2px;
padding-left: 0.4em;
text-shadow: 0 0 2px black;
}
}
/* Properties of a screenshot - shown in details view */
.property-title
{
font-weight: bolder;
font-size: 120%;
color: #808080;
}
.property
{
margin-left: 2em;
margin-bottom: 0.5em;
}