* add scss_lint to Gemfile * add .scss-lint.yml * fix warnings of scss-lint * chmod -x styles/variables.scss * Enable CodeClimate SCSS Lint checksmaster
@@ -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 |
@@ -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; | ||||
} | } | ||||
} | } | ||||
@@ -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; | ||||
@@ -1,8 +1,8 @@ | |||||
@import 'variables'; | @import 'variables'; | ||||
.app-body { | .app-body { | ||||
-webkit-overflow-scrolling: touch; | |||||
-ms-overflow-style: -ms-autohiding-scrollbar; | |||||
-webkit-overflow-scrolling: touch; | |||||
-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-color: transparent transparent $color2 transparent; | |||||
border-width: 0 4.5px 7.8px; | |||||
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 { | |||||
border-color: transparent transparent $color5 transparent; | |||||
.dropdown--active::after { | |||||
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; | |||||
bottom: 0px; | |||||
top: 0; | |||||
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; | |||||
bottom: 0px; | |||||
top: 0; | |||||
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; | |||||
left: 0; | |||||
position: absolute; | |||||
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-left: (48px + 14px*2); | |||||
padding: 14px 0; | |||||
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 |