mirror of
https://github.com/kikobar/mastodon.git
synced 2024-11-18 21:27:41 +00:00
b85dec2b97
- Updates scss variables file to use better-named variables for black/white/etc - Arranges the "mastodon classic" colors into variables - Remove all references to `$color-*` naming, replacing with new This does not in itself introduce "theme" support, but: - It would probably be easier to start working on theme support after this change and others - Even without the goal of themes, these changes make it more clear how the colors are being used. There is almost definitely some edge case in here where I've guessed the intent/context of some color usage incorrectly, but it still seems like a net improvement.
352 lines
5.5 KiB
SCSS
352 lines
5.5 KiB
SCSS
code {
|
|
font-family: 'mastodon-font-monospace', monospace;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.form-container {
|
|
max-width: 400px;
|
|
padding: 20px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.simple_form {
|
|
.input {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
span.hint {
|
|
display: block;
|
|
color: $ui-primary-color;
|
|
font-size: 12px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
p.hint {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
strong {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.label_input {
|
|
display: flex;
|
|
|
|
label {
|
|
flex: 0 0 auto;
|
|
width: 100px;
|
|
}
|
|
|
|
input {
|
|
flex: 1 1 auto;
|
|
}
|
|
}
|
|
|
|
.input.file,
|
|
.input.select,
|
|
.input.radio_buttons {
|
|
padding: 15px 0;
|
|
margin-bottom: 0;
|
|
|
|
label {
|
|
font-family: inherit;
|
|
font-size: 16px;
|
|
color: $primary-text-color;
|
|
display: block;
|
|
padding-top: 5px;
|
|
}
|
|
}
|
|
|
|
.fields-group {
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.input.radio_buttons .radio label {
|
|
margin-bottom: 5px;
|
|
font-family: inherit;
|
|
font-size: 14px;
|
|
color: $primary-text-color;
|
|
display: block;
|
|
width: auto;
|
|
}
|
|
|
|
.input.boolean {
|
|
margin-bottom: 5px;
|
|
|
|
label {
|
|
font-family: inherit;
|
|
font-size: 14px;
|
|
color: $primary-text-color;
|
|
display: block;
|
|
width: auto;
|
|
}
|
|
|
|
label.checkbox {
|
|
position: relative;
|
|
padding-left: 25px;
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
input[type=checkbox] {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 1px;
|
|
margin: 0;
|
|
}
|
|
|
|
.hint {
|
|
padding-left: 25px;
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
input[type=text],
|
|
input[type=number],
|
|
input[type=email],
|
|
input[type=password],
|
|
textarea {
|
|
background: transparent;
|
|
box-sizing: border-box;
|
|
border: 0;
|
|
border-bottom: 2px solid $ui-primary-color;
|
|
border-radius: 2px 2px 0 0;
|
|
padding: 7px 4px;
|
|
font-size: 16px;
|
|
color: $primary-text-color;
|
|
display: block;
|
|
width: 100%;
|
|
outline: 0;
|
|
font-family: inherit;
|
|
resize: vertical;
|
|
|
|
&:invalid {
|
|
box-shadow: none;
|
|
}
|
|
|
|
&:focus:invalid {
|
|
border-bottom-color: $error-value-color;
|
|
}
|
|
|
|
&:required:valid {
|
|
border-bottom-color: $valid-value-color;
|
|
}
|
|
|
|
&:active,
|
|
&:focus {
|
|
border-bottom-color: $ui-highlight-color;
|
|
background: rgba($base-overlay-background, 0.1);
|
|
}
|
|
}
|
|
|
|
.input.field_with_errors {
|
|
label {
|
|
color: $error-value-color;
|
|
}
|
|
|
|
input[type=text],
|
|
input[type=email],
|
|
input[type=password] {
|
|
border-bottom-color: $error-value-color;
|
|
}
|
|
|
|
.error {
|
|
display: block;
|
|
font-weight: 500;
|
|
color: $error-value-color;
|
|
margin-top: 4px;
|
|
}
|
|
}
|
|
|
|
.actions {
|
|
margin-top: 30px;
|
|
}
|
|
|
|
button,
|
|
.block-button {
|
|
display: block;
|
|
width: 100%;
|
|
border: 0;
|
|
border-radius: 4px;
|
|
background: $ui-highlight-color;
|
|
color: $primary-text-color;
|
|
font-size: 18px;
|
|
padding: 10px;
|
|
text-transform: uppercase;
|
|
text-decoration: none;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
outline: 0;
|
|
margin-bottom: 10px;
|
|
|
|
&:hover {
|
|
background-color: lighten($ui-highlight-color, 5%);
|
|
}
|
|
|
|
&:active,
|
|
&:focus {
|
|
position: relative;
|
|
top: 1px;
|
|
background-color: darken($ui-highlight-color, 5%);
|
|
}
|
|
|
|
&.negative {
|
|
background: $error-value-color;
|
|
|
|
&:hover {
|
|
background-color: lighten($error-value-color, 5%);
|
|
}
|
|
|
|
&:active,
|
|
&:focus {
|
|
background-color: darken($error-value-color, 5%);
|
|
}
|
|
}
|
|
}
|
|
|
|
select {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
.flash-message {
|
|
background: $ui-base-color;
|
|
color: $ui-primary-color;
|
|
border-radius: 4px;
|
|
padding: 15px 10px;
|
|
margin-bottom: 30px;
|
|
box-shadow: 0 0 5px rgba($base-shadow-color, 0.2);
|
|
text-align: center;
|
|
|
|
strong {
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.form-footer {
|
|
margin-top: 30px;
|
|
text-align: center;
|
|
|
|
a {
|
|
color: $primary-text-color;
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
|
|
.oauth-prompt,
|
|
.follow-prompt {
|
|
margin-bottom: 30px;
|
|
text-align: center;
|
|
color: $ui-primary-color;
|
|
|
|
h2 {
|
|
font-size: 16px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
strong {
|
|
color: $ui-secondary-color;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.qr-wrapper {
|
|
display: flex;
|
|
}
|
|
|
|
.qr-code {
|
|
flex: 0 0 auto;
|
|
background: $simple-background-color;
|
|
padding: 4px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
|
|
display: inline-block;
|
|
|
|
svg {
|
|
display: block;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.qr-alternative {
|
|
margin-left: 10px;
|
|
color: $ui-primary-color;
|
|
|
|
samp {
|
|
display: block;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
.table-form {
|
|
p {
|
|
max-width: 400px;
|
|
margin-bottom: 15px;
|
|
|
|
strong {
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.warning {
|
|
max-width: 400px;
|
|
box-sizing: border-box;
|
|
background: rgba($error-value-color, 0.5);
|
|
color: $primary-text-color;
|
|
text-shadow: 1px 1px 0 rgba($base-shadow-color, 0.3);
|
|
box-shadow: 0 2px 6px rgba($base-shadow-color, 0.4);
|
|
border-radius: 4px;
|
|
padding: 10px;
|
|
margin-bottom: 15px;
|
|
|
|
a {
|
|
color: $primary-text-color;
|
|
text-decoration: underline;
|
|
|
|
&:hover,
|
|
&:focus,
|
|
&:active {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
strong {
|
|
font-weight: 600;
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
|
|
.fa {
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.action-pagination {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.actions,
|
|
.pagination {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.actions {
|
|
padding: 30px 0;
|
|
padding-right: 20px;
|
|
flex: 0 0 auto;
|
|
}
|
|
}
|
|
|
|
.user_allowed_languages {
|
|
li {
|
|
float: left;
|
|
width: 50%;
|
|
}
|
|
}
|