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.
327 lines
No EOL
4.6 KiB
SCSS
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;
|
|
} |