mirror of https://codeberg.org/Sonoj/osamc.de
Add 2023-01 talk about audiowmark
This commit is contained in:
Nils
parent
f0a0422b92
commit
2c4429b726
Binary file not shown.
|
|
@ -0,0 +1,172 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
Wurzelverzeichnis für alle links ist www.osamc.de/
|
||||||
|
Links auf das eigene Verzeichnis, etwa Bilder oder Audio, brauchen keinen Slashes / oder ../
|
||||||
|
-->
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<title>Audiowasserzeichen mit Audiowmark</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="normalize.css" type="text/css">
|
||||||
|
<link rel="stylesheet" href="sakura.css" type="text/css">
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||||
|
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<h1>Audiowmark</h1>
|
||||||
|
|
||||||
|
<p>Falls du über eine Suchmachine hergekommen bist: Dies ist nur das Begleitmaterial und die
|
||||||
|
Zusammenfassung zu einem mündlichen Vortrag.</p>
|
||||||
|
|
||||||
|
<h2>Informationen und Links</h2>
|
||||||
|
|
||||||
|
<p>Kommandozeilen-Software von Stefan Westerfeld um Audio-Wasserzeichen in den Audiodaten einer Musikdatei unterzubringen. Eine 128bit Nachricht wird fast unhörbar, direkt in der Wellenform gespeichert und kann wieder ausgelesen werden. Sie kann auch geheim verschlüsselt werden. Der Prozess ist unabhängig vom Dateiformat, Kompression und Wiedergabeart, also Datei, Streaming etc. Man braucht die originale Datei nicht um die Nachricht auszulesen.
|
||||||
|
<p>"Ticking all the boxes" für Open Source Software: GPL, Verschlüsselungsmethode bekannt und einsehbar, basiert nur auf einem private key (oder unverschlüsselt).
|
||||||
|
<p>Hier geht es nur um die reine Anwendung, nicht um die technischen Hintergründe.
|
||||||
|
<p>Die Einsatzmöglichkeitne stehen noch weiter unten, aber hier schonmal der Zweck vorweg: Hauptsächlich DRM und Authentifizierung. Man kann individuelle Informationen (etwa Kundennummern) in der Audiodaten selbst speichern, ohne dass diese erkennbar und entfernbar sind, so zumindest das implizite Versprechen des Autors.
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://uplex.de/audiowmark/">Webseite</a>
|
||||||
|
<li><a href="https://uplex.de/audiowmark/README.html">Anleitung</a>
|
||||||
|
<li><a href="https://code.uplex.de/stefan/audiowmark">Sourcode</a>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
|
<h2>Nicht in diesem Vortrag</h2>
|
||||||
|
Es gibt auch "videowmark", das gleiche Tool für Videos, was hier nicht behandelt wird.
|
||||||
|
|
||||||
|
<h2>128bit String - 32 Zeichen in Hexadezimaler Form</h2>
|
||||||
|
<p>Wo bekommt man den her?
|
||||||
|
|
||||||
|
<p>Als Hash. Die ersten 128bits eines SHA-256 Hash (Kurze Nachfrage: Wissen alle, was ein Hash ist? Wissen alle was Hex 0-9A-F ist?)
|
||||||
|
<p><pre>
|
||||||
|
echo -n "OSAMC:BlackStorm:Download312" | sha256sum | head -c 32
|
||||||
|
b751e47bb131d84e6b67a3348c781d43
|
||||||
|
#head -c 32 weil es hex ist: ein Hexwert ist 4bit. Also 128bit / 4bit = 32 chars
|
||||||
|
#audiowmark empfiehlt eine Datenbank anzulegen, da man hash werte nicht zurückentwickeln kann
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<p>Oder 16 ASCII-Zeichen in Hexadezimaler Schreibweise:
|
||||||
|
<p><pre>
|
||||||
|
echo -n "osamc:blkstm:312" | xxd -p -u
|
||||||
|
6F73616D633A626C6B73746D3A333132
|
||||||
|
#Rückgängig: echo -n "6F73616D633A626C6B73746D3A333132" | xxd -p -r
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<p>Eine UUID, die sind zufällig auch 128bit lang.
|
||||||
|
<p><pre>
|
||||||
|
uuidgen | tr -d -
|
||||||
|
#76fc5abe80f840729375fc4dc15e604d
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<p>Oder 32 Zeichen, die "zufällig" alles Hexwert 0-9A-F sind, aber bereits semantisch lesbar sind.
|
||||||
|
<p><pre>
|
||||||
|
affe2222fefe1111affe2222fefe1111
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<p>Wenn man am Ende schnell einen ausgelesenen String mit seinem eigenen vergleichen möchte:
|
||||||
|
<p><pre>
|
||||||
|
[ "affe2222fefe1111affe2222fefe1111" = "affe2222fefe1111affe2222fefe1111" ]; echo $? #Ergebnis 0 heisst gleicher String.
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
|
||||||
|
<h2>Beispiel 1: Unverschlüsselt in einer wav Datei</h2>
|
||||||
|
|
||||||
|
<p><pre>
|
||||||
|
audiowmark add blackstorm.wav wm-blackstorm.wav b751e47bb131d84e6b67a3348c781d43
|
||||||
|
|
||||||
|
audiowmark get blackstorm.wav
|
||||||
|
#leer
|
||||||
|
|
||||||
|
audiowmark get wm-blackstorm.wav
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<p>"get" entnimmt die Nachricht wieder aus der Audiodatei.
|
||||||
|
Das finden einer Nachricht, obwohl keine vorhanden ist (oder eine falsche Nachricht) kann zwar passieren, muss aber auch schließlich zu deiner privaten, geheimen Datenbank passen. Das, so die Entwickler, ist selten genug um es statistisch auszuschließen.
|
||||||
|
<ul>
|
||||||
|
<li>--detect-speed hilft gegen konvertierungsfehler (z.B. digital -> analog -> digital kette und dabei wird speed anders. Handbuch sagt das kann auch Absicht sein um das Wasserzeichen zu verschleiern, dass jemand in deiner Musik vermutet.
|
||||||
|
<li>--detect-speed ist langsam und braucht mehr RAM, deswegen ist das nicht die Standardeinstelung. Ist aber Multithreading.
|
||||||
|
<li>--detect-speed-patient ist sogar noch besser, im Tausch gegen höheren Resourcenverbrauch. Wenn letzterer keine Rolle spielt ist das die bevorzugte Form.
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<p><pre>
|
||||||
|
audiowmark get --detect-speed-patient wm-blackstorm.wav
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<p>Man bekommt mehrere Nachrichten zurück. Das ist Redundanz gegen Korruption und Kompression.
|
||||||
|
<p>Das 3. Feld ist der "Sync Score", je höher desto besser. Das 4. Feld ist "Decoding Error", niedriger ist besser.
|
||||||
|
Danach Block-Type. A allein ist ok, AB ist besser.
|
||||||
|
<p>Am Ende kommt ein "All" als Zusammenfassung. Das kann man dann mit einem anderen Programm parsen. z.B. das in eine Datenbank reinpipen.
|
||||||
|
|
||||||
|
|
||||||
|
<h2>Beispiel 2: Verschlüsselung</h2>
|
||||||
|
<p>Um zu verhindern, dass jeder mit audiowmark die Nachricht auslesen kann, bzw. verhindern kann, dass
|
||||||
|
überhaupt festgestellt werden kann, dass ein Wasserzeichen vorhanden ist, wird eine interne Verschlüsselungsmethode bereitgestellt.
|
||||||
|
Wie sicher das ist, wurde nicht überprüft.
|
||||||
|
|
||||||
|
<p><pre>
|
||||||
|
audiowmark gen-key osamc-music-distributor.key #speichert in einer Datei
|
||||||
|
#key 88913063e57c946b37bf6ea8ce842d32
|
||||||
|
|
||||||
|
audiowmark add --key osamc-music-distributor.key blackstorm.wav wmk-blackstorm.wav b751e47bb131d84e6b67a3348c781d43
|
||||||
|
audiowmark get --detect-speed-patient wmk-blackstorm.wav
|
||||||
|
#leer
|
||||||
|
audiowmark get --detect-speed-patient --key osamc-music-distributor.key wmk-blackstorm.wav
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<h2>Beispiel 3: Kompression</h2>
|
||||||
|
<p><pre>
|
||||||
|
opusenc wmk-blackstorm.wav wmk-blackstorm.opus
|
||||||
|
sox wmk-blackstorm.wav wmk-blackstorm.mp3
|
||||||
|
|
||||||
|
audiowmark get --detect-speed-patient --key osamc-music-distributor.key wmk-blackstorm.mp3
|
||||||
|
audiowmark get --detect-speed-patient --key osamc-music-distributor.key wmk-blackstorm.opus
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<h2>Beispiel 4: Analog als Stream mit Pipes</h2>
|
||||||
|
<p>"Worst case": Verschlüsselte mp3 version über die Handy-Lautsprecher abspielen und mit internen Laptopmikrofon aufnehmen.
|
||||||
|
|
||||||
|
Eigentlich wollte ich das mit dem eigenbaute Stream machen, aber das habe ich nicht hinbekommen, mit den input optionen. (--input-format raw).
|
||||||
|
jack_capture sollte gehen, aber das ging mit meinem Pipewire nicht. Also Audacity…
|
||||||
|
Weil es analog war benutzen wir --detect-speed.
|
||||||
|
|
||||||
|
<h2>Weitere Experiment-Ideen</h2>
|
||||||
|
<ul>
|
||||||
|
<li>Sehr kurze Lieder, weniger als 10 Sekunden. Evtl den --short Modus benutzen, s. README.
|
||||||
|
<li>Die Musik in einem Youtube-Video einbetten und daraus wieder versuchen herauszuhören. Evtl. den Stream mit einem virtuellem Systemmikrofon (JACK/Pipewire) abhören, damit man das Audio nicht herunterladen und extrahieren muss.
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
|
<h2>Die wichtigste Frage</h2>
|
||||||
|
<p>Ist das Wasserzeichen hörbar, bzw. wird dadurch die Audioqualität schlechter?
|
||||||
|
|
||||||
|
<p>Hier können nur subjektive Eindrücke antworten geben. Die README sagt, das wäre schon alles gut so,
|
||||||
|
aber wer weiß...
|
||||||
|
Ich hab zumindest in diesem Beispiellied nichts direkt gehört. Aber das ist auch nur ein Stück. Vielleicht müsste man mal eine reine Sinuswelle testen.
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Es ist auf jeden Fall möglich, seine Musikqualität zu verschlechern. So gibt es z.B.
|
||||||
|
einen --strength flag der mit Werten über 10 (standard) schlechter wird.
|
||||||
|
Je höher die "strength" desto robuster gegen Audio-Kompression. 10 reiche für 128kbit mp3.
|
||||||
|
Man muss für das setzen und auslesen der Nachricht den gleichen strength-Wert benutzen,
|
||||||
|
muss sich diesen also merken.
|
||||||
|
|
||||||
|
<h2>Einsatzmöglichkeiten</h2>
|
||||||
|
<p>Frage ans Plenum: Wofür ist das nützlich, außer als technisches Kuriosum? Gibt es Anforderungen,
|
||||||
|
die nicht besser durch ein explizites paralleles Signal abgedeckt werden können (siehe Metadaten und Verkehrsinfo fürs Autoradio)
|
||||||
|
<ul>
|
||||||
|
<li>Gutartiger DRM: Copyright-Nachweis um sein Copyleft durchzusetzen
|
||||||
|
<li>Bösartiger DRM: Musikplayer verweigert das Abspielen, falls nicht korrekt signiert. Anwalt wird automatisch informiert :/
|
||||||
|
<li>Kann automatisiert werden: "Dein Download wird vorbereitet" und dann wird deine Kundennummer in die Audiodatei gebacken.
|
||||||
|
<li>Novelty: "Limitierte, signierte digitale Auflag, mit Seriennummer."
|
||||||
|
<li>Patreon-Reward: Dein Name in der Musik als audiowmark!
|
||||||
|
</ul>
|
||||||
|
<p>Sollte man es also benutzen oder nicht? Pro/Contra…
|
||||||
|
|
||||||
|
Experimente:
|
||||||
|
* In ein Video einbetten und auf youtube hochladen. Dann das ganze mit youtube-dl runterladen und schauen.
|
||||||
|
* Über Lautsprecher abspielen und sich das anhören: Raum und/oder Handy-Lautsprecher und Laptop-Mikrofon
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
[Meta]
|
||||||
|
#YYYY-MM
|
||||||
|
Date = 2023-01
|
||||||
|
|
||||||
|
#e.g. CC-by-sa, CC-by, All Rights Reserved
|
||||||
|
License = CC-by-sa
|
||||||
|
PrettyName = Audio-Wasserzeichen mit "audiowmark"
|
||||||
|
Author = nils
|
||||||
|
|
@ -0,0 +1,427 @@
|
||||||
|
/*! normalize.css v6.0.0 | MIT License | github.com/necolas/normalize.css */
|
||||||
|
|
||||||
|
/* Document
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the line height in all browsers.
|
||||||
|
* 2. Prevent adjustments of font size after orientation changes in
|
||||||
|
* IE on Windows Phone and in iOS.
|
||||||
|
*/
|
||||||
|
|
||||||
|
html {
|
||||||
|
line-height: 1.15; /* 1 */
|
||||||
|
-ms-text-size-adjust: 100%; /* 2 */
|
||||||
|
-webkit-text-size-adjust: 100%; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sections
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct display in IE 9-.
|
||||||
|
*/
|
||||||
|
|
||||||
|
article,
|
||||||
|
aside,
|
||||||
|
footer,
|
||||||
|
header,
|
||||||
|
nav,
|
||||||
|
section {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct the font size and margin on `h1` elements within `section` and
|
||||||
|
* `article` contexts in Chrome, Firefox, and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2em;
|
||||||
|
margin: 0.67em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Grouping content
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct display in IE 9-.
|
||||||
|
* 1. Add the correct display in IE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
figcaption,
|
||||||
|
figure,
|
||||||
|
main { /* 1 */
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct margin in IE 8.
|
||||||
|
*/
|
||||||
|
|
||||||
|
figure {
|
||||||
|
margin: 1em 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Add the correct box sizing in Firefox.
|
||||||
|
* 2. Show the overflow in Edge and IE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
hr {
|
||||||
|
box-sizing: content-box; /* 1 */
|
||||||
|
height: 0; /* 1 */
|
||||||
|
overflow: visible; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||||
|
* 2. Correct the odd `em` font sizing in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
pre {
|
||||||
|
font-family: monospace, monospace; /* 1 */
|
||||||
|
font-size: 1em; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Text-level semantics
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Remove the gray background on active links in IE 10.
|
||||||
|
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
|
||||||
|
*/
|
||||||
|
|
||||||
|
a {
|
||||||
|
background-color: transparent; /* 1 */
|
||||||
|
-webkit-text-decoration-skip: objects; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Remove the bottom border in Chrome 57- and Firefox 39-.
|
||||||
|
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
abbr[title] {
|
||||||
|
border-bottom: none; /* 1 */
|
||||||
|
text-decoration: underline; /* 2 */
|
||||||
|
text-decoration: underline dotted; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
|
||||||
|
*/
|
||||||
|
|
||||||
|
b,
|
||||||
|
strong {
|
||||||
|
font-weight: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
b,
|
||||||
|
strong {
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||||
|
* 2. Correct the odd `em` font sizing in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
code,
|
||||||
|
kbd,
|
||||||
|
samp {
|
||||||
|
font-family: monospace, monospace; /* 1 */
|
||||||
|
font-size: 1em; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct font style in Android 4.3-.
|
||||||
|
*/
|
||||||
|
|
||||||
|
dfn {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct background and color in IE 9-.
|
||||||
|
*/
|
||||||
|
|
||||||
|
mark {
|
||||||
|
background-color: #ff0;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct font size in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
small {
|
||||||
|
font-size: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||||
|
* all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
sub,
|
||||||
|
sup {
|
||||||
|
font-size: 75%;
|
||||||
|
line-height: 0;
|
||||||
|
position: relative;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
sub {
|
||||||
|
bottom: -0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
sup {
|
||||||
|
top: -0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Embedded content
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct display in IE 9-.
|
||||||
|
*/
|
||||||
|
|
||||||
|
audio,
|
||||||
|
video {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct display in iOS 4-7.
|
||||||
|
*/
|
||||||
|
|
||||||
|
audio:not([controls]) {
|
||||||
|
display: none;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the border on images inside links in IE 10-.
|
||||||
|
*/
|
||||||
|
|
||||||
|
img {
|
||||||
|
border-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Hide the overflow in IE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
svg:not(:root) {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Forms
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the margin in Firefox and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
input,
|
||||||
|
optgroup,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Show the overflow in IE.
|
||||||
|
* 1. Show the overflow in Edge.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
input { /* 1 */
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||||
|
* 1. Remove the inheritance of text transform in Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
select { /* 1 */
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
|
||||||
|
* controls in Android 4.
|
||||||
|
* 2. Correct the inability to style clickable types in iOS and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
html [type="button"], /* 1 */
|
||||||
|
[type="reset"],
|
||||||
|
[type="submit"] {
|
||||||
|
-webkit-appearance: button; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the inner border and padding in Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button::-moz-focus-inner,
|
||||||
|
[type="button"]::-moz-focus-inner,
|
||||||
|
[type="reset"]::-moz-focus-inner,
|
||||||
|
[type="submit"]::-moz-focus-inner {
|
||||||
|
border-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Restore the focus styles unset by the previous rule.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button:-moz-focusring,
|
||||||
|
[type="button"]:-moz-focusring,
|
||||||
|
[type="reset"]:-moz-focusring,
|
||||||
|
[type="submit"]:-moz-focusring {
|
||||||
|
outline: 1px dotted ButtonText;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the text wrapping in Edge and IE.
|
||||||
|
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||||
|
* 3. Remove the padding so developers are not caught out when they zero out
|
||||||
|
* `fieldset` elements in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
legend {
|
||||||
|
box-sizing: border-box; /* 1 */
|
||||||
|
color: inherit; /* 2 */
|
||||||
|
display: table; /* 1 */
|
||||||
|
max-width: 100%; /* 1 */
|
||||||
|
padding: 0; /* 3 */
|
||||||
|
white-space: normal; /* 1 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Add the correct display in IE 9-.
|
||||||
|
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||||
|
*/
|
||||||
|
|
||||||
|
progress {
|
||||||
|
display: inline-block; /* 1 */
|
||||||
|
vertical-align: baseline; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the default vertical scrollbar in IE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Add the correct box sizing in IE 10-.
|
||||||
|
* 2. Remove the padding in IE 10-.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="checkbox"],
|
||||||
|
[type="radio"] {
|
||||||
|
box-sizing: border-box; /* 1 */
|
||||||
|
padding: 0; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="number"]::-webkit-inner-spin-button,
|
||||||
|
[type="number"]::-webkit-outer-spin-button {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the odd appearance in Chrome and Safari.
|
||||||
|
* 2. Correct the outline style in Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="search"] {
|
||||||
|
-webkit-appearance: textfield; /* 1 */
|
||||||
|
outline-offset: -2px; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="search"]::-webkit-search-cancel-button,
|
||||||
|
[type="search"]::-webkit-search-decoration {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||||
|
* 2. Change font properties to `inherit` in Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
::-webkit-file-upload-button {
|
||||||
|
-webkit-appearance: button; /* 1 */
|
||||||
|
font: inherit; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Interactive
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Add the correct display in IE 9-.
|
||||||
|
* 1. Add the correct display in Edge, IE, and Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
details, /* 1 */
|
||||||
|
menu {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Add the correct display in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
summary {
|
||||||
|
display: list-item;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Scripting
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct display in IE 9-.
|
||||||
|
*/
|
||||||
|
|
||||||
|
canvas {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct display in IE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
template {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hidden
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct display in IE 10-.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[hidden] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
# watermarking key for audiowmark
|
||||||
|
|
||||||
|
key 88913063e57c946b37bf6ea8ce842d32
|
||||||
|
|
@ -0,0 +1,165 @@
|
||||||
|
/* Sakura.css v1.0.0
|
||||||
|
* ================
|
||||||
|
* Minimal css theme.
|
||||||
|
* Project: https://github.com/oxalorg/sakura
|
||||||
|
*/
|
||||||
|
/* Body */
|
||||||
|
html {
|
||||||
|
font-size: 62.5%;
|
||||||
|
font-family: serif; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
line-height: 1.618;
|
||||||
|
max-width: 38em;
|
||||||
|
margin: auto;
|
||||||
|
color: #4a4a4a;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
padding: 13px; }
|
||||||
|
|
||||||
|
@media (max-width: 684px) {
|
||||||
|
body {
|
||||||
|
font-size: 1.53rem; } }
|
||||||
|
|
||||||
|
@media (max-width: 382px) {
|
||||||
|
body {
|
||||||
|
font-size: 1.35rem; } }
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
line-height: 1.1;
|
||||||
|
font-family: Verdana, Geneva, sans-serif;
|
||||||
|
font-weight: 700;
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
word-wrap: break-word;
|
||||||
|
-ms-word-break: break-all;
|
||||||
|
word-break: break-word;
|
||||||
|
-ms-hyphens: auto;
|
||||||
|
-moz-hyphens: auto;
|
||||||
|
-webkit-hyphens: auto;
|
||||||
|
hyphens: auto; }
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2.35em; }
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 2.00em; }
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 1.75em; }
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-size: 1.5em; }
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
font-size: 1.25em; }
|
||||||
|
|
||||||
|
h6 {
|
||||||
|
font-size: 1em; }
|
||||||
|
|
||||||
|
small, sub, sup {
|
||||||
|
font-size: 75%; }
|
||||||
|
|
||||||
|
hr {
|
||||||
|
border-color: #2c8898; }
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #2c8898; }
|
||||||
|
a:hover {
|
||||||
|
color: #982c61;
|
||||||
|
border-bottom: 2px solid #4a4a4a; }
|
||||||
|
|
||||||
|
ul {
|
||||||
|
padding-left: 1.4em; }
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin-bottom: 0.4em; }
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
font-style: italic;
|
||||||
|
margin-left: 1.5em;
|
||||||
|
padding-left: 1em;
|
||||||
|
border-left: 3px solid #2c8898; }
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%; }
|
||||||
|
|
||||||
|
/* Pre and Code */
|
||||||
|
pre {
|
||||||
|
background-color: #f1f1f1;
|
||||||
|
display: block;
|
||||||
|
padding: 1em;
|
||||||
|
overflow-x: auto; }
|
||||||
|
|
||||||
|
code {
|
||||||
|
font-size: 0.9em;
|
||||||
|
padding: 0 0.5em;
|
||||||
|
background-color: #f1f1f1;
|
||||||
|
white-space: pre-wrap; }
|
||||||
|
|
||||||
|
pre > code {
|
||||||
|
padding: 0;
|
||||||
|
background-color: transparent;
|
||||||
|
white-space: pre; }
|
||||||
|
|
||||||
|
/* Tables */
|
||||||
|
table {
|
||||||
|
text-align: justify;
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse; }
|
||||||
|
|
||||||
|
td, th {
|
||||||
|
padding: 0.5em;
|
||||||
|
border-bottom: 1px solid #f1f1f1; }
|
||||||
|
|
||||||
|
/* Buttons, forms and input */
|
||||||
|
input, textarea {
|
||||||
|
border: 1px solid #4a4a4a; }
|
||||||
|
input:focus, textarea:focus {
|
||||||
|
border: 1px solid #2c8898; }
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
width: 100%; }
|
||||||
|
|
||||||
|
.button, button, input[type="submit"], input[type="reset"], input[type="button"] {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 5px 10px;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
white-space: nowrap;
|
||||||
|
background-color: #2c8898;
|
||||||
|
color: #f9f9f9;
|
||||||
|
border-radius: 1px;
|
||||||
|
border: 1px solid #2c8898;
|
||||||
|
cursor: pointer;
|
||||||
|
box-sizing: border-box; }
|
||||||
|
.button[disabled], button[disabled], input[type="submit"][disabled], input[type="reset"][disabled], input[type="button"][disabled] {
|
||||||
|
cursor: default;
|
||||||
|
opacity: .5; }
|
||||||
|
.button:focus, .button:hover, button:focus, button:hover, input[type="submit"]:focus, input[type="submit"]:hover, input[type="reset"]:focus, input[type="reset"]:hover, input[type="button"]:focus, input[type="button"]:hover {
|
||||||
|
background-color: #982c61;
|
||||||
|
border-color: #982c61;
|
||||||
|
color: #f9f9f9;
|
||||||
|
outline: 0; }
|
||||||
|
|
||||||
|
textarea, select, input[type] {
|
||||||
|
color: #4a4a4a;
|
||||||
|
padding: 6px 10px;
|
||||||
|
/* The 6px vertically centers text on FF, ignored by Webkit */
|
||||||
|
margin-bottom: 10px;
|
||||||
|
background-color: #f1f1f1;
|
||||||
|
border: 1px solid #f1f1f1;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: none;
|
||||||
|
box-sizing: border-box; }
|
||||||
|
textarea:focus, select:focus, input[type]:focus {
|
||||||
|
border: 1px solid #2c8898;
|
||||||
|
outline: 0; }
|
||||||
|
|
||||||
|
input[type="checkbox"]:focus {
|
||||||
|
outline: 1px dotted #2c8898; }
|
||||||
|
|
||||||
|
label, legend, fieldset {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
font-weight: 600; }
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading…
Reference in New Issue