InteractiveBase Back Card 'Invalid HTML on card: Syntax Error: Unexpected Identifier

Question

InteractiveBase Back Card 'Invalid HTML on card: Syntax Error: Unexpected Identifier

aedangibson opened this issue 3 years ago · comments

On the InteractiveBase card type, the front of the card works perfectly, but the back of the card shows this error message:

Invalid HTML on card: SyntaxError: Unexpected identifier
SyntaxError: Unexpected identifier
at eval ()
at http://127.0.0.1:61241/_anki/js/vendor/jquery.js:2:2651
at Function.globalEval (http://127.0.0.1:61241/_anki/js/vendor/jquery.js:2:2662)
at Ha (http://127.0.0.1:61241/_anki/js/vendor/jquery.js:3:21262)
at n.fn.init.append (http://127.0.0.1:61241/_anki/js/vendor/jquery.js:3:22791)
at n.fn.init. (http://127.0.0.1:61241/_anki/js/vendor/jquery.js:3:24070)
at Y (http://127.0.0.1:61241/_anki/js/vendor/jquery.js:3:4515)
at n.fn.init.html (http://127.0.0.1:61241/_anki/js/vendor/jquery.js:3:23660)
at http://127.0.0.1:61241/_anki/js/reviewer.js:36:16

I tested deleting each portion of JavaScript and found that this portion was the culprit:

<script>(function(){ let answered = Persistence.getItem('answer') || ""; let correct = "{{Answer}}"; let the_input = document.querySelector("my-input"); let case_sens = answered != answered.toLowerCase(); function compare() { if( ! answered ) return 'ground'; let ans = answered, tru = correct; if(!case_sens) { ans = answered.toLowerCase(); tru = correct.toLowerCase(); } if( ans !== tru ) return 'missed'; return 'correct' } the_input.classList.add(compare()); the_input.addEventListener('click', ev => { if( the_input.classList.contains('answered') ) { the_input.value = correct; the_input.classList.remove('answered'); the_input.classList.add(compare()); } else if ( answered ) { the_input.value = answered; the_input.classList.remove('ground', 'correct', 'missed'); the_input.classList.add('answered'); } }); })(); </script>

_Deleting it ruins the type-in answer format of the card. Is there possibly ay fix for this? I have modified the code slightly to suit my needs better, so maybe this had had some effect? I suspect that my modifications have caused some issues, as the original InteractiveBase card still works perfectly fine.

I will paste the full HTML & CSS used on my modified cards below:_

Front:

<script>// v0.5.0 - https://github.com/SimonLammer/anki-persistence/blob/3e08d4437272b869dc3ccb48369b3482ccea4c9f/script.js if(void 0===window.Persistence){var _persistenceKey="github.com/SimonLammer/anki-persistence/",_defaultKey="_default";if(window.Persistence_sessionStorage=function(){var e=!1;try{"object"==typeof window.sessionStorage&&(e=!0,this.clear=function(){for(var e=0;e0&&titleContentIndex>0&&titleContentIndex-titleStartIndex<10&&(window.Persistence=new Persistence_windowKey("qt"))}}</script> <script>if(!Persistence.isAvailable()) { /* dumb implementaion */ window.Persistence = { isAvailable: function() { return false; }, clear: function(){}, getItem: function(){}, setItem: function(){}, removeItem: function(){} }; } function debug(message) { let d = document.querySelector("#debug"); if(!d) return; d.textContent += "\n"+message; } String.prototype.splitrim = function (sep) { return this.split(sep).map(e => e.trim()); }; function split_choices(str) { return str.splitrim(/
|\|/).filter(e => e !== ""); } String.prototype.stripspaces = function() { return this.replace(/\s+/g, ' '); }; function placeCaretAtEnd(el) { if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") { var range = document.createRange(); range.selectNodeContents(el); range.collapse(false); var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } else if (typeof document.body.createTextRange != "undefined") { var textRange = document.body.createTextRange(); textRange.moveToElementText(el); textRange.collapse(false); textRange.select(); } } function hide(elem) { elem.classList.add('hidden'); }; function show(elem) { elem.classList.remove('hidden'); }; function toggle(elem) { elem.classList.toggle('hidden'); };</script> <script>/** @license @nocompile Copyright (c) 2018 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as part of the polymer project is also subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt */ (function(){'use strict';var aa=new Set("annotation-xml color-profile font-face font-face-src font-face-uri font-face-format font-face-name missing-glyph".split(" "));function g(b){var a=aa.has(b);b=/^[a-z][.0-9_a-z]*-[\-.0-9_a-z]*$/.test(b);return!a&&b}function l(b){var a=b.isConnected;if(void 0!==a)return a;for(;b&&!(b.__CE_isImportDocument||b instanceof Document);)b=b.parentNode||(window.ShadowRoot&&b instanceof ShadowRoot?b.host:void 0);return!(!b||!(b.__CE_isImportDocument||b instanceof Document))} function n(b,a){for(;a&&a!==b&&!a.nextSibling;)a=a.parentNode;return a&&a!==b?a.nextSibling:null} function p(b,a,d){d=void 0===d?new Set:d;for(var c=b;c;){if(c.nodeType===Node.ELEMENT_NODE){var e=c;a(e);var f=e.localName;if("link"===f&&"import"===e.getAttribute("rel")){c=e.import;if(c instanceof Node&&!d.has(c))for(d.add(c),c=c.firstChild;c;c=c.nextSibling)p(c,a,d);c=n(b,e);continue}else if("template"===f){c=n(b,e);continue}if(e=e.__CE_shadowRoot)for(e=e.firstChild;e;e=e.nextSibling)p(e,a,d)}c=c.firstChild?c.firstChild:n(b,c)}}function r(b,a,d){b[a]=d};function u(){this.a=new Map;this.s=new Map;this.f=[];this.b=!1}function ba(b,a,d){b.a.set(a,d);b.s.set(d.constructor,d)}function v(b,a){b.b=!0;b.f.push(a)}function w(b,a){b.b&&p(a,function(a){return x(b,a)})}function x(b,a){if(b.b&&!a.__CE_patched){a.__CE_patched=!0;for(var d=0;d <script>if( customElements.get('my-input') === undefined ) { customElements.define('my-input', class MyInput extends HTMLElement { /** Wrapper around input to make it like MD text field box * @prop placholder -- to pass to input */ connectedCallback() { this.readonly = this.hasAttribute('readonly'); this.placeholder = this.getAttribute('placeholder') || "…"; this._render(); this.value = (this.getAttribute('value') || "").trim(); if(!this.readonly) { this._bind_events(); } } _render() { this.innerHTML = `
`; this._input = this.querySelector('input'); } _bind_events() { this._input.addEventListener('focus', e => { this.classList.add('focus'); }); this._input.addEventListener('blur', e => { this.classList.remove('focus'); }); } get value() { return this._input.value.trim(); } set value(val) { this._input.value = val; } }); }</script>
{{^Cover}}{{#Header}}

{{Header}}

{{/Header}}{{/Cover}} {{#Cover}}
{{Cover}} {{#Header}}

{{Header}}

{{/Header}}
{{/Cover}} {{#Intro}}

{{Intro}}

{{/Intro}}
    <div class="text">
        <p>{{Question}}</p>
    </div>
    <hr>
    <my-input placeholder="Answer">
    </my-input>
</div>
<div class="flex"></div>
{{#Instruction}}<p class="instruction">{{Instruction}}</p>{{/Instruction}}
<script>(function(){ Persistence.setItem('answer', null); let the_input = document.querySelector("my-input"); the_input.addEventListener('input', e=>{ Persistence.setItem('answer', the_input.value); }) })(); </script>

Back:

<script>// v0.5.0 - https://github.com/SimonLammer/anki-persistence/blob/3e08d4437272b869dc3ccb48369b3482ccea4c9f/script.js if(void 0===window.Persistence){var _persistenceKey="github.com/SimonLammer/anki-persistence/",_defaultKey="_default";if(window.Persistence_sessionStorage=function(){var e=!1;try{"object"==typeof window.sessionStorage&&(e=!0,this.clear=function(){for(var e=0;e0&&titleContentIndex>0&&titleContentIndex-titleStartIndex<10&&(window.Persistence=new Persistence_windowKey("qt"))}}</script> <script>if(!Persistence.isAvailable()) { /* dumb implementaion */ window.Persistence = { isAvailable: function() { return false; }, clear: function(){}, getItem: function(){}, setItem: function(){}, removeItem: function(){} }; } function debug(message) { let d = document.querySelector("#debug"); if(!d) return; d.textContent += "\n"+message; } String.prototype.splitrim = function (sep) { return this.split(sep).map(e => e.trim()); }; function split_choices(str) { return str.splitrim(/
|\|/).filter(e => e !== ""); } String.prototype.stripspaces = function() { return this.replace(/\s+/g, ' '); }; function placeCaretAtEnd(el) { if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") { var range = document.createRange(); range.selectNodeContents(el); range.collapse(false); var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } else if (typeof document.body.createTextRange != "undefined") { var textRange = document.body.createTextRange(); textRange.moveToElementText(el); textRange.collapse(false); textRange.select(); } } function hide(elem) { elem.classList.add('hidden'); }; function show(elem) { elem.classList.remove('hidden'); }; function toggle(elem) { elem.classList.toggle('hidden'); };</script> <script>/** @license @nocompile Copyright (c) 2018 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as part of the polymer project is also subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt */ (function(){'use strict';var aa=new Set("annotation-xml color-profile font-face font-face-src font-face-uri font-face-format font-face-name missing-glyph".split(" "));function g(b){var a=aa.has(b);b=/^[a-z][.0-9_a-z]*-[\-.0-9_a-z]*$/.test(b);return!a&&b}function l(b){var a=b.isConnected;if(void 0!==a)return a;for(;b&&!(b.__CE_isImportDocument||b instanceof Document);)b=b.parentNode||(window.ShadowRoot&&b instanceof ShadowRoot?b.host:void 0);return!(!b||!(b.__CE_isImportDocument||b instanceof Document))} function n(b,a){for(;a&&a!==b&&!a.nextSibling;)a=a.parentNode;return a&&a!==b?a.nextSibling:null} function p(b,a,d){d=void 0===d?new Set:d;for(var c=b;c;){if(c.nodeType===Node.ELEMENT_NODE){var e=c;a(e);var f=e.localName;if("link"===f&&"import"===e.getAttribute("rel")){c=e.import;if(c instanceof Node&&!d.has(c))for(d.add(c),c=c.firstChild;c;c=c.nextSibling)p(c,a,d);c=n(b,e);continue}else if("template"===f){c=n(b,e);continue}if(e=e.__CE_shadowRoot)for(e=e.firstChild;e;e=e.nextSibling)p(e,a,d)}c=c.firstChild?c.firstChild:n(b,c)}}function r(b,a,d){b[a]=d};function u(){this.a=new Map;this.s=new Map;this.f=[];this.b=!1}function ba(b,a,d){b.a.set(a,d);b.s.set(d.constructor,d)}function v(b,a){b.b=!0;b.f.push(a)}function w(b,a){b.b&&p(a,function(a){return x(b,a)})}function x(b,a){if(b.b&&!a.__CE_patched){a.__CE_patched=!0;for(var d=0;d <script>if( customElements.get('my-input') === undefined ) { customElements.define('my-input', class MyInput extends HTMLElement { /** Wrapper around input to make it like MD text field box * @prop placholder -- to pass to input */ connectedCallback() { this.readonly = this.hasAttribute('readonly'); this.placeholder = this.getAttribute('placeholder') || "…"; this._render(); this.value = (this.getAttribute('value') || "").trim(); if(!this.readonly) { this._bind_events(); } } _render() { this.innerHTML = `
`; this._input = this.querySelector('input'); } _bind_events() { this._input.addEventListener('focus', e => { this.classList.add('focus'); }); this._input.addEventListener('blur', e => { this.classList.remove('focus'); }); } get value() { return this._input.value.trim(); } set value(val) { this._input.value = val; } }); }</script>
{{^Cover}}{{#Header}}

{{Header}}

{{/Header}}{{/Cover}} {{#Cover}}
{{Cover}} {{#Header}}

{{Header}}

{{/Header}}
{{/Cover}} {{#Intro}}

{{Intro}}

{{/Intro}}
    <div id="text" class="text">
        <p>{{Question}}</p>
  	{{#WordType}}
  	<div class="classboxes">
  		{{#Hanja}}
  		<div class="hanja">
  			{{Hanja}}
  		</div>	
  		{{/Hanja}}		
  		{{#WordType}}	
  		<div class="wordtype">
  			{{WordType}}
  		</div>
  		{{/WordType}}	
  	</div>
  	{{/WordType}}	
    </div>
    <hr>
  <div class="button">
  	{{Sound}}
  </div>
    <my-input readonly value="{{Answer}}"</my-input>
</div>
<div class="flex"></div>
{{#Explanation}}<p class="explanation">{{Explanation}}</p>{{/Explanation}}
{{#Sentence}}

{{SentenceSound}}
{{Sentence}}
{{/Sentence}} {{#Sentence2}}

{{SentenceSound2}}
{{Sentence2}}
{{/Sentence2}} {{#Sentence3}}

{{SentenceSound3}}
{{Sentence3}}
{{/Sentence3}}
{{#Reference}}
{{Reference}}
{{/Reference}}
<script>(function(){ let answered = Persistence.getItem('answer') || ""; let correct = "{{Answer}}"; let the_input = document.querySelector("my-input");
let case_sens = answered != answered.toLowerCase();

function compare() {
    if( ! answered ) return 'ground';
    let ans = answered, tru = correct;
    if(!case_sens) {
        ans = answered.toLowerCase();
        tru = correct.toLowerCase();
    }
    if( ans !== tru ) return 'missed';
    return 'correct'
}

the_input.classList.add(compare());

the_input.addEventListener('click', ev => {
    if( the_input.classList.contains('answered') ) {
        the_input.value = correct;
        the_input.classList.remove('answered');
        the_input.classList.add(compare());
    } else if ( answered ) {
        the_input.value = answered;
        the_input.classList.remove('ground', 'correct', 'missed');
        the_input.classList.add('answered');
    }
});
})();
</script>
<script src="https://kit.fontawesome.com/b92c5af0e4.js"> </script> <script> function playAudio(){ var audioDiv = document.getElementById('audio'); var audio = audioDiv.getElementsByTagName("*"); audio[0].click(); } function playSenAudio(){ var audioDiv = document.getElementById('senaudio'); var audio = audioDiv.getElementsByTagName("*"); audio[0].click(); } </script>

CSS:

html,body {
display: block;
height: 100%;
}

html, body, *, #content, #qa {
box-sizing: border-box;
margin: 0;
padding: 0;
}

/* webanki: body main.container > div#quiz > div#qa_box.card > div#qa /
/ linux-edit: body.card > div#qa /
/ linux-preview|review: body > div#qa || body.card > div#qa /
/ android: body.card > div#content > div.question || body.card > div#content > div.answer */

body > div#qa .main,
body > div#content .main {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
overflow: auto;
}

#fas fa-play-circle {

}

ul {
list-style: none;
margin: 0;
padding: 0;
}

*:focus {
outline: none;
}

.button {
float: left;
padding-right: 5px;
}

.sentence {
float: left;
width: 100%;
}

.classboxes {
margin: auto;
padding-bottom: 30px;
padding-top: 5px;
}

.wordtype {
float: left;
width: fit-content;
display: inline-block;
background-color: #1c9cdb;
color: #FFFFFF;
padding: 4px;
font-size: 14px;
}

.hanja {
float: left;
width: fit-content;
display: inline-block;
background-color: #004b66;
color: #FFFFFF;
padding: 4px;
font-size: 14px;
}

.hidden {
display: none;
}

.flex {
flex: 1 1;
}

.main {
padding: 8px;
display: flex;
flex-flow: column nowrap;
align-items: center;
background-color: var(--theme-background0);
}

hr {
width: 100%;
height: 1px;
border: none;
background-color: var(--theme-divider);
}

p {
margin: .5em 0;
}

.reference {
font-size: x-small;
}

.answer {
padding: .3ex;
}

.text .cloze.correct,
.text .cloze.missed {
border-radius: 2px;
border-bottom: none;
}

li.ground {
border-bottom: none;
}

/* material design card */

.md-card {
width: 36em; /* ~60 chars */
max-width: 100%;
min-width: 24em;
margin-bottom: 8px;
border-radius: 2px;
box-shadow: var(--md-shadow-z2);
background-color: var(--theme-background1);
}

.md-card .header {
margin: 24px 0 16px;
padding: 0 16px;
}

.md-card .cover {
position: relative;
padding-top: 56.25%; /* 16:9 aspect ratio */
}

.md-card .cover img {
display: block;
position: absolute;
z-index: 0;
top: 0; bottom:0; left:0; right: 0;
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
object-fit: cover;
}

.md-card .cover .header {
position: absolute;
z-index: 1;
bottom: 0; left:0; right: 0;
margin: 0;
padding: 24px 16px 16px;
}

.md-card .text,
.md-card > my-input {
display: block;
margin: 16px 0;
padding: 0 16px;
}

.md-card .text img {
display: block;
margin: 8px auto;
}

/* my-cloze */

my-cloze {
display: inline;
padding: .15ex .5ex;
margin: 0 -.5ex; /* compensate */
border-bottom: 1px solid var(--theme-primary);
border-radius: 2px 2px 0 0 ;
color: var(--theme-primary-dark);
}

my-cloze.contracted {
padding-left: 0;
}

my-cloze:empty:after {
content:attr(placeholder);
color: var(--theme-placeholder);
}

my-cloze:hover {
background-color: var(--theme-hover);
}

my-cloze:focus, my-cloze.focus {
background-color: var(--theme-focus);
}

my-cloze.ground {
color: var(--theme-foreground1);
background-color: transparent;
border-color: var(--theme-secondary);
}

my-cloze.correct {
color: var(--theme-foreground1);
background-color: var(--theme-correct);
border-color: var(--theme-correct-dark);
}

my-cloze.missed {
color: var(--theme-foreground1);
background-color: var(--theme-missed);
border-color: var(--theme-missed-dark);
}

/* my-choices */

ul.md-list {
margin: 8px 0;
}

ul.md-list li {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: flex-start;
min-height: 48px;
padding-right: 16px;
}

.main > my-choices {
min-width: 24em;
border: 1px solid var(--theme-divider);
border-radius: 2px;
}

ul.md-list li:hover {
background-color: var(--theme-hover);
}

ul.md-list li:focus {
background-color: var(--theme-focus);
}

ul.md-list li.correct {
background-color: var(--theme-correct);
}

ul.md-list li.missed {
background-color: var(--theme-missed);
}

ul.md-list li.disabled {
color: var(--theme-disabled);
}

/* my-chips */

ul.md-chips {
display: flex;
flex-flow: row wrap;
justify-content: center;
min-width: 24em; /* ~40 chars /
max-width: 36em; / ~60 chars */
}

ul.md-chips li {
display: flex;
align-items: center;
margin: 4px;
padding: 0 12px;
height: 32px;
border-radius: 16px;
background-color: var(--theme-fieldbox);
box-shadow: var(--md-shadow-z1);
}

ul.md-chips li[tabindex]:active {
background-color: var(--theme-active);
box-shadow: var(--md-shadow-z8);
}

ul.md-chips li:hover {
background-color: var(--theme-fieldbox-hover);
}

ul.md-chips li:focus {
background-color: var(--theme-focus);
}

ul.md-chips li label,
ul.md-chips li i {
font-size: 1rem;
line-height: 1rem;
color: var(--theme-foreground1);
font-style: normal;
}

.md-control {
width: 40px;
height: 40px;
/* 16px from left to icon, sum up to 72px */
margin-left: 5px;
margin-right: 27px;
}

.md-control__outline {
margin: 11px;
height: 18px;
width: 18px;
border: 2px solid var(--theme-primary);
}

.md-radio .md-control__outline {
border-radius: 50%;
}

.md-check .md-control__outline {
border-radius: 2px;
}

.md-control__inline {
display: none;
}

.selected .md-control__inline {
display: block;
margin: 2px;
width: 10px;
height: 10px;
background-color: var(--theme-primary);
}

.md-radio .md-control__inline {
border-radius: 50%;
}

.md-check .md-control__inline {
border-radius: 2px;
}

.disabled .md-control__outline,
[readonly] .md-control__outline {
border-color: var(--theme-disabled);
}

.ground .md-control__outline {
border-color: var(--theme-secondary);
}
.ground.selected .md-control__inline {
background-color: var(--theme-secondary);
}

.correct .md-control__outline {
border-color: var(--theme-correct-dark);
}
.correct.selected .md-control__inline {
background-color: var(--theme-correct-dark);
}

.missed .md-control__outline {
border-color: var(--theme-missed-dark);
}
.missed.selected .md-control__inline {
background-color: var(--theme-missed-dark);
}

/* my-input */

.md-textbox {
flex: 0 0 36px;
height: 36px;
margin: 8px auto;
background-color: var(--theme-fieldbox);
border-radius: 4px;
padding: 8px 16px;
position: relative;
overflow: hidden;
}

.md-textbox hr {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 0;
border: none;
margin: 0;
border-bottom: 2px solid var(--theme-primary);
}

.md-textbox input {
width: 20em; /* Betäubungsmittel-Verschreibungsverordnung */
margin: 0;
padding: 0;
border: none;
font-size: 1rem;
font-weight: 400;
background: transparent;
}

.md-textbox
{
background-color: var(--theme-fieldbox);
}
.md-textbox:hover
{
background-color: var(--theme-fieldbox-hover);
}

.focus .md-textbox,
.focus .md-textbox hr
{
background-color: var(--theme-focus);
}

.ground .md-textbox,
[readonly].ground .md-textbox hr {
border-color: var(--theme-secondary);
}

[readonly] .md-textbox hr
{
border-color: var(--theme-divider);
}

.correct .md-textbox,
.correct .md-textbox hr
{
background-color: var(--theme-correct);
border-color: var(--theme-correct-dark);
}

.missed .md-textbox,
.missed .md-textbox hr
{
background-color: var(--theme-missed);
border-color: var(--theme-missed-dark);
}

.cover .header {
background-image: linear-gradient(to bottom, transparent 0%, hsla(199, 100%, 10%, .6) 24px, hsla(199, 100%, 10%, .95) 100%);
color: white;
}

input::-webkit-input-placeholder {
color: var(--theme-placeholder);
}

/* material design typography */

body {
font-family: Roboto, sans-serif;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
color: var(--theme-foreground1);
}

.md-headline6 {
font-size: 1.25rem;
line-height: 2rem;
font-weight: 500;
letter-spacing: 0.0125em;
text-decoration: inherit;
text-transform: inherit; }

.md-body1 {
font-size: 1rem;
line-height: 1.5rem;
font-weight: 400;
letter-spacing: 0.03125em;
text-decoration: inherit;
text-transform: inherit; }

.md-body2 {
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 400;
letter-spacing: 0.01786em;
text-decoration: inherit;
text-transform: inherit; }

.md-caption {
font-size: 0.75rem;
line-height: 1.25rem;
font-weight: 400;
letter-spacing: 0.03333em;
text-decoration: inherit;
text-transform: inherit; }

:root {
--theme-primary: hsl(199, 100%, 50%);
--theme-primary-dark: hsl(199, 100%, 20%);
--theme-secondary: hsl(36, 100%, 50%);
--theme-correct: hsl(120, 80%, 80%);
--theme-correct-dark: hsl(120, 50%, 50%);
--theme-missed: hsl(50, 100%, 80%);
--theme-missed-dark: hsl(50, 50%, 50%);

--theme-background0: hsl(199, 100%, 95%);
--theme-background1: hsl(0, 0%, 98%);
--theme-foreground1: rgba(0, 0, 0, .87);
--theme-foreground2: rgba(0, 0, 0, .54);
--theme-divider: hsla(199, 100%, 20%, .12);
--theme-disabled: hsla(199, 100%, 20%, .26);
--theme-placeholder: hsla(199, 100%, 20%, .38);

--state-hover: .04;
--state-selected: .08;
--state-focus: .12;
--state-activated: .12;

--theme-fieldbox: rgba(0, 0, 0, .05);
--theme-fieldbox-hover: rgba(0, 0, 0, .09);
--theme-hover: rgba(0, 0, 0, var(--state-hover));
--theme-selected: rgba(0, 0, 0, var(--state-selected));
--theme-focus: rgba(0, 0, 0, var(--state-focus));
--theme-active: rgba(0,0,0, var(--state-activated));

--md-shadow-z1: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
--md-shadow-z2: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
--md-shadow-z8: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
}