From d63c291f86b1608a01322f1d8c1652361ea1dc8a Mon Sep 17 00:00:00 2001 From: yhirano Date: Mon, 8 May 2017 03:47:31 +0900 Subject: [PATCH] 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 --- .codeclimate.yml | 3 + .scss-lint.yml | 264 ++++++++++++++++++++++ Gemfile | 1 + Gemfile.lock | 5 + app/javascript/styles/about.scss | 20 +- app/javascript/styles/accounts.scss | 29 ++- app/javascript/styles/admin.scss | 9 +- app/javascript/styles/components.scss | 196 ++++++++++------ app/javascript/styles/footer.scss | 3 +- app/javascript/styles/forms.scss | 46 ++-- app/javascript/styles/landing_strip.scss | 3 +- app/javascript/styles/rtl.scss | 14 +- app/javascript/styles/stream_entries.scss | 26 ++- app/javascript/styles/tables.scss | 6 +- app/javascript/styles/variables.scss | 2 + 15 files changed, 503 insertions(+), 124 deletions(-) create mode 100644 .scss-lint.yml mode change 100755 => 100644 app/javascript/styles/variables.scss diff --git a/.codeclimate.yml b/.codeclimate.yml index 5ad9a71923..29701a7775 100644 --- a/.codeclimate.yml +++ b/.codeclimate.yml @@ -9,10 +9,13 @@ engines: enabled: true rubocop: enabled: true + scss-lint: + enabled: true ratings: paths: - "**.rb" - "**.js" + - "**.scss" exclude_paths: - spec/ - vendor/asset diff --git a/.scss-lint.yml b/.scss-lint.yml new file mode 100644 index 0000000000..5d7cc4da51 --- /dev/null +++ b/.scss-lint.yml @@ -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 diff --git a/Gemfile b/Gemfile index ff8e8a3d18..7a2a16c3aa 100644 --- a/Gemfile +++ b/Gemfile @@ -88,6 +88,7 @@ group :development do gem 'rubocop', '0.46.0', require: false gem 'brakeman', '~> 3.6.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-rails' diff --git a/Gemfile.lock b/Gemfile.lock index 99f07bc125..0c9c15e526 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -392,6 +392,10 @@ GEM crass (~> 1.0.2) nokogiri (>= 1.4.4) nokogumbo (~> 1.4.1) + sass (3.4.23) + scss_lint (0.42.2) + rainbow (~> 2.0) + sass (~> 3.4.15) sidekiq (5.0.0) concurrent-ruby (~> 1.0) connection_pool (~> 2.2, >= 2.2.0) @@ -534,6 +538,7 @@ DEPENDENCIES rubocop (= 0.46.0) ruby-oembed sanitize + scss_lint (= 0.42.2) sidekiq sidekiq-scheduler sidekiq-unique-jobs diff --git a/app/javascript/styles/about.scss b/app/javascript/styles/about.scss index c874529966..b5626551e0 100644 --- a/app/javascript/styles/about.scss +++ b/app/javascript/styles/about.scss @@ -44,7 +44,8 @@ color: $color2; } - ul, ol { + ul, + ol { list-style: inherit; margin-left: 20px; @@ -57,11 +58,13 @@ } } - li > ol, li > ul { + li > ol, + li > ul { margin-top: 20px; } - p, li { + p, + li { font: 16px/28px 'mastodon-font-sans-serif', sans-serif; font-weight: 400; margin-bottom: 12px; @@ -74,7 +77,7 @@ em { display: inline-block; - padding: 7px 7px 5px 7px; + padding: 7px 7px 5px; margin: 0 2px; background: $color3; color: $color1; @@ -134,7 +137,8 @@ text-align: right; font: 16px/28px 'mastodon-font-sans-serif', sans-serif; - span, strong { + span, + strong { display: block; } @@ -333,7 +337,8 @@ } } - .simple_form, .closed-registrations-message { + .simple_form, + .closed-registrations-message { width: 300px; flex: 0 0 auto; background: rgba(darken($color1, 7%), 0.5); @@ -359,7 +364,8 @@ display: none; } - .simple_form, .closed-registrations-message { + .simple_form, + .closed-registrations-message { flex: auto; } } diff --git a/app/javascript/styles/accounts.scss b/app/javascript/styles/accounts.scss index 99af9c9820..e1fa28f435 100644 --- a/app/javascript/styles/accounts.scss +++ b/app/javascript/styles/accounts.scss @@ -13,7 +13,7 @@ box-shadow: none; } - &:after { + &::after { background: linear-gradient(rgba($color8, 0.5), rgba($color8, 0.8)); display: block; content: ""; @@ -83,7 +83,7 @@ .counter { width: 80px; color: $color3; - padding: 5px 10px 0px; + padding: 5px 10px 0; margin-bottom: 10px; border-right: 1px solid $color3; cursor: default; @@ -93,7 +93,7 @@ display: block; } - &:after { + &::after { display: block; content: ""; position: absolute; @@ -106,14 +106,14 @@ } &.active { - &:after { + &::after { border-bottom: 4px solid $color4; opacity: 1; } } &:hover { - &:after { + &::after { opacity: 1; transition-duration: 0.2s; } @@ -173,7 +173,12 @@ text-align: center; overflow: hidden; - a, .current, .next, .prev, .page, .gap { + a, + .current, + .next, + .prev, + .page, + .gap { font-size: 14px; color: $color5; font-weight: 500; @@ -194,7 +199,8 @@ cursor: default; } - .prev, .next { + .prev, + .next { text-transform: uppercase; color: $color2; } @@ -227,11 +233,16 @@ @media screen and (max-width: 360px) { padding: 30px 20px; - a, .current, .next, .prev, .gap { + a, + .current, + .next, + .prev, + .gap { display: none; } - .next, .prev { + .next, + .prev { display: inline-block; } } diff --git a/app/javascript/styles/admin.scss b/app/javascript/styles/admin.scss index 6d246ded26..3442464e70 100644 --- a/app/javascript/styles/admin.scss +++ b/app/javascript/styles/admin.scss @@ -16,7 +16,7 @@ height: 100%; padding: 0; overflow-y: auto; - + .logo { display: block; margin: 40px auto; @@ -50,7 +50,7 @@ &.selected { background: darken($color1, 2%); - border-radius: 4px 0 0 0; + border-radius: 4px 0 0; } } @@ -118,10 +118,12 @@ .simple_form { max-width: 400px; + .label_input { label.select { width: 50%; } + select { width: 50%; float: right; @@ -134,7 +136,8 @@ overflow-y: auto; -webkit-overflow-scrolling: touch; - .sidebar-wrapper, .content-wrapper { + .sidebar-wrapper, + .content-wrapper { flex: 0 0 auto; height: auto; overflow: initial; diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index 17a4e09d45..8e9286572c 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -1,8 +1,8 @@ @import 'variables'; .app-body { - -webkit-overflow-scrolling: touch; - -ms-overflow-style: -ms-autohiding-scrollbar; + -webkit-overflow-scrolling: touch; + -ms-overflow-style: -ms-autohiding-scrollbar; } .button { @@ -91,7 +91,9 @@ cursor: pointer; transition: color 100ms ease-in; - &:hover, &:active, &:focus { + &:hover, + &:active, + &:focus { color: lighten($color1, 33%); transition: color 200ms ease-out; } @@ -109,14 +111,18 @@ border: 0; } - &::-moz-focus-inner, &:focus, &:active { + &::-moz-focus-inner, + &:focus, + &:active { outline: 0 !important; } &.inverted { color: lighten($color1, 33%); - &:hover, &:active, &:focus { + &:hover, + &:active, + &:focus { color: lighten($color1, 26%); } @@ -154,7 +160,9 @@ outline: 0; transition: color 100ms ease-in; - &:hover, &:active, &:focus { + &:hover, + &:active, + &:focus { color: lighten($color1, 26%); transition: color 200ms ease-out; } @@ -172,7 +180,9 @@ border: 0; } - &::-moz-focus-inner, &:focus, &:active { + &::-moz-focus-inner, + &:focus, + &:active { outline: 0 !important; } } @@ -181,15 +191,15 @@ color: $color4; } -.dropdown--active:after { +.dropdown--active::after { content: ""; display: block; position: absolute; width: 0; height: 0; border-style: solid; - border-width: 0 4.5px 7.8px 4.5px; - border-color: transparent transparent $color2 transparent; + border-width: 0 4.5px 7.8px; + border-color: transparent transparent $color2; bottom: 8px; right: 104px; } @@ -202,7 +212,7 @@ } .ellipsis { - &:after { + &::after { content: "…"; } } @@ -235,7 +245,9 @@ font-weight: 500; text-decoration: underline; - &:hover, &:active, &:focus { + &:hover, + &:active, + &:focus { text-decoration: none; } } @@ -246,7 +258,7 @@ font-family: inherit; font-size: 14px; background: $color5; - border-radius: 0 0 4px 0; + border-radius: 0 0 4px; } .compose-form__buttons-wrapper { @@ -320,7 +332,8 @@ } } -.compose-form__textarea, .follow-form__input { +.compose-form__textarea, +.follow-form__input { background: $color5; &:disabled { @@ -331,8 +344,8 @@ .compose-form__autosuggest-wrapper { position: relative; - .dropdown--active:after { - border-color: transparent transparent $color5 transparent; + .dropdown--active::after { + border-color: transparent transparent $color5; bottom: -1px; right: 8px; } @@ -467,7 +480,7 @@ a.status__content__spoiler-link { color: lighten($color1, 8%); font-weight: 500; font-size: 11px; - padding: 0px 6px; + padding: 0 6px; text-transform: uppercase; line-height: inherit; } @@ -784,7 +797,7 @@ a.status__content__spoiler-link { right: initial; } - &:after { + &::after { bottom: initial; margin-left: 11px; margin-top: -7px; @@ -964,12 +977,12 @@ a.status__content__spoiler-link { position: absolute; .star-icon { - color: #ca8f04; + color: $color10; } } .star-icon.active { - color: #ca8f04; + color: $color10; } .notification__display-name { @@ -1006,7 +1019,8 @@ a.status__content__spoiler-link { } } -.transparent-background, .imageloader { +.transparent-background, +.imageloader { background: url('../images/void.png'); } @@ -1140,7 +1154,7 @@ a.status__content__spoiler-link { flex-direction: row; justify-content: flex-start; overflow-x: auto; - position: relative; + position: relative; } @media screen and (min-width: 360px) { @@ -1190,7 +1204,8 @@ a.status__content__spoiler-link { border-bottom: 2px solid transparent; } -.column, .drawer { +.column, +.drawer { flex: 1 1 100%; overflow: hidden; } @@ -1207,7 +1222,8 @@ a.status__content__spoiler-link { } @media screen and (max-width: 1024px) { - .column, .drawer { + .column, + .drawer { width: 100%; padding: 0; } @@ -1216,7 +1232,8 @@ a.status__content__spoiler-link { flex-direction: column; } - .search__input, .autosuggest-textarea__textarea { + .search__input, + .autosuggest-textarea__textarea { font-size: 16px; } } @@ -1226,7 +1243,8 @@ a.status__content__spoiler-link { padding: 0; } - .column, .drawer { + .column, + .drawer { flex: 0 0 auto; padding: 10px; padding-left: 5px; @@ -1242,7 +1260,8 @@ a.status__content__spoiler-link { } .columns-area > div { - .column, .drawer { + .column, + .drawer { padding-left: 5px; padding-right: 5px; } @@ -1257,7 +1276,8 @@ a.status__content__spoiler-link { } @media screen and (min-width: 1900px) { - .column, .drawer { + .column, + .drawer { width: 400px; border-radius: 4px; height: 96vh; @@ -1346,7 +1366,9 @@ a.status__content__spoiler-link { color: $color4; } - &:hover, &:focus, &:active { + &:hover, + &:focus, + &:active { background: lighten($color1, 14%); transition: all 100ms linear; } @@ -1508,8 +1530,8 @@ a.status__content__spoiler-link { position: absolute; width: 14px; height: 10px; - top: 0px; - bottom: 0px; + top: 0; + bottom: 0; margin-top: auto; margin-bottom: auto; line-height: 0; @@ -1527,8 +1549,8 @@ a.status__content__spoiler-link { position: absolute; width: 10px; height: 10px; - top: 0px; - bottom: 0px; + top: 0; + bottom: 0; margin-top: auto; margin-bottom: auto; line-height: 0; @@ -1696,7 +1718,7 @@ a.status__content__spoiler-link { } .character-counter--over { - color: #ff5050; + color: $color9; } .getting-started__wrapper { @@ -1706,7 +1728,7 @@ a.status__content__spoiler-link { .getting-started { box-sizing: border-box; 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; p { @@ -1727,10 +1749,11 @@ a.status__content__spoiler-link { display: block; font-family: inherit; margin-bottom: 10px; - padding: 7px 0px; + padding: 7px 0; width: 100%; - &:focus, &:active { + &:focus, + &:active { color: $color5; 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; overflow: hidden; @@ -1850,7 +1875,7 @@ button.icon-button.active i.fa-retweet { } .status-card__image-image { - border-radius: 4px 0px 0px 4px; + border-radius: 4px 0 0 4px; display: block; height: auto; margin: 0; @@ -1913,7 +1938,8 @@ button.icon-button.active i.fa-retweet { } } - &:focus, &:active { + &:focus, + &:active { outline: 0; } } @@ -1989,7 +2015,7 @@ button.icon-button.active i.fa-retweet { .spoiler-button { left: 4px; position: absolute; - text-shadow: 0px 1px 1px #000, 1px 0px 1px #000; + text-shadow: 0 1px 1px $color8, 1px 0 1px $color8; top: 4px; z-index: 100; } @@ -2004,7 +2030,7 @@ button.icon-button.active i.fa-retweet { border-bottom: 1px solid lighten($color1, 8%); display: flex; flex-direction: row; - padding: 10px 0px; + padding: 10px 0; } .account--panel__button, @@ -2028,7 +2054,7 @@ button.icon-button.active i.fa-retweet { .modal-container__nav { align-items: center; - background: rgba(0, 0, 0, 0.5); + background: rgba($color8, 0.5); box-sizing: border-box; color: $color5; cursor: pointer; @@ -2111,7 +2137,8 @@ button.icon-button.active i.fa-retweet { resize: vertical; width: 100%; - &:active, &:focus { + &:active, + &:focus { border-bottom-color: $color4; 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; top: 35px; left: 0; @@ -2165,6 +2193,7 @@ button.icon-button.active i.fa-retweet { 0% { opacity: 1; } + 100% { opacity: 0.5; } @@ -2212,14 +2241,16 @@ button.icon-button.active i.fa-retweet { height: 18px; } - img, svg { + img, + svg { width: 18px; height: 18px; filter: grayscale(100%); } &:hover { - img, svg { + img, + svg { filter: grayscale(0); } } @@ -2227,7 +2258,8 @@ button.icon-button.active i.fa-retweet { &.active { border-bottom-color: $color4; - img, svg { + img, + svg { filter: grayscale(0); } } @@ -2295,7 +2327,7 @@ button.icon-button.active i.fa-retweet { position: relative; cursor: pointer; - &.active:after { + &.active::after { content: ""; display: block; position: absolute; @@ -2340,14 +2372,16 @@ button.icon-button.active i.fa-retweet { } .emoji-row .emoji { - img, svg { + img, + svg { transition: transform 60ms ease-in-out; } &:hover { background: lighten($color2, 3%); - img, svg { + img, + svg { transform: translateZ(0) scale(1.2); } } @@ -2460,7 +2494,8 @@ button.icon-button.active i.fa-retweet { .emoji-button { outline: 0; - &:active, &:focus { + &:active, + &:focus { outline: 0 !important; } @@ -2474,7 +2509,9 @@ button.icon-button.active i.fa-retweet { margin-top: 2px; } - &:hover, &:active, &:focus { + &:hover, + &:active, + &:focus { img { opacity: 1; filter: none; @@ -2498,7 +2535,7 @@ button.icon-button.active i.fa-retweet { top: 27px; width: 230px; background: $color5; - border-radius: 0 4px 4px 4px; + border-radius: 0 4px 4px; z-index: 2; overflow: hidden; } @@ -2509,7 +2546,8 @@ button.icon-button.active i.fa-retweet { cursor: pointer; display: flex; - &:hover, &.active { + &:hover, + &.active { background: $color4; color: $color5; @@ -2582,7 +2620,9 @@ button.icon-button.active i.fa-retweet { border: 0; } - &::-moz-focus-inner, &:focus, &:active { + &::-moz-focus-inner, + &:focus, + &:active { outline: 0 !important; } @@ -2656,7 +2696,9 @@ button.icon-button.active i.fa-retweet { color: $color2; text-decoration: none; - &:hover, &:active, &:focus { + &:hover, + &:active, + &:focus { color: lighten($color2, 4%); text-decoration: underline; } @@ -2671,7 +2713,7 @@ button.icon-button.active i.fa-retweet { z-index: 9999; opacity: 0; background: rgba($color8, 0.7); - transform: translateZ(0px); + transform: translateZ(0); } .modal-root__container { @@ -2702,7 +2744,8 @@ button.icon-button.active i.fa-retweet { max-height: 80vh; position: relative; - img, video { + img, + video { max-width: 80vw; max-height: 80vh; } @@ -2781,11 +2824,14 @@ button.icon-button.active i.fa-retweet { font-size: 14px; font-weight: 500; - &:hover, &:focus, &:active { + &:hover, + &:focus, + &:active { color: darken($color2, 38%); } - &.onboarding-modal__done, &.onboarding-modal__next { + &.onboarding-modal__done, + &.onboarding-modal__next { color: $color4; } } @@ -2830,7 +2876,9 @@ button.icon-button.active i.fa-retweet { a { color: $color4; - &:hover, &:focus, &:active { + &:hover, + &:focus, + &:active { color: lighten($color4, 4%); } } @@ -2861,7 +2909,7 @@ button.icon-button.active i.fa-retweet { } .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; height: 160px; margin-right: 10px; @@ -2983,7 +3031,8 @@ button.icon-button.active i.fa-retweet { margin-left: 10px; } -.boost-modal, .confirmation-modal { +.boost-modal, +.confirmation-modal { background: lighten($color2, 8%); color: $color1; 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; background: $color2; padding: 10px; @@ -3065,7 +3115,9 @@ button.icon-button.active i.fa-retweet { font-size: 14px; font-weight: 500; - &:hover, &:focus, &:active { + &:hover, + &:focus, + &:active { color: darken($color2, 38%); } } @@ -3226,7 +3278,7 @@ button.icon-button.active i.fa-retweet { /* Status Video Player */ .status__video-player { - background: #000; + background: $color8; box-sizing: border-box; cursor: default; /* May not be needed */ margin-top: 8px; @@ -3246,18 +3298,18 @@ button.icon-button.active i.fa-retweet { .status__video-player-expand, .status__video-player-mute { - color: #fff; + color: $color5; opacity: 0.8; position: absolute; 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 { - color: #fff; + color: $color5; left: 4px; position: absolute; - text-shadow: 0px 1px 1px #000, 1px 0px 1px #000; + text-shadow: 0 1px 1px $color8, 1px 0 1px $color8; top: 4px; z-index: 100; } @@ -3281,7 +3333,7 @@ button.icon-button.active i.fa-retweet { .media-spoiler-video-play-icon { border-radius: 100px; - color: rgba(255, 255, 255, 0.8); + color: rgba($color5, 0.8); font-size: 36px; left: 50%; padding: 5px; diff --git a/app/javascript/styles/footer.scss b/app/javascript/styles/footer.scss index 07ecb5e755..90d430dfaa 100644 --- a/app/javascript/styles/footer.scss +++ b/app/javascript/styles/footer.scss @@ -13,7 +13,8 @@ } } - .powered-by, .single-user-login { + .powered-by, + .single-user-login { font-weight: 400; a { diff --git a/app/javascript/styles/forms.scss b/app/javascript/styles/forms.scss index 70c049a4ba..20d28acb66 100644 --- a/app/javascript/styles/forms.scss +++ b/app/javascript/styles/forms.scss @@ -42,7 +42,9 @@ code { } } - .input.file, .input.select, .input.radio_buttons { + .input.file, + .input.select, + .input.radio_buttons { padding: 15px 0; margin-bottom: 0; @@ -63,7 +65,7 @@ code { margin-bottom: 5px; font-family: inherit; font-size: 14px; - color: white; + color: $color5; display: block; width: auto; } @@ -74,7 +76,7 @@ code { label { font-family: inherit; font-size: 14px; - color: white; + color: $color5; display: block; width: auto; } @@ -86,8 +88,8 @@ code { } input[type=checkbox] { - position: absolute; - left: 0; + position: absolute; + left: 0; top: 1px; 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; box-sizing: border-box; border: 0; @@ -125,7 +131,8 @@ code { border-bottom-color: $color7; } - &:active, &:focus { + &:active, + &:focus { border-bottom-color: $color4; background: rgba($color8, 0.1); } @@ -136,7 +143,9 @@ code { color: $color6; } - input[type=text], input[type=email], input[type=password] { + input[type=text], + input[type=email], + input[type=password] { border-bottom-color: $color6; } @@ -152,7 +161,8 @@ code { margin-top: 30px; } - button, .block-button { + button, + .block-button { display: block; width: 100%; border: 0; @@ -174,7 +184,8 @@ code { background-color: lighten($color4, 5%); } - &:active, &:focus { + &:active, + &:focus { position: relative; top: 1px; background-color: darken($color4, 5%); @@ -187,7 +198,8 @@ code { background-color: lighten($color6, 5%); } - &:active, &:focus { + &:active, + &:focus { background-color: darken($color6, 5%); } } @@ -226,7 +238,8 @@ code { } } -.oauth-prompt, .follow-prompt { +.oauth-prompt, +.follow-prompt { margin-bottom: 30px; text-align: center; color: $color3; @@ -248,7 +261,7 @@ code { .qr-code { flex: 0 0 auto; - background: #fff; + background: $color5; padding: 4px; margin-bottom: 20px; box-shadow: 0 0 15px rgba($color8, 0.2); @@ -295,7 +308,9 @@ code { color: $color5; text-decoration: underline; - &:hover, &:focus, &:active { + &:hover, + &:focus, + &:active { text-decoration: none; } } @@ -316,7 +331,8 @@ code { display: flex; align-items: center; - .actions, .pagination { + .actions, + .pagination { flex: 1 1 auto; } diff --git a/app/javascript/styles/landing_strip.scss b/app/javascript/styles/landing_strip.scss index 4c24031600..077827180b 100644 --- a/app/javascript/styles/landing_strip.scss +++ b/app/javascript/styles/landing_strip.scss @@ -6,7 +6,8 @@ border-radius: 4px; margin-bottom: 20px; - strong, a { + strong, + a { font-weight: 500; } diff --git a/app/javascript/styles/rtl.scss b/app/javascript/styles/rtl.scss index 6abb2d25c4..93cbd77d11 100644 --- a/app/javascript/styles/rtl.scss +++ b/app/javascript/styles/rtl.scss @@ -1,7 +1,8 @@ body.rtl { direction: rtl; - .column-link__icon, .column-header__icon { + .column-link__icon, + .column-header__icon { margin-right: 0; margin-left: 5px; } @@ -105,13 +106,15 @@ body.rtl { float: right; } - .detailed-status__favorites, .detailed-status__reblogs { + .detailed-status__favorites, + .detailed-status__reblogs { margin-left: 0; margin-right: 6px; } @media screen and (min-width: 1025px) { - .column, .drawer { + .column, + .drawer { padding-left: 5px; padding-right: 5px; @@ -121,13 +124,14 @@ body.rtl { } &:last-child { - padding-right: 0px; + padding-right: 0; padding-left: 10px; } } .columns-area > div { - .column, .drawer { + .column, + .drawer { padding-left: 5px; padding-right: 5px; } diff --git a/app/javascript/styles/stream_entries.scss b/app/javascript/styles/stream_entries.scss index fac4703b9b..bd679f00bb 100644 --- a/app/javascript/styles/stream_entries.scss +++ b/app/javascript/styles/stream_entries.scss @@ -5,24 +5,31 @@ .entry { background: $color5; - .detailed-status.light, .status.light { + .detailed-status.light, + .status.light { border-bottom: 1px solid $color2; } &:last-child { - &, .detailed-status.light, .status.light { + &, + .detailed-status.light, + .status.light { border-bottom: 0; border-radius: 0 0 4px 4px; } } &:first-child { - &, .detailed-status.light, .status.light { + &, + .detailed-status.light, + .status.light { border-radius: 4px 4px 0 0; } &:last-child { - &, .detailed-status.light, .status.light { + &, + .detailed-status.light, + .status.light { border-radius: 4px; } } @@ -30,7 +37,7 @@ } .status.light { - padding: 14px 14px 14px (48px + 14px*2); + padding: 14px 14px 14px (48px + 14px * 2); position: relative; min-height: 48px; cursor: default; @@ -232,7 +239,8 @@ } } - .media-item, .video-item { + .media-item, + .video-item { box-sizing: border-box; position: relative; left: auto; @@ -323,8 +331,8 @@ } .pre-header { - padding: 14px 0px; - padding-left: (48px + 14px*2); + padding: 14px 0; + padding-left: (48px + 14px * 2); padding-bottom: 0; margin-bottom: -4px; color: $color3; @@ -333,7 +341,7 @@ .pre-header__icon { position: absolute; - left: (48px + 14px*2 - 30px); + left: (48px + 14px * 2 - 30px); } .status__display-name.muted strong { diff --git a/app/javascript/styles/tables.scss b/app/javascript/styles/tables.scss index 0568a07603..ed0ef4468c 100644 --- a/app/javascript/styles/tables.scss +++ b/app/javascript/styles/tables.scss @@ -5,7 +5,8 @@ border-collapse: collapse; margin-bottom: 20px; - th, td { + th, + td { padding: 8px; line-height: 18px; vertical-align: top; @@ -24,7 +25,8 @@ 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; } diff --git a/app/javascript/styles/variables.scss b/app/javascript/styles/variables.scss old mode 100755 new mode 100644 index 0dded90b07..76b58426a9 --- a/app/javascript/styles/variables.scss +++ b/app/javascript/styles/variables.scss @@ -6,3 +6,5 @@ $color5: #ffffff !default; // white $color6: #df405a !default; // error red $color7: #79bd9a !default; // succ green $color8: #000000 !default; // black +$color9: #ff5050 !default; // red +$color10: #ca8f04 !default; // dark goldenrod