keeweb/app/styles/areas/_generator.scss

126 lines
2.8 KiB
SCSS

.gen {
position: absolute;
@include common-dropdown;
padding: $base-spacing;
width: 17em;
&__length-range {
}
&__top-btn {
float: right;
cursor: pointer;
position: relative;
& ~ .gen__top-btn {
margin-right: 0.5em;
}
color: var(--muted-color);
&:hover {
color: var(--text-color);
}
}
&__sel-tpl {
width: 100%;
height: 2em;
margin-top: $base-padding-v;
}
&__check {
width: 40%;
display: inline-block;
&:nth-child(even) {
margin-left: 15%;
}
}
&__result {
user-select: text;
font-family: $monospace-font-family;
margin-top: 6px;
margin-bottom: 3px;
min-height: 20px;
text-align: center;
white-space: pre-wrap;
word-break: break-all;
overflow-y: auto;
width: -webkit-calc(100% - 20px);
width: -moz-calc(100% - 20px);
width: calc(100% - 20px);
padding: 10px;
font-size: 1.1rem;
background-color: #131212;
border: 1px solid rgba(255, 255, 255, 0.4);
&::-webkit-scrollbar {
width: 9px;
height: 5px;
margin-right: 9px;
padding-block: 5px 5px;
padding-inline: 7px;
}
&::-webkit-scrollbar-button {
display: none;
}
&::-webkit-scrollbar-corner {
display: none;
}
&::-webkit-scrollbar-thumb {
background-color: #7166b7;
border-radius: 6px;
background-clip: content-box;
border: 3px solid transparent;
}
&::-webkit-scrollbar-track {
background: transparent;
}
}
&__check-hide {
&-label {
text-align: center;
position: relative;
top: -2px;
}
& + label.gen__check-hide-label:before {
@include fa-icon;
content: $fa-var-eye;
color: inherit;
}
&:checked + label.gen__check-hide-label:before {
content: $fa-var-eye-slash;
color: inherit;
}
&:not([disabled]) + label.gen__check-hide-label:hover:before {
color: var(--text-color);
}
}
&__btn-wrap {
text-align: center;
padding-top: 15px;
}
}
@-moz-document url-prefix() {
.gen__result_textbox {
padding-top: 10px;
padding-bottom: 10px;
}
}
.__wrap {
white-space: pre-wrap;
word-break: break-all;
}
.__nowrap {
white-space: wrap;
word-break: normal;
}
/*
Required if user hides / shows passphrases.
dots need to be wrapped in textarea
*/
.__pass-hidden {
word-break: break-word;
}