mirror of
https://github.com/bitwarden/browser.git
synced 2024-09-19 02:51:14 +02:00
55e5e008c7
Allowing whitespace to wrap solves the issue of long link/button text awkwardly breaking out of controls Widening desktop "pages" prevents some unnecessary wrapping in places like the "Create account" button on the login screen, whose content is slightly wider than it should be (but this is currently masked by the `nowrap`) Closes https://github.com/bitwarden/clients/issues/2620
217 lines
3.1 KiB
SCSS
217 lines
3.1 KiB
SCSS
@import "variables.scss";
|
|
|
|
#login-page,
|
|
#lock-page,
|
|
#sso-page,
|
|
#set-password-page,
|
|
#remove-password-page {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100%;
|
|
|
|
@media (min-height: 500px) {
|
|
height: calc(100%);
|
|
}
|
|
|
|
@media (min-height: 800px) {
|
|
height: calc(100%);
|
|
}
|
|
|
|
img {
|
|
margin: 0 auto 15px;
|
|
width: 284px;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
#accessibility-cookie-page,
|
|
#register-page,
|
|
#hint-page,
|
|
#two-factor-page,
|
|
#update-temp-password-page,
|
|
#remove-password-page {
|
|
padding-top: 20px;
|
|
|
|
.content {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
img {
|
|
margin-bottom: 10px;
|
|
max-width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
border-radius: $border-radius;
|
|
}
|
|
}
|
|
|
|
#accessibility-cookie-page,
|
|
#login-page,
|
|
#register-page,
|
|
#hint-page,
|
|
#two-factor-page,
|
|
#lock-page,
|
|
#update-temp-password-page {
|
|
.content {
|
|
width: 325px;
|
|
transition: width 0.25s linear;
|
|
|
|
p {
|
|
text-align: center;
|
|
}
|
|
|
|
p.lead,
|
|
h1 {
|
|
font-size: $font-size-large;
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.box {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.buttons {
|
|
&:not(.with-rows),
|
|
.buttons-row {
|
|
display: flex;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
&:not(.with-rows),
|
|
.buttons-row:last-child {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
button {
|
|
margin-right: 10px;
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.sub-options {
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
|
|
a {
|
|
display: block;
|
|
margin-bottom: 10px;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#sso-page {
|
|
.content {
|
|
width: 325px;
|
|
|
|
.box {
|
|
margin-top: 30px;
|
|
margin-bottom: 30px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
#set-password-page,
|
|
#remove-password-page {
|
|
.content {
|
|
width: 500px;
|
|
|
|
p {
|
|
text-align: center;
|
|
}
|
|
|
|
p.lead,
|
|
h1 {
|
|
font-size: $font-size-large;
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.buttons {
|
|
&:not(.with-rows),
|
|
.buttons-row {
|
|
display: flex;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
&:not(.with-rows),
|
|
.buttons-row:last-child {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
button {
|
|
margin-right: 10px;
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.box {
|
|
margin-bottom: 15px;
|
|
|
|
&.last {
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|
|
|
|
.box-content {
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
#register-page,
|
|
#update-temp-password-page {
|
|
.content {
|
|
width: 400px;
|
|
}
|
|
}
|
|
|
|
#remove-password-page {
|
|
.content > p {
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|
|
|
|
#login-page {
|
|
flex-direction: column;
|
|
|
|
.login-header {
|
|
align-self: flex-start;
|
|
padding: 1em;
|
|
font-size: 1.2em;
|
|
.environment-urls-settings-icon {
|
|
@include themify($themes) {
|
|
color: themed("mutedColor");
|
|
}
|
|
|
|
span {
|
|
visibility: hidden;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
text-decoration: none;
|
|
|
|
@include themify($themes) {
|
|
color: themed("primaryColor");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|