first commit
This commit is contained in:
Klemek
Binary file not shown.
+39
-16
@@ -2,30 +2,53 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Change this you moron</title>
|
<title>Memory Helper</title>
|
||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="style.css">
|
||||||
<script type="text/javascript" src="libs/vue.global.js"></script>
|
<script type="text/javascript" src="libs/vue.global.js"></script>
|
||||||
|
<script type="text/javascript" src="libs/lz-string.min.js"></script>
|
||||||
<script type="text/javascript" src="main.js"></script>
|
<script type="text/javascript" src="main.js"></script>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<!-- card related -->
|
|
||||||
<!--
|
|
||||||
<meta name="twitter:card" content="summary_large_image">
|
|
||||||
<meta property="og:title" content="">
|
|
||||||
<meta property="twitter:title" content="">
|
|
||||||
<meta property="og:description" content="">
|
|
||||||
<meta property="twitter:description" content="">
|
|
||||||
<meta property="og:image" content="https://.../preview_640x320.jpg">
|
|
||||||
<meta property="twitter:image" content="">
|
|
||||||
<meta property="org:url" content="https://...">
|
|
||||||
-->
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<main id="app" style="display:none">
|
<main id="app" style="display:none">
|
||||||
<h1>{{title}}</h1>
|
<h1>Memory Helper</h1>
|
||||||
|
<div v-if="available.length > 0">
|
||||||
|
<div id='status'>Status : {{ done.length }}/{{ available.length }}</div>
|
||||||
|
<div v-if="current.length === 0">
|
||||||
|
<div class="main"><span id="question">🎉</span></div>
|
||||||
|
<div class="button-container">
|
||||||
|
<div type="button" class="button long" v-on:click="reset">Reset</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="current.length > 0">
|
||||||
|
<div class="main"><span id="question">{{question}}</span></div>
|
||||||
|
<div class="main"><span id="answer">{{showAnswer ? answer : '???'}}</span></div>
|
||||||
|
<div class="button-container">
|
||||||
|
<div type="button" class="button long" v-if="!showAnswer" v-on:click="show">Show</div>
|
||||||
|
<div type="button" class="button right" v-if="showAnswer" v-on:click="right">✔</div>
|
||||||
|
<div type="button" class="button wrong" v-if="showAnswer" v-on:click="wrong">✘</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<br>
|
<br>
|
||||||
<p v-html="content"></p>
|
<hr>
|
||||||
<br>
|
</div>
|
||||||
<small><a href="https://twitter.com/_klemek" target="_blank">@Klemek</a> - <a href="" target="_blank">Github Repository</a> - {{currentYear}}</small>
|
<div>
|
||||||
|
<h2 v-on:click="showConfig = !showConfig" class="expand">List <small>{{showConfig ? '▼' : '▲'}}</small></h2>
|
||||||
|
<table class="config" v-if="showConfig">
|
||||||
|
<tr v-for="(row, i) in available">
|
||||||
|
<td><input placeholder="question" v-bind:value="row[0]" v-on:change="row[0] = $event.target.value"></td>
|
||||||
|
<td><input placeholder="answer" v-bind:value="row[1]" v-on:change="row[1] = $event.target.value"></td>
|
||||||
|
<td><button v-on:click="deleteRow(i)">Delete</button></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><input placeholder="question" v-bind:value="newRow[0]" v-on:change="newRow[0] = $event.target.value"></td>
|
||||||
|
<td><input placeholder="answer" v-bind:value="newRow[1]" v-on:change="newRow[1] = $event.target.value"></td>
|
||||||
|
<td><button v-on:click="addRow">Add</button></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
<hr>
|
||||||
|
<small><a href="https://twitter.com/_klemek" target="_blank">@Klemek</a> - <a href="https://github.com/Klemek/memory-helper" target="_blank">Github Repository</a> - {{currentYear}}</small>
|
||||||
</main>
|
</main>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Vendored
+1
@@ -0,0 +1 @@
|
|||||||
|
var LZString=function(){function o(o,r){if(!t[o]){t[o]={};for(var n=0;n<o.length;n++)t[o][o.charAt(n)]=n}return t[o][r]}var r=String.fromCharCode,n="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",e="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+-$",t={},i={compressToBase64:function(o){if(null==o)return"";var r=i._compress(o,6,function(o){return n.charAt(o)});switch(r.length%4){default:case 0:return r;case 1:return r+"===";case 2:return r+"==";case 3:return r+"="}},decompressFromBase64:function(r){return null==r?"":""==r?null:i._decompress(r.length,32,function(e){return o(n,r.charAt(e))})},compressToUTF16:function(o){return null==o?"":i._compress(o,15,function(o){return r(o+32)})+" "},decompressFromUTF16:function(o){return null==o?"":""==o?null:i._decompress(o.length,16384,function(r){return o.charCodeAt(r)-32})},compressToUint8Array:function(o){for(var r=i.compress(o),n=new Uint8Array(2*r.length),e=0,t=r.length;t>e;e++){var s=r.charCodeAt(e);n[2*e]=s>>>8,n[2*e+1]=s%256}return n},decompressFromUint8Array:function(o){if(null===o||void 0===o)return i.decompress(o);for(var n=new Array(o.length/2),e=0,t=n.length;t>e;e++)n[e]=256*o[2*e]+o[2*e+1];var s=[];return n.forEach(function(o){s.push(r(o))}),i.decompress(s.join(""))},compressToEncodedURIComponent:function(o){return null==o?"":i._compress(o,6,function(o){return e.charAt(o)})},decompressFromEncodedURIComponent:function(r){return null==r?"":""==r?null:(r=r.replace(/ /g,"+"),i._decompress(r.length,32,function(n){return o(e,r.charAt(n))}))},compress:function(o){return i._compress(o,16,function(o){return r(o)})},_compress:function(o,r,n){if(null==o)return"";var e,t,i,s={},p={},u="",c="",a="",l=2,f=3,h=2,d=[],m=0,v=0;for(i=0;i<o.length;i+=1)if(u=o.charAt(i),Object.prototype.hasOwnProperty.call(s,u)||(s[u]=f++,p[u]=!0),c=a+u,Object.prototype.hasOwnProperty.call(s,c))a=c;else{if(Object.prototype.hasOwnProperty.call(p,a)){if(a.charCodeAt(0)<256){for(e=0;h>e;e++)m<<=1,v==r-1?(v=0,d.push(n(m)),m=0):v++;for(t=a.charCodeAt(0),e=0;8>e;e++)m=m<<1|1&t,v==r-1?(v=0,d.push(n(m)),m=0):v++,t>>=1}else{for(t=1,e=0;h>e;e++)m=m<<1|t,v==r-1?(v=0,d.push(n(m)),m=0):v++,t=0;for(t=a.charCodeAt(0),e=0;16>e;e++)m=m<<1|1&t,v==r-1?(v=0,d.push(n(m)),m=0):v++,t>>=1}l--,0==l&&(l=Math.pow(2,h),h++),delete p[a]}else for(t=s[a],e=0;h>e;e++)m=m<<1|1&t,v==r-1?(v=0,d.push(n(m)),m=0):v++,t>>=1;l--,0==l&&(l=Math.pow(2,h),h++),s[c]=f++,a=String(u)}if(""!==a){if(Object.prototype.hasOwnProperty.call(p,a)){if(a.charCodeAt(0)<256){for(e=0;h>e;e++)m<<=1,v==r-1?(v=0,d.push(n(m)),m=0):v++;for(t=a.charCodeAt(0),e=0;8>e;e++)m=m<<1|1&t,v==r-1?(v=0,d.push(n(m)),m=0):v++,t>>=1}else{for(t=1,e=0;h>e;e++)m=m<<1|t,v==r-1?(v=0,d.push(n(m)),m=0):v++,t=0;for(t=a.charCodeAt(0),e=0;16>e;e++)m=m<<1|1&t,v==r-1?(v=0,d.push(n(m)),m=0):v++,t>>=1}l--,0==l&&(l=Math.pow(2,h),h++),delete p[a]}else for(t=s[a],e=0;h>e;e++)m=m<<1|1&t,v==r-1?(v=0,d.push(n(m)),m=0):v++,t>>=1;l--,0==l&&(l=Math.pow(2,h),h++)}for(t=2,e=0;h>e;e++)m=m<<1|1&t,v==r-1?(v=0,d.push(n(m)),m=0):v++,t>>=1;for(;;){if(m<<=1,v==r-1){d.push(n(m));break}v++}return d.join("")},decompress:function(o){return null==o?"":""==o?null:i._decompress(o.length,32768,function(r){return o.charCodeAt(r)})},_decompress:function(o,n,e){var t,i,s,p,u,c,a,l,f=[],h=4,d=4,m=3,v="",w=[],A={val:e(0),position:n,index:1};for(i=0;3>i;i+=1)f[i]=i;for(p=0,c=Math.pow(2,2),a=1;a!=c;)u=A.val&A.position,A.position>>=1,0==A.position&&(A.position=n,A.val=e(A.index++)),p|=(u>0?1:0)*a,a<<=1;switch(t=p){case 0:for(p=0,c=Math.pow(2,8),a=1;a!=c;)u=A.val&A.position,A.position>>=1,0==A.position&&(A.position=n,A.val=e(A.index++)),p|=(u>0?1:0)*a,a<<=1;l=r(p);break;case 1:for(p=0,c=Math.pow(2,16),a=1;a!=c;)u=A.val&A.position,A.position>>=1,0==A.position&&(A.position=n,A.val=e(A.index++)),p|=(u>0?1:0)*a,a<<=1;l=r(p);break;case 2:return""}for(f[3]=l,s=l,w.push(l);;){if(A.index>o)return"";for(p=0,c=Math.pow(2,m),a=1;a!=c;)u=A.val&A.position,A.position>>=1,0==A.position&&(A.position=n,A.val=e(A.index++)),p|=(u>0?1:0)*a,a<<=1;switch(l=p){case 0:for(p=0,c=Math.pow(2,8),a=1;a!=c;)u=A.val&A.position,A.position>>=1,0==A.position&&(A.position=n,A.val=e(A.index++)),p|=(u>0?1:0)*a,a<<=1;f[d++]=r(p),l=d-1,h--;break;case 1:for(p=0,c=Math.pow(2,16),a=1;a!=c;)u=A.val&A.position,A.position>>=1,0==A.position&&(A.position=n,A.val=e(A.index++)),p|=(u>0?1:0)*a,a<<=1;f[d++]=r(p),l=d-1,h--;break;case 2:return w.join("")}if(0==h&&(h=Math.pow(2,m),m++),f[l])v=f[l];else{if(l!==d)return null;v=s+s.charAt(0)}w.push(v),f[d++]=s+v.charAt(0),h--,s=v,0==h&&(h=Math.pow(2,m),m++)}}};return i}();"function"==typeof define&&define.amd?define(function(){return LZString}):"undefined"!=typeof module&&null!=module&&(module.exports=LZString);
|
||||||
@@ -1,90 +1,61 @@
|
|||||||
/* exported app, utils */
|
/* exported app, utils */
|
||||||
|
|
||||||
const utils = {
|
const utils = {
|
||||||
ajax: {
|
cloneObject: function (obj) {
|
||||||
proxy: 'cors-anywhere.herokuapp.com',
|
return JSON.parse(JSON.stringify(obj));
|
||||||
/**
|
},
|
||||||
* Define a get HTTP request to be executed with .then/.catch
|
serialize: function (list) {
|
||||||
* @param {string} url
|
return LZString.compressToBase64(JSON.stringify(list));
|
||||||
* @param {Object} data
|
},
|
||||||
* @param {boolean} proxy - use cors proxy
|
deserialize: function (rawData) {
|
||||||
* @returns {Promise<Object|string>} return JSON parsed data or string
|
return JSON.parse(LZString.decompressFromBase64(rawData));
|
||||||
*/
|
},
|
||||||
get: (url, data, proxy = false) => {
|
randint: function (min, max) {
|
||||||
return new Promise((resolve, reject) => {
|
return Math.floor(Math.random() * (max - min)) + min;
|
||||||
if (data && Object.keys(data).length) {
|
},
|
||||||
url += '?' + Object.keys(data)
|
randindex: function (array, ...toIgnore) {
|
||||||
.map(k => k + '=' + encodeURIComponent(data[k]))
|
let index;
|
||||||
.join('&')
|
do {
|
||||||
.replace(/%20/g, '+');
|
index = this.randint(0, array.length);
|
||||||
|
} while (this.contains(toIgnore, index));
|
||||||
|
return index;
|
||||||
|
},
|
||||||
|
randitem: function (array) {
|
||||||
|
return array[this.randindex(array)];
|
||||||
|
},
|
||||||
|
randindexes: function (array, number, ...toIgnore) {
|
||||||
|
const output = [];
|
||||||
|
for (let i = 0; i < number; i++) {
|
||||||
|
output.push(this.randindex(array, ...output, ...toIgnore));
|
||||||
}
|
}
|
||||||
const xhr = new XMLHttpRequest();
|
return output;
|
||||||
if (proxy) {
|
},
|
||||||
const http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
|
shuffle: function (array) {
|
||||||
url = `${http}//${utils.ajax.proxy}/${url}`;
|
const output = [...array];
|
||||||
}
|
for (let i = 0; i < array.length; i++) {
|
||||||
xhr.open('GET', url);
|
const i1 = this.randindex(array);
|
||||||
xhr.onload = () => {
|
const i2 = this.randindex(array, i1);
|
||||||
try {
|
[output[i1], output[i2]] = [output[i2], output[i1]];
|
||||||
resolve(JSON.parse(xhr.responseText));
|
|
||||||
} catch (ignored) {
|
|
||||||
resolve(xhr.responseText);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
xhr.onerror = () => reject(xhr);
|
|
||||||
xhr.send();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
},
|
|
||||||
cookies: {
|
|
||||||
/**
|
|
||||||
* Save a value in a cookie
|
|
||||||
* @param {string} name
|
|
||||||
* @param {string} value
|
|
||||||
* @param {number | undefined} days
|
|
||||||
*/
|
|
||||||
set: function (name, value, days = undefined) {
|
|
||||||
const maxAge = !days ? undefined : days * 864e2;
|
|
||||||
document.cookie = `${name}=${encodeURIComponent(value)}${maxAge ? `;max-age=${maxAge};` : ''}`;
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* Get a value from a cookie
|
|
||||||
* @param {string} name
|
|
||||||
* @return {string} value from cookie or empty if not found
|
|
||||||
*/
|
|
||||||
get: function (name) {
|
|
||||||
return document.cookie.split('; ').reduce(function (r, v) {
|
|
||||||
const parts = v.split('=');
|
|
||||||
return parts[0] === name ? decodeURIComponent(parts[1]) : r;
|
|
||||||
}, '');
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* Delete a cookie
|
|
||||||
* @param {string} name
|
|
||||||
*/
|
|
||||||
delete: function (name) {
|
|
||||||
this.set(name, '', -1);
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* Clear all cookies
|
|
||||||
*/
|
|
||||||
clear: function () {
|
|
||||||
const cookies = document.cookie.split(';');
|
|
||||||
for (let i = 0; i < cookies.length; i++) {
|
|
||||||
const cookie = cookies[i];
|
|
||||||
const eqPos = cookie.indexOf('=');
|
|
||||||
const name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
|
|
||||||
document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT`;
|
|
||||||
}
|
}
|
||||||
|
return output;
|
||||||
},
|
},
|
||||||
|
contains: function (array, item) {
|
||||||
|
return array.indexOf(item) >= 0;
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
let app = {
|
let app = {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
title: 'Vue-Boilerplate',
|
question: "",
|
||||||
content: 'Fill this page with <i>whatever</i> you\'re going to develop.<br><b>Then enjoy!</b>',
|
answer: "",
|
||||||
|
showAnswer: false,
|
||||||
|
available: [],
|
||||||
|
current: [],
|
||||||
|
failed: [],
|
||||||
|
done: [],
|
||||||
|
newRow: ["", ""],
|
||||||
|
showConfig: true,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@@ -94,16 +65,75 @@ let app = {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
showApp() {
|
showApp() {
|
||||||
document.getElementById('app').setAttribute('style', '');
|
document.getElementById("app").setAttribute("style", "");
|
||||||
},
|
},
|
||||||
|
show() {
|
||||||
|
this.showAnswer = true;
|
||||||
|
},
|
||||||
|
right() {
|
||||||
|
this.done.push(this.current.shift());
|
||||||
|
console.log(this.current);
|
||||||
|
this.nextQuestion();
|
||||||
|
},
|
||||||
|
wrong() {
|
||||||
|
this.failed.push(this.current.shift());
|
||||||
|
console.log(this.current);
|
||||||
|
this.nextQuestion();
|
||||||
|
},
|
||||||
|
deleteRow(i) {
|
||||||
|
this.available.pop(i);
|
||||||
|
this.updateData();
|
||||||
|
},
|
||||||
|
addRow() {
|
||||||
|
if (this.newRow[0] && this.newRow[1]) {
|
||||||
|
this.available.push(utils.cloneObject(this.newRow));
|
||||||
|
this.newRow = ["", ""];
|
||||||
|
}
|
||||||
|
this.updateData();
|
||||||
|
},
|
||||||
|
updateData() {
|
||||||
|
const data = utils.serialize(this.available);
|
||||||
|
const url = new URL(window.location);
|
||||||
|
if (url.searchParams.get("d") !== data) {
|
||||||
|
url.searchParams.set("d", data);
|
||||||
|
window.history.pushState({}, "", url);
|
||||||
|
}
|
||||||
|
this.reset();
|
||||||
|
},
|
||||||
|
reset() {
|
||||||
|
this.current = utils.shuffle(utils.cloneObject(this.available));
|
||||||
|
this.done = [];
|
||||||
|
this.failed = [];
|
||||||
|
this.nextQuestion();
|
||||||
|
},
|
||||||
|
nextQuestion() {
|
||||||
|
this.showAnswer = false;
|
||||||
|
|
||||||
|
if (this.current.length === 0 && this.failed.length > 0) {
|
||||||
|
this.current = utils.shuffle(utils.cloneObject(this.failed));
|
||||||
|
this.failed = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.current.length > 0) {
|
||||||
|
this.question = this.current[0][0];
|
||||||
|
this.answer = this.current[0][1];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
beforeMount() {
|
||||||
|
const url = new URL(window.location);
|
||||||
|
if (url.searchParams.get("d")) {
|
||||||
|
this.available = utils.deserialize(url.searchParams.get("d"));
|
||||||
|
this.showConfig = false;
|
||||||
|
this.reset();
|
||||||
|
}
|
||||||
},
|
},
|
||||||
mounted: function () {
|
mounted: function () {
|
||||||
console.log('app mounted');
|
|
||||||
setTimeout(this.showApp);
|
setTimeout(this.showApp);
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
window.onload = () => {
|
window.onload = () => {
|
||||||
app = Vue.createApp(app);
|
app = Vue.createApp(app);
|
||||||
app.mount('#app');
|
app.mount("#app");
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,10 +1,19 @@
|
|||||||
|
/* noto-sans-regular - latin */
|
||||||
|
@font-face {
|
||||||
|
font-family: "Noto Sans";
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
src: url("fonts/NotoSansJP-Regular.otf");
|
||||||
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
font-family: Verdana, serif;
|
font-family: "Noto Sans", Verdana, serif;
|
||||||
color: #424242;
|
color: #424242;
|
||||||
}
|
}
|
||||||
|
|
||||||
html, body {
|
html,
|
||||||
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
@@ -12,31 +21,128 @@ html, body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: #F5F5F5;
|
background-color: #f5f5f5;
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
padding: 1.5rem;
|
padding: 1.5rem;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
background-color: #EEEEEE;
|
background-color: #eeeeee;
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
margin-bottom: .5em;
|
margin-bottom: 0.5em;
|
||||||
}
|
|
||||||
|
|
||||||
table{
|
|
||||||
border-collapse: collapse;
|
|
||||||
width:100%;
|
|
||||||
font-size: .9em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (min-width: 768px) {
|
@media only screen and (min-width: 768px) {
|
||||||
main {
|
main {
|
||||||
max-width: 42rem;
|
max-width: 42rem;
|
||||||
}
|
}
|
||||||
table{
|
}
|
||||||
font-size:inherit;
|
|
||||||
|
.main {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main > span {
|
||||||
|
line-height: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#question {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
#answer {
|
||||||
|
color: #616161;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-container {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
font-size: 1.5em;
|
||||||
|
width: 6em;
|
||||||
|
height: 2.3em;
|
||||||
|
text-align: center;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0.2em;
|
||||||
|
border: 1px solid #424242;
|
||||||
|
border-radius: 0.1em;
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 2em;
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: #fafafa;
|
||||||
|
color: #424242;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.long {
|
||||||
|
width: 12em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.right {
|
||||||
|
background-color: #8bc34a;
|
||||||
|
color: #eeeeee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.wrong {
|
||||||
|
background-color: #e53935;
|
||||||
|
color: #eeeeee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:active {
|
||||||
|
background-color: #757575;
|
||||||
|
color: #eeeeee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.right:active {
|
||||||
|
background-color: #558b2f;
|
||||||
|
color: #eeeeee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.wrong:active {
|
||||||
|
background-color: #c62828;
|
||||||
|
color: #eeeeee;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (hover: hover) {
|
||||||
|
.button:hover {
|
||||||
|
background-color: #e0e0e0;
|
||||||
|
color: #424242;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.right:hover {
|
||||||
|
background-color: #7cb342;
|
||||||
|
color: #eeeeee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.wrong:hover {
|
||||||
|
background-color: #d32f2f;
|
||||||
|
color: #eeeeee;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
table.config {
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
table.config td {
|
||||||
|
padding: 0.2em;
|
||||||
|
max-width: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
table.config td button {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
table.config td input {
|
||||||
|
width: 15em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expand {
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user