⌈⌋ branch:  freshcode


Artifact Content

  • File freshcode.css — part of check-in [9339ac3384] at 2014-11-19 22:04:15 on branch trunk — Beta stage, declare version 0.7.5. (user: mario

Artifact fb82c841ff3bf7bcf614eedadf62159cdb9c859d:


/**
 * api: css
 * type: stylesheet
 * title: freshcode.club layout+style
 * description: Simulates the late freecode.com layout and looks; well mostly.
 * version: 0.7.5
 *
 * Centered two-pane layout. The #main section is usually 33% of the screen width,
 * while the #sidebar floats at the right. They're repositioned only using padding:
 * to the outer html,body{}.
 *
 */


/**
 * General HTML rendering presets.
 *
 */
html, body {
    padding: 0;
    margin: 0;
    background: #fff;
    font-family: Verdana, Arial;
    font-size: 11pt;
}
a {
    text-decoration: none;
}
em {
    color: #723;
}
img {
    vertical-align: middle;
    border: 0;
}
h2 { font-size: 13pt; }
h3 { font-size: 12pt; }
h4 { font-size: 11.5pt; }
h5 { font-size: 11pt; }
a[href=""] {
    opacity: 0.20;
}
input, textarea, select {
    font-size: 107%;
}
code, var, kbd {
    background: linear-gradient(90deg,#fafafa,#fafaff);
    box-shadow: 0 0 3px 2px #ccf;
    border-radius: 3px;
    margin: 1px;
}
var { box-shadow: 0 0 3px 2px #fdd; }
kbd { box-shadow: 0 0 3px 2px #dfd; }

table {}
tr, th, td {
   align: left;
   vertical-align: top;
}

/* presentational shortcuts */
.grey { color: grey; }
.black { color: black; }
.green { color: green; }
.blue { color: blue; }
.red { color: red; }

/* HTML5 audio element */
audio {
   display: inline;
   width: 8pt;
   height: 10pt;
   content: "♫";
   animation: blink 3s linear infinite;
   color: #77f;
   font-weight: 900;
   background: #dcdcfc;
   box-shadow: 0 0 5px 3px #dcdcfc;
   padding: 1px 4px;
   margin-left: 5pt;
}
@keyframes blink {
  to { color: #119; }
}


/**
 * Page header, info bar and logo box
 *
 */
#topbar {
    background: #555599;
    padding: 3pt 150pt;
    color: #fff;
}
#topbar a {  color: #fec;  }
#topbar a:hover {  color: #fc7;  }

#logo {
    padding: 10pt 150pt;
    height: 95pt;
    border-bottom: 2.5pt solid #bbb;
    background: #dddedf;
    background: linear-gradient(to bottom, #e5e6e9 0%, #dddedf 100%);
}
#logo img {
    padding: 0px 10px;
}
#logo .empty-box {
    height: 100px;
    margin: 5px;
    float: right;
    min-width: 50%;
    width: 60%;
    max-width: 70%;
    background: #fdfdfd;
    border: 1pt solid #777;
}
#logo #stats {
    display: inline-block;
    font-size: 70%;
    float: right;
    width: 20%;
    color: #999;
}
#logo #stats li {
    list-style: none;
    text-align: right;
}
#logo #stats li var {
    box-shadow: 0 0 3px 2px #f3f3f3;
    background: #e7e7e7;
}


/**
 * Main action link box, hovering halfway over header box.
 *
 */
#tools {
    margin: 0 150pt;
    padding: 3pt 5pt 2pt 5pt;
    border: 1.75pt solid #bbb;
    border-top: 1pt solid #ccc;
    border-radius: 5pt;
    background: #e5e7e9;
    background: linear-gradient(to bottom, #ffffff, #fdfefe, #f5f7f9, #eaecee, #e5e7e9, #e1e3e5, #d0d1d2);
    position: relative;
    top: -14pt;
    font-size: 95%;
}
.absolute {
    position: absolute;
}
#tools a {
    color: #777;
    margin: 0 1pt;
    padding: 2pt 8pt;
    border-radius: 4pt;
}
#tools a.submit {
    background: #79d;
    background: linear-gradient(145deg,#e5e5ef,#d1d3df);
    color: #111;
}
#tools a:hover {
    color: #fff;
    background: #346;
}
#tools .submenu:hover {
    background: #D3D7DE;
    border-radius: 5pt;
}
#tools .submenu a:first-child {
    padding-right: 3pt;
    margin-right: 0;
}
#tools .submenu a:nth-child(2) {
    padding-left: 3pt;
    margin-left: 0;
}
#tools #search_q {
    display: inline;
    border-radius: 4pt;
    padding: 1pt;
}
#tools #search_q input {
    border: 1px solid #999;
    background: #eee;
    height: 11pt;
    border-radius: 3pt;
    margin: 1pt;
}
#tools #search_q:hover {
    background: #D3D7DE;
}
#tools #search_q:hover a {
    color: #eee;
}
#tools .rightmenu {
    float: right;
}
#tools .meta {
    background: linear-gradient(90deg, #bbb 0%, #ccc 17%, #fff 22%, #fff 80%, #ddd 100%);
    padding: 1.5pt 8pt 1.5pt 10pt;
    opacity: 0.9;
}
#tools .meta:hover {
    background: linear-gradient(90deg, #125 0%, #234 17%, #347 22%, #458 80%, #9af 100%);
    padding: 2pt 8pt 2pt 10pt;
    opacity: 1.0;
}

/**
 * Sidebar floats right to #main, usually just a fifth of its width.
 *
 */
#sidebar {
    float: right;
    width: 15%;
    margin: 25pt 150pt 25pt 25pt;
    min-width: 175pt;
    min-height: 400pt;
    background: #fefdfd;
}
#sidebar.absolute-float {
    position: absolute;
    margin: 25pt 150pt 25pt 68%;
}
#sidebar section {
    border: 1.5pt solid #ccc;
    border-radius: 5.75pt;
    background: #eee linear-gradient(#fcfcfc, #fafafa, #f7f7f7, #f2f2f2, #eeeeee, #dddddd);
    padding: 3pt;
    margin-bottom: 10pt;
}
#sidebar section h5 {
    margin: 1pt;
    border-bottom: 1px solid #ddd;
}
#sidebar section a h5 {
    color: black;
}
#sidebar section.article-links a {
    margin: 2pt;
    padding: 1pt;
    font-size: 72%;
    color: #448;
    display: block;
    background: linear-gradient(#f7f7f7 40%, #eee 70%, #ddd 100%);
}
#sidebar section.article-links.feed-fossies a {
    font-size: 85%;
}
#sidebar section.article-links a small {
    font-size: 65%;
    color: grey;
}
#sidebar section.article-links.trimmed a {
    height: 1.3em;
    overflow: hidden;
}
#sidebar.community-web {
    font-size: 90%;
}
#sidebar.community-web li {
    margin-left: 5pt;
    list-style: none;
}
#sidebar.community-web li:before {
    content: "→";
    color: #aaa;
}
#sidebar .submitter .gravatar {
    margin: 2pt 5pt 1pt 2pt;
}

/**
 * Main content area (project listings, frontpage, articles, etc.)
 *
 */
#main {
    margin: 20pt 150pt;
    width: 50%;
    min-height: 700pt;
}

#main h2, #main h3, #main h4 {
    background: #ddd;
    background: linear-gradient(#f3f3f3,#f0f0f0,#eee,#e7e7e7,#d3d3d3);
    border-radius: 2pt;
    padding: 3.5pt 5pt 1.5pt 5pt;
    margin-top: 25pt;
}
#main label, #sidebar label {
    display: block;
    margin: 10pt 0;
    font-weight: 700;
}
#main label input, #sidebar label input, #main label textarea {
    display: block;
    font-weight: 400;
}
#main label input[type=radio] {
    display: inline;
}
#main label small, #sidebar label small {
    display: block;
    font-weight: 200;
    font-size: 85%;
    color: #777;
}
#main label.inline {  font-weight: 200; margin: 4pt; }
#main label.inline input {  display: inline;  }

.action {
    color: #697;
    border-bottom: 1px dashed #5d7;
}

/* Moderator/Admin notes atop the submit form */
.editor-note {
    display: block;
    width: 70%;
    margin: 9pt;
    background: #f3e7d0;
    padding: 5pt;
}


/**
 * Login box etc.
 *
 */
#main .box {
    margin: 20pt;
    padding: 50pt;
    border-radius: 5pt;
    border: 3pt solid #357;
    background: #7ae;
    background: linear-gradient(145deg,#7ae,#39d);
}
#main .box input {
    border-radius: 5pt;
    border: 1.75pt solid #579;
    padding: 3pt;
    margin: 3pt;
    background: #f7faff;
}
#main .login.box .service-logins {
    padding-top: 10pt;
    float: right;
    color: #ccc;
    font-size: 85%;
}
#main .login.box .service-logins a {
    color: #dde;
}
#main .login.box #login_url {
    background: #f7faff;
    background: linear-gradient(99deg, #888 0%, #a0a0a0 1%, #fc7 3%, #bbb 5%, #fff 8%);
    padding-left: 33px;
}


/**
 * Project listing on frontpage and /projects/xyz
 *
 */
#main .project {
    margin: 5pt 0 20pt 0;
}
#main .project h3 {
    white-space: nowrap;
    margin: 1pt 1pt 3pt 1pt;
}
#main .project h3 a {
    color: #000;
    display: inline-block;
    max-width: 400pt;
    overflow: hidden;
    text-overflow: ellipsis;
}
#main .project h3 a:hover, #main .project h3 a:hover .version  {
    color: #237;
}
#main .project .version {
    font-style: normal;
    font-weight: 200;
}
#main .project .links {
    float: right;
}
#main .project .links a[href=""] {
    opacity: 0.15;
}
#main .project .published_date {
    font-weight: 200;
    font-size: 65%;
    color: #777;
    position: relative; top: -3.5pt;
}
#main .project img.preview {
    padding: 3px;
    border: 1px solid #eee;
    box-shadow: 2px 2px 7px 0px #ccc;
    margin: 3pt;
}
#main .project .description {
    margin-top: 5pt;
    padding-bottom: 5pt;
    border-bottom: 1px solid #ccc;
    margin-bottom: 4pt;
    font-size: 95%;
    color: #222;
}
#main .release-notes {
    margin: 4.5pt 0 1pt 0;
    font-size: 90%;
    color: #444;
    padding-left: 30pt;
    background: url("img/changes.png") no-repeat 15px 3px;
}
#main .release-notes b {
    font-size: 90%;
    color: #555;
}
#main .project .tags {
    margin: 4.5pt 0 2pt 0;
}
#main .project .tags a {
    font-size: 75%;
    color: #222;
    background: #eee linear-gradient(to bottom,#ddd,#eee);
    border: 1px solid #fff;
    border-left: 1px dotted #eee;
    padding: 2px;
}
#main .project .tags a.license {
    background: #e9e3d0 linear-gradient(to bottom,#e3e0c7,#e9e3d0);
}
#main .project .trimmed {
    max-height: 5.55em;
    overflow: hidden;
}
#main .project .trimmed div {
    box-shadow: inset 0 5pt 5pt 0px #ffeecc;
    height: 5.55em;
    overflow: hidden;
}
#main .project.sponsored {
     /*
        No, it's not really sponsored. No such thing ;)
        Experimental style for subtle project / language categorization.
     */
    box-shadow: -30px 0 30px 5px #e7e9f7;
    background: linear-gradient(90deg,#e7e9f7,#fff);
}
#main .project.sponsored img.preview {
    width: 120px;
    height: 90px;
}
#main .project.sponsored h3 {
    background: linear-gradient(#ececf3,#f0f0f3,#eeeef3,#e7e7f0,#d3d3e0);
}


/**
 * Shortened view on search/
 *
 */
#main .project.search {
    clear: both;
    margin-bottom: 15pt;
}
#main .project.search h3 {
    display: inline;
    margin: 2pt;
    padding: 2pt;
    font-size: 95%;
}
#main .project.search img {
    border: 0;
    box-shadow: none;
    margin: 0 2pt 3pt 0;
}
#main .project.search small.description {
    line-height: 80%;
}

/**
 * Variation for /projects/xyz detail view.
 */
#main .project .long-tags th {
    border: 1px solid #ddd;
    background: #eee;
    padding: 1pt 12pt;
    border-radius: 4pt;
    font-size: 80%;
    text-align: right;
}
#main .project .long-tags {
    border-spacing: 5pt;
}
#main .project .long-tags a {
    padding: 2pt 5pt;
}
#main .project .long-links a, #sidebar section .long-links {
    border: 1px solid #79f;
    background: #47d;
    padding: 2pt 8pt;
    border-radius: 4pt;
    margin-right: 15pt;
    font-size: 115%;
    color: #fff;
}
#main .project .long-links a:hover {
    text-shadow: 0px 0px 5px #fff;
    color: #eef;
}

/**
 * List of releases below /projects/xyz
 */
#main .release-list div.release-entry {
    margin-bottom: 15pt;
}
#main .release-list .version, #main .release-list .published_date {
    background: #57b;
    padding: 1pt 8pt;
    border-radius: 5pt 0 0 5pt;
    color: #fff;
    font-size: 80%;
}
#main .release-list .published_date {
    background: #666;
    border-radius: 0 5pt 5pt 0;
}
#main .release-list .release-notes {
    display: block;
}


/**
 * Image gallery in /links to other FLOSS directories.
 *
 */
#main .links-entry {
    display: inline-block;
    width: 200px;
    min-height: 250px;
    margin: 10pt;
    float: left;
}
#main .links-entry:nth-child(3n) {
    clear: both;
}
#main .links-entry img {
    margin-bottom: 7pt;
    border: 1px solid #f3f3f3;
    box-shadow: 3px 3px 7px #888;
}
#main .links-entry a:hover img {
    border-color: 1px solid #f9f7f3;
    box-shadow: 2px 2px 5px #777;
}
#main .links-entry a:focus img {
    border-color: 1px solid #ecb;
    position: relative; top: 1px; left: 1px;
    box-shadow: 2px 2px 4px #743;
}


/**
 * Colors and block looks for social media share buttons
 * (per project-homepage and also in freshcode-footer)
 *
 */
.social-share-links a { display: inline-block; opacity: 0.3; border-radius: 4px; padding: 3px; border: 1px solid #ddd; color: #fff !important; box-shadow: 2px 2px 5px 0px #888;}
.social-share-links a:hover { opacity: 1.0; }
.social-share-links a[title="google+"] { background: #DD4B39; font-weight: 100; }
.social-share-links a[title="facebook"] { background: #3B5998; font-weight: 700; }
.social-share-links a[title="reddit"] { background: #C0D7DF; color: #444 !important; }
.social-share-links a[title="twitter"] { background: #55ACEE;  }
.social-share-links a[title="linkedin"] { background: #0e76a8; font-weight: 700; }
.social-share-links a[title="stumbleupon"] { background: #f74425;  }
.social-share-links a[title="delicious"] { background: #557CDE;  }
.social-share-count {
    font-style: normal;
    font-weight: 300;
    font-size: 85%;
    border: 1px solid #eee;
    box-shadow: #999 0px 0px 4px;
    background: linear-gradient(45deg, #fff, #f7f7f7);
    border-radius: 2pt;
    padding: 1pt;
}
.social-share-count:before {
    content: "★";
    color: #779;
    font-size: 150%;
    position: relative;
    top: 1pt;
}

/* */
.pagination-links {
    margin-top: 35pt;
    border: 1px solid #e7e7e7;
    background: #f0f0f0;
    text-align: center;
    padding: 1pt;
}
.pagination-links a {
    background: #d9d9d9;
    border-radius: 4pt;
    padding: 0pt 2pt;
    margin: 0pt 7pt;
    color: #333;
    font-size: 80%;
}
.pagination-links a.current {
    background: #999;
}



/**
 * Submit form: trove select list (<ul> instead of <select>
 *
 */
#trove_tags {
    margin: 0; padding: 0;
    display: inline-block;
    position: relative;
    top: -70px;
    width: 175px;
    height: 170px;
    overflow-y: scroll;
    overflow-x: hidden;
    border: 1px solid #ccc;
    font-size: 85%;
}
#trove_tags.pick-tags {
    width: 220px;
    height: 2250px;
    top: 0px;
    border: none;
    font-size: 92%;
}
#trove_tags span {
    display: block;
    margin: 0; padding: 0;
    padding-left: 10px;
    font-weight: 200;
}
#trove_tags > span {
    padding: 0;
}
#trove_tags span > span {
    background: url("img/dotleader.png") no-repeat;
}
#trove_tags span.optgroup b {
    font-weight: 900;
    display: block;
}
#trove_tags span > span.option:hover, #trove_tags span.optgroup > b:hover {
    background: #ccf;
}
#trove_tags .option.selected, #tag_cloud a.selected {
    background: #fba !important;
}

#trove_tags .optgroup[data-tag='topic']   { background: #f3f4f7; }
#trove_tags .optgroup[data-tag='topic'] * { background: #f7f7f9; }
#trove_tags .optgroup[data-tag='programming-language']   { background: #d7dcf0; }
#trove_tags .optgroup[data-tag='programming-language'] * { background: #ecf0fa; }
#trove_tags .optgroup[data-tag='environment']   { background: #f3f0e0; }
#trove_tags .optgroup[data-tag='environment'] * { background: #f7f5eb; }
#trove_tags .optgroup[data-tag='framework']   { background: #f0e0f0; }
#trove_tags .optgroup[data-tag='framework'] * { background: #f7e7f7; }
#trove_tags .optgroup[data-tag='operating-system']   { background: #ffe5e0; }
#trove_tags .optgroup[data-tag='operating-system'] * { background: #fce9e7; }
#trove_tags .optgroup[data-tag='audience']   { background: #e7f7ec; }
#trove_tags .optgroup[data-tag='audience'] * { background: #f0fff3; }




/**
 * Specific pages
 *
 */

/* /names */
.project-name-columns {
   column-count: 6;
   column-gap: 20pt;
   column-break-inside: avoid;
}
.project-name-columns a {
   display: inline-block;
   margin: 11pt;
   white-space: nowrap;
   color: #337;
   font-weight: 700;
   text-align: center;
}
.project-name-columns a img {
   display: block;
   box-shadow: 1px 1px 2px 1px #eee;
}

/* RecentChanges */
table.rc {
   width: 100%;
   margin-top: 5pt;
}
.rc th {
   background: #ddd;
   font-weight: 500;
   padding: 3pt;
   text-align: left;
   border-radius: 5pt 5pt 0 0;
   box-shadow: 0px -2px 3px 1px #eee;
}
.rc td {
   background: #f7f9fc;
}
.rc th a {
   color: #22c;
}
.rc th:first-child {
   font-weight: 600;
}
.rc th:first-child,
.rc td:first-child {
   width: 15%;
}
.rc ins {
   color: #151;
   text-decoration: none;
   border-bottom: 1px dashed green;
   background: #efe;
}
.rc del {
   color: #521;
   background: #fee;
}
.rc.admin ins {
   border: none;
   background: #f1fff3;
}
.rc.admin del {
   color: #210;
   background: #fff5f3;
   text-decoration: none;
}
.rc .funcs {
   float: right;
}
.rc .funcs a {
   font-size: 60%;
   color: #99b;
   background: #e3e3e3;
   border: 1px solid #eee;
   border-radius: 3pt;
   padding: 1pt 3pt;
}


/**
 * Page footer
 *
 */
#spotlight {
    margin-top: 50pt;
    border-top: 3pt solid #B7C0BB;
    background: #E7E7D0;
    padding: 10pt 150pt;
    color: #111;
    height: 120pt;
}
#spotlight a {
    display: inline-block;
    float: left;
    margin: 10pt;
    padding: 7pt;
    width: 200pt;
    height: 85pt;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 10pt;
    background: linear-gradient(to bottom, #F3F3DF, #E7E7D0 70%);
}
#spotlight a b {
    color: #111;
    font-weight: 700;
    display: inline-block;
    max-width: 120px;
    max-height: 15pt;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#spotlight a img {
    float: left;
    margin-right: 5pt;
    border-radius: 5pt;
}
#spotlight a small {
    color: #444;
}

#bottom {
    border-top: 3pt solid #5F677F;
    background: #444477;
    padding: 10pt 150pt;
    color: #fff;
    height: 50pt;
}
#bottom a { color: #fc9; }