Merge branch 'ssrihari-color-palette' into develop

This commit is contained in:
Jonne Haß 2013-08-28 10:25:46 +02:00
commit ec97c2e760
17 changed files with 135 additions and 126 deletions

View file

@ -1,22 +1,6 @@
/* Mixin file for sass. Here is where we define our variables and
browser compatability functions used in all scss/sass files */
/* Diapora's default color palate */
$blue: #3f8fba;
$dark-blue: darken(#0984C8,10%);
$green: #8EDE3D;
$grey: #2b2b2b;
$light-grey: #ddd;
$red: #a80000;
$background: #fff;
$creation-blue: #0097ff;
$red: #a80000;
$background: #fff;
$creation-blue: #0097ff;
/* Transision defaults */
$speed: 0.1s;
$easing: linear;

View file

@ -1,4 +1,5 @@
@import 'compass'
@import 'colors'
@import 'ui'
@import '_mixins'
@import '_flash_messages'
@ -37,7 +38,7 @@ body
:padding 2em
:margin 0
:top 33px
:background-color $background
:background-color $background-white
:font
:family "Helvetica Neue",Helvetica,Arial,sans-serif
@ -81,7 +82,7 @@ ul > li
:-moz-box-shadow rgba(0,0,0,0.12) 0px 0px 5px inset
:background
:color #eee
:color $background-grey
:width 50px
:height 50px
@ -149,7 +150,7 @@ ul.as-selections
.stream_element
:border
:bottom 1px solid #ddd
:bottom 1px solid $border-grey
p
&:last-child
@ -240,7 +241,7 @@ ul.as-selections
:float left
:margin
:top 6px
.controls:first-child
.control_icon
@include transition(opacity)
@ -376,7 +377,7 @@ ul.as-selections
:padding
:top 10px
.controls
.comment_delete
@include transition(opacity)
@ -423,7 +424,7 @@ ul.as-selections
:color #bbb
.stream_element .post-content .reshare
:border-left 2px solid #ddd
:border-left 2px solid $border-grey
.stream_element.loaded .media .bd .feedback
:clear both
@ -1326,7 +1327,7 @@ ul#press_logos
.show_comments
:border
:top 1px solid #ddd
:top 1px solid $border-grey
:margin
:top 5px
@ -1458,7 +1459,7 @@ ul#press_logos
.invite_friends
:padding 1em
:background
:color #eee
:color $background-grey
:border 1px solid #ccc
#remember_me
@ -1507,7 +1508,7 @@ ul#press_logos
:color $grey
:text-shadow 0 0 7px #FFF
:cursor pointer
:border-bottom 2px solid #DDD
:border-bottom 2px solid $border-grey
@include border-radius(0, 0, 3px, 3px)
@include linear-gradient(rgba(255,255,255,0) , #EEE, 0%, 95%)
:background-color transparent
@ -1525,7 +1526,7 @@ ul#press_logos
.conversation_participants
:background
:color $background
:color $background-white
:margin
:bottom 10px
@ -1569,7 +1570,7 @@ ul#press_logos
:bottom 10px
:border
:bottom 1px solid #ddd
:bottom 1px solid $border-grey
:padding 10px
:top 101px
:bottom 10px
@ -1661,7 +1662,7 @@ ul#press_logos
&:hover:not(.selected)
:background
:color #fafafa
:color $highlight-white
&.selected:hover
:background
@ -1672,7 +1673,7 @@ ul#press_logos
.conversation.unread
:background
:color darken($background,5%)
:color darken($background-white,5%)
.conversation.selected
:background
@ -1710,7 +1711,7 @@ ul#press_logos
:padding 10px
:height 55px
:border
:bottom 1px solid #ddd
:bottom 1px solid $border-grey
#no_conversation_text
:font
@ -1759,7 +1760,7 @@ h1.tag
.tag
:background
:color #efefef
:color #999
:color $text-grey
:border
:bottom 1px dotted #999
@ -1795,7 +1796,7 @@ h1.tag
:color #e6e6e6
:border-radius 8px
:padding 5px
:color #999
:color $text-grey
:text-align center
.day
@ -1810,7 +1811,7 @@ h1.tag
.notification_count
:background
:color #f0f0f0
:color #999
:color $text-grey
:font
:weight normal
@ -1823,7 +1824,7 @@ h1.tag
&.unread
:background
:color lighten(#A40802, 5%)
:color lighten($red, 5%)
:color #eee !important
:font
:weight bold
@ -1832,7 +1833,7 @@ h1.tag
.title
:position relative
:border
:bottom 1px solid #ddd
:bottom 1px solid $border-grey
:padding 2px 0
:top 0
@ -1896,7 +1897,7 @@ h1.tag
.section
.content
:padding 8px
:color #999
:color $text-grey
:font-size 11px
li
:list-style none
@ -1975,9 +1976,9 @@ ul#requested-scopes
:float right
@include border-radius(4px)
:margin-top 1px
:color #999
:color $text-grey
:background
:color #eee
:color $background-grey
:display inline-block
:font
:size 11px
@ -2000,7 +2001,7 @@ ul.left_nav
:decoration none
a
:font-weight bold
:color #777
:color $link-grey
:text
:decoration none
@ -2155,7 +2156,7 @@ ul.left_nav
:margin
:bottom 0
:border
:left 1px solid #ddd
:left 1px solid $border-grey
:padding
:left 10px
:top 20px
@ -2169,12 +2170,12 @@ ul.left_nav
.new_aspect,
a.toggle_selector
:outline none
:color #999
:color $text-grey
:font
:style italic
&:hover
:color #777
:color $link-grey
.no_contacts
:position relative
@ -2314,7 +2315,7 @@ a.toggle_selector
:width 140px
.tags
:color #999
:color $text-grey
h4
:margin
@ -2365,7 +2366,7 @@ a.toggle_selector
:position relative
:border
:bottom 1px solid #ddd
:bottom 1px solid $border-grey
:padding 5px
:margin
@ -2402,7 +2403,7 @@ a.toggle_selector
.diaspora_id_text
:font-size 12px
:text-align right
:color #999
:color $text-grey
:margin
:top -8px
:padding 0
@ -2455,7 +2456,7 @@ a.toggle_selector
:text
:align center
:border
:bottom 1px solid #ddd
:bottom 1px solid $border-grey
.mobile_row
:margin
@ -2489,7 +2490,7 @@ a.toggle_selector
span.host_uri
:float right
:margin-top -28px
:color #999
:color $text-grey
:padding-right 9px
.center
@ -2590,11 +2591,11 @@ body
.nsfw-shield
@include border-radius(3px)
:background-color #eee
:background-color $background-grey
:width 90%
:padding 5px 10px
:border 1px solid #ddd
:color #999
:border 1px solid $border-grey
:color $text-grey
#back-to-top
:display block
@ -2619,7 +2620,7 @@ body
.nsfw_off
:font-size smaller
:color #999
:color $text-grey
a
:color #666
:color #666

View file

@ -0,0 +1,20 @@
$highlight-white: #FAFAFA;
$background-white: #FFFFFF;
$grey: #2B2B2B;
$light-grey: #DDDDDD;
$border-grey: #DDDDDD;
$background-grey: #EEEEEE;
$header-grey: #939393;
$link-grey: #777777;
$text-grey: #999999;
$white: white;
$black: black;
$red: #A80000;
$green: #8EDE3D;
$blue: #3F8FBA;
$dark-blue: darken(#0984C8,10%);
$creation-blue: #0097FF;

View file

@ -2,13 +2,13 @@ footer {
width: 100%;
left: 0;
bottom: 0;
color: #999;
color: $text-grey;
.container {
width: 95%;
margin: 4em auto 0 auto;
padding: 0.5em 0 1em 0;
border-top: 1px solid #ddd;
border-top: 1px solid $border-grey;
}
.branding-powered_by_diaspora {
@ -40,7 +40,7 @@ footer {
}
a {
color: #777;
color: $link-grey;
}
}
}

View file

@ -20,21 +20,21 @@ body > header {
height: 38px;
width: 65px;
}
.ie-user-menu-active { height: 150px; }
a.header_root_link {
display: inline-block;
margin-top: 5px;
}
a {
color: #CCC;
color: rgb(147,147,147);
&:hover {
background: none;
color: #fafafa;
color: $highlight-white;
}
}
@ -42,7 +42,7 @@ body > header {
height: 40px;
.right { top: 10px; }
}
#nav_badges {
display: inline-block;
margin-top: 2px;
@ -56,7 +56,7 @@ body > header {
position: relative;
top: 2px;
display: inline;
margin: 0 2px;
margin: 0 2px;
font-weight: bold;
font-size: smaller;
@ -67,13 +67,13 @@ body > header {
top: -4px;
left: 15px;
padding: 1px 2px;
background-color: #A40802;
background-color: $red;
line-height: 12px;
color: #fff;
}
&:hover .badge_count { background-color: lighten(#A40802, 5%); }
&:hover .badge_count { background-color: lighten($red, 5%); }
.icons-notifications_grey { height: 16px; }
&.active .icons-notifications_grey:hover {
@ -89,14 +89,14 @@ body > header {
float: left;
}
}
#notification_badge, #message_inbox_badge {
float: left;
padding: 0px 3px;
}
#message_inbox_badge {
padding-top: 3px;
padding-top: 3px;
margin-right: 0px;
padding-right: 0px;
}
@ -134,7 +134,7 @@ body > header {
.header {
padding: 10px;
h4 {
padding-bottom: 0;
margin-bottom: 0;
@ -142,7 +142,7 @@ body > header {
}
.notification_element,
.header { border-bottom: 1px solid #ddd; }
.header { border-bottom: 1px solid $border-grey; }
.ajax_loader {
text-align: center;
@ -152,9 +152,9 @@ body > header {
.notification_element {
padding: 10px;
min-height: 30px;
&:hover { background-color: #FAFAFA; }
&:hover { background-color: $highlight-white; }
> img {
height: 30px;
width: 30px;
@ -163,14 +163,14 @@ body > header {
}
&.unread {
background-color: #eee;
background-color: $background-grey;
color: #000;
font-weight: bold;
}
}
}
}
#global_search {
float: right;
margin-right: 10px;
@ -179,7 +179,7 @@ body > header {
form {
position: absolute;
right: 0;
input {
@include box-shadow(0, 1px, 1px, #444);
@include border-radius(15px);
@ -193,7 +193,7 @@ body > header {
&:hover { background-color: #555; }
&.active {
background-color: #fafafa;
background-color: $highlight-white;
background-color: rgba(160,160,160,0.6);
}
@ -220,10 +220,10 @@ body > header {
z-index: 10;
display: inline;
top: -4px;
float: right;
margin: -2px -5px 0px 0px;
float: right;
margin: -2px -5px 0px 0px;
padding: 5px 7px 5px 32px;
border-left: 1px solid #333;
border-right: 1px solid #333;
@ -238,11 +238,11 @@ body > header {
.user-menu-item a {
padding: 4px;
height: 100%;
color: #939393;
color: $header-grey;
&:hover {
background-color: $blue;
color: #FAFAFA;
color: $highlight-white;
text-decoration: none;
}
}
@ -251,8 +251,8 @@ body > header {
padding: 5px 0;
&:hover {
color: #FAFAFA;
.user-name { color: #FAFAFA; }
color: $highlight-white;
.user-name { color: $highlight-white; }
}
}
@ -306,41 +306,41 @@ body > header {
}
}
}
/* When the user is not connected */
ul#landing_nav {
position: absolute;
top: 4px;
right: 0;
right: 0;
margin: 0;
padding: 0;
> li {
text-shadow: 0 1px 0 #000;
display: inline;
margin-right: 0.5em;
a {
a {
color: $blue;
&.login {
&.login {
@include border-radius(5px);
@include box-shadow(0, 1px, 1px, #666);
padding: 5px 8px;
background-color: #000;
border-top: 1px solid #000;
&:hover { background-color: #222; }
}
}
&:last-child { margin-right: 0; }
}
}
}
/*
/*
* Extract here from application.sass because
* needed for the header in the bootstrap part
*/
@ -349,12 +349,12 @@ ul.dropdown {
li {
display: none;
a { display: block; }
&:first-child {
display: block;
a {
height: auto;
display: inline;

View file

@ -1,3 +1,4 @@
@import "colors";
@import "_mixins.css.scss";
#hovercard {
@ -9,7 +10,7 @@
min-width: 250px;
max-width: 400px;
background-color: $background;
background-color: $background-white;
height: 70px;
border: 1px solid #999999;
font-size: small;
@ -58,7 +59,7 @@
}
p {
color: #999999;
color: $text-grey;
padding-top: 0px;
margin-top: 0px;
margin-bottom: 10px;
@ -68,7 +69,7 @@
position: absolute;
bottom: 0;
left: 0;
background-color: #eeeeee;
background-color: $background-grey;
margin-left: 0;
width: 100%;
@ -82,7 +83,7 @@
padding: 1px 5px;
a {
color: #999999;
color: $text-grey;
margin-right: 4px;
font-weight: normal;
}

View file

@ -1,4 +1,4 @@
@import 'colors';
@import '_mixins.css.scss';
.mentions-input-box {
@ -53,9 +53,9 @@
padding: 5px;
white-space: nowrap;
&:hover, &.active { background: #eee; }
&:hover, &.active { background: $background-grey; }
&:last-child { @include border-radius(0px, 0px, 5px, 5px); }
img, div.icon {
float: left;
height: 25px;

View file

@ -1,11 +1,10 @@
@import 'bootstrap';
@import 'bootstrap-responsive';
@import "colors";
@import "_mixins.css.scss";
@import 'vendor/autoSuggest';
@import '_flash_messages.scss';
$blue: #3f8fba;
a {
color: #2489ce;
text: {
@ -144,7 +143,7 @@ body {
margin-bottom: 10px;
border: 1px solid #bbb;
border-top: 1px solid #ddd;
border-top: 1px solid $border-grey;
border-bottom: 1px solid #aaa;
}
@ -188,7 +187,7 @@ body {
}
h1 {
color: #999;
color: $text-grey;
padding: 20px;
text-shadow: 0 2px 0 #fff; } }
@ -304,7 +303,7 @@ body {
font: {
weight: normal;
size: small; };
color: #999999; } }
color: $text-grey; } }
.right {
float: right; }
@ -366,7 +365,7 @@ body {
top: 1px;
padding: 0 2px;
padding-bottom: 1px;
background-color: #a40802;
background-color: $red;
line-height: 12px;
color: white;
font-size: smaller;
@ -409,13 +408,13 @@ footer {
position: relative;
padding: 10px;
padding-top: 8px;
background: #eee;
background: $background-grey;
margin: {
top: 10px; };
border: {
top: 1px solid #ddd;
top: 1px solid $border-grey;
};
min-height: 22px;
@ -621,7 +620,7 @@ select {
padding: 2px 7px;
margin: 5px 6px;
background: {
color: #eee;
color: $background-grey;
}
}
}
@ -655,7 +654,7 @@ select {
span {
padding: 2px 10px;
font-weight: bold;
color: #999;
color: $text-grey;
background: {
color: #fff;
}
@ -698,13 +697,13 @@ select {
height: 100%;
margin-right: 5px;
margin-top: 3px;
display: inline-block;
display: inline-block;
}
#header-nav a {
padding: 0 10px;
width: 100%;
color: #939393;
color: $header-grey;
}
#header-nav > div {
@ -1090,7 +1089,7 @@ select#aspect_ids_ {
font-size: 14px;
line-height: 18px;
color: inherit;
background-color: #EEE;
background-color: $background-grey;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 10px;
@ -1126,7 +1125,7 @@ input#q.search {
}
&:active {
color: #444;
text-shadow: 0 1px 0 #fafafa;
text-shadow: 0 1px 0 $highlight-white;
img {
@include opacity(1);
@ -1258,8 +1257,8 @@ input#q.search {
text-decoration: none;
color: #000;
margin: 5px 0px 5px 0px;
border-top: solid 1px #DDD;
border-bottom: solid 1px #DDD;
border-top: solid 1px $border-grey;
border-bottom: solid 1px $border-grey;
padding: 5px 0px 2px 0px;
overflow: hidden;
img {

View file

@ -1,3 +1,4 @@
@import "colors";
@import 'mixins';
@import 'new_styles/new_mixins';
@import 'new_styles/variables';

View file

@ -54,7 +54,7 @@ form.block-form {
/* mainly bootstrap overrides */
.control-group {
margin : 0;
border-bottom : 1px solid #ddd;
border-bottom : 1px solid $border-grey;
.control-label,
input[type=text],

View file

@ -6,8 +6,8 @@
text-decoration: none;;
color: #000;
margin: 10px 0px 10px 0px;
border-top: solid 1px #DDD;
border-bottom: solid 1px #DDD;
border-top: solid 1px $border-grey;
border-bottom: solid 1px $border-grey;
padding: 10px 0px 5px 0px;
overflow: hidden;

View file

@ -3,6 +3,7 @@
// the COPYRIGHT file.
@import "mixins";
@import "colors";
body, html{
padding: 20px;
@ -50,7 +51,7 @@ header{
footer{
position: absolute;
background-color: #eee;
background-color: $background-grey;
border-top: 1px solid #ccc;
bottom: 0;
left: 0;

View file

@ -1,3 +1,5 @@
@import "colors";
body {
direction: rtl;
text-align: right;
@ -313,7 +315,7 @@ ul.left_nav .item_count, ul.left_nav .edit {
.stream_container {
border-left: 0;
border-right: 1px solid #DDDDDD;
border-right: 1px solid $border-grey;
}
.stream .new_message .right input[type=reset] {

View file

@ -122,7 +122,7 @@ form p {
}
label {
color: #999;
color: $text-grey;
position: absolute;
padding-top: 7px;
left: 8px;

View file

@ -33,7 +33,7 @@ $bluebg: #e7f2f7;
}
a {
color: #777777;
color: $link-grey;
font-weight: bold;
text-decoration: none;
}

View file

@ -34,7 +34,7 @@
color: #424242;
}
i.heart.gray:hover {
color: #a40802;
color: $red;
}
i.heart.red:hover {
color: #f55f5a;
@ -111,7 +111,7 @@
.no_comments {
padding-top: 10px;
padding-bottom: 10px;
background-color: #eee;
background-color: $background-grey;
text-align: center;
@include border-radius(4px);
margin-bottom: 30px;

View file

@ -61,7 +61,7 @@ input.button {
}
.button .selected {
@include linear-gradient(#f0f0f0,#fafafa,29%,85%);
@include linear-gradient(#f0f0f0,$highlight-white,29%,85%);
border-top: 1px solid #aaa;
}