v/Cat-Printer
1
0
Fork 0
mirror of https://github.com/NaitLee/Cat-Printer.git synced 2025-05-29 13:40:10 -07:00
Code Issues Packages Projects Releases Wiki Activity

Better anim in CSS; remove © clause in CC0 code

Browse Source
This commit is contained in:
NaitLee 2022-07-19 18:33:28 +08:00
parent 500971ae95
commit 4e3a5f540d
12 changed files with 55 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
printer_lib/commander.py
View File

@ -1,7 +1,7 @@
''' '''
Cat-Printer Commander, way to communicate with cat printers via bluetooth Cat-Printer Commander, way to communicate with cat printers via bluetooth
Copyright © 2021-2022 NaitLee Soft. No rights reserved. No rights reserved.
License CC0-1.0-only: https://directory.fsf.org/wiki/License:CC0 License CC0-1.0-only: https://directory.fsf.org/wiki/License:CC0
''' '''

2
printer_lib/i18n.py
View File

@ -1,7 +1,7 @@
''' '''
Minimal internationalization Minimal internationalization
Copyright © 2021-2022 NaitLee Soft. No rights reserved. No rights reserved.
License CC0-1.0-only: https://directory.fsf.org/wiki/License:CC0 License CC0-1.0-only: https://directory.fsf.org/wiki/License:CC0
''' '''

2
printer_lib/ipp.py
View File

@ -1,7 +1,7 @@
''' '''
Provide *very* basic CUPS/IPP support Provide *very* basic CUPS/IPP support
Copyright © 2021-2022 NaitLee Soft. No rights reserved. No rights reserved.
License CC0-1.0-only: https://directory.fsf.org/wiki/License:CC0 License CC0-1.0-only: https://directory.fsf.org/wiki/License:CC0
''' '''

2
printer_lib/pf2.py
View File

@ -1,7 +1,7 @@
''' '''
Python lib for reading PF2 font files: http://grub.gibibit.com/New_font_format Python lib for reading PF2 font files: http://grub.gibibit.com/New_font_format
Copyright © 2021-2022 NaitLee Soft. No rights reserved. No rights reserved.
License CC0-1.0-only: https://directory.fsf.org/wiki/License:CC0 License CC0-1.0-only: https://directory.fsf.org/wiki/License:CC0
Don't forget to see how it's used in `text_print.py` Don't forget to see how it's used in `text_print.py`

2
www/accessibility.js
View File

@ -1,5 +1,5 @@
` `
Copyright © 2021-2022 NaitLee Soft. No rights reserved. No rights reserved.
License CC0-1.0-only: https://directory.fsf.org/wiki/License:CC0 License CC0-1.0-only: https://directory.fsf.org/wiki/License:CC0
`; `;

2
www/i18n-ext.js
View File

@ -1,5 +1,5 @@
` `
Copyright © 2021-2022 NaitLee Soft. No rights reserved. No rights reserved.
License CC0-1.0-only: https://directory.fsf.org/wiki/License:CC0 License CC0-1.0-only: https://directory.fsf.org/wiki/License:CC0
`; `;

2
www/i18n.js
View File

@ -1,5 +1,5 @@
` `
Copyright © 2021-2022 NaitLee Soft. No rights reserved. No rights reserved.
License CC0-1.0-only: https://directory.fsf.org/wiki/License:CC0 License CC0-1.0-only: https://directory.fsf.org/wiki/License:CC0
`; `;

2
www/index.html
View File

@ -7,7 +7,7 @@
<link rel="stylesheet" href="main.css" /> <link rel="stylesheet" href="main.css" />
<link rel="icon" href="icon.svg" /> <link rel="icon" href="icon.svg" />
</head> </head>
<body> <body class="hard-animation">
<main class="hard-hidden"> <main class="hard-hidden">
<div class="menu-side"> <div class="menu-side">
<h1 id="title" data-i18n="cat-printer">Cat Printer</h1> <h1 id="title" data-i18n="cat-printer">Cat Printer</h1>

2
www/loader.js
View File

@ -1,5 +1,5 @@
` `
Copyright © 2021-2022 NaitLee Soft. No rights reserved. No rights reserved.
License CC0-1.0-only: https://directory.fsf.org/wiki/License:CC0 License CC0-1.0-only: https://directory.fsf.org/wiki/License:CC0
`; `;

91
www/main.css
View File

@ -15,7 +15,6 @@
--fore-color: #111; --fore-color: #111;
--back-color: #eee; --back-color: #eee;
--canvas-back: #fff; --canvas-back: #fff;
--curve: cubic-bezier(.08,.82,.17,1);
--panel-height: 20em; --panel-height: 20em;
--target-color: rgba(0, 255, 255, 0.2); --target-color: rgba(0, 255, 255, 0.2);
--notice-wait: rgba(0, 128, 255, 0.2); --notice-wait: rgba(0, 128, 255, 0.2);
@ -24,6 +23,19 @@
--notice-error: rgba(255, 0, 0, 0.2); --notice-error: rgba(255, 0, 0, 0.2);
--shade: rgba(238, 238, 238, 0.5); --shade: rgba(238, 238, 238, 0.5);
} }
@media (prefers-color-scheme: dark) {
:root { --fore-color: #eee; --back-color: #333; --shade: rgba(51, 51, 51, 0.5); }
a:link, a:visited { color: #66f; }
a:hover, a:active { color: #77f; }
.canvas-group, .logo { opacity: 0.6; }
#control-overlay { background-color: var(--shade); }
}
/* so silly... */
body.dark-theme { --fore-color: #eee; --back-color: #333; --shade: rgba(51, 51, 51, 0.5); }
body.dark-theme a:link, body.dark-theme a:visited { color: #66f; }
body.dark-theme a:hover, body.dark-theme a:active { color: #77f; }
body.dark-theme .canvas-group, body.dark-theme .logo { opacity: 0.6; }
body.dark-theme #control-overlay { background-color: var(--shade); }
body { body {
border: none; border: none;
@ -36,13 +48,24 @@ body {
margin: 1em 0; margin: 1em 0;
user-select: none; user-select: none;
} }
body, .shade { transition: background-color calc(var(--anim-time) * 2) ease-in; }
* {
box-sizing: border-box;
}
body.android .hide-on-android { body.android .hide-on-android {
display: none; display: none;
} }
* {
box-sizing: border-box;
transition-property: background-color, transform,/* box-shadow,*/ flex-grow, opacity;
transition-delay: 0s;
transition-duration: var(--anim-time);
transition-timing-function: ease-out;
}
button, input[type="number"], input[type="text"], select,
#dialog>.shade, #dialog>.content,
#canvas {
transition-timing-function: cubic-bezier(.08,.82,.17,1);
}
a {
transition: color var(--anim-time) ease-out;
}
.selectable { .selectable {
user-select: all; user-select: all;
} }
@ -84,7 +107,6 @@ button, input[type="number"], input[type="text"], select {
margin: var(--span-half) var(--span); margin: var(--span-half) var(--span);
border: var(--border) solid var(--fore-color); border: var(--border) solid var(--fore-color);
padding: var(--span-half) var(--span); padding: var(--span-half) var(--span);
transition: all var(--anim-time) var(--curve);
cursor: pointer; cursor: pointer;
min-width: 6em; min-width: 6em;
line-height: calc(var(--font-size) + var(--span)); line-height: calc(var(--font-size) + var(--span));
@ -219,9 +241,7 @@ main, header, footer {
background-color: var(--back-color); background-color: var(--back-color);
} }
.compact-button { .compact-button {
width: max-content;
height: var(--compact-menu-height); height: var(--compact-menu-height);
flex-grow: 1;
line-height: var(--compact-menu-height); line-height: var(--compact-menu-height);
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
@ -230,12 +250,11 @@ main, header, footer {
border-bottom: var(--border) solid transparent; border-bottom: var(--border) solid transparent;
padding: 0; padding: 0;
margin: 0; margin: 0;
flex-grow: 1;
} }
.compact-button:hover { .compact-button:hover {
transform: unset; transform: unset;
margin: 0; flex-grow: 1.2;
padding: 0 var(--span) calc(var(--span-double));
min-width: 6em;
} }
.compact-button.active { .compact-button.active {
border: var(--border) solid var(--fore-color); border: var(--border) solid var(--fore-color);
@ -253,7 +272,6 @@ main, header, footer {
#canvas { #canvas {
position: absolute; position: absolute;
opacity: 0; opacity: 0;
transition: opacity var(--anim-time) var(--curve);
z-index: 1; z-index: 1;
} }
#canvas:hover { #canvas:hover {
@ -384,7 +402,6 @@ iframe#frame {
text-align: center; text-align: center;
z-index: 2; z-index: 2;
opacity: 1; opacity: 1;
transition: opacity var(--anim-time) var(--curve);
} }
#dialog>.content { #dialog>.content {
max-width: 100%; max-width: 100%;
@ -392,7 +409,6 @@ iframe#frame {
max-height: 100vh; max-height: 100vh;
margin: 12vh auto; margin: 12vh auto;
border: var(--border) solid var(--fore-color); border: var(--border) solid var(--fore-color);
transition: transform var(--anim-time) var(--curve);
transform-origin: center 33%; transform-origin: center 33%;
} }
#dialog.hidden { #dialog.hidden {
@ -464,7 +480,7 @@ iframe#frame {
text-align: center; text-align: center;
z-index: 3; z-index: 3;
opacity: 1; opacity: 1;
transition: opacity var(--anim-time) var(--curve); transition-duration: 0.2s;
} }
.logo { .logo {
background-image: url('icon.svg'); background-image: url('icon.svg');
@ -519,9 +535,6 @@ iframe#frame {
transform: translate(-1em, calc(var(--font-size) * -1)); transform: translate(-1em, calc(var(--font-size) * -1));
} }
a {
transition: all var(--anim-time) ease-out;
}
@keyframes delay-scrollable { @keyframes delay-scrollable {
from { overflow: hidden; } from { overflow: hidden; }
to { overflow: auto; } to { overflow: auto; }
@ -603,44 +616,26 @@ a {
} }
} }
/* @media (min-resolution: 120dpi) {
:root { --font-size: calc(1.2rem * var(--dpi-zoom)); }
}
@media (min-resolution: 144dpi) {
:root { --font-size: calc(1.2rem * var(--dpi-zoom) * var(--dpi-zoom)); }
} */
@media (prefers-color-scheme: dark) {
:root { --fore-color: #eee; --back-color: #333; --shade: rgba(51, 51, 51, 0.5); }
a:link, a:visited { color: #66f; }
a:hover, a:active { color: #77f; }
.canvas-group, .logo { filter: brightness(0.6); }
#control-overlay { background-color: var(--shade); }
}
/* so silly... */
body.dark-theme { --fore-color: #eee; --back-color: #333; --shade: rgba(51, 51, 51, 0.5); }
body.dark-theme a:link, body.dark-theme a:visited { color: #66f; }
body.dark-theme a:hover, body.dark-theme a:active { color: #77f; }
body.dark-theme .canvas-group, body.dark-theme .logo { filter: brightness(0.6); }
body.dark-theme #control-overlay { background-color: var(--shade); }
@media (prefers-reduced-motion) { @media (prefers-reduced-motion) {
body *, body *,
body *::before, body *::before,
body *::after { body *::after {
transition-duration: 0ms !important; transition-duration: 0s !important;
transition: none; animation-duration: 0s !important;
animation-timing-function: steps(1); transition-timing-function: steps(1) !important;
animation-duration: 0ms !important; animation-timing-function: steps(1) !important;
} }
} }
/* but i have no way... */ body.no-animation,
body.hard-animation,
body.no-animation *, body.no-animation *,
body.hard-animation *:not(#loading-screen, #loading-screen *),
body.no-animation *::before, body.no-animation *::before,
body.no-animation *::after { body.no-animation *::after {
transition-duration: 0ms !important; transition-duration: 0s !important;
transition: none; animation-duration: 0s !important;
animation-timing-function: steps(1); transition-timing-function: steps(1) !important;
animation-duration: 0ms !important; animation-timing-function: steps(1) !important;
} }
body.large-font, body.large-font,
@ -670,7 +665,7 @@ body.high-contrast {
} }
body.high-contrast .shade { transition-duration: 0s; opacity: 1; } body.high-contrast .shade { transition-duration: 0s; opacity: 1; }
/* body.high-contrast * { background-color: var(--back-color); } */ /* body.high-contrast * { background-color: var(--back-color); } */
body.high-contrast .logo, body.high-contrast .canvas-group { filter: unset !important; } body.high-contrast .logo, body.high-contrast .canvas-group { opacity: 1 !important; }
body.high-contrast #notice * { border: var(--border) dashed var(--fore-color); } body.high-contrast #notice * { border: var(--border) dashed var(--fore-color); }
body.high-contrast a:any-link { color: #00f; } body.high-contrast a:any-link { color: #00f; }
body.high-contrast #control-overlay { background-color: var(--shade); } body.high-contrast #control-overlay { background-color: var(--shade); }

2
www/main.js
View File

@ -655,6 +655,7 @@ async function initI18n(current_language) {
i18n.useLanguage(value); i18n.useLanguage(value);
i18n.add(value, await fetch(`/lang/${value}.json`).then(r => r.json()), true); i18n.add(value, await fetch(`/lang/${value}.json`).then(r => r.json()), true);
applyI18nToDom(); applyI18nToDom();
document.querySelector('html').lang = value;
} }
language_select.addEventListener('change', () => use_language(language_select.value)); language_select.addEventListener('change', () => use_language(language_select.value));
for (let code in list) { for (let code in list) {
@ -828,6 +829,7 @@ class Main {
} }
if (typeof initKeyboardShortcuts === 'function') initKeyboardShortcuts(); if (typeof initKeyboardShortcuts === 'function') initKeyboardShortcuts();
// this.searchDevices(); // this.searchDevices();
document.body.classList.remove('hard-animation');
document.querySelector('main').classList.remove('hard-hidden'); document.querySelector('main').classList.remove('hard-hidden');
document.getElementById('loading-screen').classList.add('hidden'); document.getElementById('loading-screen').classList.add('hidden');
resolve(); resolve();

2
www/polyfill.js
View File

@ -1,5 +1,5 @@
` `
Copyright © 2021-2022 NaitLee Soft. No rights reserved. No rights reserved.
License CC0-1.0-only: https://directory.fsf.org/wiki/License:CC0 License CC0-1.0-only: https://directory.fsf.org/wiki/License:CC0
`; `;