[extensions-web] css: Merge sweettooth.css and template.css

[Jasper St. Pierre <jstpierre src gnome org>]

commit 5aecc59d008d9cc99d8788bd11a712e7dd4ea18c
Author: Jasper St. Pierre <jstpierre mecheye net>
Date:   Wed Sep 26 03:09:27 2012 -0300

    css: Merge sweettooth.css and template.css
    
    These two have been competing with each other for a little while.
    The original intention was that template.css was the template for
    any gnome-branded website, and sweettooth.css contained the
    sweettooth-specific styles. As time went on, this separation became
    less and less clear, and I started modifying the template.css file.
    
    Just merge the two, now.

 sweettooth/static/css/sweettooth.css |  514 +++++++++++++++++++++++++++++-----
 sweettooth/static/css/template.css   |  361 ------------------------
 2 files changed, 450 insertions(+), 425 deletions(-)
---
diff --git a/sweettooth/static/css/sweettooth.css b/sweettooth/static/css/sweettooth.css
index af9c479..0f0fcc6 100644
--- a/sweettooth/static/css/sweettooth.css
+++ b/sweettooth/static/css/sweettooth.css
@@ -1,8 +1,371 @@
 
- import url("template.css");
+ import url("reset.css");
+ import url("text.css");
 @import url("switch.css");
 @import url("jquery.rating.css");
 
+
+/* Base information */
+/* ========================================================================== */
+
+html {
+    background: #fff url(../images/html-bg.png) 0 10px repeat-x;
+}
+
+a {
+    color: #204a87;
+}
+a:hover {
+    color: #3465a4;
+}
+a:visited {
+   color: #5d396e;
+}
+.left {
+    float: left;
+}
+.right {
+    float: right;
+}
+.hidden {
+    display: none;
+}
+.maxwidth {
+    width: 940px;
+    margin: 0 auto;
+}
+.clear {
+    clear: both;
+}
+
+/* Fancy hack for off-screen switch widgets
+ * on small screen sizes. No math to these numbers,
+ * just guesses and trial and error. */
+ media screen and (max-width: 1308px) {
+    .maxwidth {
+        margin-left: 176px;
+    }
+}
+
+/* Global Domain Bar */
+/* ========================================================================== */
+
+
+#global_domain_bar {
+    background: #fff;
+    height: 10px;
+}
+#global_domain_bar .maxwidth {
+    position: relative;
+}
+
+/* Tab */
+
+#global_domain_bar .tab {
+    background: #fff;
+    position: absolute;
+    right: 0;
+    float: right;
+    padding: 6px 8px;
+    font-size: 12px;
+    line-height: 16px;
+    border-radius: 5px;
+    box-shadow: 0 4px 2px -2px #8fb3d9;
+    white-space: nowrap;
+}
+#global_domain_bar .tab a.root {
+    color: #555753 !important;
+    font-weight: bold;
+    text-decoration: none;
+    background: #fff url(../images/favicon.png) 0 0 no-repeat;
+    padding-left: 18px;
+    border-right: 1px solid #ccc;
+    padding-right: 6px;
+}
+#global_domain_bar .tab a.root:last-child {
+    border-right: 0;
+    padding-right: 0;
+}
+#global_domain_bar .tab a.root:hover {
+    text-decoration: underline;
+}
+#global_domain_bar .tab a.user {
+    padding: 2px 14px 2px 4px;
+    margin: -2px -4px -2px 2px;
+    color: inherit !important;
+    text-decoration: none;
+    border-radius: 4px;
+    background: url(../images/globaldomain-user-arrow.png) right center no-repeat;
+    outline: none;
+}
+#global_domain_bar .tab a.user:hover,
+#global_domain_bar .tab a.user:focus {
+    background-color: #ececec;
+}
+#global_domain_bar .tab a.user.active {
+    background-color: #ececec;
+    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
+}
+
+#global_domain_bar .tab a:visited {
+    color: #204A87;
+}
+
+/* User settings */
+
+#global_domain_bar .user_popup:before {
+    width: 20px;
+    height: 10px;
+    margin-top: -17px;
+    pointer-events: none;
+    right: 10px;
+    position: absolute;
+    content: url(../images/globaldomain-popup-arrow.png);
+}
+#global_domain_bar .user_popup {
+    display: none;
+    z-index: 10;
+    position: absolute;
+    background: #000;
+    background: rgba(0, 0, 0, 0.9);
+    border: 2px solid rgba(100%, 100%, 100%, 0.2);
+    right: 0;
+    top: -10px;
+    margin: 32px 0 0 0;
+    min-width: 140px;
+    border-radius: 10px;
+}
+#global_domain_bar .user_popup a.text {
+    color: #fff;
+    text-decoration: none;
+    display: block;
+    padding: 3px 16px;
+}
+#global_domain_bar .user_settings a.text:hover {
+    background: rgba(100%, 100%, 100%, 0.2);
+}
+#global_domain_bar .user_settings ul {
+    margin: 14px 0;
+}
+#global_domain_bar .user_settings li {
+    list-style-type: none;
+    margin-left: 0;
+}
+#global_domain_bar .avatar {
+    display: block;
+    margin: 14px auto 0 auto;
+    width: 70px;
+    height: 70px;
+    background-color: #fff;
+    background-size: contain;
+    border: 2px solid #8b8b8b;
+    border-radius: 5px;
+}
+#global_domain_bar .avatar:hover {
+    border: 2px solid #bbbbbb;
+}
+
+
+/* GNOME Header */
+/* ========================================================================== */
+
+#gnome_header {
+    margin: 0;
+    padding: 6px 0;
+}
+
+#gnome_header h1 {
+    margin: 0;
+    padding: 20px 0;
+    font-size: 25pt;
+    line-height: 54px;
+    color: #2e3436;
+    font-family: "Copse";
+    font-weight: normal;
+    text-shadow: 0 1px 0 #fff;
+    float: left;
+}
+#gnome_header h1 a {
+    color: inherit;
+    text-decoration: none;
+}
+#gnome_header h1 a img {
+    vertical-align: bottom;
+}
+
+#gnome_header .right {
+    margin-top: 38px;
+}
+#gnome_header #search_input {
+    border: 1px solid #999;
+    padding: 4px 28px 4px 9px;
+    background: #fff url(../images/search-icon.png) 172px 5px no-repeat;
+    width: 160px;
+    border-radius: 25px;
+    box-shadow: inset 0 1px 1px rgba(0,0,0,0.2);
+}
+#gnome_header #search_input:focus {
+    box-shadow: inset 0 1px 1px rgba(0,0,0,0.2), 0 0 3px #0489B7;
+    outline: none;
+}
+
+
+/* Global Navigation */
+/* ========================================================================== */
+
+#globalnav {
+    list-style: none;
+    display: block;
+    float: left;
+    margin: 34px 0 16px 20px;
+    vertical-align: middle;
+}
+#globalnav li {
+    float: left;
+    margin: 0;
+    padding: 0;
+}
+#globalnav li a {
+    text-decoration: none;
+    color: inherit;
+    display: block;
+    padding: 5px 15px;
+    font-weight: bold;
+    text-shadow: 0 1px 0 #fff;
+    outline: none;
+    line-height: 22px;
+}
+#globalnav li a:hover {
+    color: #000;
+}
+#globalnav li a:active {
+    position: relative;
+    top: 1px;
+}
+
+#globalnav.main li.main a,
+#globalnav.upload li.upload a,
+#globalnav.local li.local a,
+#globalnav.about li.about a,
+#globalnav li.active a {
+    background: #7fa7d4;
+    padding: 5px 15px;
+    color: #000;
+    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
+    color: #fff;
+    border-radius: 5px;
+    box-shadow: inset 0 2px 3px -1px #396da9, 0 1px 0 #fff;
+    position: relative;
+}
+
+#globalnav.main li.main a:after,
+#globalnav.upload li.upload a:after,
+#globalnav.local li.local a:after,
+#globalnav.about li.about a:after,
+#globalnav li.active a:after {
+    content: url(../images/globalnav-arrow.png);
+    position: absolute;
+    bottom: 0;
+    margin-bottom: -11px;
+    left: 50%;
+    margin-left: -8px;
+}
+
+
+
+
+/* GNOME Container */
+/* ========================================================================== */
+
+
+#gnome_container {
+    min-height: 400px;
+}
+
+
+
+/* Footer */
+/* ========================================================================== */
+
+
+/* Footer Artwork */
+
+#footer_art {
+    background: transparent no-repeat bottom center;
+    height: 180px;
+    margin-top: 0;
+    clear: left;
+}
+#footer_art.none {
+    height: 30px;
+    margin-top: 0;
+}
+#footer_art.default {
+    background-image: url(../images/footer_art/applications.png);
+}
+
+/* Footer Grass */
+
+#footer_grass {
+    background: url(../images/grass.png) top center repeat-x;
+    height: 39px;
+    margin-top: -33px;
+}
+
+/* Footer */
+
+#footer {
+    clear: left;
+    background: #d3d7cf;
+    color: #555753;
+    padding: 20px 0;
+}
+#footer .links {
+    overflow: hidden;
+}
+#footer .links > div > ul > li {
+    float: left;
+    margin: 0 40px 10px 0;
+}
+#footer .links a,
+#footer .links strong {
+    display: block;
+    text-decoration: none;
+}
+#footer .links a:hover,
+#footer .links a:focus {
+    text-decoration: underline;
+}
+
+#footer ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+#footer ul li {
+    margin: 0;
+    padding: 0;
+}
+#footer .links > div > ul > li > a {
+    font-weight: bold;
+}
+#footer .links a {
+    color: inherit;
+    -webkit-transition: background-color 100ms ease-in;
+    -moz-transition: background-color 100ms ease-in;
+    transition: background-color 100ms ease-in;
+}
+
+#footer #footnotes {
+    margin-top: 20px;
+}
+#footer #footnotes small {
+    font-size: 88%;
+}
+#footer #footnotes a {
+    color: inherit;
+}
+
 /* Unreviewed Extension Counter */
 /* ==================================================================== */
 
@@ -72,6 +435,10 @@
     width: 40%;
 }
 
+
+/* Beta Banner */
+/* ==================================================================== */
+
 .beta-banner {
     -webkit-transform: rotate(-35deg);
     -moz-transform: rotate(-35deg);
@@ -112,6 +479,7 @@
     text-align: center;
 }
 
+
 /* Separators */
 /* ==================================================================== */
 
@@ -135,6 +503,7 @@ hr.bottom_shadow {
     transform: rotate(180deg);
 }
 
+
 /* Paginator, Filtering and Sorting UI */
 /* ==================================================================== */
 
@@ -254,7 +623,8 @@ hr.bottom_shadow {
     background-color: #e5e5e0;
 }
 
-/* Extension view */
+
+/* Extension Views */
 /* ==================================================================== */
 
 #extensions-list {
@@ -318,6 +688,64 @@ li.extension:last-child {
     color: #666;
 }
 
+/* Upgrade, Configure buttons */
+
+.extension .extra-buttons {
+    position: absolute;
+    margin-left: -172px;
+    margin-top: 4px;
+    width: 72px;
+}
+
+.extension .configure-button,
+.extension .upgrade-button {
+    display: none;
+}
+
+.extension.configurable .configure-button,
+.extension.upgradable .upgrade-button {
+    float: right;
+
+    display: block;
+    height: 24px;
+    width: 24px;
+
+    font-weight: bold;
+    border-style: solid;
+    border-width: 2px;
+    text-align: center;
+    margin-right: 8px;
+
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.extension.configurable .configure-button {
+    background-color: #4a90d9;
+    background-image: url(../images/configure-extension.png);
+    border-color: #3465a4;
+}
+
+.extension.configurable .configure-button:hover {
+    background-color: #5ba1ff;
+    border-color: #5485c4;
+}
+
+.extension.upgradable .upgrade-button {
+    background-color: #60b94a;
+    background-image: url(../images/upgrade.png);
+    border-color: #559424;
+}
+
+.extension.upgradable .upgrade-button:hover {
+    background-color: #71ca5b;
+    border-color: #75a444;
+}
+
+/* Extension switch */
+
 .extension ._gnome-switch {
     position: absolute;
     margin-left: -100px;
@@ -329,12 +757,6 @@ li.extension:last-child {
     background-color: #d94a60;
 }
 
- media screen and (max-width: 1308px) {
-    .maxwidth {
-        margin-left: 176px;
-    }
-}
-
 .extension .description {
     margin: 0.5em;
     font-size: 1.2em;
@@ -343,7 +765,7 @@ li.extension:last-child {
 }
 
 .extension textarea {
-    /* sync with fonts.css */
+    /* sync with text.css */
     /* textareas don't inherit body fonts for whatever reason */
     font-family: Cantarell, 'Droid Sans', Ubuntu, 'DejaVu Sans', Arial, sans-serif;
 }
@@ -356,6 +778,8 @@ li.extension:last-child {
     font-size: 100%;
 }
 
+/* Screenshots and Icons */
+
 .extension .screenshot {
     margin-right: 0.5em;
     border: 1px solid #cccccc;
@@ -380,6 +804,8 @@ li.extension:last-child {
     vertical-align: bottom;
 }
 
+/* Uploader */
+
 .extension .upload {
     cursor: pointer;
 }
@@ -416,6 +842,8 @@ li.extension:last-child {
     left: -9999em;
 }
 
+/* Various other things */
+
 .extension .uninstall {
     text-indent: -9999em;
     border: none;
@@ -466,6 +894,10 @@ li.extension:last-child {
     font-weight: bold;
 }
 
+
+/* Error Reports */
+/* ==================================================================== */
+
 #error_report input[name=can_contact] {
     margin-left: 1em;
 }
@@ -508,6 +940,7 @@ li.extension:last-child {
     font-size: 1.2em;
 }
 
+
 /* Comments */
 /* ==================================================================== */
 
@@ -567,7 +1000,8 @@ li.extension:last-child {
     z-index: 999;
 }
 
-/* Error & Messages */
+
+/* Errors & Messages */
 /* ==================================================================== */
 
 p.message {
@@ -615,6 +1049,7 @@ p.message.warning {
     background-color: rgba(255, 255, 200, 0.8);
 }
 
+
 /* Forms */
 /* ==================================================================== */
 
@@ -694,6 +1129,7 @@ input[type=submit], button {
     margin: 20px 4px 4px 4px;
 }
 
+
 /* Review List */
 /* ==================================================================== */
 
@@ -751,6 +1187,10 @@ input[type=submit], button {
     box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
 }
 
+
+/* Super fancy expandy headers that need to die */
+/* ==================================================================== */
+
 .expandy_header {
     cursor: pointer;
     background-color: #336C84;
@@ -796,57 +1236,3 @@ input[type=submit], button {
     -o-transform: rotate(90deg);
     transform: rotate(90deg);
 }
-
-.extension .extra-buttons {
-    position: absolute;
-    margin-left: -172px;
-    margin-top: 4px;
-    width: 72px;
-}
-
-.extension .configure-button,
-.extension .upgrade-button {
-    display: none;
-}
-
-.extension.configurable .configure-button,
-.extension.upgradable .upgrade-button {
-    float: right;
-
-    display: block;
-    height: 24px;
-    width: 24px;
-
-    font-weight: bold;
-    border-style: solid;
-    border-width: 2px;
-    text-align: center;
-    margin-right: 8px;
-
-    background-repeat: no-repeat;
-    background-position: 50% 50%;
-    border-radius: 4px;
-    cursor: pointer;
-}
-
-.extension.configurable .configure-button {
-    background-color: #4a90d9;
-    background-image: url(../images/configure-extension.png);
-    border-color: #3465a4;
-}
-
-.extension.configurable .configure-button:hover {
-    background-color: #5ba1ff;
-    border-color: #5485c4;
-}
-
-.extension.upgradable .upgrade-button {
-    background-color: #60b94a;
-    background-image: url(../images/upgrade.png);
-    border-color: #559424;
-}
-
-.extension.upgradable .upgrade-button:hover {
-    background-color: #71ca5b;
-    border-color: #75a444;
-}