enabled: true
rubocop:
enabled: true
+ scss-lint:
+ enabled: true
ratings:
paths:
- "**.rb"
- "**.js"
+ - "**.scss"
exclude_paths:
- spec/
- vendor/asset
--- /dev/null
+# 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
gem 'rubocop', '0.46.0', require: false
gem 'brakeman', '~> 3.6.0', require: false
gem 'bundler-audit', '~> 0.4.0', require: false
+ gem 'scss_lint', '0.42.2', require: false
gem 'capistrano', '3.8.0'
gem 'capistrano-rails'
crass (~> 1.0.2)
nokogiri (>= 1.4.4)
nokogumbo (~> 1.4.1)
+ sass (3.4.23)
+ scss_lint (0.42.2)
+ rainbow (~> 2.0)
+ sass (~> 3.4.15)
sidekiq (5.0.0)
concurrent-ruby (~> 1.0)
connection_pool (~> 2.2, >= 2.2.0)
rubocop (= 0.46.0)
ruby-oembed
sanitize
+ scss_lint (= 0.42.2)
sidekiq
sidekiq-scheduler
sidekiq-unique-jobs
color: $color2;
}
- ul, ol {
+ ul,
+ ol {
list-style: inherit;
margin-left: 20px;
}
}
- li > ol, li > ul {
+ li > ol,
+ li > ul {
margin-top: 20px;
}
- p, li {
+ p,
+ li {
font: 16px/28px 'mastodon-font-sans-serif', sans-serif;
font-weight: 400;
margin-bottom: 12px;
em {
display: inline-block;
- padding: 7px 7px 5px 7px;
+ padding: 7px 7px 5px;
margin: 0 2px;
background: $color3;
color: $color1;
text-align: right;
font: 16px/28px 'mastodon-font-sans-serif', sans-serif;
- span, strong {
+ span,
+ strong {
display: block;
}
}
}
- .simple_form, .closed-registrations-message {
+ .simple_form,
+ .closed-registrations-message {
width: 300px;
flex: 0 0 auto;
background: rgba(darken($color1, 7%), 0.5);
display: none;
}
- .simple_form, .closed-registrations-message {
+ .simple_form,
+ .closed-registrations-message {
flex: auto;
}
}
box-shadow: none;
}
- &:after {
+ &::after {
background: linear-gradient(rgba($color8, 0.5), rgba($color8, 0.8));
display: block;
content: "";
.counter {
width: 80px;
color: $color3;
- padding: 5px 10px 0px;
+ padding: 5px 10px 0;
margin-bottom: 10px;
border-right: 1px solid $color3;
cursor: default;
display: block;
}
- &:after {
+ &::after {
display: block;
content: "";
position: absolute;
}
&.active {
- &:after {
+ &::after {
border-bottom: 4px solid $color4;
opacity: 1;
}
}
&:hover {
- &:after {
+ &::after {
opacity: 1;
transition-duration: 0.2s;
}
text-align: center;
overflow: hidden;
- a, .current, .next, .prev, .page, .gap {
+ a,
+ .current,
+ .next,
+ .prev,
+ .page,
+ .gap {
font-size: 14px;
color: $color5;
font-weight: 500;
cursor: default;
}
- .prev, .next {
+ .prev,
+ .next {
text-transform: uppercase;
color: $color2;
}
@media screen and (max-width: 360px) {
padding: 30px 20px;
- a, .current, .next, .prev, .gap {
+ a,
+ .current,
+ .next,
+ .prev,
+ .gap {
display: none;
}
- .next, .prev {
+ .next,
+ .prev {
display: inline-block;
}
}
height: 100%;
padding: 0;
overflow-y: auto;
-
+
.logo {
display: block;
margin: 40px auto;
&.selected {
background: darken($color1, 2%);
- border-radius: 4px 0 0 0;
+ border-radius: 4px 0 0;
}
}
.simple_form {
max-width: 400px;
+
.label_input {
label.select {
width: 50%;
}
+
select {
width: 50%;
float: right;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
- .sidebar-wrapper, .content-wrapper {
+ .sidebar-wrapper,
+ .content-wrapper {
flex: 0 0 auto;
height: auto;
overflow: initial;
@import 'variables';
.app-body {
- -webkit-overflow-scrolling: touch;
- -ms-overflow-style: -ms-autohiding-scrollbar;
+ -webkit-overflow-scrolling: touch;
+ -ms-overflow-style: -ms-autohiding-scrollbar;
}
.button {
cursor: pointer;
transition: color 100ms ease-in;
- &:hover, &:active, &:focus {
+ &:hover,
+ &:active,
+ &:focus {
color: lighten($color1, 33%);
transition: color 200ms ease-out;
}
border: 0;
}
- &::-moz-focus-inner, &:focus, &:active {
+ &::-moz-focus-inner,
+ &:focus,
+ &:active {
outline: 0 !important;
}
&.inverted {
color: lighten($color1, 33%);
- &:hover, &:active, &:focus {
+ &:hover,
+ &:active,
+ &:focus {
color: lighten($color1, 26%);
}
outline: 0;
transition: color 100ms ease-in;
- &:hover, &:active, &:focus {
+ &:hover,
+ &:active,
+ &:focus {
color: lighten($color1, 26%);
transition: color 200ms ease-out;
}
border: 0;
}
- &::-moz-focus-inner, &:focus, &:active {
+ &::-moz-focus-inner,
+ &:focus,
+ &:active {
outline: 0 !important;
}
}
color: $color4;
}
-.dropdown--active:after {
+.dropdown--active::after {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border-style: solid;
- border-width: 0 4.5px 7.8px 4.5px;
- border-color: transparent transparent $color2 transparent;
+ border-width: 0 4.5px 7.8px;
+ border-color: transparent transparent $color2;
bottom: 8px;
right: 104px;
}
}
.ellipsis {
- &:after {
+ &::after {
content: "…";
}
}
font-weight: 500;
text-decoration: underline;
- &:hover, &:active, &:focus {
+ &:hover,
+ &:active,
+ &:focus {
text-decoration: none;
}
}
font-family: inherit;
font-size: 14px;
background: $color5;
- border-radius: 0 0 4px 0;
+ border-radius: 0 0 4px;
}
.compose-form__buttons-wrapper {
}
}
-.compose-form__textarea, .follow-form__input {
+.compose-form__textarea,
+.follow-form__input {
background: $color5;
&:disabled {
.compose-form__autosuggest-wrapper {
position: relative;
- .dropdown--active:after {
- border-color: transparent transparent $color5 transparent;
+ .dropdown--active::after {
+ border-color: transparent transparent $color5;
bottom: -1px;
right: 8px;
}
color: lighten($color1, 8%);
font-weight: 500;
font-size: 11px;
- padding: 0px 6px;
+ padding: 0 6px;
text-transform: uppercase;
line-height: inherit;
}
right: initial;
}
- &:after {
+ &::after {
bottom: initial;
margin-left: 11px;
margin-top: -7px;
position: absolute;
.star-icon {
- color: #ca8f04;
+ color: $color10;
}
}
.star-icon.active {
- color: #ca8f04;
+ color: $color10;
}
.notification__display-name {
}
}
-.transparent-background, .imageloader {
+.transparent-background,
+.imageloader {
background: url('../images/void.png');
}
flex-direction: row;
justify-content: flex-start;
overflow-x: auto;
- position: relative;
+ position: relative;
}
@media screen and (min-width: 360px) {
border-bottom: 2px solid transparent;
}
-.column, .drawer {
+.column,
+.drawer {
flex: 1 1 100%;
overflow: hidden;
}
}
@media screen and (max-width: 1024px) {
- .column, .drawer {
+ .column,
+ .drawer {
width: 100%;
padding: 0;
}
flex-direction: column;
}
- .search__input, .autosuggest-textarea__textarea {
+ .search__input,
+ .autosuggest-textarea__textarea {
font-size: 16px;
}
}
padding: 0;
}
- .column, .drawer {
+ .column,
+ .drawer {
flex: 0 0 auto;
padding: 10px;
padding-left: 5px;
}
.columns-area > div {
- .column, .drawer {
+ .column,
+ .drawer {
padding-left: 5px;
padding-right: 5px;
}
}
@media screen and (min-width: 1900px) {
- .column, .drawer {
+ .column,
+ .drawer {
width: 400px;
border-radius: 4px;
height: 96vh;
color: $color4;
}
- &:hover, &:focus, &:active {
+ &:hover,
+ &:focus,
+ &:active {
background: lighten($color1, 14%);
transition: all 100ms linear;
}
position: absolute;
width: 14px;
height: 10px;
- top: 0px;
- bottom: 0px;
+ top: 0;
+ bottom: 0;
margin-top: auto;
margin-bottom: auto;
line-height: 0;
position: absolute;
width: 10px;
height: 10px;
- top: 0px;
- bottom: 0px;
+ top: 0;
+ bottom: 0;
margin-top: auto;
margin-bottom: auto;
line-height: 0;
}
.character-counter--over {
- color: #ff5050;
+ color: $color9;
}
.getting-started__wrapper {
.getting-started {
box-sizing: border-box;
padding-bottom: 235px;
- background: url('../images/mastodon-getting-started.png') no-repeat 0 100%/contain local;
+ background: url('../images/mastodon-getting-started.png') no-repeat 0 100% / contain local;
flex: 1 0 auto;
p {
display: block;
font-family: inherit;
margin-bottom: 10px;
- padding: 7px 0px;
+ padding: 7px 0;
width: 100%;
- &:focus, &:active {
+ &:focus,
+ &:active {
color: $color5;
border-bottom-color: $color4;
}
}
}
-.status-card-video, .status-card-rich, .status-card-photo {
+.status-card-video,
+.status-card-rich,
+.status-card-photo {
margin-top: 14px;
overflow: hidden;
}
.status-card__image-image {
- border-radius: 4px 0px 0px 4px;
+ border-radius: 4px 0 0 4px;
display: block;
height: auto;
margin: 0;
}
}
- &:focus, &:active {
+ &:focus,
+ &:active {
outline: 0;
}
}
.spoiler-button {
left: 4px;
position: absolute;
- text-shadow: 0px 1px 1px #000, 1px 0px 1px #000;
+ text-shadow: 0 1px 1px $color8, 1px 0 1px $color8;
top: 4px;
z-index: 100;
}
border-bottom: 1px solid lighten($color1, 8%);
display: flex;
flex-direction: row;
- padding: 10px 0px;
+ padding: 10px 0;
}
.account--panel__button,
.modal-container__nav {
align-items: center;
- background: rgba(0, 0, 0, 0.5);
+ background: rgba($color8, 0.5);
box-sizing: border-box;
color: $color5;
cursor: pointer;
resize: vertical;
width: 100%;
- &:active, &:focus {
+ &:active,
+ &:focus {
border-bottom-color: $color4;
background: rgba($color8, 0.1);
}
}
}
-.status-list__unread-indicator, .notifications__unread-indicator {
+.status-list__unread-indicator,
+.notifications__unread-indicator {
position: absolute;
top: 35px;
left: 0;
0% {
opacity: 1;
}
+
100% {
opacity: 0.5;
}
height: 18px;
}
- img, svg {
+ img,
+ svg {
width: 18px;
height: 18px;
filter: grayscale(100%);
}
&:hover {
- img, svg {
+ img,
+ svg {
filter: grayscale(0);
}
}
&.active {
border-bottom-color: $color4;
- img, svg {
+ img,
+ svg {
filter: grayscale(0);
}
}
position: relative;
cursor: pointer;
- &.active:after {
+ &.active::after {
content: "";
display: block;
position: absolute;
}
.emoji-row .emoji {
- img, svg {
+ img,
+ svg {
transition: transform 60ms ease-in-out;
}
&:hover {
background: lighten($color2, 3%);
- img, svg {
+ img,
+ svg {
transform: translateZ(0) scale(1.2);
}
}
.emoji-button {
outline: 0;
- &:active, &:focus {
+ &:active,
+ &:focus {
outline: 0 !important;
}
margin-top: 2px;
}
- &:hover, &:active, &:focus {
+ &:hover,
+ &:active,
+ &:focus {
img {
opacity: 1;
filter: none;
top: 27px;
width: 230px;
background: $color5;
- border-radius: 0 4px 4px 4px;
+ border-radius: 0 4px 4px;
z-index: 2;
overflow: hidden;
}
cursor: pointer;
display: flex;
- &:hover, &.active {
+ &:hover,
+ &.active {
background: $color4;
color: $color5;
border: 0;
}
- &::-moz-focus-inner, &:focus, &:active {
+ &::-moz-focus-inner,
+ &:focus,
+ &:active {
outline: 0 !important;
}
color: $color2;
text-decoration: none;
- &:hover, &:active, &:focus {
+ &:hover,
+ &:active,
+ &:focus {
color: lighten($color2, 4%);
text-decoration: underline;
}
z-index: 9999;
opacity: 0;
background: rgba($color8, 0.7);
- transform: translateZ(0px);
+ transform: translateZ(0);
}
.modal-root__container {
max-height: 80vh;
position: relative;
- img, video {
+ img,
+ video {
max-width: 80vw;
max-height: 80vh;
}
font-size: 14px;
font-weight: 500;
- &:hover, &:focus, &:active {
+ &:hover,
+ &:focus,
+ &:active {
color: darken($color2, 38%);
}
- &.onboarding-modal__done, &.onboarding-modal__next {
+ &.onboarding-modal__done,
+ &.onboarding-modal__next {
color: $color4;
}
}
a {
color: $color4;
- &:hover, &:focus, &:active {
+ &:hover,
+ &:focus,
+ &:active {
color: lighten($color4, 4%);
}
}
}
.onboarding-modal__page-one__elephant-friend {
- background: url('../images/elephant-friend.png') no-repeat center center/contain;
+ background: url('../images/elephant-friend.png') no-repeat center center / contain;
width: 147px;
height: 160px;
margin-right: 10px;
margin-left: 10px;
}
-.boost-modal, .confirmation-modal {
+.boost-modal,
+.confirmation-modal {
background: lighten($color2, 8%);
color: $color1;
border-radius: 8px;
}
}
-.boost-modal__action-bar, .confirmation-modal__action-bar {
+.boost-modal__action-bar,
+.confirmation-modal__action-bar {
display: flex;
background: $color2;
padding: 10px;
font-size: 14px;
font-weight: 500;
- &:hover, &:focus, &:active {
+ &:hover,
+ &:focus,
+ &:active {
color: darken($color2, 38%);
}
}
/* Status Video Player */
.status__video-player {
- background: #000;
+ background: $color8;
box-sizing: border-box;
cursor: default; /* May not be needed */
margin-top: 8px;
.status__video-player-expand,
.status__video-player-mute {
- color: #fff;
+ color: $color5;
opacity: 0.8;
position: absolute;
right: 4px;
- text-shadow: 0px 1px 1px #000, 1px 0px 1px #000;
+ text-shadow: 0 1px 1px $color8, 1px 0 1px $color8;
}
.status__video-player-spoiler {
- color: #fff;
+ color: $color5;
left: 4px;
position: absolute;
- text-shadow: 0px 1px 1px #000, 1px 0px 1px #000;
+ text-shadow: 0 1px 1px $color8, 1px 0 1px $color8;
top: 4px;
z-index: 100;
}
.media-spoiler-video-play-icon {
border-radius: 100px;
- color: rgba(255, 255, 255, 0.8);
+ color: rgba($color5, 0.8);
font-size: 36px;
left: 50%;
padding: 5px;
}
}
- .powered-by, .single-user-login {
+ .powered-by,
+ .single-user-login {
font-weight: 400;
a {
}
}
- .input.file, .input.select, .input.radio_buttons {
+ .input.file,
+ .input.select,
+ .input.radio_buttons {
padding: 15px 0;
margin-bottom: 0;
margin-bottom: 5px;
font-family: inherit;
font-size: 14px;
- color: white;
+ color: $color5;
display: block;
width: auto;
}
label {
font-family: inherit;
font-size: 14px;
- color: white;
+ color: $color5;
display: block;
width: auto;
}
}
input[type=checkbox] {
- position: absolute;
- left: 0;
+ position: absolute;
+ left: 0;
top: 1px;
margin: 0;
}
}
}
- input[type=text], input[type=number], input[type=email], input[type=password], textarea {
+ input[type=text],
+ input[type=number],
+ input[type=email],
+ input[type=password],
+ textarea {
background: transparent;
box-sizing: border-box;
border: 0;
border-bottom-color: $color7;
}
- &:active, &:focus {
+ &:active,
+ &:focus {
border-bottom-color: $color4;
background: rgba($color8, 0.1);
}
color: $color6;
}
- input[type=text], input[type=email], input[type=password] {
+ input[type=text],
+ input[type=email],
+ input[type=password] {
border-bottom-color: $color6;
}
margin-top: 30px;
}
- button, .block-button {
+ button,
+ .block-button {
display: block;
width: 100%;
border: 0;
background-color: lighten($color4, 5%);
}
- &:active, &:focus {
+ &:active,
+ &:focus {
position: relative;
top: 1px;
background-color: darken($color4, 5%);
background-color: lighten($color6, 5%);
}
- &:active, &:focus {
+ &:active,
+ &:focus {
background-color: darken($color6, 5%);
}
}
}
}
-.oauth-prompt, .follow-prompt {
+.oauth-prompt,
+.follow-prompt {
margin-bottom: 30px;
text-align: center;
color: $color3;
.qr-code {
flex: 0 0 auto;
- background: #fff;
+ background: $color5;
padding: 4px;
margin-bottom: 20px;
box-shadow: 0 0 15px rgba($color8, 0.2);
color: $color5;
text-decoration: underline;
- &:hover, &:focus, &:active {
+ &:hover,
+ &:focus,
+ &:active {
text-decoration: none;
}
}
display: flex;
align-items: center;
- .actions, .pagination {
+ .actions,
+ .pagination {
flex: 1 1 auto;
}
border-radius: 4px;
margin-bottom: 20px;
- strong, a {
+ strong,
+ a {
font-weight: 500;
}
body.rtl {
direction: rtl;
- .column-link__icon, .column-header__icon {
+ .column-link__icon,
+ .column-header__icon {
margin-right: 0;
margin-left: 5px;
}
float: right;
}
- .detailed-status__favorites, .detailed-status__reblogs {
+ .detailed-status__favorites,
+ .detailed-status__reblogs {
margin-left: 0;
margin-right: 6px;
}
@media screen and (min-width: 1025px) {
- .column, .drawer {
+ .column,
+ .drawer {
padding-left: 5px;
padding-right: 5px;
}
&:last-child {
- padding-right: 0px;
+ padding-right: 0;
padding-left: 10px;
}
}
.columns-area > div {
- .column, .drawer {
+ .column,
+ .drawer {
padding-left: 5px;
padding-right: 5px;
}
.entry {
background: $color5;
- .detailed-status.light, .status.light {
+ .detailed-status.light,
+ .status.light {
border-bottom: 1px solid $color2;
}
&:last-child {
- &, .detailed-status.light, .status.light {
+ &,
+ .detailed-status.light,
+ .status.light {
border-bottom: 0;
border-radius: 0 0 4px 4px;
}
}
&:first-child {
- &, .detailed-status.light, .status.light {
+ &,
+ .detailed-status.light,
+ .status.light {
border-radius: 4px 4px 0 0;
}
&:last-child {
- &, .detailed-status.light, .status.light {
+ &,
+ .detailed-status.light,
+ .status.light {
border-radius: 4px;
}
}
}
.status.light {
- padding: 14px 14px 14px (48px + 14px*2);
+ padding: 14px 14px 14px (48px + 14px * 2);
position: relative;
min-height: 48px;
cursor: default;
}
}
- .media-item, .video-item {
+ .media-item,
+ .video-item {
box-sizing: border-box;
position: relative;
left: auto;
}
.pre-header {
- padding: 14px 0px;
- padding-left: (48px + 14px*2);
+ padding: 14px 0;
+ padding-left: (48px + 14px * 2);
padding-bottom: 0;
margin-bottom: -4px;
color: $color3;
.pre-header__icon {
position: absolute;
- left: (48px + 14px*2 - 30px);
+ left: (48px + 14px * 2 - 30px);
}
.status__display-name.muted strong {
border-collapse: collapse;
margin-bottom: 20px;
- th, td {
+ th,
+ td {
padding: 8px;
line-height: 18px;
vertical-align: top;
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;
}
$color6: #df405a !default; // error red
$color7: #79bd9a !default; // succ green
$color8: #000000 !default; // black
+$color9: #ff5050 !default; // red
+$color10: #ca8f04 !default; // dark goldenrod
cat aescling's git repositories / mastodon.git / commitdiff