Browse Source

[Fixes #4, Fixes #6] improve styles

main^2
Lerk 3 weeks ago
parent
commit
44b06485b4
  1. 50
      app/javascript/styles/night/components.scss
  2. 20
      app/javascript/styles/night/diff.scss
  3. 4
      app/javascript/styles/night/variables.scss

50
app/javascript/styles/night/components.scss

@ -1,3 +1,5 @@
@import "variables";
.app-body {
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
@ -383,7 +385,7 @@
.compose-form__warning {
color: $inverted-text-color;
margin-bottom: 10px;
background: $ui-primary-color;
background: $ui-base-color;
box-shadow: 0 2px 6px rgba($base-shadow-color, 0.3);
padding: 8px 10px;
border-radius: 4px;
@ -598,17 +600,29 @@
min-width: 40%;
margin: 5px;
&__warning {
.icon-button {
color: $darker-text-color;
&:hover,
&:focus,
&:active {
color: lighten($darker-text-color, 20%);
}
}
}
&__actions {
background: linear-gradient(180deg, rgba($base-shadow-color, 0.6) 0, rgba($base-shadow-color, 0.21) 80%, transparent);
display: flex;
align-items: flex-start;
justify-content: space-between;
opacity: 0;
opacity: 1;
transition: opacity .1s ease;
.icon-button {
flex: 0 1 auto;
color: $secondary-text-color;
color: $darker-text-color;
font-size: 14px;
font-weight: 500;
padding: 10px;
@ -617,17 +631,9 @@
&:hover,
&:focus,
&:active {
color: lighten($secondary-text-color, 7%);
color: lighten($darker-text-color, 20%);
}
}
&:hover {
opacity: 1;
}
&.active {
opacity: 1;
}
}
&-description {
@ -773,7 +779,7 @@
.reply-indicator {
border-radius: 4px;
margin-bottom: 10px;
background: $ui-primary-color;
background: $ui-base-color;
padding: 10px;
min-height: 23px;
overflow-y: auto;
@ -786,9 +792,13 @@
}
.reply-indicator__cancel {
color: $primary-text-color;
color: $darker-text-color;
float: right;
line-height: 24px;
button.icon-button {
color: $darker-text-color;
}
}
.reply-indicator__display-name {
@ -1320,7 +1330,7 @@
font-size: 14px;
a {
color: $lighter-text-color;
color: $darker-text-color;
}
}
@ -1792,6 +1802,8 @@ a.account__display-name {
}
.display-name__account {
margin-top: 0;
color: $dark-text-color;
font-size: 14px;
}
@ -1914,6 +1926,10 @@ a.account__display-name {
.navigation-bar__profile-edit {
color: inherit;
text-decoration: none;
span {
color: $dark-text-color;
}
}
.dropdown {
@ -5446,7 +5462,7 @@ a.status-card.compact:hover {
a {
text-decoration: none;
color: $dark-text-color;
color: $darker-text-color;
font-weight: 500;
&:hover {
@ -5465,7 +5481,7 @@ a.status-card.compact:hover {
}
.fa, .octicon {
color: $dark-text-color;
color: $darker-text-color;
}
}
}

20
app/javascript/styles/night/diff.scss

@ -1,3 +1,5 @@
@import "variables";
#upload-modal__description {
background: transparent;
border: 1px solid $base-border-color;
@ -40,3 +42,21 @@ select.select {
min-width: 130px !important;
height: auto !important;
}
.public-layout {
.content {
.public-account-header {
&__tabs {
&__name {
h1 {
color: white;
}
small {
color: $darker-text-color;
}
}
}
}
}
}

4
app/javascript/styles/night/variables.scss

@ -24,7 +24,7 @@ $error-value-color: $error-red !default;
// Tell UI to use selected colors
$ui-base-color: $classic-base-color !default; // Darkest
$ui-base-lighter-color: #6c6c6c !default; // Lighter darkest
$ui-base-lighter-color: #656565 !default; // Lighter darkest
$ui-base-even-lighter-color: #d4d4d4 !default; // Even lighter darkest
$ui-primary-color: $classic-primary-color !default; // Lighter
$ui-secondary-color: $classic-secondary-color !default; // Lightest
@ -32,7 +32,7 @@ $ui-highlight-color: $classic-highlight-color !default;
// Variables for texts
$primary-text-color: $ui-base-even-lighter-color !default;
$darker-text-color: $ui-primary-color !default;
$darker-text-color: #a2a2a2 !default;
$dark-text-color: $ui-base-lighter-color !default;
$secondary-text-color: $ui-secondary-color !default;
$highlight-text-color: $ui-highlight-color !default;

Loading…
Cancel
Save