Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-16 13:14:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

skin all the buttons

Browse Source
This commit is contained in:
Matthew Hodgson 2017-10-25 23:56:31 +01:00
parent a152eba023
commit ea19096db3
7 changed files with 56 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/skins/vector/css/_common.scss
View File

@ -200,21 +200,13 @@ textarea {
}
.mx_Dialog button, .mx_Dialog input[type="submit"] {
border: 0px;
height: 36px;
border-radius: 40px;
border: solid 1px $accent-color;
font-weight: 600;
font-size: 14px;
font-family: $font-family;
@mixin mx_DialogButton;
margin-left: 0px;
margin-right: 8px;
padding-left: 1.5em;
padding-right: 1.5em;
outline: none;
cursor: pointer;
// flip colours for the secondary ones
color: $accent-color;
background-color: $primary-bg-color;
background-color: $accent-fg-color;
/* align images in buttons (eg spinners) */
vertical-align: middle;
@ -282,16 +274,8 @@ textarea {
color: $selection-fg-color;
}
/** green button with rounded corners */
.mx_textButton {
color: $accent-fg-color;
background-color: $accent-color;
border-radius: 17px;
text-align: center;
padding-left: 1em;
padding-right: 1em;
cursor: pointer;
display: inline;
@mixin mx_DialogButton_small;
}
.mx_button_row {

23
src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss
View File

@ -64,30 +64,9 @@ limitations under the License.
}
.mx_UserSettings_button {
@mixin mx_DialogButton;
display: inline;
vertical-align: middle;
border: 0px;
border-radius: 36px;
font-weight: 400;
font-size: 16px;
color: $accent-fg-color;
background-color: $accent-color;
width: auto;
margin: auto;
padding: 7px;
padding-left: 1.5em;
padding-right: 1.5em;
cursor: pointer;
}
.mx_UserSettings_button.mx_UserSettings_buttonSmall {
height: 36px;
padding: 4px;
padding-left: 7px;
padding-right: 7px;
font-size: 12px;
margin-right: 5px;
line-height: 12px;
}
.mx_UserSettings_button.danger {

10
src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss
View File

@ -26,15 +26,7 @@ limitations under the License.
}
.mx_MemberDeviceInfo_textButton {
color: $accent-fg-color;
background-color: $accent-color;
border-radius: 17px;
text-align: center;
padding-left: 1em;
padding-right: 1em;
border: 0px;
font-size: 14px;
cursor: pointer;
@mixin mx_DialogButton_small;
margin: 2px;
flex: 1;
}

16
src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss
View File

@ -42,22 +42,10 @@ limitations under the License.
}
.mx_RoomHeader_textButton {
height: 36px;
background-color: $accent-color;
border-radius: 36px;
@mixin mx_DialogButton;
margin-right: 8px;
color: $accent-fg-color;
line-height: 34px;
margin-top: -2px;
text-align: center;
margin-top: -5px;
order: 2;
cursor: pointer;
/*
flex: 0 0 90px;
*/
padding-left: 12px;
padding-right: 12px;
}
.mx_RoomHeader_textButton_danger {

10
src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss
View File

@ -22,17 +22,9 @@ limitations under the License.
.mx_RoomSettings_leaveButton,
.mx_RoomSettings_unbanButton {
@mixin mx_DialogButton;
position: relative;
height: 36px;
background-color: $accent-color;
border-radius: 36px;
margin-right: 8px;
color: $accent-fg-color;
line-height: 34px;
text-align: center;
cursor: pointer;
padding-left: 12px;
padding-right: 12px;
}
.mx_RoomSettings_integrationsButton_error {
position: relative;

24
src/skins/vector/css/themes/_base.scss
View File

@ -130,3 +130,27 @@ $lightbox-border-color: #ffffff;
// unused?
$progressbar-color: #000;
// ***** Mixins! *****
@define-mixin mx_DialogButton {
vertical-align: middle;
border: 0px;
border-radius: 36px;
height: 33px;
font-weight: 400;
font-size: 16px;
color: $accent-fg-color;
background-color: $accent-color;
width: auto;
padding: 7px;
padding-left: 1.5em;
padding-right: 1.5em;
cursor: pointer;
display: inline-block;
}
@define-mixin mx_DialogButton_small {
@mixin mx_DialogButton;
height: auto;
}

24
src/skins/vector/themes/status/css/_status.scss
View File

@ -96,7 +96,7 @@ $event-selected-color: #f7f7f7;
$primary-hairline-color: #e5e5e5;
// used for the border of input text fields
$input-border-color: #f0f0f0;
$input-border-color: #c9cfd4;
// apart from login forms, which have stronger border
$strong-input-border-color: #c7c7c7;
@ -178,7 +178,6 @@ $progressbar-color: #000;
@define-mixin mx_DialogButton {
border-radius: 8px;
height: 45px;
border: 1px solid rgba(199, 206, 209, 0.12);
background-color: $accent-color;
font-size: 13px;
@ -186,6 +185,22 @@ $progressbar-color: #000;
text-transform: uppercase;
letter-spacing: 1px;
color: $accent-fg-color;
cursor: pointer;
outline: none;
padding: 14px;
box-sizing: border-box;
padding-left: 1.5em;
padding-right: 1.5em;
display: inline-block;
}
@define-mixin mx_DialogButton_small {
@mixin mx_DialogButton;
height: auto;
padding-top: 7px;
padding-bottom: 7px;
padding-left: 1em;
padding-right: 1em;
}
.mx_RoomSubList_label {
@ -220,3 +235,8 @@ $progressbar-color: #000;
margin-bottom: 7px ! important;
padding: 8px ! important;
}
.mx_RoomDirectory_perm {
font-family: $header-font-family ! important;
background-color: #fff ! important;
}