nocebo/diaspora
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor colors for better themeability

Browse source
This commit is contained in:
Benjamin Neff 2016-10-16 20:20:32 +02:00 committed by Dennis Schubert
parent 260cc23357
commit 1c81c1e3ec
No known key found for this signature in database
GPG key ID: 5A0304BEA7966D7E
23 changed files with 78 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
app/assets/stylesheets/bootstrap-variables.scss vendored
View file

@ -187,9 +187,9 @@ $btn-success-color: #333 !default;
// $input-bg-disabled: $gray-lighter
//** Text color for `<input>`s
// $input-color: $gray
$input-color: $text-dark-grey !default;
//** `<input>` border color
// $input-border: #ccc
$input-border: $border-grey !default;
// TODO: Rename `$input-border-radius` to `$input-border-radius-base` in v4
//** Default `.form-control` border radius
@ -202,6 +202,7 @@ $btn-success-color: #333 !default;
//** Border color for inputs on focus
// $input-border-focus: #66afe9
$input-border-focus: $input-border !default;
//** Placeholder text color
// $input-color-placeholder: #999
@ -668,7 +669,7 @@ $navbar-collapse-max-height: 480px;
//
//##
//** Background color on `.list-group-item`
$list-group-bg: $white;
$list-group-bg: $white !default;
//** `.list-group-item` border color
$list-group-border: transparent;
//** List group border radius

31
app/assets/stylesheets/color-variables.scss
View file

@ -3,31 +3,32 @@ $black: #000;
$text-grey: #999;
$text-dark-grey: #666;
$text: #333;
$text-color-pale: $text-grey !default;
$text-color-active: $black !default;
$background-white: $white;
$background-grey: #eee;
$background-blue: #e7f2f7;
$background-grey: #eee !default;
$background-blue: #e7f2f7 !default;
$grey: #2b2b2b;
$medium-gray: #ccc;
$light-grey: #ddd;
$border-grey: $light-grey;
$border-medium-grey: $medium-gray;
$border-dark-grey: $text-grey;
$border-medium-grey: #ccc;
$border-grey: $light-grey !default;
$border-medium-grey: $medium-gray !default;
$border-dark-grey: $text-grey !default;
$link-grey: #777;
$link-disabled-grey: $text-grey;
$green: #8ede3d;
$icon-color: $black !default;
$green: #8ede3d !default;
$light-green: lighten($green, 20%);
$red: #a80000;
$blue: #3f8fba;
$red: #a80000 !default;
$blue: #3f8fba !default;
$main-background: #f0f0f0 !default;
$sidebars-background: $background-white !default;
$left-navbar-drawer-background: darken($sidebars-background, 6%);
$main-background: darken($white, 6%) !default;
$framed-background: $white !default;
$left-navbar-drawer-background: darken($white, 6%) !default;
$hovercard-background: $white !default;
$card-shadow: 0 1px 2px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12) !default;

6
app/assets/stylesheets/color_themes/_color_theme_override_origwhite.scss
View file

@ -17,10 +17,4 @@ body {
.left-navbar {
border-right: 1px solid $border-grey;
}
.right-sidebar-fixed-background,
.right-sidebar-fixed-background,
.rightbar {
border-left: 1px solid $sidebars-background;
}
}

1
app/assets/stylesheets/color_themes/original_white/_style.scss
View file

@ -3,7 +3,6 @@ $background: #fff;
// Variables
$main-background: $background;
$sidebars-background: $background;
$card-shadow: none;
@import 'color_themes/color_theme_override_origwhite';

12
app/assets/stylesheets/contacts.scss
View file

@ -38,13 +38,13 @@
margin-right: 25px;
}
#chat_privilege_toggle > .enabled {
color: #000;
color: $text-color-active;
}
.contacts-header-icon {
font-size: 24.5px;
line-height: 40px;
color: lighten($black,75%);
&:hover { color: $black; }
color: $text-color-pale;
&:hover { color: $text-color; }
}
#suggest_member.btn { margin-top: 8px; }
}
@ -56,14 +56,14 @@
font-size: 20px;
line-height: 50px;
margin: 0 10px;
color: lighten($black,75%);
&:hover { color: $black; }
color: $text-color-pale;
&:hover { color: $text-color; }
}
&.in_aspect {
border-left: 3px solid $brand-success;
background-color: lighten($brand-success,35%);
}
&:not(.in_aspect) { border-left: 3px solid $white; }
&:not(.in_aspect) { border-left: 3px solid $framed-background; }
}
.no_contacts {

6
app/assets/stylesheets/conversations.scss
View file

@ -17,7 +17,7 @@
}
.stream-element {
background-color: $white;
background-color: $framed-background;
padding: 10px;
.avatar {
@ -30,7 +30,7 @@
.stream-element.message,
.stream-element.new-message {
border: 1px solid $light-grey;
border: 1px solid $border-grey;
box-shadow: $card-shadow;
margin-bottom: 20px;
@ -83,7 +83,7 @@
}
}
&.unread { background-color: darken($background-white, 5%); }
&.unread { background-color: $background-grey; }
&.selected { background-color: $blue; }
.last_author, .last_message {

3
app/assets/stylesheets/forms.scss
View file

@ -13,9 +13,7 @@ textarea {
&:active:focus,
&:invalid:focus,
&:invalid:required:focus {
border-color: $border-grey;
box-shadow: none;
color: $text-dark-grey;
}
}
// scss-lint:enable QualifyingElement
@ -29,7 +27,6 @@ textarea {
margin: 20px auto;
fieldset {
background-color: $white;
margin-bottom: 1em;
position: relative; // To correctly place the entypo icon

2
app/assets/stylesheets/header.scss
View file

@ -106,7 +106,7 @@
}
.view_all {
background-color: $link-color;
border-top: 3px solid $white;
border-top: 3px solid $dropdown-bg;
text-align: center;
a {
color: $white;

4
app/assets/stylesheets/help.scss
View file

@ -98,9 +98,9 @@ ul#help_nav {
line-height: 70px;
[class^="entypo-"], [class*="entypo-"] {
color: #bfbfbf;
color: $text-color-pale;
&.entypo-chat{ color: #000000; }
&.entypo-chat { color: $text-color-active; }
}
}
}

4
app/assets/stylesheets/home.scss
View file

@ -33,8 +33,8 @@
}
.landing-info-card {
background-color: $white;
border: 1px solid $light-grey;
background-color: $framed-background;
border: 1px solid $border-grey;
box-shadow: $card-shadow;
margin-bottom: 25px;
margin-top: 25px;

2
app/assets/stylesheets/hovercard.scss
View file

@ -7,7 +7,7 @@
min-width: 250px;
max-width: 400px;
background-color: $background-white;
background-color: $hovercard-background;
border: 1px solid $border-dark-grey;
font-size: small;

2
app/assets/stylesheets/icons.scss
View file

@ -1,6 +1,6 @@
[class^="entypo-"], [class*="entypo-"] {
font-style: normal;
color: black;
color: $icon-color;
&.red { color: #A40802; }
&.white { color: white; }

6
app/assets/stylesheets/interactions.scss
View file

@ -4,7 +4,7 @@
[class^="entypo-"],
[class*="entypo-"] {
color: $text-grey;
color: $text-color-pale;
font-size: $font-size-base;
line-height: $line-height-base;
vertical-align: middle;
@ -12,12 +12,12 @@
[class^="entypo-"]:hover,
[class*="entypo-"]:hover {
color: $text;
color: $text-color;
}
&.hide_conversation i { font-size: $line-height-computed * 1.5; }
&.delete_conversation i { font-size: $font-size-base * 1.5; }
&.destroy_participation i { color: $black; }
&.destroy_participation i { color: $text-color-active; }
&.destroy_participation i:hover { color: $text-dark-grey; }
}
}

8
app/assets/stylesheets/invitations.scss
View file

@ -1,5 +1,5 @@
#invite_code {
background-color: $white;
background-color: $framed-background;
cursor: text;
display: block;
margin-top: 5px;
@ -7,13 +7,13 @@
#invitationsModal {
.modal-header, .modal-body {
color: $text;
color: $text-color;
font-size: $font-size-base;
text-align: initial;
}
#paste_link { font-weight: 700; }
#invite_code { margin-top: 10px; }
#codes_left { color: $text-grey; }
#codes_left { color: $text-color-pale; }
.controls { margin-left: 140px; }
#email_invitation {
padding-top: 10px;
@ -21,7 +21,7 @@
border-top: 1px dashed $border-grey;
label { font-weight: 700; }
#already_sent {
color: $text-grey;
color: $text-color-pale;
font-size: 12px;
}
}

6
app/assets/stylesheets/markdown-editor.scss
View file

@ -1,6 +1,6 @@
.md-footer,
.md-header {
background: $sidebars-background;
background: $white;
border: 0;
display: block;
height: 42px;
@ -10,7 +10,7 @@
[class^="entypo-"],
[class*="entypo-"],
.glyphicon {
color: $black;
color: $icon-color;
}
}
@ -72,7 +72,7 @@
width: 18px;
}
&:hover .entypo-cross { color: $text; }
&:hover .entypo-cross { color: $text-color; }
}

2
app/assets/stylesheets/mobile/comments.scss
View file

@ -33,7 +33,7 @@
&.active:not(.bottom_collapse),
&.active:not(.bottom_collapse) > [class^="entypo"] {
color: $text;
color: $text-color;
}
}

8
app/assets/stylesheets/mobile/mobile.scss
View file

@ -150,7 +150,7 @@ footer {
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
background-color: #fff;
background-color: $framed-background;
margin-bottom: 10px;
border: 1px solid #bbb;
@ -176,7 +176,7 @@ footer {
border-radius: 3px 3px 0 0;
border: {
bottom: 1px solid #ccc;
bottom: 1px solid $border-medium-grey;
}
img.big-stream-photo {
@ -322,7 +322,7 @@ footer {
}
.header-full-width {
background-color: #fff;
background-color: $framed-background;
border-bottom: 1px solid #aaa;
margin: -10px; // Counter the #main padding
margin-bottom: 10px;
@ -462,7 +462,7 @@ select {
font-weight: bold;
color: $text-grey;
background: {
color: #fff;
color: $framed-background;
}
}
}

2
app/assets/stylesheets/mobile/tags.scss
View file

@ -3,7 +3,7 @@ ul.followed_tags {
margin: 0px;
> li {
background-color: $white;
background-color: $framed-background;
border: 1px solid $border-grey;
border-radius: 5px;
box-shadow: 0 1px 2px rgba($border-dark-grey, 0.5);

4
app/assets/stylesheets/notifications.scss
View file

@ -73,7 +73,7 @@
background-color: $background-grey;
.unread-toggle {
opacity: 1 !important;
.entypo-eye { color: $black; }
.entypo-eye { color: $text-color-active; }
}
}
@ -90,7 +90,7 @@
padding: 9px 5px;
.entypo-eye {
cursor: pointer;
color: lighten($black,75%);
color: $text-color-pale;
font-size: 17px;
line-height: 17px;
}

24
app/assets/stylesheets/profile.scss
View file

@ -1,7 +1,7 @@
#profile_container {
.profile_header {
margin-bottom: 15px;
background-color: $white;
background-color: $framed-background;
padding-left: 10px;
padding-right: 10px;
padding-top: 20px;
@ -22,7 +22,7 @@
font-weight: 700;
}
#diaspora_handle {
color: $text-grey;
color: $text-color-pale;
font-size: 20px;
}
#sharing_message {
@ -64,8 +64,8 @@
.profile-header-icon {
font-size: 24.5px;
line-height: 30px;
color: lighten($black,75%);
&:hover { color: $black; }
color: $text-color-pale;
&:hover { color: $text-color; }
}
#mention_button { font-weight: 700; }
}
@ -80,8 +80,12 @@
&.active {
border-bottom: 3px solid $brand-primary;
a {
color: $black;
[class^="entypo-"], [class*="entypo-"] { color: $black; }
color: $text-color-active;
[class^="entypo-"],
[class*="entypo-"] {
color: $text-color-active;
}
}
}
a {
@ -94,9 +98,13 @@
margin-right: 2px;
}
&:hover {
color: $black;
[class^="entypo-"], [class*="entypo-"] { color: $black; }
color: $text-color-active;
text-decoration: none;
[class^="entypo-"],
[class*="entypo-"] {
color: $text-color-active;
}
}
}
}

2
app/assets/stylesheets/registration.scss
View file

@ -35,7 +35,7 @@
}
.captcha-input {
border-bottom: 1px solid $border-grey;
border-bottom: 1px solid $input-border;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
box-sizing: border-box;

4
app/assets/stylesheets/sidebar.scss
View file

@ -1,7 +1,7 @@
.sidebar,
.framed-content {
background-color: $white;
border: 1px solid $light-grey;
background-color: $framed-background;
border: 1px solid $border-grey;
border-top: 0;
box-shadow: $card-shadow;

10
app/assets/stylesheets/stream_element.scss
View file

@ -15,7 +15,7 @@
position: relative;
.control-icons {
background: $white;
background: $framed-background;
border-radius: 4px;
padding-left: 4px;
position: absolute;
@ -26,7 +26,7 @@
}
.thumbnail {
background: $white;
background: $framed-background;
border-radius: 0;
box-shadow: $card-shadow;
height: 240px;
@ -40,7 +40,7 @@
&:hover,
&:focus,
&:active {
border-color: $light-grey;
border-color: $border-grey;
text-decoration: none;
}
@ -62,7 +62,7 @@
#main_stream .stream-element {
margin-bottom: 20px;
border: 1px solid $light-grey;
border: 1px solid $border-grey;
box-shadow: $card-shadow;
&.highlighted {
@ -72,7 +72,7 @@
}
.stream-element {
background-color: $white;
background-color: $framed-background;
padding: 10px;
& > .media {