_UserSettings.scss (4473B)
1 /* 2 Copyright 2015, 2016 OpenMarket Ltd 3 Copyright 2017 Vector Creations Ltd 4 Copyright 2017 MTRNord <info@nordgedanken.de> 5 6 Licensed under the Apache License, Version 2.0 (the "License"); 7 you may not use this file except in compliance with the License. 8 You may obtain a copy of the License at 9 10 http://www.apache.org/licenses/LICENSE-2.0 11 12 Unless required by applicable law or agreed to in writing, software 13 distributed under the License is distributed on an "AS IS" BASIS, 14 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 See the License for the specific language governing permissions and 16 limitations under the License. 17 */ 18 19 .mx_UserSettings { 20 width: 100%; 21 margin-left: auto; 22 margin-right: auto; 23 24 display: flex; 25 flex-direction: column; 26 27 box-shadow: 0 4px 10px 6px rgba(0, 0, 0, 0.1); 28 border-radius: 5px; 29 margin-top: 12px; 30 margin-bottom: 5px; 31 padding-right: 10px; 32 } 33 34 .mx_UserSettings .mx_RoomHeader { 35 order: 1; 36 37 flex: 0 0 70px; 38 } 39 40 .mx_UserSettings_body { 41 order: 2; 42 43 flex: 1 1 0; 44 45 margin-top: -20px; 46 overflow-y: auto; 47 } 48 49 .mx_UserSettings h3 { 50 clear: both; 51 margin-left: 63px; 52 text-transform: uppercase; 53 color: $h3-color; 54 font-weight: 600; 55 font-size: 13px; 56 margin-top: 26px; 57 margin-bottom: 10px; 58 } 59 60 .mx_UserSettings_section h3 { 61 margin-left: 0px; 62 } 63 64 .mx_UserSettings_spinner { 65 display: inline-block; 66 vertical-align: middle; 67 margin-right: 12px; 68 width: 32px; 69 height: 32px; 70 } 71 72 .mx_UserSettings_button { 73 display: inline; 74 vertical-align: middle; 75 border: 0px; 76 border-radius: 36px; 77 font-weight: 400; 78 font-size: 16px; 79 color: $accent-fg-color; 80 background-color: $accent-color; 81 width: auto; 82 margin: auto; 83 padding: 7px; 84 padding-left: 1.5em; 85 padding-right: 1.5em; 86 cursor: pointer; 87 } 88 89 .mx_UserSettings_button.danger { 90 background-color: $warning-color; 91 } 92 93 .mx_UserSettings_section { 94 margin-left: 63px; 95 margin-top: 28px; 96 margin-bottom: 28px; 97 } 98 99 .mx_UserSettings_cryptoSection ul { 100 display: table; 101 } 102 .mx_UserSettings_cryptoSection li { 103 display: table-row; 104 } 105 .mx_UserSettings_cryptoSection label, 106 .mx_UserSettings_cryptoSection span { 107 display: table-cell; 108 padding-right: 1em; 109 } 110 111 .mx_UserSettings_importExportButtons { 112 padding-top: 10px; 113 padding-left: 40px; 114 } 115 116 .mx_UserSettings_importExportButtons .mx_UserSettings_button { 117 margin-right: 1em; 118 } 119 120 .mx_UserSettings_toggle input { 121 width: 16px; 122 margin-right: 8px; 123 margin-bottom: 8px; 124 } 125 126 .mx_UserSettings_toggle label { 127 padding-bottom: 21px; 128 } 129 130 .mx_UserSettings_accountTable 131 .mx_UserSettings_notifTable 132 { 133 display: table; 134 } 135 136 .mx_UserSettings_notifTable .mx_Spinner { 137 position: absolute; 138 } 139 140 .mx_UserSettings_language { 141 width: 200px; 142 } 143 144 .mx_UserSettings_profileTable 145 { 146 display: table; 147 float: left; 148 } 149 150 .mx_UserSettings_profileTableRow 151 { 152 display: table-row; 153 } 154 155 .mx_UserSettings_profileLabelCell 156 { 157 padding-bottom: 21px; 158 display: table-cell; 159 font-weight: bold; 160 padding-right: 24px; 161 } 162 163 .mx_UserSettings_profileInputCell { 164 display: table-cell; 165 padding-bottom: 21px; 166 width: 240px; 167 } 168 169 .mx_UserSettings_profileInputCell input, 170 .mx_UserSettings_profileInputCell .mx_EditableText 171 { 172 display: inline-block; 173 border: 0px; 174 border-bottom: 1px solid $input-underline-color; 175 padding: 0px; 176 width: 240px; 177 color: $input-fg-color; 178 font-family: 'Open Sans', Helvetica, Arial, Sans-Serif; 179 font-size: 16px; 180 } 181 182 .mx_UserSettings_threepidButton { 183 display: table-cell; 184 padding-left: 0.5em; 185 position: relative; 186 cursor: pointer; 187 } 188 189 .mx_UserSettings_phoneSection { 190 display:table; 191 } 192 193 .mx_UserSettings_phoneCountry { 194 width: 70px; 195 display: table-cell; 196 } 197 198 input.mx_UserSettings_phoneNumberField { 199 margin-left: 3px; 200 width: 172px; 201 border: 1px solid transparent; 202 } 203 204 .mx_UserSettings_changePasswordButton { 205 float: right; 206 margin-right: 32px; 207 margin-left: 32px; 208 } 209 210 .mx_UserSettings_logout { 211 float: right; 212 margin-right: 32px; 213 margin-left: 32px; 214 } 215 216 .mx_UserSettings_avatarPicker { 217 margin-left: 32px; 218 margin-right: 32px; 219 float: right; 220 cursor: pointer; 221 } 222 223 .mx_UserSettings_avatarPicker_img .mx_BaseAvatar_image { 224 object-fit: cover; 225 } 226 227 .mx_UserSettings_avatarPicker_edit { 228 text-align: center; 229 margin-top: 10px; 230 } 231 232 .mx_UserSettings_avatarPicker_edit img { 233 cursor: pointer; 234 } 235 236 .mx_UserSettings_avatarPicker_edit > input { 237 display: none; 238 } 239 240 .mx_UserSettings_advanced_spoiler, 241 .mx_UserSettings_link { 242 cursor: pointer; 243 color: $accent-color; 244 word-break: break-all; 245 }