gitea/nas
1
0
Fork 2
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Make theme directory and Rename application.scss (#5336)

Browse source 
* Rename application.scss

* Move to 'default' directory

* Follow review

Move directory, and Rename "mastodon".

* Revert rename

* undo removal of newline
This commit is contained in:
YaQ 2017-10-18 05:20:07 +09:00 • committed by unarist
parent f3003417c5
commit 6e54719474
20 changed files with 18 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

540
app/javascript/styles/mastodon/forms.scss Normal file
View file

@ -0,0 +1,540 @@
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;
overflow: hidden;
}
span.hint {
display: block;
color: $ui-primary-color;
font-size: 12px;
margin-top: 4px;
}
h4 {
text-transform: uppercase;
font-size: 13px;
font-weight: 500;
color: $ui-primary-color;
padding-bottom: 8px;
margin-bottom: 8px;
border-bottom: 1px solid lighten($ui-base-color, 8%);
}
p.hint {
margin-bottom: 15px;
color: $ui-primary-color;
&.subtle-hint {
text-align: center;
font-size: 12px;
line-height: 18px;
margin-top: 15px;
margin-bottom: 0;
color: $ui-primary-color;
a {
color: $ui-highlight-color;
}
}
}
.card {
margin-bottom: 15px;
}
strong {
font-weight: 500;
}
.label_input {
display: flex;
label {
flex: 0 0 auto;
}
input {
flex: 1 1 auto;
}
}
.input.with_label {
padding: 15px 0;
margin-bottom: 0;
.label_input {
flex-wrap: wrap;
align-items: flex-start;
}
&.select .label_input {
align-items: initial;
}
.label_input > label {
font-family: inherit;
font-size: 16px;
color: $primary-text-color;
display: block;
padding-top: 5px;
margin-bottom: 5px;
flex: 1;
min-width: 150px;
word-wrap: break-word;
&.select {
flex: 0;
}
& ~ * {
margin-left: 10px;
}
}
ul {
flex: 390px;
}
&.boolean {
padding: initial;
margin-bottom: initial;
.label_input > 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.with_block_label {
& > label {
font-family: inherit;
font-size: 16px;
color: $primary-text-color;
display: block;
padding-top: 5px;
}
.hint {
margin-bottom: 15px;
}
li {
float: left;
width: 50%;
}
}
.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: 5px;
margin: 0;
}
.hint {
padding-left: 25px;
margin-left: 0;
}
}
.check_boxes {
.checkbox {
label {
font-family: inherit;
font-size: 14px;
color: $primary-text-color;
display: block;
width: auto;
position: relative;
padding-top: 5px;
padding-left: 25px;
flex: 1 1 auto;
}
input[type=checkbox] {
position: absolute;
left: 0;
top: 5px;
margin: 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;
display: flex;
}
button,
.button,
.block-button {
display: block;
width: 100%;
border: 0;
border-radius: 4px;
background: $ui-highlight-color;
color: $primary-text-color;
font-size: 18px;
line-height: inherit;
height: auto;
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;
margin-right: 10px;
&:last-child {
margin-right: 0;
}
&:hover {
background-color: lighten($ui-highlight-color, 5%);
}
&:active,
&:focus {
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;
max-height: 29px;
}
.input-with-append {
position: relative;
.input input {
padding-right: 127px;
}
.append {
position: absolute;
right: 0;
top: 0;
padding: 7px 4px;
padding-bottom: 9px;
font-size: 16px;
color: $ui-base-lighter-color;
font-family: inherit;
pointer-events: none;
cursor: default;
}
}
}
.flash-message {
background: lighten($ui-base-color, 8%);
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;
p {
margin-bottom: 15px;
}
.oauth-code {
color: $ui-secondary-color;
outline: 0;
box-sizing: border-box;
display: block;
width: 100%;
border: none;
padding: 10px;
font-family: 'mastodon-font-monospace', monospace;
background: $ui-base-color;
color: $ui-primary-color;
font-size: 14px;
margin: 0;
&::-moz-focus-inner {
border: 0;
}
&::-moz-focus-inner,
&:focus,
&:active {
outline: 0 !important;
}
&:focus {
background: lighten($ui-base-color, 4%);
}
}
strong {
font-weight: 500;
}
@media screen and (max-width: 740px) and (min-width: 441px) {
margin-top: 40px;
}
}
.form-footer {
margin-top: 30px;
text-align: center;
a {
color: $ui-primary-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;
}
@media screen and (max-width: 740px) and (min-width: 441px) {
margin-top: 40px;
}
}
.qr-wrapper {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
.qr-code {
flex: 0 0 auto;
background: $simple-background-color;
padding: 4px;
margin: 0 10px 20px 0;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
display: inline-block;
svg {
display: block;
margin: 0;
}
}
.qr-alternative {
margin-bottom: 20px;
color: $ui-secondary-color;
flex: 150px;
samp {
display: block;
font-size: 14px;
}
}
.table-form {
p {
margin-bottom: 15px;
strong {
font-weight: 500;
}
}
}
.simple_form,
.table-form {
.warning {
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;
flex-wrap: wrap;
align-items: center;
.actions,
.pagination {
flex: 1 1 auto;
}
.actions {
padding: 30px 0;
padding-right: 20px;
flex: 0 0 auto;
}
}
.post-follow-actions {
text-align: center;
color: $ui-primary-color;
div {
margin-bottom: 4px;
}
}