debshots/app/assets/stylesheets/my_styles.scss

639 lines
12 KiB
SCSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

// $topbar-padding: 0;
// At which width the top navigation bar should be switched to
// mobile mode because otherwise it would wrap into two lines.
// $topbar-breakpoint: 800px;
// $topbar-media-query: "only screen and (min-width: #{$topbar-breakpoint})";
// Use fonts from out own site. Do not load from Google for privacy reasons.
@font-face {
font-family: 'Droid Sans';
font-style: normal;
font-weight: 400;
src: local('Droid Sans'), local('DroidSans'), url(/fonts/DroidSans.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
@font-face {
font-family: 'Droid Sans';
font-style: normal;
font-weight: 700;
src: local('Droid Sans Bold'), local('DroidSans-Bold'), url(/fonts/DroidSans-Bold.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
// $button-tny: rem-calc(4);
// $button-font-tny: rem-calc(15);
// Make the background of progress bars use a light version of the primary color
// $progress-bar-color: tint($primary-color, 80);
// $page-background: #f2f2f2;
// $footer-background: #333333;
// $footer-text-color: #b3b3b3;
// $menu-item-color-active: $white;
// $menu-item-background-active: get-color(primary);
// $menu-icon-spacing: 0.25rem;
// $menu-item-background-hover: $light-gray;
// $menu-item-background-active: $primary-color;
// header
// {
// // background-color: $light-gray;
// // background-color: #2e3436;
// }
// body
// {
// // background-color: $page-background;
// }
#teaser
{
// Leave some space between topbar and teaser on the home page
padding-top: 20px;
}
// Menu text not bold
.menu .menu-text {
font-weight: 100 !important;
font-size: 1.1rem;
}
h1, h2, h3
{
color: #8a8a8a;
word-break: break-word;
overflow-wrap: anywhere;
}
// .top-bar-left
// {
// .menu .menu-text
// {
// // Display the site name in a larger font
// font-size: 1.2rem;
// padding: 10px 5px 3px 0;
// color: $dark-gray;
// font-weight: normal;
// }
// // Extra space around the Linux distribution's logo
// img
// {
// padding: 5px;
// }
// }
// Make thumbnails equally high
div.thumb-height
{
min-height: 120px;
}
// Animate the huge logo on the home page
.uploadbutton {
animation-name: pump;
animation-duration: 10s;
animation-delay: 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-out;
// animation-direction: alternate;
}
@keyframes pump {
0% {
transform: scale(1,1);
}
5% {
transform: scale(1.2,1.2);
}
10% {
transform: scale(1,1);
}
}
// ----------------------------------
// .top-bar-right .menu li a
// {
// padding-top: 1.3rem;
// padding-bottom: 1.3rem;
// }
.top-bar
{
// Draw a colored line below the navigation topbar
// border-bottom: 5px solid black;
margin-bottom: 0.5rem;
color: #8a8a8a;
a
{
color: #8a8a8a;
}
a.active
{
color: #fefefe;
}
}
// ------- 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: 5px 20px;
// color: $footer-text-color;
// vertical-align: middle;
// text-align: center;
// font-size: 100%;
// }
// a
// {
// color: $footer-text-color;
// font-weight: bolder;
// }
// }
// Leave some room after the topbar
// #content
// {
// padding-top: 5px;
// }
// .grid-thumbnails .column
// {
// border-radius: 10px;
// padding: 5px 5px 50px 5px;
// text-align: center;
// }
// 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: 1px solid rgba(0,0,0, 0.2);
// padding-bottom: 20px;
// margin-bottom: 20px;
// img.screenshot
// {
// width: 100%;
// }
// img
// {
// // box-shadow: 0px 0px 5px #000000;
// box-shadow: 0 0 6px -1px rgba(0,0,0, 1);
// }
// }
// .fancybox
// {
// img
// {
// // box-shadow: 0px 0px 5px #000000;
// box-shadow: 0 0 6px -1px rgba(0,0,0, 1);
// }
// }
.pkgname
{
font-size: 130%;
font-weight: 700;
padding-bottom: 5px;
line-height: 120%;
/*white-space: nowrap; -> can overflow the flex grid min-width:0 should fix it but I failed to use it properly */
overflow: hidden;
text-overflow: ellipsis;
}
.grid-thumbnail
{
// Pretend that all thumbnails are 120 pixels high to align the captions properly
height: 260px;
}
// Avoid painting links to detail packages in the primary color
a.black
{
color: black;
}
.gray
{
color: #808080;
}
.bigpanel
{
background-color: #e6e6e6;
border-radius: 10px;
padding: 1em 1em 0.1em 1em;
margin-bottom: 1em;
}
.subtitle
{
font-size: 120%;
color: #808080;
}
/* Limit the height of the long description in list view not very elegant though */
.listview.longdescription
{
max-height: 6em;
overflow: hidden;
}
.packagepage
{
h1
{
// margin-bottom: 0;
// font-size: 200%;
// font-weight: normal;
margin: 0 0 0 0;
}
h2
{
// font-size: 150%;
font-weight: normal;
margin: 0 0 0.5rem 0;
color: #808080;
}
/* Description of a screenshot (e.g. the situation when the screenshot was taken) */
.imgcaption
{
text-align: center;
display: inline-block;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Status of a screenshot (e.g. if it has to be moderated) */
.imgstatus
{
text-align: center;
font-style: italic;
color: #808080;
}
.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;
}
}
.listview
{
margin-bottom: 2rem;
// .cell
// {
// padding-right: 1rem;
// }
}
}
.moderate-bar
{
background-color: #ffd0d0;
}
/* 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;
}
.description-verbatim-lines
{
line-height: 120%;
}
/* Hide the file upload button to just show the styleable label */
/* display: none will not work - this is the workaround */
.hidden-inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
.inputfile + label {
cursor: pointer; /* "hand" cursor */
}
/* Foundation sets file buttons to 100% width. Fix that */
// [type='file'] {
// width: inherit !important;
// }
// .top-bar-title a {
// font-size: 1.8rem;
// font-weight: bold;
// line-height: 1;
// }
// .button {
// // box-shadow: 0px 0px 5px #000000;
// box-shadow: 0 0 6px -1px rgba(0,0,0, 1);
// border-radius: 10px !important;
// }
// Simple animation for FontAwesome icons in callouts at the top.
/*
.fa-wobble {
animation-name: fa-wobble;
animation-duration: 0.5s;
animation-direction: alternate;
animation-iteration-count: infinite;
}
@keyframes fa-wobble {
0% { opacity: 0.2; }
50% { opacity: 0.8; }
100% { opacity: 1; }
}
*/
// .menu .menu-text {
// font-size: 2rem;
// font-weight: 100;
// }
// Nicer callouts
// https://foundation.zurb.com/building-blocks/blocks/alert-callout-subtle.html
// $alert-callout-subtle-border-left-width: rem-calc(5);
// $alert-callout-subtle-radius: 0.6rem;
// .alert-callout-subtle {
// width: 100%;
// background: $light-gray;
// color: $dark-gray;
// border: 0;
// border-left: $alert-callout-subtle-border-left-width solid $dark-gray;
// box-shadow: 0 5px 8px -6px rgba(0,0,0, 0.2);
// &.success {
// background: $light-gray;
// color: $dark-gray;
// border-left: $alert-callout-subtle-border-left-width solid $success-color;
// }
// &.alert {
// background: $light-gray;
// color: $dark-gray;
// border-left: $alert-callout-subtle-border-left-width solid $alert-color;
// }
// &.warning {
// background: $light-gray;
// color: $dark-gray;
// border-left: $alert-callout-subtle-border-left-width solid $warning-color;
// }
// &.primary {
// background: $light-gray;
// color: $dark-gray;
// border-left: $alert-callout-subtle-border-left-width solid $primary-color;
// }
// .close-button {
// font-size: 2rem;
// @include vertical-center;
// }
// &.radius {
// border-radius: $alert-callout-subtle-radius;
// }
// }
.pkgdescription
{
margin-bottom: 3rem;
}
/* Display a looking glass / zoom icon on image if they can be enlarged using FancyBox */
.image-with-zoom-icon {
position: relative;
}
.image-with-zoom-icon img {
display: block;
margin: auto;
height: auto;
}
@keyframes image-with-zoom-icon-animation {
from {opacity: 0}
to {opacity: 0.3}
}
.image-with-zoom-icon .magnifying-glass-icon {
position: absolute;
top: 50%;
left: 50%;
padding: 20px;
transform: translate(-50%, -50%);
background: rgba(0,0,0,0.7);
text-align: center;
color: #fff;
text-align: center;
font-size: 200%;
line-height: 1;
border-radius: 50%;
border: 1px solid #fff;
animation-name: image-with-zoom-icon-animation;
animation-duration: 1s;
animation-delay: 4s;
animation-fill-mode: both;
}
/* Grid view */
.pkgcard {
.image {
height: 260px;
// width: 100%;
background: #e0e0e0;
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
// display: table-cell;
// vertical-align: middle;
margin-left: auto;
margin-right: auto;
}
.text {
padding: 5px;
text-align: center;
}
.pkgname {
font-size: 120%;
padding: 10px;
// enforce breaking long words
word-break: break-word;
overflow-wrap: anywhere;
}
// width: 100%;
margin-bottom: 20px;
display: table;
background: #ffffff;
border: 1px solid #e0e0e0;
box-shadow: 0px 0px 5px 2px rgba(189,189,189,0.5);
padding: 5px;
// Center this card in the box
margin-left: auto;
margin-right: auto;
}
.pkgcard.unapproved {
// https://css-tricks.com/stripes-css/
background: repeating-linear-gradient(
45deg,
#ffffff,
#ffffff 5px,
#f0f0f0 5px,
#f0f0f0 10px
);
}
// Highlight a certain screenshot if ?highlight=… is given
.pkgcard.highlight {
border: 5px solid red;
}
.pkgcard.hidden {
background-color: gray;
}
.button {
box-shadow: 0.1rem 0.1rem 0.2rem 0 rgba(0, 0, 0, 0.3);
}
.button, span.label {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.label.adminlabel.public { background-color: green !important};
.label.adminlabel.hidden { background-color: blue !important};
.label.adminlabel.unapproved { background-color: orange !important};
.gravatar {
border-radius: 50%;
width: 120px;
}
.icon {
width: 1.5em;
height: 1.5em;
}