keeweb/app/styles/areas/_key-change.scss

60 lines
1.3 KiB
SCSS

.key-change {
flex: 1;
display: flex;
align-items: stretch;
flex-direction: column;
justify-content: center;
overflow: hidden;
padding: $base-spacing;
position: relative;
@include mobile {
padding: $base-padding;
}
&__icon {
font-size: $modal-icon-size;
text-align: center;
}
&__header {
font-size: $small-header-font-size;
text-align: center;
}
&__body {
display: flex;
align-items: flex-start;
flex-direction: column;
flex-shrink: 0;
margin: $base-spacing 0;
}
&__input {
align-self: center;
}
input[type='password'].key-change__pass,
input[type='password'].key-change__pass-repeat {
font-size: $large-pass-font-size;
margin: $small-spacing 0 0;
}
&__keyfile {
color: var(--muted-color);
&:hover {
color: var(--medium-color);
}
margin-top: $base-padding-v;
cursor: pointer;
}
&__buttons {
text-align: right;
button ~ button {
margin-left: $small-spacing;
}
> button {
margin-bottom: $small-spacing;
}
}
&__body,
&__buttons {
align-self: center;
width: 40%;
}
}