264 lines
6.1 KiB
CSS
264 lines
6.1 KiB
CSS
:root {
|
|
--pom-bg-color-normal:#ffffff;
|
|
--pom-fg-color-normal:#000000;
|
|
--pom-h-color:#404040;
|
|
--pom-a-color:#008000;
|
|
--pom-a-hover-color:#006000;
|
|
--pom-gen-bg:#cccccc;
|
|
--pom-gen-border:#bbbbbb;
|
|
--pom-gen-shadow:#aaaaaa;
|
|
--pom-gen-opacity:1;
|
|
--pom-mk-password-field-border:#bbbbbb;
|
|
--pom-mk-password-field-focus:green;
|
|
--pom-mk-password-field-focus-text:#ffffff;
|
|
--pom-mk-password-len-slider:#e3e3e3;
|
|
--pom-mk-password-len-slider-opacity:0.7;
|
|
--pom-mk-password-len-slider-thumb:#00008B;
|
|
--pom-mk-password-btn:#000000;
|
|
--pom-mk-password-btn-text:#ffffff;
|
|
--pom-mk-password-btn-ol:#00008B;
|
|
}
|
|
@media screen and (prefers-color-scheme: dark) {
|
|
:root {
|
|
--pom-bg-color-normal:#000000;
|
|
--pom-fg-color-normal:#ffffff;
|
|
--pom-h-color:#00e000;
|
|
--pom-a-color:#00dddd;
|
|
--pom-a-hover-color:#00ffff;
|
|
--pom-gen-bg:#383838;
|
|
--pom-gen-border:#686868;
|
|
--pom-gen-shadow:#cccccc;
|
|
--pom-gen-opacity:0.9;
|
|
--pom-mk-password-field-border:#eeeeee;
|
|
--pom-mk-password-field-focus:#00FF33;
|
|
--pom-mk-password-field-focus-text:#000000;
|
|
--pom-mk-password-len-slider:#0000ff;
|
|
--pom-mk-password-len-slider-opacity:0.9;
|
|
--pom-mk-password-len-slider-thumb:#f0f0f0;
|
|
--pom-mk-password-btn:#eeeeee;
|
|
--pom-mk-password-btn-text:#000000;
|
|
--pom-mk-password-btn-ol:orange;
|
|
}
|
|
}
|
|
|
|
html {
|
|
background-color:var(--pom-bg-color-normal);
|
|
color:var(--pom-fg-color-normal);
|
|
}
|
|
|
|
html * {
|
|
font-family: "SF Mono", SFMono-Regular, ui-monospace, "Lucida Sans Typewriter", "Lucida Console", "Bitstream Vera Sans Mono", monospace;
|
|
}
|
|
|
|
body {
|
|
padding:0px;
|
|
margin:0px;
|
|
}
|
|
|
|
h1, h2 {
|
|
color:var(--pom-h-color);
|
|
}
|
|
header {
|
|
margin-top:30px;
|
|
text-align:center;
|
|
}
|
|
footer {
|
|
margin-top:30px;
|
|
padding:5px;
|
|
text-align:center;
|
|
}
|
|
a, a:visited {
|
|
text-decoration:none;
|
|
color:var(--pom-a-color);
|
|
}
|
|
a:hover {
|
|
color:var(--pom-a-hover-color);
|
|
text-decoration:underline;
|
|
}
|
|
#cfg-page-title {
|
|
font-size:1.8rem;
|
|
}
|
|
#cfg-page-slogan {
|
|
font-size:1.6rem;
|
|
}
|
|
#cfg-page-lang {
|
|
font-size:0.8rem;
|
|
color:#aaaaaa;
|
|
}
|
|
#gen-hosted-by {
|
|
font-size:0.9rem !important;
|
|
}
|
|
#gen-timestamp {
|
|
font-size:0.8rem !important;
|
|
color:#eee;
|
|
display:none;
|
|
}
|
|
#generator {
|
|
padding:40px;
|
|
margin:0 auto !important;
|
|
width:50vw;
|
|
max-width:450px;
|
|
min-width:350px !important;
|
|
border-radius:20px;
|
|
background-color:var(--pom-gen-bg);
|
|
border:2px solid var(--pom-gen-border);
|
|
box-shadow:0 0 5px var(--pom-gen-shadow);
|
|
opacity:var(--pom-gen-opacity);
|
|
}
|
|
#mk-password-div {
|
|
margin:0 auto !important;
|
|
}
|
|
#mk-password-field {
|
|
width:98% !important;
|
|
border:2px solid var(--pom-mk-password-field-border) !important;
|
|
border-radius:5px !important;
|
|
}
|
|
.mk-password-field-focus {
|
|
outline:none !important;
|
|
border:2px solid var(--pom-mk-password-field-focus) !important;
|
|
background-color:var(--pom-mk-password-field-focus) !important;
|
|
color:var(--pom-mk-password-field-focus-text) !important;
|
|
transition:0.5s;
|
|
}
|
|
#mk-password-field:hover {
|
|
cursor:pointer !important;
|
|
}
|
|
#mk-password-good {
|
|
width:98% !important;
|
|
height:1.1rem !important;
|
|
margin-top:10px !important;
|
|
border:2px solid var(--pom-mk-password-field-border) !important;
|
|
}
|
|
#mk-password-len-slider {
|
|
-webkit-appearance:none;
|
|
outline: none;
|
|
width:85%;
|
|
max-width:410px !important;
|
|
height: 12px;
|
|
border-radius: 5px;
|
|
opacity:var(--pom-mk-password-len-slider-opacity);
|
|
-webkit-transition:.2s;
|
|
transition:opacity .2s;
|
|
background:var(--pom-mk-password-len-slider);
|
|
}
|
|
#mk-password-len-slider::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
cursor:pointer;
|
|
width:22px;
|
|
height:22px;
|
|
border-radius:50%;
|
|
background:var(--pom-mk-password-len-slider-thumb);
|
|
}
|
|
#mk-password-len-slider::-moz-range-thumb {
|
|
cursor:pointer;
|
|
width:22px;
|
|
height:22px;
|
|
border-radius:50%;
|
|
background:var(--pom-mk-password-len-slider-thumb);
|
|
}
|
|
#mk-length-field {
|
|
font-size:0.9rem !important;
|
|
width:32px !important;
|
|
border:1px solid #cccccc !important;
|
|
border-radius:5px !important;
|
|
}
|
|
#mk-length-field:hover {
|
|
cursor:pointer !important;
|
|
}
|
|
#mk-length-field:active {
|
|
cursor:text !important;
|
|
}
|
|
#mk-length-field:focus {
|
|
cursor:text !important;
|
|
}
|
|
|
|
#mk-password-btn-div {
|
|
text-align:right;
|
|
margin-bottom:10px;
|
|
line-height:1.4rem !important;
|
|
}
|
|
#mk-password-btn {
|
|
padding-top:3px !important;
|
|
width:70px !important;
|
|
font-size:1.4rem !important;
|
|
line-height:1.4rem !important;
|
|
font-weight:bold;
|
|
max-height:32px !important;
|
|
border:1px solid #cccccc !important;
|
|
border-radius:5px !important;
|
|
color:var(--pom-mk-password-btn-text);
|
|
background-color:var(--pom-mk-password-btn);
|
|
}
|
|
#mk-password-btn:focus {
|
|
outline:2px dotted var(--pom-mk-password-btn-ol) !important;
|
|
outline-offset:2px;
|
|
}
|
|
#mk-password-btn:hover {
|
|
cursor:pointer !important;
|
|
}
|
|
#mk-password-btn:before {
|
|
content: "";
|
|
display:inline-block;
|
|
height:1.6rem;
|
|
vertical-align:middle;
|
|
}
|
|
.selection-row {
|
|
font-size:1.1rem !important;
|
|
width:100%;
|
|
margin-bottom:10px;
|
|
display:grid;
|
|
grid-template-columns: 310px 40px;
|
|
justify-content:space-between;
|
|
}
|
|
.selection-col {
|
|
text-align:right;
|
|
justify-self:end;
|
|
width:70px !important;
|
|
}
|
|
.check-option {
|
|
width:28px;
|
|
height:20px;
|
|
position:relative;
|
|
display:inline-block;
|
|
margin-left:auto;
|
|
padding:0 !important;
|
|
}
|
|
.check-option input {
|
|
width:0;
|
|
height:0;
|
|
opacity:0;
|
|
}
|
|
/* Let's be nice to smaller screens */
|
|
@media only screen and (max-width: 450px) {
|
|
footer {
|
|
margin-top:20px;
|
|
font-size:0.8rem !important;
|
|
}
|
|
#gen-hosted-by {
|
|
font-size:0.8rem !important;
|
|
}
|
|
#generator {
|
|
padding:20px !important;
|
|
margin:0 auto !important;
|
|
width:100% !important;
|
|
border-radius:0px !important;
|
|
box-shadow:none !important;
|
|
max-width:320px !important;
|
|
min-width:300px !important;
|
|
}
|
|
.static-col {
|
|
font-size:0.9rem !important;
|
|
}
|
|
#cfg-page-title {
|
|
font-size:1.4rem !important;
|
|
}
|
|
#cfg-page-slogan {
|
|
font-size:1.2rem !important;
|
|
}
|
|
.selection-row {
|
|
grid-template-columns: 280px 40px !important;
|
|
}
|
|
}
|
|
/* end of file "password-om.css" */
|