debshots/app/assets/stylesheets/my.scss
Christoph Haas 637b4666ff Fixing shadows. SVG dummy images now get proper shadows.
Formerly shadows were shown around the square box of
the dummy images. But as we use images with rounded
corners shadows look terrible around the boxes. Now they
render properly.
2015-05-02 11:34:11 +02:00

327 lines
No EOL
4.6 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%;
}
img
{
filter: drop-shadow( 0px 0px 5px #888888 );
}
}
.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;
}
/* Description of a screenshot (e.g. the situation when the screenshot was taken) */
.imgcaption
{
text-align: center;
font-variant: italic;
}
/* Status of a screenshot (e.g. if it has to be moderated) */
.imgstatus
{
text-align: center;
font-style: italic;
color: #808080;
}
.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;
}