gitea-admin/gh-christianlouis-pomjs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial release

Browse Source
This commit is contained in:
Joaquim Homrighausen
2022-10-21 11:01:16 +02:00
parent bf37802802
commit bf85b9f127
24 changed files with 1341 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/password-om.css
+248
View File
@@ -0,0 +1,248 @@
: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;
}
@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;
}
}
html {
background-color:var(--pom-bg-color-normal);
color:var(--pom-fg-color-normal);
}
body {
padding:0px;
margin:0px;
font-family: "Lucida Sans Typewriter", "Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace;
}
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);
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:100% !important;
height:48px;
margin-top:10px;
}
#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;
}
#mk-password-btn {
width:60px;
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: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;
}
.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" */