Enable CodeClimate SCSS Lint checks (#2886)

* add scss_lint to Gemfile

* add .scss-lint.yml

* fix warnings of scss-lint

* chmod -x styles/variables.scss

* Enable CodeClimate SCSS Lint checks
This commit is contained in:
yhirano 2017-05-08 03:47:31 +09:00 committed by Eugen Rochko
parent 6ad19036e3
commit d63c291f86
15 changed files with 503 additions and 124 deletions

View file

@ -9,10 +9,13 @@ engines:
enabled: true enabled: true
rubocop: rubocop:
enabled: true enabled: true
scss-lint:
enabled: true
ratings: ratings:
paths: paths:
- "**.rb" - "**.rb"
- "**.js" - "**.js"
- "**.scss"
exclude_paths: exclude_paths:
- spec/ - spec/
- vendor/asset - vendor/asset

264
.scss-lint.yml Normal file
View file

@ -0,0 +1,264 @@
# Linter Documentation:
# https://github.com/brigade/scss-lint/blob/v0.42.2/lib/scss_lint/linter/README.md
scss_files: 'app/javascript/styles/**/*.scss'
exclude:
- app/javascript/styles/reset.scss
linters:
# Reports when you use improper spacing around ! (the "bang") in !default,
# !global, !important, and !optional flags.
BangFormat:
enabled: false
# Whether or not to prefer `border: 0` over `border: none`.
BorderZero:
enabled: false
# Reports when you define a rule set using a selector with chained classes
# (a.k.a. adjoining classes).
ChainedClasses:
enabled: false
# Prefer hexadecimal color codes over color keywords.
# (e.g. `color: green` is a color keyword)
ColorKeyword:
enabled: false
# Prefer color literals (keywords or hexadecimal codes) to be used only in
# variable declarations. They should be referred to via variables everywhere
# else.
ColorVariable:
enabled: true
# Which form of comments to prefer in CSS.
Comment:
enabled: false
# Reports @debug statements (which you probably left behind accidentally).
DebugStatement:
enabled: false
# Rule sets should be ordered as follows:
# - @extend declarations
# - @include declarations without inner @content
# - properties, @include declarations with inner @content
# - nested rule sets.
DeclarationOrder:
enabled: false
# `scss-lint:disable` control comments should be preceded by a comment
# explaining why these linters are being disabled for this file.
# See https://github.com/brigade/scss-lint#disabling-linters-via-source for
# more information.
DisableLinterReason:
enabled: true
# Reports when you define the same property twice in a single rule set.
DuplicateProperty:
enabled: false
# Separate rule, function, and mixin declarations with empty lines.
EmptyLineBetweenBlocks:
enabled: true
# Reports when you have an empty rule set.
EmptyRule:
enabled: true
# Reports when you have an @extend directive.
ExtendDirective:
enabled: false
# Files should always have a final newline. This results in better diffs
# when adding lines to the file, since SCM systems such as git won't
# think that you touched the last line.
FinalNewline:
enabled: false
# HEX colors should use three-character values where possible.
HexLength:
enabled: false
# HEX color values should use lower-case colors to differentiate between
# letters and numbers, e.g. `#E3E3E3` vs. `#e3e3e3`.
HexNotation:
enabled: true
# Avoid using ID selectors.
IdSelector:
enabled: false
# The basenames of @imported SCSS partials should not begin with an
# underscore and should not include the filename extension.
ImportPath:
enabled: false
# Avoid using !important in properties. It is usually indicative of a
# misunderstanding of CSS specificity and can lead to brittle code.
ImportantRule:
enabled: false
# Indentation should always be done in increments of 2 spaces.
Indentation:
enabled: true
width: 2
# Don't write leading zeros for numeric values with a decimal point.
LeadingZero:
enabled: false
# Reports when you define the same selector twice in a single sheet.
MergeableSelector:
enabled: false
# Functions, mixins, variables, and placeholders should be declared
# with all lowercase letters and hyphens instead of underscores.
NameFormat:
enabled: false
# Avoid nesting selectors too deeply.
NestingDepth:
enabled: false
# Always use placeholder selectors in @extend.
PlaceholderInExtend:
enabled: false
# Sort properties in a strict order.
PropertySortOrder:
enabled: false
# Reports when you use an unknown or disabled CSS property
# (ignoring vendor-prefixed properties).
PropertySpelling:
enabled: false
# Configure which units are allowed for property values.
PropertyUnits:
enabled: false
# Pseudo-elements, like ::before, and ::first-letter, should be declared
# with two colons. Pseudo-classes, like :hover and :first-child, should
# be declared with one colon.
PseudoElement:
enabled: true
# Avoid qualifying elements in selectors (also known as "tag-qualifying").
QualifyingElement:
enabled: false
# Don't write selectors with a depth of applicability greater than 3.
SelectorDepth:
enabled: false
# Selectors should always use hyphenated-lowercase, rather than camelCase or
# snake_case.
SelectorFormat:
enabled: false
convention: hyphenated_lowercase
# Prefer the shortest shorthand form possible for properties that support it.
Shorthand:
enabled: true
# Each property should have its own line, except in the special case of
# single line rulesets.
SingleLinePerProperty:
enabled: true
allow_single_line_rule_sets: true
# Split selectors onto separate lines after each comma, and have each
# individual selector occupy a single line.
SingleLinePerSelector:
enabled: true
# Commas in lists should be followed by a space.
SpaceAfterComma:
enabled: false
# Properties should be formatted with a single space separating the colon
# from the property's value.
SpaceAfterPropertyColon:
enabled: true
# Properties should be formatted with no space between the name and the
# colon.
SpaceAfterPropertyName:
enabled: true
# Variables should be formatted with a single space separating the colon
# from the variable's value.
SpaceAfterVariableColon:
enabled: true
# Variables should be formatted with no space between the name and the
# colon.
SpaceAfterVariableName:
enabled: false
# Operators should be formatted with a single space on both sides of an
# infix operator.
SpaceAroundOperator:
enabled: true
# Opening braces should be preceded by a single space.
SpaceBeforeBrace:
enabled: true
# Parentheses should not be padded with spaces.
SpaceBetweenParens:
enabled: false
# Enforces that string literals should be written with a consistent form
# of quotes (single or double).
StringQuotes:
enabled: false
# Property values, @extend, @include, and @import directives, and variable
# declarations should always end with a semicolon.
TrailingSemicolon:
enabled: true
# Reports lines containing trailing whitespace.
TrailingWhitespace:
enabled: true
# Don't write trailing zeros for numeric values with a decimal point.
TrailingZero:
enabled: false
# Don't use the `all` keyword to specify transition properties.
TransitionAll:
enabled: false
# Numeric values should not contain unnecessary fractional portions.
UnnecessaryMantissa:
enabled: false
# Do not use parent selector references (&) when they would otherwise
# be unnecessary.
UnnecessaryParentReference:
enabled: false
# URLs should be valid and not contain protocols or domain names.
UrlFormat:
enabled: true
# URLs should always be enclosed within quotes.
UrlQuotes:
enabled: true
# Properties, like color and font, are easier to read and maintain
# when defined using variables rather than literals.
VariableForProperty:
enabled: false
# Avoid vendor prefixes. Or rather: don't write them yourself.
VendorPrefix:
enabled: false
# Omit length units on zero values, e.g. `0px` vs. `0`.
ZeroUnit:
enabled: true

View file

@ -88,6 +88,7 @@ group :development do
gem 'rubocop', '0.46.0', require: false gem 'rubocop', '0.46.0', require: false
gem 'brakeman', '~> 3.6.0', require: false gem 'brakeman', '~> 3.6.0', require: false
gem 'bundler-audit', '~> 0.4.0', require: false gem 'bundler-audit', '~> 0.4.0', require: false
gem 'scss_lint', '0.42.2', require: false
gem 'capistrano', '3.8.0' gem 'capistrano', '3.8.0'
gem 'capistrano-rails' gem 'capistrano-rails'

View file

@ -392,6 +392,10 @@ GEM
crass (~> 1.0.2) crass (~> 1.0.2)
nokogiri (>= 1.4.4) nokogiri (>= 1.4.4)
nokogumbo (~> 1.4.1) nokogumbo (~> 1.4.1)
sass (3.4.23)
scss_lint (0.42.2)
rainbow (~> 2.0)
sass (~> 3.4.15)
sidekiq (5.0.0) sidekiq (5.0.0)
concurrent-ruby (~> 1.0) concurrent-ruby (~> 1.0)
connection_pool (~> 2.2, >= 2.2.0) connection_pool (~> 2.2, >= 2.2.0)
@ -534,6 +538,7 @@ DEPENDENCIES
rubocop (= 0.46.0) rubocop (= 0.46.0)
ruby-oembed ruby-oembed
sanitize sanitize
scss_lint (= 0.42.2)
sidekiq sidekiq
sidekiq-scheduler sidekiq-scheduler
sidekiq-unique-jobs sidekiq-unique-jobs

View file

@ -44,7 +44,8 @@
color: $color2; color: $color2;
} }
ul, ol { ul,
ol {
list-style: inherit; list-style: inherit;
margin-left: 20px; margin-left: 20px;
@ -57,11 +58,13 @@
} }
} }
li > ol, li > ul { li > ol,
li > ul {
margin-top: 20px; margin-top: 20px;
} }
p, li { p,
li {
font: 16px/28px 'mastodon-font-sans-serif', sans-serif; font: 16px/28px 'mastodon-font-sans-serif', sans-serif;
font-weight: 400; font-weight: 400;
margin-bottom: 12px; margin-bottom: 12px;
@ -74,7 +77,7 @@
em { em {
display: inline-block; display: inline-block;
padding: 7px 7px 5px 7px; padding: 7px 7px 5px;
margin: 0 2px; margin: 0 2px;
background: $color3; background: $color3;
color: $color1; color: $color1;
@ -134,7 +137,8 @@
text-align: right; text-align: right;
font: 16px/28px 'mastodon-font-sans-serif', sans-serif; font: 16px/28px 'mastodon-font-sans-serif', sans-serif;
span, strong { span,
strong {
display: block; display: block;
} }
@ -333,7 +337,8 @@
} }
} }
.simple_form, .closed-registrations-message { .simple_form,
.closed-registrations-message {
width: 300px; width: 300px;
flex: 0 0 auto; flex: 0 0 auto;
background: rgba(darken($color1, 7%), 0.5); background: rgba(darken($color1, 7%), 0.5);
@ -359,7 +364,8 @@
display: none; display: none;
} }
.simple_form, .closed-registrations-message { .simple_form,
.closed-registrations-message {
flex: auto; flex: auto;
} }
} }

View file

@ -13,7 +13,7 @@
box-shadow: none; box-shadow: none;
} }
&:after { &::after {
background: linear-gradient(rgba($color8, 0.5), rgba($color8, 0.8)); background: linear-gradient(rgba($color8, 0.5), rgba($color8, 0.8));
display: block; display: block;
content: ""; content: "";
@ -83,7 +83,7 @@
.counter { .counter {
width: 80px; width: 80px;
color: $color3; color: $color3;
padding: 5px 10px 0px; padding: 5px 10px 0;
margin-bottom: 10px; margin-bottom: 10px;
border-right: 1px solid $color3; border-right: 1px solid $color3;
cursor: default; cursor: default;
@ -93,7 +93,7 @@
display: block; display: block;
} }
&:after { &::after {
display: block; display: block;
content: ""; content: "";
position: absolute; position: absolute;
@ -106,14 +106,14 @@
} }
&.active { &.active {
&:after { &::after {
border-bottom: 4px solid $color4; border-bottom: 4px solid $color4;
opacity: 1; opacity: 1;
} }
} }
&:hover { &:hover {
&:after { &::after {
opacity: 1; opacity: 1;
transition-duration: 0.2s; transition-duration: 0.2s;
} }
@ -173,7 +173,12 @@
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
a, .current, .next, .prev, .page, .gap { a,
.current,
.next,
.prev,
.page,
.gap {
font-size: 14px; font-size: 14px;
color: $color5; color: $color5;
font-weight: 500; font-weight: 500;
@ -194,7 +199,8 @@
cursor: default; cursor: default;
} }
.prev, .next { .prev,
.next {
text-transform: uppercase; text-transform: uppercase;
color: $color2; color: $color2;
} }
@ -227,11 +233,16 @@
@media screen and (max-width: 360px) { @media screen and (max-width: 360px) {
padding: 30px 20px; padding: 30px 20px;
a, .current, .next, .prev, .gap { a,
.current,
.next,
.prev,
.gap {
display: none; display: none;
} }
.next, .prev { .next,
.prev {
display: inline-block; display: inline-block;
} }
} }

View file

@ -16,7 +16,7 @@
height: 100%; height: 100%;
padding: 0; padding: 0;
overflow-y: auto; overflow-y: auto;
.logo { .logo {
display: block; display: block;
margin: 40px auto; margin: 40px auto;
@ -50,7 +50,7 @@
&.selected { &.selected {
background: darken($color1, 2%); background: darken($color1, 2%);
border-radius: 4px 0 0 0; border-radius: 4px 0 0;
} }
} }
@ -118,10 +118,12 @@
.simple_form { .simple_form {
max-width: 400px; max-width: 400px;
.label_input { .label_input {
label.select { label.select {
width: 50%; width: 50%;
} }
select { select {
width: 50%; width: 50%;
float: right; float: right;
@ -134,7 +136,8 @@
overflow-y: auto; overflow-y: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
.sidebar-wrapper, .content-wrapper { .sidebar-wrapper,
.content-wrapper {
flex: 0 0 auto; flex: 0 0 auto;
height: auto; height: auto;
overflow: initial; overflow: initial;

View file

@ -1,8 +1,8 @@
@import 'variables'; @import 'variables';
.app-body { .app-body {
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar; -ms-overflow-style: -ms-autohiding-scrollbar;
} }
.button { .button {
@ -91,7 +91,9 @@
cursor: pointer; cursor: pointer;
transition: color 100ms ease-in; transition: color 100ms ease-in;
&:hover, &:active, &:focus { &:hover,
&:active,
&:focus {
color: lighten($color1, 33%); color: lighten($color1, 33%);
transition: color 200ms ease-out; transition: color 200ms ease-out;
} }
@ -109,14 +111,18 @@
border: 0; border: 0;
} }
&::-moz-focus-inner, &:focus, &:active { &::-moz-focus-inner,
&:focus,
&:active {
outline: 0 !important; outline: 0 !important;
} }
&.inverted { &.inverted {
color: lighten($color1, 33%); color: lighten($color1, 33%);
&:hover, &:active, &:focus { &:hover,
&:active,
&:focus {
color: lighten($color1, 26%); color: lighten($color1, 26%);
} }
@ -154,7 +160,9 @@
outline: 0; outline: 0;
transition: color 100ms ease-in; transition: color 100ms ease-in;
&:hover, &:active, &:focus { &:hover,
&:active,
&:focus {
color: lighten($color1, 26%); color: lighten($color1, 26%);
transition: color 200ms ease-out; transition: color 200ms ease-out;
} }
@ -172,7 +180,9 @@
border: 0; border: 0;
} }
&::-moz-focus-inner, &:focus, &:active { &::-moz-focus-inner,
&:focus,
&:active {
outline: 0 !important; outline: 0 !important;
} }
} }
@ -181,15 +191,15 @@
color: $color4; color: $color4;
} }
.dropdown--active:after { .dropdown--active::after {
content: ""; content: "";
display: block; display: block;
position: absolute; position: absolute;
width: 0; width: 0;
height: 0; height: 0;
border-style: solid; border-style: solid;
border-width: 0 4.5px 7.8px 4.5px; border-width: 0 4.5px 7.8px;
border-color: transparent transparent $color2 transparent; border-color: transparent transparent $color2;
bottom: 8px; bottom: 8px;
right: 104px; right: 104px;
} }
@ -202,7 +212,7 @@
} }
.ellipsis { .ellipsis {
&:after { &::after {
content: ""; content: "";
} }
} }
@ -235,7 +245,9 @@
font-weight: 500; font-weight: 500;
text-decoration: underline; text-decoration: underline;
&:hover, &:active, &:focus { &:hover,
&:active,
&:focus {
text-decoration: none; text-decoration: none;
} }
} }
@ -246,7 +258,7 @@
font-family: inherit; font-family: inherit;
font-size: 14px; font-size: 14px;
background: $color5; background: $color5;
border-radius: 0 0 4px 0; border-radius: 0 0 4px;
} }
.compose-form__buttons-wrapper { .compose-form__buttons-wrapper {
@ -320,7 +332,8 @@
} }
} }
.compose-form__textarea, .follow-form__input { .compose-form__textarea,
.follow-form__input {
background: $color5; background: $color5;
&:disabled { &:disabled {
@ -331,8 +344,8 @@
.compose-form__autosuggest-wrapper { .compose-form__autosuggest-wrapper {
position: relative; position: relative;
.dropdown--active:after { .dropdown--active::after {
border-color: transparent transparent $color5 transparent; border-color: transparent transparent $color5;
bottom: -1px; bottom: -1px;
right: 8px; right: 8px;
} }
@ -467,7 +480,7 @@ a.status__content__spoiler-link {
color: lighten($color1, 8%); color: lighten($color1, 8%);
font-weight: 500; font-weight: 500;
font-size: 11px; font-size: 11px;
padding: 0px 6px; padding: 0 6px;
text-transform: uppercase; text-transform: uppercase;
line-height: inherit; line-height: inherit;
} }
@ -784,7 +797,7 @@ a.status__content__spoiler-link {
right: initial; right: initial;
} }
&:after { &::after {
bottom: initial; bottom: initial;
margin-left: 11px; margin-left: 11px;
margin-top: -7px; margin-top: -7px;
@ -964,12 +977,12 @@ a.status__content__spoiler-link {
position: absolute; position: absolute;
.star-icon { .star-icon {
color: #ca8f04; color: $color10;
} }
} }
.star-icon.active { .star-icon.active {
color: #ca8f04; color: $color10;
} }
.notification__display-name { .notification__display-name {
@ -1006,7 +1019,8 @@ a.status__content__spoiler-link {
} }
} }
.transparent-background, .imageloader { .transparent-background,
.imageloader {
background: url('../images/void.png'); background: url('../images/void.png');
} }
@ -1140,7 +1154,7 @@ a.status__content__spoiler-link {
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
overflow-x: auto; overflow-x: auto;
position: relative; position: relative;
} }
@media screen and (min-width: 360px) { @media screen and (min-width: 360px) {
@ -1190,7 +1204,8 @@ a.status__content__spoiler-link {
border-bottom: 2px solid transparent; border-bottom: 2px solid transparent;
} }
.column, .drawer { .column,
.drawer {
flex: 1 1 100%; flex: 1 1 100%;
overflow: hidden; overflow: hidden;
} }
@ -1207,7 +1222,8 @@ a.status__content__spoiler-link {
} }
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
.column, .drawer { .column,
.drawer {
width: 100%; width: 100%;
padding: 0; padding: 0;
} }
@ -1216,7 +1232,8 @@ a.status__content__spoiler-link {
flex-direction: column; flex-direction: column;
} }
.search__input, .autosuggest-textarea__textarea { .search__input,
.autosuggest-textarea__textarea {
font-size: 16px; font-size: 16px;
} }
} }
@ -1226,7 +1243,8 @@ a.status__content__spoiler-link {
padding: 0; padding: 0;
} }
.column, .drawer { .column,
.drawer {
flex: 0 0 auto; flex: 0 0 auto;
padding: 10px; padding: 10px;
padding-left: 5px; padding-left: 5px;
@ -1242,7 +1260,8 @@ a.status__content__spoiler-link {
} }
.columns-area > div { .columns-area > div {
.column, .drawer { .column,
.drawer {
padding-left: 5px; padding-left: 5px;
padding-right: 5px; padding-right: 5px;
} }
@ -1257,7 +1276,8 @@ a.status__content__spoiler-link {
} }
@media screen and (min-width: 1900px) { @media screen and (min-width: 1900px) {
.column, .drawer { .column,
.drawer {
width: 400px; width: 400px;
border-radius: 4px; border-radius: 4px;
height: 96vh; height: 96vh;
@ -1346,7 +1366,9 @@ a.status__content__spoiler-link {
color: $color4; color: $color4;
} }
&:hover, &:focus, &:active { &:hover,
&:focus,
&:active {
background: lighten($color1, 14%); background: lighten($color1, 14%);
transition: all 100ms linear; transition: all 100ms linear;
} }
@ -1508,8 +1530,8 @@ a.status__content__spoiler-link {
position: absolute; position: absolute;
width: 14px; width: 14px;
height: 10px; height: 10px;
top: 0px; top: 0;
bottom: 0px; bottom: 0;
margin-top: auto; margin-top: auto;
margin-bottom: auto; margin-bottom: auto;
line-height: 0; line-height: 0;
@ -1527,8 +1549,8 @@ a.status__content__spoiler-link {
position: absolute; position: absolute;
width: 10px; width: 10px;
height: 10px; height: 10px;
top: 0px; top: 0;
bottom: 0px; bottom: 0;
margin-top: auto; margin-top: auto;
margin-bottom: auto; margin-bottom: auto;
line-height: 0; line-height: 0;
@ -1696,7 +1718,7 @@ a.status__content__spoiler-link {
} }
.character-counter--over { .character-counter--over {
color: #ff5050; color: $color9;
} }
.getting-started__wrapper { .getting-started__wrapper {
@ -1706,7 +1728,7 @@ a.status__content__spoiler-link {
.getting-started { .getting-started {
box-sizing: border-box; box-sizing: border-box;
padding-bottom: 235px; padding-bottom: 235px;
background: url('../images/mastodon-getting-started.png') no-repeat 0 100%/contain local; background: url('../images/mastodon-getting-started.png') no-repeat 0 100% / contain local;
flex: 1 0 auto; flex: 1 0 auto;
p { p {
@ -1727,10 +1749,11 @@ a.status__content__spoiler-link {
display: block; display: block;
font-family: inherit; font-family: inherit;
margin-bottom: 10px; margin-bottom: 10px;
padding: 7px 0px; padding: 7px 0;
width: 100%; width: 100%;
&:focus, &:active { &:focus,
&:active {
color: $color5; color: $color5;
border-bottom-color: $color4; border-bottom-color: $color4;
} }
@ -1776,7 +1799,9 @@ button.icon-button.active i.fa-retweet {
} }
} }
.status-card-video, .status-card-rich, .status-card-photo { .status-card-video,
.status-card-rich,
.status-card-photo {
margin-top: 14px; margin-top: 14px;
overflow: hidden; overflow: hidden;
@ -1850,7 +1875,7 @@ button.icon-button.active i.fa-retweet {
} }
.status-card__image-image { .status-card__image-image {
border-radius: 4px 0px 0px 4px; border-radius: 4px 0 0 4px;
display: block; display: block;
height: auto; height: auto;
margin: 0; margin: 0;
@ -1913,7 +1938,8 @@ button.icon-button.active i.fa-retweet {
} }
} }
&:focus, &:active { &:focus,
&:active {
outline: 0; outline: 0;
} }
} }
@ -1989,7 +2015,7 @@ button.icon-button.active i.fa-retweet {
.spoiler-button { .spoiler-button {
left: 4px; left: 4px;
position: absolute; position: absolute;
text-shadow: 0px 1px 1px #000, 1px 0px 1px #000; text-shadow: 0 1px 1px $color8, 1px 0 1px $color8;
top: 4px; top: 4px;
z-index: 100; z-index: 100;
} }
@ -2004,7 +2030,7 @@ button.icon-button.active i.fa-retweet {
border-bottom: 1px solid lighten($color1, 8%); border-bottom: 1px solid lighten($color1, 8%);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding: 10px 0px; padding: 10px 0;
} }
.account--panel__button, .account--panel__button,
@ -2028,7 +2054,7 @@ button.icon-button.active i.fa-retweet {
.modal-container__nav { .modal-container__nav {
align-items: center; align-items: center;
background: rgba(0, 0, 0, 0.5); background: rgba($color8, 0.5);
box-sizing: border-box; box-sizing: border-box;
color: $color5; color: $color5;
cursor: pointer; cursor: pointer;
@ -2111,7 +2137,8 @@ button.icon-button.active i.fa-retweet {
resize: vertical; resize: vertical;
width: 100%; width: 100%;
&:active, &:focus { &:active,
&:focus {
border-bottom-color: $color4; border-bottom-color: $color4;
background: rgba($color8, 0.1); background: rgba($color8, 0.1);
} }
@ -2148,7 +2175,8 @@ button.icon-button.active i.fa-retweet {
} }
} }
.status-list__unread-indicator, .notifications__unread-indicator { .status-list__unread-indicator,
.notifications__unread-indicator {
position: absolute; position: absolute;
top: 35px; top: 35px;
left: 0; left: 0;
@ -2165,6 +2193,7 @@ button.icon-button.active i.fa-retweet {
0% { 0% {
opacity: 1; opacity: 1;
} }
100% { 100% {
opacity: 0.5; opacity: 0.5;
} }
@ -2212,14 +2241,16 @@ button.icon-button.active i.fa-retweet {
height: 18px; height: 18px;
} }
img, svg { img,
svg {
width: 18px; width: 18px;
height: 18px; height: 18px;
filter: grayscale(100%); filter: grayscale(100%);
} }
&:hover { &:hover {
img, svg { img,
svg {
filter: grayscale(0); filter: grayscale(0);
} }
} }
@ -2227,7 +2258,8 @@ button.icon-button.active i.fa-retweet {
&.active { &.active {
border-bottom-color: $color4; border-bottom-color: $color4;
img, svg { img,
svg {
filter: grayscale(0); filter: grayscale(0);
} }
} }
@ -2295,7 +2327,7 @@ button.icon-button.active i.fa-retweet {
position: relative; position: relative;
cursor: pointer; cursor: pointer;
&.active:after { &.active::after {
content: ""; content: "";
display: block; display: block;
position: absolute; position: absolute;
@ -2340,14 +2372,16 @@ button.icon-button.active i.fa-retweet {
} }
.emoji-row .emoji { .emoji-row .emoji {
img, svg { img,
svg {
transition: transform 60ms ease-in-out; transition: transform 60ms ease-in-out;
} }
&:hover { &:hover {
background: lighten($color2, 3%); background: lighten($color2, 3%);
img, svg { img,
svg {
transform: translateZ(0) scale(1.2); transform: translateZ(0) scale(1.2);
} }
} }
@ -2460,7 +2494,8 @@ button.icon-button.active i.fa-retweet {
.emoji-button { .emoji-button {
outline: 0; outline: 0;
&:active, &:focus { &:active,
&:focus {
outline: 0 !important; outline: 0 !important;
} }
@ -2474,7 +2509,9 @@ button.icon-button.active i.fa-retweet {
margin-top: 2px; margin-top: 2px;
} }
&:hover, &:active, &:focus { &:hover,
&:active,
&:focus {
img { img {
opacity: 1; opacity: 1;
filter: none; filter: none;
@ -2498,7 +2535,7 @@ button.icon-button.active i.fa-retweet {
top: 27px; top: 27px;
width: 230px; width: 230px;
background: $color5; background: $color5;
border-radius: 0 4px 4px 4px; border-radius: 0 4px 4px;
z-index: 2; z-index: 2;
overflow: hidden; overflow: hidden;
} }
@ -2509,7 +2546,8 @@ button.icon-button.active i.fa-retweet {
cursor: pointer; cursor: pointer;
display: flex; display: flex;
&:hover, &.active { &:hover,
&.active {
background: $color4; background: $color4;
color: $color5; color: $color5;
@ -2582,7 +2620,9 @@ button.icon-button.active i.fa-retweet {
border: 0; border: 0;
} }
&::-moz-focus-inner, &:focus, &:active { &::-moz-focus-inner,
&:focus,
&:active {
outline: 0 !important; outline: 0 !important;
} }
@ -2656,7 +2696,9 @@ button.icon-button.active i.fa-retweet {
color: $color2; color: $color2;
text-decoration: none; text-decoration: none;
&:hover, &:active, &:focus { &:hover,
&:active,
&:focus {
color: lighten($color2, 4%); color: lighten($color2, 4%);
text-decoration: underline; text-decoration: underline;
} }
@ -2671,7 +2713,7 @@ button.icon-button.active i.fa-retweet {
z-index: 9999; z-index: 9999;
opacity: 0; opacity: 0;
background: rgba($color8, 0.7); background: rgba($color8, 0.7);
transform: translateZ(0px); transform: translateZ(0);
} }
.modal-root__container { .modal-root__container {
@ -2702,7 +2744,8 @@ button.icon-button.active i.fa-retweet {
max-height: 80vh; max-height: 80vh;
position: relative; position: relative;
img, video { img,
video {
max-width: 80vw; max-width: 80vw;
max-height: 80vh; max-height: 80vh;
} }
@ -2781,11 +2824,14 @@ button.icon-button.active i.fa-retweet {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
&:hover, &:focus, &:active { &:hover,
&:focus,
&:active {
color: darken($color2, 38%); color: darken($color2, 38%);
} }
&.onboarding-modal__done, &.onboarding-modal__next { &.onboarding-modal__done,
&.onboarding-modal__next {
color: $color4; color: $color4;
} }
} }
@ -2830,7 +2876,9 @@ button.icon-button.active i.fa-retweet {
a { a {
color: $color4; color: $color4;
&:hover, &:focus, &:active { &:hover,
&:focus,
&:active {
color: lighten($color4, 4%); color: lighten($color4, 4%);
} }
} }
@ -2861,7 +2909,7 @@ button.icon-button.active i.fa-retweet {
} }
.onboarding-modal__page-one__elephant-friend { .onboarding-modal__page-one__elephant-friend {
background: url('../images/elephant-friend.png') no-repeat center center/contain; background: url('../images/elephant-friend.png') no-repeat center center / contain;
width: 147px; width: 147px;
height: 160px; height: 160px;
margin-right: 10px; margin-right: 10px;
@ -2983,7 +3031,8 @@ button.icon-button.active i.fa-retweet {
margin-left: 10px; margin-left: 10px;
} }
.boost-modal, .confirmation-modal { .boost-modal,
.confirmation-modal {
background: lighten($color2, 8%); background: lighten($color2, 8%);
color: $color1; color: $color1;
border-radius: 8px; border-radius: 8px;
@ -3018,7 +3067,8 @@ button.icon-button.active i.fa-retweet {
} }
} }
.boost-modal__action-bar, .confirmation-modal__action-bar { .boost-modal__action-bar,
.confirmation-modal__action-bar {
display: flex; display: flex;
background: $color2; background: $color2;
padding: 10px; padding: 10px;
@ -3065,7 +3115,9 @@ button.icon-button.active i.fa-retweet {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
&:hover, &:focus, &:active { &:hover,
&:focus,
&:active {
color: darken($color2, 38%); color: darken($color2, 38%);
} }
} }
@ -3226,7 +3278,7 @@ button.icon-button.active i.fa-retweet {
/* Status Video Player */ /* Status Video Player */
.status__video-player { .status__video-player {
background: #000; background: $color8;
box-sizing: border-box; box-sizing: border-box;
cursor: default; /* May not be needed */ cursor: default; /* May not be needed */
margin-top: 8px; margin-top: 8px;
@ -3246,18 +3298,18 @@ button.icon-button.active i.fa-retweet {
.status__video-player-expand, .status__video-player-expand,
.status__video-player-mute { .status__video-player-mute {
color: #fff; color: $color5;
opacity: 0.8; opacity: 0.8;
position: absolute; position: absolute;
right: 4px; right: 4px;
text-shadow: 0px 1px 1px #000, 1px 0px 1px #000; text-shadow: 0 1px 1px $color8, 1px 0 1px $color8;
} }
.status__video-player-spoiler { .status__video-player-spoiler {
color: #fff; color: $color5;
left: 4px; left: 4px;
position: absolute; position: absolute;
text-shadow: 0px 1px 1px #000, 1px 0px 1px #000; text-shadow: 0 1px 1px $color8, 1px 0 1px $color8;
top: 4px; top: 4px;
z-index: 100; z-index: 100;
} }
@ -3281,7 +3333,7 @@ button.icon-button.active i.fa-retweet {
.media-spoiler-video-play-icon { .media-spoiler-video-play-icon {
border-radius: 100px; border-radius: 100px;
color: rgba(255, 255, 255, 0.8); color: rgba($color5, 0.8);
font-size: 36px; font-size: 36px;
left: 50%; left: 50%;
padding: 5px; padding: 5px;

View file

@ -13,7 +13,8 @@
} }
} }
.powered-by, .single-user-login { .powered-by,
.single-user-login {
font-weight: 400; font-weight: 400;
a { a {

View file

@ -42,7 +42,9 @@ code {
} }
} }
.input.file, .input.select, .input.radio_buttons { .input.file,
.input.select,
.input.radio_buttons {
padding: 15px 0; padding: 15px 0;
margin-bottom: 0; margin-bottom: 0;
@ -63,7 +65,7 @@ code {
margin-bottom: 5px; margin-bottom: 5px;
font-family: inherit; font-family: inherit;
font-size: 14px; font-size: 14px;
color: white; color: $color5;
display: block; display: block;
width: auto; width: auto;
} }
@ -74,7 +76,7 @@ code {
label { label {
font-family: inherit; font-family: inherit;
font-size: 14px; font-size: 14px;
color: white; color: $color5;
display: block; display: block;
width: auto; width: auto;
} }
@ -86,8 +88,8 @@ code {
} }
input[type=checkbox] { input[type=checkbox] {
position: absolute; position: absolute;
left: 0; left: 0;
top: 1px; top: 1px;
margin: 0; margin: 0;
} }
@ -98,7 +100,11 @@ code {
} }
} }
input[type=text], input[type=number], input[type=email], input[type=password], textarea { input[type=text],
input[type=number],
input[type=email],
input[type=password],
textarea {
background: transparent; background: transparent;
box-sizing: border-box; box-sizing: border-box;
border: 0; border: 0;
@ -125,7 +131,8 @@ code {
border-bottom-color: $color7; border-bottom-color: $color7;
} }
&:active, &:focus { &:active,
&:focus {
border-bottom-color: $color4; border-bottom-color: $color4;
background: rgba($color8, 0.1); background: rgba($color8, 0.1);
} }
@ -136,7 +143,9 @@ code {
color: $color6; color: $color6;
} }
input[type=text], input[type=email], input[type=password] { input[type=text],
input[type=email],
input[type=password] {
border-bottom-color: $color6; border-bottom-color: $color6;
} }
@ -152,7 +161,8 @@ code {
margin-top: 30px; margin-top: 30px;
} }
button, .block-button { button,
.block-button {
display: block; display: block;
width: 100%; width: 100%;
border: 0; border: 0;
@ -174,7 +184,8 @@ code {
background-color: lighten($color4, 5%); background-color: lighten($color4, 5%);
} }
&:active, &:focus { &:active,
&:focus {
position: relative; position: relative;
top: 1px; top: 1px;
background-color: darken($color4, 5%); background-color: darken($color4, 5%);
@ -187,7 +198,8 @@ code {
background-color: lighten($color6, 5%); background-color: lighten($color6, 5%);
} }
&:active, &:focus { &:active,
&:focus {
background-color: darken($color6, 5%); background-color: darken($color6, 5%);
} }
} }
@ -226,7 +238,8 @@ code {
} }
} }
.oauth-prompt, .follow-prompt { .oauth-prompt,
.follow-prompt {
margin-bottom: 30px; margin-bottom: 30px;
text-align: center; text-align: center;
color: $color3; color: $color3;
@ -248,7 +261,7 @@ code {
.qr-code { .qr-code {
flex: 0 0 auto; flex: 0 0 auto;
background: #fff; background: $color5;
padding: 4px; padding: 4px;
margin-bottom: 20px; margin-bottom: 20px;
box-shadow: 0 0 15px rgba($color8, 0.2); box-shadow: 0 0 15px rgba($color8, 0.2);
@ -295,7 +308,9 @@ code {
color: $color5; color: $color5;
text-decoration: underline; text-decoration: underline;
&:hover, &:focus, &:active { &:hover,
&:focus,
&:active {
text-decoration: none; text-decoration: none;
} }
} }
@ -316,7 +331,8 @@ code {
display: flex; display: flex;
align-items: center; align-items: center;
.actions, .pagination { .actions,
.pagination {
flex: 1 1 auto; flex: 1 1 auto;
} }

View file

@ -6,7 +6,8 @@
border-radius: 4px; border-radius: 4px;
margin-bottom: 20px; margin-bottom: 20px;
strong, a { strong,
a {
font-weight: 500; font-weight: 500;
} }

View file

@ -1,7 +1,8 @@
body.rtl { body.rtl {
direction: rtl; direction: rtl;
.column-link__icon, .column-header__icon { .column-link__icon,
.column-header__icon {
margin-right: 0; margin-right: 0;
margin-left: 5px; margin-left: 5px;
} }
@ -105,13 +106,15 @@ body.rtl {
float: right; float: right;
} }
.detailed-status__favorites, .detailed-status__reblogs { .detailed-status__favorites,
.detailed-status__reblogs {
margin-left: 0; margin-left: 0;
margin-right: 6px; margin-right: 6px;
} }
@media screen and (min-width: 1025px) { @media screen and (min-width: 1025px) {
.column, .drawer { .column,
.drawer {
padding-left: 5px; padding-left: 5px;
padding-right: 5px; padding-right: 5px;
@ -121,13 +124,14 @@ body.rtl {
} }
&:last-child { &:last-child {
padding-right: 0px; padding-right: 0;
padding-left: 10px; padding-left: 10px;
} }
} }
.columns-area > div { .columns-area > div {
.column, .drawer { .column,
.drawer {
padding-left: 5px; padding-left: 5px;
padding-right: 5px; padding-right: 5px;
} }

View file

@ -5,24 +5,31 @@
.entry { .entry {
background: $color5; background: $color5;
.detailed-status.light, .status.light { .detailed-status.light,
.status.light {
border-bottom: 1px solid $color2; border-bottom: 1px solid $color2;
} }
&:last-child { &:last-child {
&, .detailed-status.light, .status.light { &,
.detailed-status.light,
.status.light {
border-bottom: 0; border-bottom: 0;
border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
} }
} }
&:first-child { &:first-child {
&, .detailed-status.light, .status.light { &,
.detailed-status.light,
.status.light {
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
} }
&:last-child { &:last-child {
&, .detailed-status.light, .status.light { &,
.detailed-status.light,
.status.light {
border-radius: 4px; border-radius: 4px;
} }
} }
@ -30,7 +37,7 @@
} }
.status.light { .status.light {
padding: 14px 14px 14px (48px + 14px*2); padding: 14px 14px 14px (48px + 14px * 2);
position: relative; position: relative;
min-height: 48px; min-height: 48px;
cursor: default; cursor: default;
@ -232,7 +239,8 @@
} }
} }
.media-item, .video-item { .media-item,
.video-item {
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
left: auto; left: auto;
@ -323,8 +331,8 @@
} }
.pre-header { .pre-header {
padding: 14px 0px; padding: 14px 0;
padding-left: (48px + 14px*2); padding-left: (48px + 14px * 2);
padding-bottom: 0; padding-bottom: 0;
margin-bottom: -4px; margin-bottom: -4px;
color: $color3; color: $color3;
@ -333,7 +341,7 @@
.pre-header__icon { .pre-header__icon {
position: absolute; position: absolute;
left: (48px + 14px*2 - 30px); left: (48px + 14px * 2 - 30px);
} }
.status__display-name.muted strong { .status__display-name.muted strong {

View file

@ -5,7 +5,8 @@
border-collapse: collapse; border-collapse: collapse;
margin-bottom: 20px; margin-bottom: 20px;
th, td { th,
td {
padding: 8px; padding: 8px;
line-height: 18px; line-height: 18px;
vertical-align: top; vertical-align: top;
@ -24,7 +25,8 @@
font-weight: 500; font-weight: 500;
} }
& > tbody > tr:nth-child(odd) > td, & > tbody > tr:nth-child(odd) > th { & > tbody > tr:nth-child(odd) > td,
& > tbody > tr:nth-child(odd) > th {
background: $color1; background: $color1;
} }

2
app/javascript/styles/variables.scss Executable file → Normal file
View file

@ -6,3 +6,5 @@ $color5: #ffffff !default; // white
$color6: #df405a !default; // error red $color6: #df405a !default; // error red
$color7: #79bd9a !default; // succ green $color7: #79bd9a !default; // succ green
$color8: #000000 !default; // black $color8: #000000 !default; // black
$color9: #ff5050 !default; // red
$color10: #ca8f04 !default; // dark goldenrod