forked from cybrespace/mastodon
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:
parent
6ad19036e3
commit
d63c291f86
|
@ -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
|
||||||
|
|
|
@ -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
|
1
Gemfile
1
Gemfile
|
@ -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'
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -13,7 +13,8 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.powered-by, .single-user-login {
|
.powered-by,
|
||||||
|
.single-user-login {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in New Issue