最新版でのバグ修正
影の修正 UI密度の変更 その他たくさんの修正など
This commit is contained in:
Rintan
parent
45cb583c54
commit
2d25a56a7a
@ -46,6 +46,7 @@ $account-foreground-color: $base-darker1-color;
|
||||
$card-color: $base-lighter1-color;
|
||||
$card-hover-color: $column-header-hover-color;
|
||||
$card-image-color: $base-color;
|
||||
$warning-card-color: #26a69a;
|
||||
|
||||
$form-color: rgba(0, 0, 0, 0.1);
|
||||
$form-focused-color: lighten($form-color, 20%);
|
||||
|
||||
@ -74,7 +74,10 @@
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
.icon-button { border: 0 }
|
||||
.icon-button {
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
&__name {
|
||||
|
||||
@ -9,7 +9,6 @@
|
||||
margin: 0;
|
||||
background: $column-header-color;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
.tabs-bar {
|
||||
&__link {
|
||||
@ -81,8 +80,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__warning {
|
||||
background-color: $warning-card-color;
|
||||
}
|
||||
|
||||
&__publish { border-top: 1px solid $base-separation-color }
|
||||
&__publish-button-wrapper { @include button-shadow }
|
||||
&__modifiers { background-color: $base-lighter1-color }
|
||||
}
|
||||
|
||||
@ -100,7 +102,6 @@
|
||||
.column-header {
|
||||
@include column-shadow;
|
||||
background: $column-header-color;
|
||||
z-index: 1;
|
||||
|
||||
&.active {
|
||||
.column-header__icon {
|
||||
@ -151,6 +152,9 @@
|
||||
}
|
||||
|
||||
.column-back-button {
|
||||
background-color: $column-header-color;
|
||||
color: $secondary-text-color;
|
||||
|
||||
&__icon {
|
||||
@include material-icon-large;
|
||||
vertical-align: bottom;
|
||||
@ -228,11 +232,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
// v2.9.0以降
|
||||
// v2.9.0以降に対応
|
||||
.column-header {
|
||||
@include column-shadow;
|
||||
background: $column-header-color;
|
||||
z-index: 1;
|
||||
|
||||
&.active {
|
||||
.column-header__icon {
|
||||
@ -281,6 +284,16 @@
|
||||
&-inner { background: $column-header-color }
|
||||
}
|
||||
}
|
||||
.column-back-button {
|
||||
background-color: $column-header-color;
|
||||
color: $secondary-text-color;
|
||||
|
||||
&__icon {
|
||||
@include material-icon-large;
|
||||
vertical-align: bottom;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.getting-started {
|
||||
&__wrapper,
|
||||
|
||||
@ -29,14 +29,32 @@
|
||||
color: $primary-lighter1-text-color;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.button--block { @include button-shadow }
|
||||
|
||||
.button-secondary {
|
||||
background-color: $primary-lighter1-text-color;
|
||||
border: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-root {
|
||||
&__modal {
|
||||
.media-modal {
|
||||
&__close.icon-button {
|
||||
font-size: 40px !important;
|
||||
font-size: 40px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
&:hover {
|
||||
background-color: darken($base-lighter1-color, 40%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// DOM操作によりpaddingが調整できないもの
|
||||
.privacy-dropdown__value-icon.icon-button.inverted,
|
||||
.compose-form__poll-button-icon.icon-button.inverted,
|
||||
.compose-form__upload-button-icon.icon-button.inverted { padding: 4px }
|
||||
@ -6,6 +6,13 @@
|
||||
|
||||
.dropdown-menu {
|
||||
background-color: $column-header-color;
|
||||
|
||||
&__arrow {
|
||||
&.top { border-top-color: $column-header-color }
|
||||
&.bottom { border-bottom-color: $column-header-color }
|
||||
}
|
||||
|
||||
&__separator { margin: 4px 0 }
|
||||
}
|
||||
|
||||
.dropdown-menu,
|
||||
@ -16,11 +23,6 @@
|
||||
background: $base-lighter1-color;
|
||||
|
||||
.dropdown-menu {
|
||||
&__arrow {
|
||||
&.top { border-top-color: $column-header-color }
|
||||
&.bottom { border-bottom-color: $column-header-color }
|
||||
}
|
||||
|
||||
&__item {
|
||||
a {
|
||||
color: $primary-lighter2-text-color;
|
||||
|
||||
@ -25,9 +25,12 @@
|
||||
.icon-button {
|
||||
color: $icon-color;
|
||||
border-radius: 50%;
|
||||
width: 28px !important; // UIの密度が下がる代わりに、ホバー時に正常に表示
|
||||
height: 28px !important; // !importantを付けないと動作しない…?
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:focus { background-color: transparent }
|
||||
|
||||
&:hover {
|
||||
color: lighten($icon-color, 7%);
|
||||
background-color: $column-header-hover-color;
|
||||
@ -43,9 +46,9 @@
|
||||
.fa.fa-star { vertical-align: top }
|
||||
}
|
||||
|
||||
&.inverted {
|
||||
color: $icon-color;
|
||||
}
|
||||
&.inverted { color: $icon-color }
|
||||
|
||||
&.overlayed { border-radius: 50% }
|
||||
|
||||
&.disabled {
|
||||
color: lighten($icon-color, 13%);
|
||||
@ -175,7 +178,7 @@
|
||||
&.fa-bars::before { content: "menu" } //ハンバーガーボタン
|
||||
&.fa-navicon::before { content: "menu" } //ハンバーガーボタン
|
||||
&.fa-reorder::before { content: "menu" } //ハンバーガーボタン
|
||||
&.fa-desktop::before { content: "desktop-windows" } //外観設定のアイコン
|
||||
&.fa-desktop::before { content: "desktop_windows" } //外観設定のアイコン
|
||||
&.fa-code::before { content: "code" } //開発アイコン
|
||||
&.fa-list::before { content: "list" } //リストアイコン
|
||||
&.fa-paperclip::before { content: "attach_file" } //メディアを追加のアイコン
|
||||
@ -186,8 +189,17 @@
|
||||
.fa {
|
||||
&.fa-chevron-left,
|
||||
&.fa-chevron-right,
|
||||
&.fa.fa-times {
|
||||
&.fa-plus {
|
||||
@include material-icon-large;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
&.fa-times {
|
||||
@include material-icon-large;
|
||||
vertical-align: top;
|
||||
&.fa-fw {
|
||||
font-size: 24px;
|
||||
vertical-align: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -149,6 +149,7 @@ body.admin {
|
||||
|
||||
button {
|
||||
@include button-shadow;
|
||||
background-color: $active-button-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -23,6 +23,8 @@
|
||||
|
||||
&__content { color: $primary-text-color }
|
||||
}
|
||||
|
||||
.display-name strong { color: $primary-text-color }
|
||||
}
|
||||
|
||||
&.status-direct {
|
||||
|
||||
@ -46,6 +46,7 @@ $account-foreground-color: $base-darker1-color;
|
||||
$card-color: $base-lighter1-color;
|
||||
$card-hover-color: $column-header-hover-color;
|
||||
$card-image-color: $base-color;
|
||||
$warning-card-color: #26a69a;
|
||||
|
||||
$form-color: rgba(0, 0, 0, 0.1);
|
||||
$form-focused-color: lighten($form-color, 20%);
|
||||
|
||||
@ -74,7 +74,10 @@
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
.icon-button { border: 0 }
|
||||
.icon-button {
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
&__name {
|
||||
|
||||
@ -9,7 +9,6 @@
|
||||
margin: 0;
|
||||
background: $column-header-color;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
.tabs-bar {
|
||||
&__link {
|
||||
@ -81,8 +80,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__warning {
|
||||
background-color: $warning-card-color;
|
||||
}
|
||||
|
||||
&__publish { border-top: 1px solid $base-separation-color }
|
||||
&__publish-button-wrapper { @include button-shadow }
|
||||
&__modifiers { background-color: $base-lighter1-color }
|
||||
}
|
||||
|
||||
@ -100,7 +102,6 @@
|
||||
.column-header {
|
||||
@include column-shadow;
|
||||
background: $column-header-color;
|
||||
z-index: 1;
|
||||
|
||||
&.active {
|
||||
.column-header__icon {
|
||||
@ -151,6 +152,9 @@
|
||||
}
|
||||
|
||||
.column-back-button {
|
||||
background-color: $column-header-color;
|
||||
color: $secondary-text-color;
|
||||
|
||||
&__icon {
|
||||
@include material-icon-large;
|
||||
vertical-align: bottom;
|
||||
@ -228,11 +232,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
// v2.9.0以降
|
||||
// v2.9.0以降に対応
|
||||
.column-header {
|
||||
@include column-shadow;
|
||||
background: $column-header-color;
|
||||
z-index: 1;
|
||||
|
||||
&.active {
|
||||
.column-header__icon {
|
||||
@ -281,6 +284,16 @@
|
||||
&-inner { background: $column-header-color }
|
||||
}
|
||||
}
|
||||
.column-back-button {
|
||||
background-color: $column-header-color;
|
||||
color: $secondary-text-color;
|
||||
|
||||
&__icon {
|
||||
@include material-icon-large;
|
||||
vertical-align: bottom;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.getting-started {
|
||||
&__wrapper,
|
||||
|
||||
@ -29,14 +29,32 @@
|
||||
color: $primary-lighter1-text-color;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.button--block { @include button-shadow }
|
||||
|
||||
.button-secondary {
|
||||
background-color: $primary-lighter1-text-color;
|
||||
border: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-root {
|
||||
&__modal {
|
||||
.media-modal {
|
||||
&__close.icon-button {
|
||||
font-size: 40px !important;
|
||||
font-size: 40px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
&:hover {
|
||||
background-color: darken($base-lighter1-color, 40%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// DOM操作によりpaddingが調整できないもの
|
||||
.privacy-dropdown__value-icon.icon-button.inverted,
|
||||
.compose-form__poll-button-icon.icon-button.inverted,
|
||||
.compose-form__upload-button-icon.icon-button.inverted { padding: 4px }
|
||||
@ -6,6 +6,13 @@
|
||||
|
||||
.dropdown-menu {
|
||||
background-color: $column-header-color;
|
||||
|
||||
&__arrow {
|
||||
&.top { border-top-color: $column-header-color }
|
||||
&.bottom { border-bottom-color: $column-header-color }
|
||||
}
|
||||
|
||||
&__separator { margin: 4px 0 }
|
||||
}
|
||||
|
||||
.dropdown-menu,
|
||||
@ -16,11 +23,6 @@
|
||||
background: $base-lighter1-color;
|
||||
|
||||
.dropdown-menu {
|
||||
&__arrow {
|
||||
&.top { border-top-color: $column-header-color }
|
||||
&.bottom { border-bottom-color: $column-header-color }
|
||||
}
|
||||
|
||||
&__item {
|
||||
a {
|
||||
color: $primary-lighter2-text-color;
|
||||
|
||||
@ -25,9 +25,12 @@
|
||||
.icon-button {
|
||||
color: $icon-color;
|
||||
border-radius: 50%;
|
||||
width: 28px !important; // UIの密度が下がる代わりに、ホバー時に正常に表示
|
||||
height: 28px !important; // !importantを付けないと動作しない…?
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:focus { background-color: transparent }
|
||||
|
||||
&:hover {
|
||||
color: lighten($icon-color, 7%);
|
||||
background-color: $column-header-hover-color;
|
||||
@ -43,9 +46,9 @@
|
||||
.fa.fa-star { vertical-align: top }
|
||||
}
|
||||
|
||||
&.inverted {
|
||||
color: $icon-color;
|
||||
}
|
||||
&.inverted { color: $icon-color }
|
||||
|
||||
&.overlayed { border-radius: 50% }
|
||||
|
||||
&.disabled {
|
||||
color: lighten($icon-color, 13%);
|
||||
@ -175,7 +178,7 @@
|
||||
&.fa-bars::before { content: "menu" } //ハンバーガーボタン
|
||||
&.fa-navicon::before { content: "menu" } //ハンバーガーボタン
|
||||
&.fa-reorder::before { content: "menu" } //ハンバーガーボタン
|
||||
&.fa-desktop::before { content: "desktop-windows" } //外観設定のアイコン
|
||||
&.fa-desktop::before { content: "desktop_windows" } //外観設定のアイコン
|
||||
&.fa-code::before { content: "code" } //開発アイコン
|
||||
&.fa-list::before { content: "list" } //リストアイコン
|
||||
&.fa-paperclip::before { content: "attach_file" } //メディアを追加のアイコン
|
||||
@ -186,8 +189,17 @@
|
||||
.fa {
|
||||
&.fa-chevron-left,
|
||||
&.fa-chevron-right,
|
||||
&.fa.fa-times {
|
||||
&.fa-plus {
|
||||
@include material-icon-large;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
&.fa-times {
|
||||
@include material-icon-large;
|
||||
vertical-align: top;
|
||||
&.fa-fw {
|
||||
font-size: 24px;
|
||||
vertical-align: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -149,6 +149,7 @@ body.admin {
|
||||
|
||||
button {
|
||||
@include button-shadow;
|
||||
background-color: $active-button-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -23,6 +23,8 @@
|
||||
|
||||
&__content { color: $primary-text-color }
|
||||
}
|
||||
|
||||
.display-name strong { color: $primary-text-color }
|
||||
}
|
||||
|
||||
&.status-direct {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user