2330 lines
No EOL
44 KiB
Text
2330 lines
No EOL
44 KiB
Text
@import "../variables";
|
|
@import "mixins";
|
|
|
|
.modal-main-wrapper {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
background-image: url("../img/bg_blue.jpg");
|
|
background-size: cover;
|
|
opacity: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
transition: 1s;
|
|
z-index: 2;
|
|
|
|
.modal-dialog {
|
|
.flex-container;
|
|
.flex-container-alignment(center, center);
|
|
margin: 0;
|
|
min-height: 100%;
|
|
transform: translate(0,0) !important;
|
|
transition: 0s !important;
|
|
width: auto;
|
|
|
|
.modal-content {
|
|
box-shadow: none;
|
|
background-color: transparent;
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
.modal-form-wrapper {
|
|
.flex-container-direction(column);
|
|
position: relative;
|
|
background: fade(white, 60%);
|
|
border-radius: 3rem;
|
|
box-shadow: @modal-form-shadow;
|
|
transition: opacity 1s;
|
|
|
|
.modal-form-header {
|
|
position: relative;
|
|
background: @program-modal-header-color;
|
|
border-radius: 3rem 3rem 0 0;
|
|
height: 10rem;
|
|
|
|
.modal-form-header-icon {
|
|
position: absolute;
|
|
top: -8.5rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: @program-modal-header-color;
|
|
border-top-left-radius: 16rem;
|
|
border-top-right-radius: 16rem;
|
|
text-align: center;
|
|
width: 32rem;
|
|
height: 16rem;
|
|
z-index: 1;
|
|
|
|
.base-icon {
|
|
.icon-sizing(7rem, 7rem, -2.5rem, -3.5rem);
|
|
color: @program-dark-color;
|
|
top: 2.5rem;
|
|
|
|
&.wider-icon {
|
|
.icon-sizing(7rem, 10rem, -2.5rem, -2rem);
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-form-header-title {
|
|
position: relative;
|
|
color: @program-dark-color;
|
|
font-size: 4.75rem;
|
|
font-weight: 300;
|
|
line-height: 10rem;
|
|
text-align: center;
|
|
width: 100%;
|
|
z-index: 2;
|
|
|
|
.modal-form-header-arrow {
|
|
.icon-sizing(2rem, 2rem, -5rem, -6rem);
|
|
margin-left: 2rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
}
|
|
|
|
.modal-form-header-close {
|
|
.flex-container;
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
right: 4rem;
|
|
height: 4rem;
|
|
width: 4rem;
|
|
margin-top: 0.5rem;
|
|
z-index: 3;
|
|
|
|
button {
|
|
.flex-container;
|
|
background: transparent;
|
|
border: none;
|
|
color: @program-modal-header-close-color;
|
|
padding: 0;
|
|
|
|
.base-icon {
|
|
.icon-sizing(4rem, 4rem, -4rem, -5rem);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.modal-form-header-transparent {
|
|
background: transparent;
|
|
}
|
|
|
|
&.closed-panel {
|
|
border-radius: 3rem;
|
|
|
|
.modal-form-header-title {
|
|
|
|
.modal-form-header-arrow {
|
|
transform: rotateX(180deg);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&:first-child {
|
|
margin-top: 10rem;
|
|
}
|
|
|
|
&:not(:first-child) {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-bottom: 10rem;
|
|
}
|
|
}
|
|
|
|
&.in-remove {
|
|
transition: 0.5s !important;
|
|
}
|
|
|
|
&.ng-leave {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
.modalTopClassBackground {
|
|
|
|
.modal-form-wrapper {
|
|
opacity: 0.2;
|
|
}
|
|
}
|
|
|
|
.general-form {
|
|
.flex-container-direction(column);
|
|
.flex-container-alignment(center, center);
|
|
|
|
.general-form-header {
|
|
color: @program-dark-color;
|
|
font-size: 4.75rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.general-form-progress-bar-wrapper {
|
|
margin: 6rem 0;
|
|
width: 100%;
|
|
|
|
.general-form-progress-bar {
|
|
background-color: @create-safe-progress-bar-bg-color;
|
|
border-radius: 1rem;
|
|
height: 1rem;
|
|
width: 100%;
|
|
|
|
.progress-bar-fill {
|
|
background-color: @create-safe-progress-bar-fill-color;
|
|
border-radius: 1rem;
|
|
height: 1rem;
|
|
width: 25%;
|
|
transition: all 0.5s linear;
|
|
}
|
|
}
|
|
|
|
.general-form-step-container {
|
|
.flex-container;
|
|
.flex-container-alignment(center, space-between);
|
|
height: 15rem;
|
|
width: 100%;
|
|
|
|
.general-form-step {
|
|
color: @create-safe-progress-bar-step-color;
|
|
flex-grow: 1;
|
|
font-size: 3.5rem;
|
|
text-align: center;
|
|
|
|
&.active {
|
|
color: @program-label-color;
|
|
font-weight: 600;
|
|
}
|
|
|
|
&.passed {
|
|
color: @program-label-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.general-form-field-group {
|
|
width: 100%;
|
|
|
|
&.field-group-vertical {
|
|
.flex-container-direction(column);
|
|
.flex-container-alignment(center, center);
|
|
margin-top: 5rem;
|
|
|
|
&:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.general-input, .general-input-wrapper, .general-textarea {
|
|
margin-top: 4rem;
|
|
|
|
&.bigger-indent {
|
|
margin-top: 7rem;
|
|
}
|
|
}
|
|
|
|
.general-range-wrapper {
|
|
margin-top: 5rem;
|
|
}
|
|
|
|
.field-group-error {
|
|
display: block;
|
|
align-self: flex-start;
|
|
color: @error-color;
|
|
font-size: 3.25rem;
|
|
font-style: italic;
|
|
margin-top: 2rem;
|
|
}
|
|
}
|
|
|
|
&.field-group-horizontal {
|
|
.flex-container-direction(row);
|
|
.flex-container-alignment(flex-start, flex-start);
|
|
margin-top: 7rem;
|
|
|
|
.field-group-label {
|
|
.flex-container-direction(column);
|
|
.flex-container-alignment(flex-end, center);
|
|
height: 7rem;
|
|
line-height: 3.5rem;
|
|
padding-right: 3rem;
|
|
text-align: right;
|
|
}
|
|
|
|
&:hover {
|
|
|
|
&:not(.no-hover) {
|
|
|
|
.field-group-label {
|
|
color: @program-hover-color;
|
|
|
|
.field-group-label-info {
|
|
color: @program-input-placeholder-hover-color
|
|
}
|
|
}
|
|
|
|
.general-input, .general-textarea {
|
|
border-bottom-color: @program-hover-color;
|
|
color: @program-hover-color;
|
|
|
|
&::-webkit-input-placeholder {
|
|
color: @program-input-placeholder-hover-color;
|
|
}
|
|
}
|
|
|
|
.general-input-wrapper {
|
|
border-bottom-color: @program-hover-color;
|
|
color: @program-hover-color;
|
|
|
|
.eye-icon {
|
|
color: @program-input-placeholder-hover-color;
|
|
|
|
&.open {
|
|
color: @program-hover-color;
|
|
}
|
|
}
|
|
|
|
.autocomplete-caret {
|
|
color: @program-hover-color;
|
|
}
|
|
}
|
|
|
|
.general-select {
|
|
|
|
.dropdown-toggle {
|
|
border-bottom-color: @program-hover-color;
|
|
color: @program-hover-color;
|
|
|
|
.caret {
|
|
color: @program-hover-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.field-group-review {
|
|
.flex-container-direction(row);
|
|
.flex-container-alignment(flex-start, center);
|
|
border-bottom: 1px solid @program-modal-divider-color;
|
|
font-size: 3.5rem;
|
|
padding: 2rem 0;
|
|
line-height: 5.5rem;
|
|
|
|
.field-group-label {
|
|
color: @program-dark-color;
|
|
font-weight: 600;
|
|
padding-right: 10rem;
|
|
text-align: left;
|
|
min-width: 50%;
|
|
width: 50%;
|
|
}
|
|
|
|
.field-group-description {
|
|
color: @program-main-color;
|
|
padding-right: 2rem;
|
|
min-width: 50%;
|
|
width: 50%;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.field-group-error {
|
|
display: block;
|
|
align-self: flex-start;
|
|
color: @error-color;
|
|
font-size: 3.25rem;
|
|
font-style: italic;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
&.active-line {
|
|
background: fade(@program-modal-active-line-color, 20%);
|
|
}
|
|
|
|
&:last-child {
|
|
border-bottom: none!important;
|
|
}
|
|
}
|
|
|
|
&.field-group-review-full {
|
|
.flex-container-direction(column);
|
|
.flex-container-alignment(center, center);
|
|
color: @program-dark-color;
|
|
font-size: 4rem;
|
|
margin-top: 10rem;
|
|
|
|
.review-description {
|
|
color: @program-hover-color;
|
|
font-size: 3.5rem;
|
|
}
|
|
}
|
|
|
|
&.field-group-review-full-second {
|
|
.flex-container-direction(row);
|
|
.flex-container-alignment(center, center);
|
|
color: @program-dark-color;
|
|
font-size: 4rem;
|
|
|
|
.transaction-status-indicator{
|
|
margin-right: 3rem;
|
|
}
|
|
}
|
|
|
|
&.need-master-password {
|
|
margin-top: 13rem;
|
|
margin-bottom: 4rem;
|
|
max-width: 95rem;
|
|
}
|
|
|
|
&.field-group-buttons-wrapper {
|
|
margin-top: 3.5rem;
|
|
|
|
.field-group-dropdown {
|
|
margin-right: 3rem;
|
|
|
|
& > button {
|
|
.flex-container;
|
|
.flex-container-alignment(center, center);
|
|
background: white;
|
|
border: 1px solid @program-button-border-color;
|
|
border-radius: 1rem;
|
|
color: @program-main-color;
|
|
height: 7rem;
|
|
min-width: 12rem;
|
|
overflow: hidden;
|
|
|
|
.dropdown-arrow-icon {
|
|
.icon-sizing(2rem, 2rem, -5rem, -6rem);
|
|
}
|
|
|
|
&:hover {
|
|
background: @program-button-hover-bg-color;
|
|
}
|
|
|
|
&:active {
|
|
background: @program-button-active-bg-color;
|
|
}
|
|
}
|
|
|
|
&.open {
|
|
|
|
& > button {
|
|
background: @program-button-active-bg-color !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.field-group-checkbox-wrapper {
|
|
margin-top: 3.5rem;
|
|
}
|
|
|
|
&.field-group-range-wrapper {
|
|
margin-top: 9.5rem;
|
|
margin-bottom: 1rem;
|
|
|
|
.field-group-label {
|
|
margin-top: 2.5rem;
|
|
}
|
|
}
|
|
|
|
&.field-group-extra-icons {
|
|
position: relative;
|
|
align-self: flex-end;
|
|
|
|
.extra-icon-wrapper {
|
|
position: absolute;
|
|
right: -8.5rem;
|
|
margin-top: 7rem;
|
|
display: inline-flex;
|
|
color: @program-light-color;
|
|
|
|
.base-icon {
|
|
.icon-sizing(6rem, 6rem, -3rem, -4rem);
|
|
cursor: pointer;
|
|
}
|
|
|
|
&.active {
|
|
color: @program-dark-color;
|
|
}
|
|
|
|
&:hover {
|
|
color: @program-dark-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.bigger-indent {
|
|
margin-top: 10rem;
|
|
}
|
|
|
|
.field-group-label {
|
|
color: @program-dark-color;
|
|
font-size: 3.5rem;
|
|
font-weight: 400;
|
|
margin: 0;
|
|
text-align: center;
|
|
|
|
&.bolder-label {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.field-group-label-info {
|
|
color: @program-label-subtext-color;
|
|
font-size: 2.75rem;
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
|
|
.field-group-subgroup {
|
|
display: flex;
|
|
}
|
|
|
|
.field-group-error-wrapper {
|
|
.flex-container-direction(column);
|
|
width: 100%;
|
|
|
|
.field-group-error {
|
|
display: block;
|
|
color: @error-color;
|
|
font-size: 3.25rem;
|
|
line-height: 2.75rem;
|
|
font-style: italic;
|
|
margin-top: 1.5rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.general-form-control-buttons {
|
|
.flex-container;
|
|
border-radius: 5rem;
|
|
margin-top: 7rem;
|
|
|
|
.control-button {
|
|
background-color: white;
|
|
border: 1px solid @program-button-border-color;
|
|
color: @program-button-text-color;
|
|
font-size: 4rem;
|
|
padding: 1.25rem 2.5rem;
|
|
min-width: 32.5rem;
|
|
|
|
.control-button-info {
|
|
display: block;
|
|
color: @program-button-subtext-color;
|
|
font-size: 2.75rem;
|
|
}
|
|
|
|
&.larger-button {
|
|
min-width: 37.5rem !important;
|
|
}
|
|
|
|
&.large-button {
|
|
min-width: 48rem !important;
|
|
}
|
|
|
|
&.extra-large-button {
|
|
min-width: 65rem !important;
|
|
}
|
|
|
|
&:first-child {
|
|
border-bottom-left-radius: 5rem;
|
|
border-top-left-radius: 5rem;
|
|
}
|
|
|
|
&:not(:last-child) {
|
|
border-right: none;
|
|
}
|
|
|
|
&:last-child {
|
|
border-bottom-right-radius: 5rem;
|
|
border-top-right-radius: 5rem;
|
|
}
|
|
|
|
&:hover {
|
|
background: @program-button-hover-bg-color;
|
|
}
|
|
|
|
&:active {
|
|
background: @program-button-active-bg-color;
|
|
}
|
|
|
|
&:disabled {
|
|
background: fade(white, 20%);
|
|
color: @program-light-color;
|
|
}
|
|
|
|
&.inactive {
|
|
background: fade(white, 20%) !important;
|
|
color: @program-light-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.general-form-review-wrapper {
|
|
width: 100%;
|
|
}
|
|
|
|
.general-form-price-description {
|
|
.flex-container-direction(column);
|
|
.flex-container-alignment(center, center);
|
|
margin-top: 12rem;
|
|
|
|
.price-text {
|
|
color: @program-hover-color;
|
|
font-size: 3.5rem;
|
|
}
|
|
|
|
.price-error {
|
|
display: block;
|
|
color: @error-color;
|
|
font-size: 3.25rem;
|
|
font-style: italic;
|
|
margin-top: 2rem;
|
|
}
|
|
}
|
|
|
|
.general-form-warning {
|
|
.flex-container-direction(column);
|
|
.flex-container-alignment(center, center);
|
|
color: @error-color;
|
|
margin-top: 9rem;
|
|
max-width: 77rem;
|
|
|
|
.warning-title {
|
|
font-size: 4rem;
|
|
margin: 1.75rem 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.warning-description {
|
|
font-size: 3.25rem;
|
|
line-height: 3.75rem;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.focused-line {
|
|
|
|
.field-group-label {
|
|
color: @program-hover-color;
|
|
|
|
.field-group-label-info {
|
|
color: @program-input-placeholder-hover-color;
|
|
}
|
|
}
|
|
|
|
.general-input, .general-textarea {
|
|
border-bottom-color: @program-hover-color;
|
|
color: @program-hover-color;
|
|
|
|
&::-webkit-input-placeholder {
|
|
color: @program-input-placeholder-hover-color;
|
|
}
|
|
}
|
|
|
|
.general-input-wrapper, &.general-input-wrapper {
|
|
border-bottom-color: @program-hover-color;
|
|
color: @program-hover-color;
|
|
|
|
.eye-icon {
|
|
color: @program-input-placeholder-hover-color;
|
|
|
|
&.open {
|
|
color: @program-hover-color;
|
|
}
|
|
}
|
|
|
|
.autocomplete-caret {
|
|
color: @program-hover-color;
|
|
}
|
|
}
|
|
|
|
.general-select {
|
|
|
|
.dropdown-toggle {
|
|
border-bottom-color: @program-hover-color;
|
|
color: @program-hover-color;
|
|
|
|
.caret {
|
|
color: @program-hover-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-unlock-app {
|
|
|
|
.unlock-app {
|
|
.flex-container;
|
|
|
|
.unlock-app-btn {
|
|
.flex-container-direction(column);
|
|
.flex-container-alignment(center, center);
|
|
background: transparent;
|
|
border: none;
|
|
color: @program-exuding-color;
|
|
font-size: 8.25rem;
|
|
font-weight: 200;
|
|
line-height: 20rem;
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
.base-icon {
|
|
.icon-sizing(20rem, 20rem, 0, -2rem);
|
|
font-size: 24rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-app-blocked {
|
|
|
|
.modal-form-wrapper {
|
|
width: 114rem;
|
|
|
|
.modal-form-body {
|
|
padding: 11.5rem 9.5rem 5rem;
|
|
}
|
|
}
|
|
|
|
.general-form {
|
|
|
|
.general-form-field-group {
|
|
margin-bottom: 9.5rem;
|
|
|
|
.field-group-label {
|
|
font-size: 4rem;
|
|
line-height: 4rem;
|
|
}
|
|
|
|
.general-input-wrapper {
|
|
margin-top: 9rem;
|
|
}
|
|
}
|
|
|
|
.general-form-control-buttons {
|
|
margin-top: 3rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-use-master-password {
|
|
|
|
.modal-form-wrapper {
|
|
width: 114rem;
|
|
|
|
.modal-form-body {
|
|
padding: 2.5rem 9.5rem 5rem;
|
|
}
|
|
}
|
|
|
|
.general-form {
|
|
|
|
.general-form-field-group {
|
|
|
|
.general-input-wrapper {
|
|
margin-top: 10rem;
|
|
}
|
|
}
|
|
|
|
.use-master-password-description {
|
|
position: relative;
|
|
color: @program-dark-color;
|
|
font-size: 3.5rem;
|
|
margin: 10rem auto 5rem;
|
|
text-align: center;
|
|
|
|
.base-icon {
|
|
.icon-sizing(4rem, 4rem, -4rem, -5rem);
|
|
position: absolute;
|
|
top: -2rem;
|
|
right: -4rem;
|
|
color: @program-label-info-color;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.general-form-control-buttons {
|
|
margin-top: 3rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-cancel-master-password {
|
|
|
|
.modal-form-wrapper {
|
|
width: 156.5rem;
|
|
|
|
.modal-form-body {
|
|
padding: 1.5rem 9.5rem 6rem;
|
|
}
|
|
}
|
|
|
|
.general-form {
|
|
|
|
.general-form-control-buttons {
|
|
|
|
.control-button {
|
|
max-width: 37.5rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-change-master-password {
|
|
|
|
.modal-form-wrapper {
|
|
width: 114rem;
|
|
|
|
.modal-form-body {
|
|
padding: 7rem 9.5rem 5rem;
|
|
}
|
|
}
|
|
|
|
.general-form {
|
|
|
|
.general-form-field-group.new-password {
|
|
margin-top: 7rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-error-report {
|
|
|
|
.modal-form-wrapper {
|
|
width: 124rem;
|
|
|
|
.modal-form-body {
|
|
padding: 11rem 9rem 8rem;
|
|
}
|
|
}
|
|
|
|
.general-form {
|
|
|
|
.general-form-field-group {
|
|
|
|
.error-report-field-wrapper {
|
|
.flex-container;
|
|
width: 100%;
|
|
|
|
.general-select {
|
|
margin-right: 3.25rem;
|
|
}
|
|
|
|
.general-input {
|
|
margin-top: 0;
|
|
margin-left: 3.25rem;
|
|
}
|
|
}
|
|
|
|
.error-report-indent {
|
|
margin-top: 6rem;
|
|
}
|
|
|
|
&.error-report-indent {
|
|
margin-top: 6rem;
|
|
}
|
|
}
|
|
|
|
.error-report-sending {
|
|
color: @success-color;
|
|
font-size: 3.5rem;
|
|
}
|
|
|
|
.error-report-success {
|
|
color: @success-color;
|
|
font-size: 3.5rem;
|
|
}
|
|
|
|
.error-report-fail {
|
|
color: @error-color;
|
|
font-size: 3.5rem;
|
|
}
|
|
|
|
.general-form-control-buttons {
|
|
margin-top: 5.5rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.general-form-safe-backup {
|
|
.flex-container-direction(column);
|
|
.flex-container-alignment(center, center);
|
|
|
|
.general-form-safe-description {
|
|
.flex-container-direction(column);
|
|
color: @program-dark-color;
|
|
padding: 0 8rem;
|
|
|
|
span {
|
|
text-align: center;
|
|
}
|
|
|
|
.first-description {
|
|
font-size: 4.75rem;
|
|
line-height: 10rem;
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
.second-description {
|
|
font-size: 3.25rem;
|
|
line-height: 5rem;
|
|
}
|
|
|
|
.third-description {
|
|
font-size: 4.75rem;
|
|
line-height: 7rem;
|
|
margin-top: 9rem;
|
|
}
|
|
}
|
|
|
|
.general-form-control-buttons {
|
|
margin-top: 4rem;
|
|
margin-bottom: 2rem;
|
|
|
|
.control-button {
|
|
min-width: 75rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-create-safe, .modal-open-smartsafe {
|
|
|
|
.modal-form-wrapper {
|
|
|
|
.modal-form-body {
|
|
padding: 7rem 12rem 9.5rem;
|
|
}
|
|
|
|
.modal-form-body.start-use-safe {
|
|
padding: 6rem 9rem 7rem;
|
|
|
|
.general-form {
|
|
|
|
.general-form-control-buttons {
|
|
margin-top: 0;
|
|
|
|
.control-button {
|
|
min-width: 75rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.general-form {
|
|
|
|
.general-form-field-group {
|
|
margin-top: 4.5rem;
|
|
padding-left: 8rem;
|
|
padding-right: 8rem;
|
|
|
|
.field-group-label {
|
|
font-size: 4rem;
|
|
line-height: 4rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.general-input-wrapper {
|
|
margin-top: 7.5rem;
|
|
}
|
|
}
|
|
|
|
.general-form-warning {
|
|
margin-top: 2.5rem;
|
|
margin-bottom: 6.5rem;
|
|
}
|
|
|
|
.general-form-control-buttons {
|
|
margin-top: 4.5rem;
|
|
|
|
.base-icon {
|
|
.icon-sizing(5rem, 5rem, -3.5rem, -4.5rem);
|
|
animation: checkbox-animation linear 0.3s;
|
|
animation-iteration-count: 1;
|
|
color: @program-button-done-icon-color;
|
|
margin-left: 1.5rem;
|
|
margin-bottom: -1rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-create-safe {
|
|
|
|
.modal-form-wrapper {
|
|
width: 136rem;
|
|
}
|
|
}
|
|
|
|
.modal-create-smartsafe {
|
|
|
|
.modal-form-wrapper {
|
|
width: 220rem;
|
|
|
|
.modal-form-body {
|
|
padding: 7rem 8.5rem;
|
|
}
|
|
}
|
|
|
|
.general-form {
|
|
|
|
.smartsafe-header {
|
|
color: @program-dark-color;
|
|
font-size: 4rem;
|
|
line-height: 12.5rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.smartsafe-description {
|
|
color: @program-dark-color;
|
|
font-size: 3.25rem;
|
|
line-height: 4.25rem;
|
|
padding: 0 10rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.smartsafe-phrase {
|
|
.flex-container;
|
|
.flex-container-alignment(center, space-between);
|
|
border-bottom: 1px solid @program-input-border-color;
|
|
color: @program-input-text-color;
|
|
font-size: 3rem;
|
|
padding: 1rem 0;
|
|
margin-top: 9rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.smartsafe-buttons {
|
|
.flex-container;
|
|
margin: 8rem auto;
|
|
|
|
.smartsafe-button {
|
|
.general-button(auto, 5.75rem);
|
|
border: 1px solid @program-button-border-color;
|
|
color: @program-button-text-color;
|
|
font-size: 3.5rem;
|
|
margin: 0 2.5rem;
|
|
padding: 0 2.5rem;
|
|
min-width: 25rem;
|
|
|
|
&:hover {
|
|
background: rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
.base-icon {
|
|
.icon-sizing(4rem, 4rem, -4rem, -5rem);
|
|
margin-right: 1.5rem;
|
|
}
|
|
|
|
.copied-icon {
|
|
animation: checkbox-animation linear 0.5s;
|
|
|
|
&:before {
|
|
content: 'A' !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.smartsafe-checkbox {
|
|
margin-top: 4rem;
|
|
|
|
.general-checkbox {
|
|
|
|
.general-checkbox-text {
|
|
font-size: 3.25rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.general-form-control-buttons {
|
|
margin-top: 9rem;
|
|
|
|
.control-button {
|
|
min-width: 60rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-open-safe {
|
|
|
|
.modal-form-wrapper {
|
|
width: 114rem;
|
|
|
|
.modal-form-body {
|
|
padding: 7rem 9.5rem 9.5rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-open-smartsafe {
|
|
|
|
.modal-form-wrapper {
|
|
width: 196.5rem;
|
|
}
|
|
|
|
.general-form {
|
|
|
|
.general-form-field-group:not(.phrase-group) {
|
|
max-width: 112rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-restore-safe {
|
|
|
|
.modal-form-wrapper {
|
|
width: 114rem;
|
|
|
|
.modal-form-body {
|
|
padding: 7rem 9.5rem 9.5rem;
|
|
}
|
|
}
|
|
|
|
.general-form {
|
|
|
|
.restored-safe-name {
|
|
color: @program-hover-color;
|
|
font-size: 6.25rem;
|
|
font-weight: 300;
|
|
line-height: 6rem;
|
|
margin-top: 8rem;
|
|
}
|
|
|
|
.restored-safe-path {
|
|
color: @program-dark-color;
|
|
font-size: 3.5rem;
|
|
line-height: 3.5rem;
|
|
margin-top: 4.5rem;
|
|
text-align: center;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.general-form-field-group {
|
|
margin-top: 13.5rem;
|
|
|
|
.field-group-label {
|
|
font-size: 4rem;
|
|
line-height: 4rem;
|
|
}
|
|
|
|
.general-input-wrapper {
|
|
margin-top: 9rem;
|
|
}
|
|
}
|
|
|
|
.general-form-control-buttons {
|
|
margin-top: 11rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-safe-backup {
|
|
|
|
.modal-form-wrapper {
|
|
width: 136rem;
|
|
|
|
.modal-form-body {
|
|
padding: 0 12rem 6.5rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-change-safe-password {
|
|
|
|
.modal-form-wrapper {
|
|
width: 106.5rem;
|
|
|
|
.modal-form-body {
|
|
padding: 11rem 9.5rem 5rem;
|
|
}
|
|
}
|
|
|
|
.general-form {
|
|
|
|
.general-form-field-group.new-password {
|
|
margin-top: 7rem;
|
|
}
|
|
|
|
.general-form-control-buttons {
|
|
margin-top: 2rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-disable-safe {
|
|
|
|
.modal-form-wrapper {
|
|
width: 101rem;
|
|
|
|
.modal-form-body {
|
|
padding: 1.5rem 9.5rem 6rem;
|
|
}
|
|
}
|
|
|
|
.general-form {
|
|
|
|
.general-form-field-group {
|
|
|
|
.field-group-label {
|
|
font-size: 4.75rem;
|
|
line-height: 5rem;
|
|
}
|
|
}
|
|
|
|
.general-form-control-buttons {
|
|
margin-top: 11rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-create-alias {
|
|
|
|
.modal-form-wrapper {
|
|
width: 106.5rem;
|
|
|
|
.modal-form-body {
|
|
padding: 7.5rem 9.5rem 5rem;
|
|
}
|
|
}
|
|
|
|
.general-form {
|
|
|
|
.general-form-field-group {
|
|
|
|
.create-alias-description {
|
|
color: @program-dark-color;
|
|
font-size: 3.25rem;
|
|
line-height: 4rem;
|
|
padding: 0 5rem;
|
|
margin-top: 0.5rem;
|
|
text-align: center;
|
|
}
|
|
|
|
&.smaller-indent {
|
|
margin-top: 3.5rem;
|
|
}
|
|
}
|
|
|
|
.general-input-wrapper {
|
|
|
|
.alias-character {
|
|
color: @program-dark-color;
|
|
font-size: 3.5rem;
|
|
margin-right: 1rem;
|
|
padding: 1rem 0;
|
|
}
|
|
|
|
&:hover, &.focused-line {
|
|
|
|
.alias-character {
|
|
color: @program-hover-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.general-form-price-description {
|
|
margin-top: 6rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-transfer-alias {
|
|
|
|
.modal-form-wrapper {
|
|
width: 106.5rem;
|
|
|
|
.modal-form-body {
|
|
padding: 10rem 9.5rem 5rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-edit-alias-comment {
|
|
|
|
.modal-form-wrapper {
|
|
width: 106.5rem;
|
|
|
|
.modal-form-body {
|
|
padding: 10.5rem 9.5rem 5rem;
|
|
}
|
|
|
|
.general-form-price-description {
|
|
margin-top: 6rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-send-money {
|
|
|
|
.modal-form-wrapper {
|
|
width: 166.5rem;
|
|
|
|
.modal-form-body {
|
|
padding: 7rem 18.5rem 8rem 0;
|
|
}
|
|
}
|
|
|
|
.general-form {
|
|
@left-padding: 42rem;
|
|
|
|
.general-form-field-group {
|
|
|
|
.field-group-label {
|
|
padding-left: 6rem;
|
|
min-width: @left-padding;
|
|
width: @left-padding;
|
|
}
|
|
|
|
&.field-group-checkbox-wrapper {
|
|
padding-left: @left-padding;
|
|
}
|
|
|
|
&.field-group-buttons-wrapper {
|
|
padding-left: @left-padding;
|
|
|
|
.field-group-dropdown {
|
|
|
|
.dropdown-menu {
|
|
min-width: 48rem;
|
|
}
|
|
}
|
|
|
|
.dropdown-clock-icon {
|
|
.icon-sizing(6rem, 6rem, -3rem, -4rem);
|
|
}
|
|
|
|
.dropdown-contact-icon {
|
|
.icon-sizing(6rem, 6rem, -2.5rem, -3rem);
|
|
font-size: 12rem;
|
|
}
|
|
}
|
|
|
|
.send-money-subgroup-left, .send-money-subgroup-right {
|
|
.flex-container;
|
|
|
|
&:hover {
|
|
|
|
&:not(.no-hover) {
|
|
|
|
.field-group-label {
|
|
color: @program-hover-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.send-money-subgroup-left {
|
|
|
|
.general-input-wrapper {
|
|
width: 45.5rem;
|
|
}
|
|
}
|
|
|
|
.send-money-subgroup-right {
|
|
|
|
.field-group-label {
|
|
padding-left: 0;
|
|
min-width: 38.5rem;
|
|
width: 38.5rem;
|
|
}
|
|
|
|
.general-input-wrapper {
|
|
width: 22rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.safe-alias-modal-wrapper {
|
|
margin-top: 3.5rem;
|
|
padding-left: @left-padding;
|
|
width: 100%;
|
|
}
|
|
|
|
.recent-transaction-table-wrapper {
|
|
align-self: flex-start;
|
|
margin-top: 3.5rem;
|
|
}
|
|
|
|
.recent-transactions-table {
|
|
max-height: 45.25rem;
|
|
width: 100%;
|
|
overflow-y: auto;
|
|
|
|
table {
|
|
color: @program-main-color;
|
|
font-size: 3.5rem;
|
|
width: 100%;
|
|
|
|
tbody {
|
|
|
|
tr {
|
|
height: 9rem;
|
|
|
|
.transaction-status-indicator {
|
|
margin-left: 2rem;
|
|
}
|
|
|
|
&:nth-child(odd) {
|
|
background-color: @program-table-header-bg-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.no-recent-transactions {
|
|
display: block;
|
|
color: @program-empty-color;
|
|
font-size: 3.5rem;
|
|
line-height: 7rem;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.general-form-control-buttons {
|
|
margin-top: 10.5rem;
|
|
margin-left: 18.5rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-select-contact {
|
|
|
|
.modal-form-wrapper {
|
|
width: 119rem;
|
|
|
|
.modal-form-body {
|
|
padding: 8rem 7rem;
|
|
}
|
|
}
|
|
|
|
.general-form {
|
|
|
|
.select-contact-options {
|
|
.flex-container;
|
|
.flex-container-alignment(center, space-between);
|
|
margin-bottom: 3rem;
|
|
width: 100%;
|
|
|
|
.select-contact-groups {
|
|
position: relative;
|
|
|
|
.groups-btn {
|
|
.flex-container;
|
|
.flex-container-alignment(center, space-between);
|
|
background: fade(white, 40%);
|
|
border: 1px solid @program-button-border-color;
|
|
border-radius: 4rem;
|
|
color: @program-exuding-color;
|
|
font-size: 3.75rem;
|
|
height: 8.25rem;
|
|
padding: 0 4rem;
|
|
width: 50rem;
|
|
|
|
.general-select {
|
|
.dropdown-toggle{
|
|
border-bottom: 0;
|
|
}
|
|
.dropdown-menu.open {
|
|
width: 50rem;
|
|
margin-left: -4rem;
|
|
margin-top: 2.5rem;
|
|
}
|
|
}
|
|
|
|
.base-icon {
|
|
.icon-sizing(2rem, 2rem, -5rem, -6rem);
|
|
}
|
|
}
|
|
|
|
.groups-menu {
|
|
.menu-list(10.5rem, 0, 0, 100%);
|
|
}
|
|
}
|
|
|
|
.select-contact-search {
|
|
.flex-container-direction(row);
|
|
.flex-container-alignment(center, center);
|
|
background: fade(white, 40%);
|
|
border: 1px solid @program-button-border-color;
|
|
border-radius: 4rem;
|
|
color: @program-dark-color;
|
|
font-size: 3.5rem;
|
|
height: 8.25rem;
|
|
padding: 0 3rem;
|
|
width: 50rem;
|
|
|
|
.search-icon {
|
|
.icon-sizing(6rem, 8rem, -3rem, -4rem);
|
|
}
|
|
|
|
.search-input {
|
|
display: block;
|
|
background: transparent;
|
|
border: none;
|
|
padding-left: 2rem;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.select-contact-list {
|
|
max-height: 69rem;
|
|
min-height:25.75rem;
|
|
overflow-y: auto;
|
|
width: 100%;
|
|
|
|
.select-contact-item {
|
|
.flex-container-direction(row);
|
|
.flex-container-alignment(center, center);
|
|
border-bottom: 1px solid @program-modal-divider-color;
|
|
min-height: 11.5rem;
|
|
width: 100%;
|
|
|
|
.contact-name {
|
|
.flex-container;
|
|
.flex-container-alignment(center, flex-start);
|
|
color: @program-main-color;
|
|
font-size: 3.5rem;
|
|
line-height: 3.5rem;
|
|
width: 72.5%;
|
|
word-break: break-word;
|
|
|
|
.base-icon {
|
|
.icon-sizing(3.5rem, 3.5rem, -4.25rem, -5.25rem);
|
|
flex-shrink: 0;
|
|
color: @program-table-icon-color;
|
|
margin: 0 1.5rem;
|
|
}
|
|
}
|
|
|
|
.contact-address {
|
|
color: @program-input-icon-color;
|
|
font-size: 3rem;
|
|
font-style: italic;
|
|
line-height: 3rem;
|
|
margin-top: 0.5rem;
|
|
width: 27.5%;
|
|
word-break: break-word;
|
|
}
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
&:hover, &.active-contact {
|
|
cursor: pointer;
|
|
|
|
.contact-name {
|
|
color: @program-hover-color;
|
|
|
|
.base-icon {
|
|
color: @send-money-contacts-icon-hover-color;
|
|
}
|
|
}
|
|
|
|
.contact-address {
|
|
color: @send-money-contacts-address-hover-color;
|
|
}
|
|
}
|
|
|
|
&.active-contact {
|
|
background: fade(@send-money-contacts-hover-color, 50%);
|
|
}
|
|
}
|
|
|
|
.empty-contacts-groups {
|
|
.flex-container-direction(column);
|
|
.flex-container-alignment(center, center);
|
|
color: @program-empty-color;
|
|
margin: 3.5rem 0 1rem;
|
|
|
|
.empty-contacts-groups-icon {
|
|
.icon-sizing(14rem, 14rem, 1rem, 0);
|
|
}
|
|
|
|
.empty-contacts-groups-text {
|
|
font-size: 3.75rem;
|
|
font-weight: 300;
|
|
margin-top: 2rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-select-contact-address {
|
|
|
|
.modal-form-wrapper {
|
|
width: 119rem;
|
|
|
|
.modal-form-body {
|
|
padding: 12rem 7rem 9rem 7rem;
|
|
}
|
|
}
|
|
|
|
.general-form {
|
|
|
|
.select-contact-options {
|
|
.flex-container;
|
|
.flex-container-alignment(center, space-between);
|
|
margin-bottom: 3rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.select-contact-list {
|
|
height: 66rem;
|
|
overflow-y: auto;
|
|
|
|
.select-contact-item {
|
|
.flex-container-direction(column);
|
|
border-bottom: 1px solid @program-modal-divider-color;
|
|
height: 16.5rem;
|
|
padding: 2rem;
|
|
|
|
.safe-address {
|
|
|
|
.safe-address-wrap {
|
|
width: 100rem;
|
|
}
|
|
}
|
|
|
|
alias-display {
|
|
|
|
.safe-alias {
|
|
margin: 1.5rem 0;
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
&:hover, &.active-contact {
|
|
cursor: pointer;
|
|
|
|
.safe-address {
|
|
|
|
.safe-address-wrap {
|
|
|
|
.safe-address-text {
|
|
background: -webkit-linear-gradient(left, @program-hover-color 0, @program-hover-color 75%, transparent 100%);
|
|
-webkit-background-clip: text;
|
|
}
|
|
}
|
|
}
|
|
|
|
alias-display {
|
|
|
|
.safe-alias {
|
|
|
|
.safe-alias-btn {
|
|
border-color: @safes-alias-border-hover-color;
|
|
color: @program-hover-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.active-contact {
|
|
background: fade(@send-money-contacts-hover-color, 50%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-confirm-transaction {
|
|
background-image: none;
|
|
|
|
.modal-form-wrapper {
|
|
background: white;
|
|
width: 136rem;
|
|
|
|
.modal-form-body {
|
|
padding: 7rem 8.5rem 8rem;
|
|
}
|
|
}
|
|
|
|
.general-form {
|
|
|
|
.general-form-field-group.field-group-review {
|
|
|
|
.field-group-label {
|
|
min-width: 35%;
|
|
width: 35%;
|
|
}
|
|
|
|
.field-group-description {
|
|
min-width: 65%;
|
|
width: 65%;
|
|
|
|
.safe-address {
|
|
|
|
.safe-address-wrap {
|
|
width: 76rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.general-form-control-buttons {
|
|
margin-top: 6rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-transaction-details {
|
|
|
|
.modal-form-wrapper {
|
|
width: 136rem;
|
|
|
|
.modal-form-body {
|
|
padding: 7rem 9.5rem 0;
|
|
}
|
|
}
|
|
|
|
.general-form {
|
|
|
|
.general-form-field-group {
|
|
|
|
.safe-address {
|
|
|
|
.safe-address-wrap {
|
|
width: 54rem;
|
|
}
|
|
}
|
|
|
|
.field-group-description.transaction-details {
|
|
max-height: 41.75rem;
|
|
overflow: auto;
|
|
|
|
.transaction-status-wrapper {
|
|
.flex-container;
|
|
padding: 0.75rem 0;
|
|
margin-bottom: 3rem;
|
|
|
|
.transaction-status {
|
|
position: relative;
|
|
height: 6rem;
|
|
width: 6rem;
|
|
margin-right: 2.5rem;
|
|
|
|
.status-blank {
|
|
stroke: @program-transaction-status-inner-color;
|
|
}
|
|
|
|
.status-graph {
|
|
|
|
&.income {
|
|
stroke: @program-payments-income-color;
|
|
}
|
|
|
|
&.outgoing {
|
|
stroke: @program-payments-outgoing-color;
|
|
}
|
|
}
|
|
|
|
.status-inner {
|
|
.flex-container;
|
|
.flex-container-alignment(center, center);
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
color: @program-transaction-status-inner-color;
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
&.income {
|
|
color: @program-payments-income-color;
|
|
}
|
|
|
|
&.outgoing {
|
|
color: @program-payments-outgoing-color;
|
|
|
|
.base-icon {
|
|
transform: rotateX(180deg);
|
|
}
|
|
}
|
|
|
|
.base-icon {
|
|
.icon-sizing(4rem, 4rem, -4rem, -5rem);
|
|
}
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
.modal-complete-transaction {
|
|
|
|
.modal-form-wrapper {
|
|
width: 116.5rem;
|
|
|
|
.modal-form-body {
|
|
padding: 0 9.5rem 6.5rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-return-pledges {
|
|
|
|
.modal-form-wrapper {
|
|
width: 156.5rem;
|
|
|
|
.modal-form-body {
|
|
padding: 0 9.5rem 6.5rem;
|
|
}
|
|
}
|
|
|
|
.general-form {
|
|
|
|
.general-form-header.attention {
|
|
color: @error-color;
|
|
}
|
|
|
|
.general-form-field-group {
|
|
|
|
.field-group-label.attention {
|
|
color: @error-color;
|
|
}
|
|
}
|
|
|
|
.general-form-price-description {
|
|
margin-top: 10rem;
|
|
}
|
|
|
|
.general-form-control-buttons {
|
|
margin-top: 10rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-cancel-transaction {
|
|
|
|
.modal-form-wrapper {
|
|
width: 156.5rem;
|
|
|
|
.modal-form-body {
|
|
padding: 0 26rem 6.5rem;
|
|
}
|
|
}
|
|
|
|
.general-form {
|
|
|
|
.general-form-field-group {
|
|
|
|
&.special-indent {
|
|
margin-top: 16rem;
|
|
}
|
|
}
|
|
|
|
.general-form-price-description {
|
|
margin-top: 14rem;
|
|
}
|
|
|
|
.general-form-control-buttons {
|
|
margin-top: 10rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-new-contact {
|
|
|
|
.modal-form-wrapper {
|
|
width: 166.5rem;
|
|
|
|
.modal-form-body {
|
|
padding: 3rem 18rem 8rem 0;
|
|
|
|
.general-form-control-buttons {
|
|
margin-left: 18rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.general-form {
|
|
|
|
.general-form-field-group {
|
|
|
|
.field-group-label {
|
|
padding-left: 7rem;
|
|
min-width: 49rem;
|
|
width: 49rem;
|
|
}
|
|
|
|
.contact-connection-wrapper {
|
|
.flex-container;
|
|
width: 100%;
|
|
|
|
.messenger-type, angucomplete-alt {
|
|
margin-right: 6.5rem;
|
|
min-width: 37%;
|
|
width: 37%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.safe-alias-modal {
|
|
align-self: flex-start;
|
|
margin-top: 5rem;
|
|
}
|
|
|
|
.add-contact-btn {
|
|
.flex-container-direction(row);
|
|
.flex-container-alignment(center, center);
|
|
background: transparent;
|
|
border: none;
|
|
color: @contacts-accounts-btn-text-color;
|
|
font-size: 3rem;
|
|
line-height: 7rem;
|
|
margin: 0 0 0.25rem;
|
|
padding: 0;
|
|
|
|
.base-icon {
|
|
.icon-sizing(6rem, 6rem, -3rem, -4rem);
|
|
margin-right: 1.5rem;
|
|
margin-left: -0.5rem;
|
|
}
|
|
|
|
&:hover {
|
|
color: @program-hover-color;
|
|
}
|
|
}
|
|
|
|
.contact-account-btn-wrapper {
|
|
.flex-container;
|
|
.flex-container-alignment(flex-start, flex-start);
|
|
margin-top: 6.5rem;
|
|
margin-bottom: 2rem;
|
|
width: 100%;
|
|
|
|
.contact-account-btn {
|
|
.flex-container-direction(row);
|
|
.flex-container-alignment(center, center);
|
|
background: transparent;
|
|
border: none;
|
|
color: @contacts-accounts-btn-text-color;
|
|
font-size: 3rem;
|
|
margin: 0 13rem 0 0;
|
|
padding: 0;
|
|
|
|
.base-icon {
|
|
.icon-sizing(6rem, 6rem, -3rem, -4rem);
|
|
margin-right: 1.5rem;
|
|
margin-left: -0.5rem;
|
|
min-width: 6rem;
|
|
}
|
|
|
|
&:hover {
|
|
color: @program-hover-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.edit-groups-field {
|
|
.flex-container;
|
|
.flex-container-alignment(center, flex-start);
|
|
|
|
.edit-groups-icon {
|
|
.icon-sizing(5rem, 5rem, -3.5rem, -4.55rem);
|
|
margin-right: 1.5rem;
|
|
flex-shrink: 0;
|
|
|
|
&:before {
|
|
content: '#';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-contacts-groups {
|
|
|
|
.modal-form-wrapper {
|
|
width: 106.5rem;
|
|
|
|
.modal-form-body {
|
|
padding: 4.5rem 6.5rem 9rem;
|
|
}
|
|
}
|
|
|
|
.general-form {
|
|
|
|
.empty-contacts-groups {
|
|
.flex-container-direction(column);
|
|
.flex-container-alignment(center, center);
|
|
color: @program-empty-color;
|
|
margin: 3.5rem 0 1rem;
|
|
|
|
.empty-contacts-groups-icon {
|
|
.icon-sizing(14rem, 14rem, 1rem, 0);
|
|
}
|
|
|
|
.empty-contacts-groups-text {
|
|
font-size: 3.75rem;
|
|
font-weight: 300;
|
|
margin-top: 2rem;
|
|
}
|
|
}
|
|
|
|
.contacts-groups-list {
|
|
color: @program-dark-color;
|
|
font-size: 3.75rem;
|
|
margin-top: 0.25rem;
|
|
width: 100%;
|
|
|
|
#groups-list-items {
|
|
max-height: 92rem;
|
|
overflow-x: auto;
|
|
padding-right: 3rem;
|
|
margin-right: -3rem;
|
|
}
|
|
|
|
.contacts-groups-list-item {
|
|
.flex-container-direction(row);
|
|
.flex-container-alignment(center, space-between);
|
|
border-bottom: 1px solid @program-modal-divider-color;
|
|
height: 11.5rem;
|
|
width: 100%;
|
|
|
|
.group-icons {
|
|
visibility: hidden;
|
|
|
|
.base-icon {
|
|
.icon-sizing(4rem, 4rem, -4rem, -5rem);
|
|
margin-left: 3rem;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
color: @program-hover-color;
|
|
cursor: pointer;
|
|
|
|
.group-icons {
|
|
visibility: visible;
|
|
}
|
|
}
|
|
}
|
|
|
|
.create-new-group-btn {
|
|
.flex-container-direction(row);
|
|
.flex-container-alignment(center, center);
|
|
background: transparent;
|
|
border: none;
|
|
color: @program-light-color;
|
|
font-size: 3.75rem;
|
|
font-weight: 300;
|
|
height: 11.5rem;
|
|
margin: 0 0 2.5rem;
|
|
padding: 0;
|
|
|
|
.base-icon {
|
|
.icon-sizing(4rem, 4rem, -2.25rem, -3rem);
|
|
font-size: 10rem;
|
|
margin-right: 2rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
&:hover {
|
|
color: @program-hover-color;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-add-group {
|
|
background-image: none;
|
|
|
|
.modal-form-wrapper {
|
|
background: white;
|
|
width: 101rem;
|
|
|
|
.modal-form-body {
|
|
padding: 7.5rem 9rem 3rem;
|
|
}
|
|
}
|
|
|
|
.general-form {
|
|
|
|
.general-form-field-group {
|
|
|
|
.add-group-wrapper {
|
|
.flex-container;
|
|
.flex-container-alignment(center, space-between);
|
|
width: 100%;
|
|
|
|
.general-input {
|
|
border: none;
|
|
font-size: 4rem;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.add-group-btn {
|
|
border-radius: 5rem;
|
|
color: @program-dark-color;
|
|
height: 5.5rem;
|
|
line-height: 5rem;
|
|
min-width: 21rem;
|
|
width: 21rem;
|
|
}
|
|
}
|
|
|
|
.field-group-error {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-delete-group {
|
|
background-image: none;
|
|
|
|
.modal-form-wrapper {
|
|
background: white;
|
|
min-width: 101rem;
|
|
|
|
.modal-form-body {
|
|
padding: 0 9rem 5rem;
|
|
}
|
|
}
|
|
|
|
.general-form {
|
|
|
|
.general-form-field-group {
|
|
|
|
.field-group-label {
|
|
font-size: 4.75rem;
|
|
font-weight: 300;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-edit-group {
|
|
|
|
.modal-form-wrapper {
|
|
width: 106.5rem;
|
|
|
|
.modal-form-body {
|
|
padding: 4.5rem 6.5rem 9rem;
|
|
}
|
|
|
|
.general-form {
|
|
|
|
.general-form-field-group {
|
|
margin: 2.5rem 0 4.5rem;
|
|
|
|
.field-group-label {
|
|
white-space: nowrap;
|
|
min-width: initial;
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
.editing-group-search {
|
|
.flex-container-direction(row);
|
|
.flex-container-alignment(center, center);
|
|
background: fade(white, 40%);
|
|
border: 1px solid @program-tab-border-color;
|
|
border-radius: 4rem;
|
|
color: @program-dark-color;
|
|
font-size: 3.5rem;
|
|
font-weight: 300;
|
|
height: 8.25rem;
|
|
margin-top: 2.5rem;
|
|
padding: 0 3rem;
|
|
width: 100%;
|
|
|
|
.base-icon {
|
|
.icon-sizing(6rem, 6rem, -3rem, -4rem);
|
|
}
|
|
|
|
.search-input {
|
|
display: block;
|
|
background: transparent;
|
|
border: none;
|
|
padding-left: 2rem;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.editing-group-empty-contacts {
|
|
.flex-container-direction(column);
|
|
.flex-container-alignment(center, center);
|
|
color: @program-empty-color;
|
|
height: 28rem;
|
|
padding: 5rem 0 1rem;
|
|
|
|
.editing-group-empty-contacts-icon {
|
|
.icon-sizing(14rem, 14rem, 1rem, 0);
|
|
}
|
|
|
|
.editing-group-empty-contacts-text {
|
|
font-size: 3.75rem;
|
|
font-weight: 300;
|
|
}
|
|
}
|
|
|
|
.editing-group-contacts-list {
|
|
color: @program-main-color;
|
|
font-size: 3.5rem;
|
|
margin: 2.5rem 0;
|
|
min-height: 23rem;
|
|
width: 100%;
|
|
max-height: 92rem;
|
|
overflow-x: auto;
|
|
|
|
.editing-group-contact-item {
|
|
.flex-container-direction(row);
|
|
.flex-container-alignment(center, space-between);
|
|
border-bottom: 1px solid @program-modal-divider-color;
|
|
height: 11.5rem;
|
|
width: 100%;
|
|
|
|
.editing-group-contact-name {
|
|
.flex-container-direction(row);
|
|
.flex-container-alignment(center, center);
|
|
|
|
.editing-group-contact-icon {
|
|
.icon-sizing(4rem, 4rem, -4rem, -5rem);
|
|
color: @program-table-icon-color;
|
|
margin-right: 2rem;
|
|
}
|
|
}
|
|
|
|
.delete-group-contact-icon {
|
|
.icon-sizing(4rem, 4rem, -4rem, -5rem);
|
|
margin-left: 3rem;
|
|
visibility: hidden;
|
|
}
|
|
|
|
&:last-child {
|
|
border: none;
|
|
}
|
|
|
|
&:hover {
|
|
color: @program-hover-color;
|
|
cursor: pointer;
|
|
|
|
.editing-group-contact-icon {
|
|
color: @program-hover-color;
|
|
}
|
|
|
|
.delete-group-contact-icon {
|
|
visibility: visible;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-update {
|
|
|
|
.modal-form-wrapper {
|
|
width: 106.5rem;
|
|
|
|
.modal-form-header {
|
|
|
|
.modal-form-header-title {
|
|
color: @modal-update-text-color;
|
|
}
|
|
|
|
.modal-form-header-icon {
|
|
|
|
.base-icon {
|
|
color: @modal-update-text-color;
|
|
}
|
|
}
|
|
|
|
.modal-form-header-close {
|
|
|
|
button {
|
|
color: @modal-update-text-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-form-body {
|
|
height: 45rem;
|
|
padding: 7rem 9.5rem 5rem;
|
|
}
|
|
|
|
&.update-green {
|
|
|
|
.modal-form-header {
|
|
background: @modal-update-green-color;
|
|
|
|
.modal-form-header-icon {
|
|
background: @modal-update-green-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.update-yellow {
|
|
|
|
.modal-form-header {
|
|
background: @modal-update-yellow-color;
|
|
|
|
.modal-form-header-icon {
|
|
background: @modal-update-yellow-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.update-red {
|
|
|
|
.modal-form-header {
|
|
background: @modal-update-red-color;
|
|
|
|
.modal-form-header-icon {
|
|
background: @modal-update-red-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.general-form {
|
|
|
|
.general-form-field-group {
|
|
|
|
.field-group-label {
|
|
font-size: 3.75rem;
|
|
}
|
|
|
|
&:first-child {
|
|
margin-top: 2.5rem;
|
|
line-height: 6rem;
|
|
}
|
|
}
|
|
|
|
.general-form-control-buttons {
|
|
margin-top: 7.75rem;
|
|
|
|
.control-button {
|
|
min-width: 40rem;
|
|
}
|
|
}
|
|
}
|
|
} |