提交 www
This commit is contained in:
@@ -0,0 +1,91 @@
|
||||
<!doctype html>
|
||||
<html lang="en" class="light-theme">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>JavaScript Event KeyCodes</title>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
|
||||
<link href='//fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="JavaScript Event KeyCodes">
|
||||
<meta name="twitter:description" content="Keycode testing tool - which keys map to which keycodes?">
|
||||
<meta name="twitter:creator" content="@wesbos">
|
||||
<meta name="twitter:image" content="https://cdn1.imggmi.com/uploads/2019/7/12/f6b03f5628f7850649714200ab517a52-full.png">
|
||||
<link rel="stylesheet" href="style.css?v=07232021">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noty/3.1.4/noty.min.css" />
|
||||
<link rel="icon" href="">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script async src="//cdn.carbonads.com/carbon.js?serve=CESIK23L&placement=keycodeinfo" id="_carbonads_js"></script>
|
||||
<canvas width="128" height="128" hidden></canvas>
|
||||
<div class="display">
|
||||
<table class="table hide">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Key Code</th>
|
||||
<th>Key</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="table-body">
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="wrap" aria-live="polite" aria-atomic="true">
|
||||
<p class="keycode-display"></p>
|
||||
<p class="text-display">Press any key to get the JavaScript event keycode</p>
|
||||
<div class="cards hide">
|
||||
<div class="card item-key">
|
||||
<div class="card-header">event.key</div>
|
||||
<div class="card-main">
|
||||
<div class="main-description">key</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card item-location">
|
||||
<div class="card-header">event.location
|
||||
<a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/location" target="_blank" rel="noopener"
|
||||
class="more-info"></a>
|
||||
</div>
|
||||
<div class="card-main">
|
||||
<div class="main-description">location</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card item-which">
|
||||
<div class="card-header">
|
||||
event.which
|
||||
<a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent" target="_blank" rel="noopener"
|
||||
class="deprecated-link">(deprecated)</a>
|
||||
</div>
|
||||
<div class="card-main">
|
||||
<div class="main-description">which</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card item-code">
|
||||
<div class="card-header">event.code</div>
|
||||
<div class="card-main">
|
||||
<div class="main-description">code</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mobile-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="fixed-buttons">
|
||||
<button id="table-button" onclick={toggleTable()} class="toggle-button">Table</button>
|
||||
<button id="theme-button" onclick={toggleTheme()} class="toggle-button">Dark theme</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script type='text/javascript'>
|
||||
if ('serviceWorker' in navigator) {
|
||||
navigator.serviceWorker.register('./service-worker.js');
|
||||
}
|
||||
</script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/noty/3.1.4/noty.min.js"></script>
|
||||
<script src="scripts.js?v=07232021"></script>
|
||||
<script>!function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + '://platform.twitter.com/widgets.js'; fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'twitter-wjs');</script>
|
||||
<script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "b45decb6c8304abfaafe7d19167b59b5"}'></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,456 @@
|
||||
// #region Declare Variables
|
||||
|
||||
const keyCodes = {
|
||||
0: 'That key has no keycode',
|
||||
3: 'break',
|
||||
8: 'backspace / delete',
|
||||
9: 'tab',
|
||||
12: 'clear',
|
||||
13: 'enter',
|
||||
16: 'shift',
|
||||
17: 'ctrl',
|
||||
18: 'alt',
|
||||
19: 'pause/break',
|
||||
20: 'caps lock',
|
||||
21: 'hangul',
|
||||
25: 'hanja',
|
||||
27: 'escape',
|
||||
28: 'conversion',
|
||||
29: 'non-conversion',
|
||||
32: 'spacebar',
|
||||
33: 'page up',
|
||||
34: 'page down',
|
||||
35: 'end',
|
||||
36: 'home',
|
||||
37: 'left arrow',
|
||||
38: 'up arrow',
|
||||
39: 'right arrow',
|
||||
40: 'down arrow',
|
||||
41: 'select',
|
||||
42: 'print',
|
||||
43: 'execute',
|
||||
44: 'Print Screen',
|
||||
45: 'insert',
|
||||
46: 'delete',
|
||||
47: 'help',
|
||||
48: '0',
|
||||
49: '1',
|
||||
50: '2',
|
||||
51: '3',
|
||||
52: '4',
|
||||
53: '5',
|
||||
54: '6',
|
||||
55: '7',
|
||||
56: '8',
|
||||
57: '9',
|
||||
58: ':',
|
||||
59: 'semicolon (firefox), equals',
|
||||
60: '<',
|
||||
61: 'equals (firefox)',
|
||||
63: 'ß',
|
||||
64: '@ (firefox)',
|
||||
65: 'a',
|
||||
66: 'b',
|
||||
67: 'c',
|
||||
68: 'd',
|
||||
69: 'e',
|
||||
70: 'f',
|
||||
71: 'g',
|
||||
72: 'h',
|
||||
73: 'i',
|
||||
74: 'j',
|
||||
75: 'k',
|
||||
76: 'l',
|
||||
77: 'm',
|
||||
78: 'n',
|
||||
79: 'o',
|
||||
80: 'p',
|
||||
81: 'q',
|
||||
82: 'r',
|
||||
83: 's',
|
||||
84: 't',
|
||||
85: 'u',
|
||||
86: 'v',
|
||||
87: 'w',
|
||||
88: 'x',
|
||||
89: 'y',
|
||||
90: 'z',
|
||||
91: 'Windows Key / Left ⌘ / Chromebook Search key',
|
||||
92: 'right window key',
|
||||
93: 'Windows Menu / Right ⌘',
|
||||
95: 'sleep',
|
||||
96: 'numpad 0',
|
||||
97: 'numpad 1',
|
||||
98: 'numpad 2',
|
||||
99: 'numpad 3',
|
||||
100: 'numpad 4',
|
||||
101: 'numpad 5',
|
||||
102: 'numpad 6',
|
||||
103: 'numpad 7',
|
||||
104: 'numpad 8',
|
||||
105: 'numpad 9',
|
||||
106: 'multiply',
|
||||
107: 'add',
|
||||
108: 'numpad period (firefox)',
|
||||
109: 'subtract',
|
||||
110: 'decimal point',
|
||||
111: 'divide',
|
||||
112: 'f1',
|
||||
113: 'f2',
|
||||
114: 'f3',
|
||||
115: 'f4',
|
||||
116: 'f5',
|
||||
117: 'f6',
|
||||
118: 'f7',
|
||||
119: 'f8',
|
||||
120: 'f9',
|
||||
121: 'f10',
|
||||
122: 'f11',
|
||||
123: 'f12',
|
||||
124: 'f13',
|
||||
125: 'f14',
|
||||
126: 'f15',
|
||||
127: 'f16',
|
||||
128: 'f17',
|
||||
129: 'f18',
|
||||
130: 'f19',
|
||||
131: 'f20',
|
||||
132: 'f21',
|
||||
133: 'f22',
|
||||
134: 'f23',
|
||||
135: 'f24',
|
||||
136: 'f25',
|
||||
137: 'f26',
|
||||
138: 'f27',
|
||||
139: 'f28',
|
||||
140: 'f29',
|
||||
141: 'f30',
|
||||
142: 'f31',
|
||||
143: 'f32',
|
||||
144: 'num lock',
|
||||
145: 'scroll lock',
|
||||
151: 'airplane mode',
|
||||
160: '^',
|
||||
161: '!',
|
||||
162: '؛ (arabic semicolon)',
|
||||
163: '#',
|
||||
164: '$',
|
||||
165: 'ù',
|
||||
166: 'page backward',
|
||||
167: 'page forward',
|
||||
168: 'refresh',
|
||||
169: 'closing paren (AZERTY)',
|
||||
170: '*',
|
||||
171: '~ + * key',
|
||||
172: 'home key',
|
||||
173: 'minus (firefox), mute/unmute',
|
||||
174: 'decrease volume level',
|
||||
175: 'increase volume level',
|
||||
176: 'next',
|
||||
177: 'previous',
|
||||
178: 'stop',
|
||||
179: 'play/pause',
|
||||
180: 'e-mail',
|
||||
181: 'mute/unmute (firefox)',
|
||||
182: 'decrease volume level (firefox)',
|
||||
183: 'increase volume level (firefox)',
|
||||
186: 'semi-colon / ñ',
|
||||
187: 'equal sign',
|
||||
188: 'comma',
|
||||
189: 'dash',
|
||||
190: 'period',
|
||||
191: 'forward slash / ç',
|
||||
192: 'grave accent / ñ / æ / ö',
|
||||
193: '?, / or °',
|
||||
194: 'numpad period (chrome)',
|
||||
219: 'open bracket',
|
||||
220: 'back slash',
|
||||
221: 'close bracket / å',
|
||||
222: 'single quote / ø / ä',
|
||||
223: '`',
|
||||
224: 'left or right ⌘ key (firefox)',
|
||||
225: 'altgr',
|
||||
226: '< /git >, left back slash',
|
||||
230: 'GNOME Compose Key',
|
||||
231: 'ç',
|
||||
233: 'XF86Forward',
|
||||
234: 'XF86Back',
|
||||
235: 'non-conversion',
|
||||
240: 'alphanumeric',
|
||||
242: 'hiragana/katakana',
|
||||
243: 'half-width/full-width',
|
||||
244: 'kanji',
|
||||
251: 'unlock trackpad (Chrome/Edge)',
|
||||
255: 'toggle touchpad',
|
||||
};
|
||||
|
||||
const keyLocations = {
|
||||
0: 'General keys',
|
||||
1: 'Left-side modifier keys',
|
||||
2: 'Right-side modifier keys',
|
||||
3: 'Numpad',
|
||||
};
|
||||
|
||||
const spaceDescription = '(Space character)';
|
||||
|
||||
const body = document.querySelector('body');
|
||||
const mobileInputDiv = document.querySelector('.mobile-input');
|
||||
const canvas = document.querySelector('canvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
ctx.textBaseline = 'middle';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.font = '110px sans-serif';
|
||||
|
||||
let theme = 'dark';
|
||||
|
||||
// #endregion
|
||||
|
||||
// #region Main Methods
|
||||
|
||||
function createTable() {
|
||||
const tableBody = document.querySelector('.table-body');
|
||||
for (const key in keyCodes) {
|
||||
const row = document.createElement('tr');
|
||||
row.innerHTML += `<td>${key}</td>`;
|
||||
row.innerHTML += `<td>${keyCodes[key]}</td>`;
|
||||
tableBody.appendChild(row);
|
||||
}
|
||||
}
|
||||
|
||||
function toggleTable() {
|
||||
const table = document.querySelector('.table');
|
||||
|
||||
// Toggle main content and table
|
||||
document.querySelector('.wrap').classList.toggle('hide');
|
||||
document.querySelector('.keycode-display').classList.toggle('hide');
|
||||
table.classList.toggle('hide');
|
||||
|
||||
// If hidden, show back arrow
|
||||
const hidden = table.classList.contains('hide');
|
||||
document.querySelector('#table-button').textContent = hidden ? 'Table' : '⬅';
|
||||
}
|
||||
|
||||
function drawNumberToCanvas(number) {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.fillStyle = 'black';
|
||||
ctx.fillText(number, canvas.width / 2, canvas.height / 2, canvas.width);
|
||||
const data = canvas.toDataURL('image/png');
|
||||
|
||||
const link = document.querySelector("link[rel*='icon']");
|
||||
link.type = 'image/x-icon';
|
||||
link.href = data;
|
||||
}
|
||||
|
||||
function createNotification(text) {
|
||||
// eslint-disable-next-line no-undef
|
||||
new Noty({
|
||||
type: 'info',
|
||||
layout: 'topLeft',
|
||||
timeout: '1500',
|
||||
theme: 'metroui',
|
||||
progressBar: false,
|
||||
text,
|
||||
}).show();
|
||||
}
|
||||
|
||||
function createTextarea(text) {
|
||||
const textArea = document.createElement('textarea');
|
||||
|
||||
// Place in top-left corner of screen regardless of scroll position.
|
||||
textArea.style.position = 'fixed';
|
||||
textArea.style.top = 0;
|
||||
textArea.style.left = 0;
|
||||
textArea.style.width = '2em';
|
||||
textArea.style.height = '2em';
|
||||
|
||||
textArea.style.padding = 0;
|
||||
|
||||
// Clean up any borders.
|
||||
textArea.style.border = 'none';
|
||||
textArea.style.outline = 'none';
|
||||
textArea.style.boxShadow = 'none';
|
||||
|
||||
// Avoid flash of white box if rendered for any reason.
|
||||
textArea.style.background = 'transparent';
|
||||
|
||||
textArea.value = text;
|
||||
|
||||
document.body.appendChild(textArea);
|
||||
return textArea;
|
||||
}
|
||||
|
||||
/**
|
||||
* This function is used to copy a string to clipboard
|
||||
* @param {string} text
|
||||
*/
|
||||
function copyTextToClipboard(text) {
|
||||
if (window.clipboardData && window.clipboardData.setData) {
|
||||
// IE specific code path to prevent textarea being shown while dialog is visible.
|
||||
return window.clipboardData.setData('Text', text);
|
||||
} else if (document.queryCommandSupported && document.queryCommandSupported('copy')) {
|
||||
const textArea = createTextarea(text);
|
||||
textArea.focus();
|
||||
textArea.select();
|
||||
|
||||
try {
|
||||
const status = document.execCommand('copy'); // Security exception may be thrown by some browsers.
|
||||
if (status) {
|
||||
createNotification('Copied text to clipboard');
|
||||
}
|
||||
return status;
|
||||
} catch (ex) {
|
||||
console.warn('Copy to clipboard failed.', ex);
|
||||
return false;
|
||||
} finally {
|
||||
document.body.removeChild(textArea);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// #endregion
|
||||
|
||||
// #region Event Listeners
|
||||
|
||||
document.addEventListener('touchstart', e => {
|
||||
if (document.querySelector('.mobile-input input') !== null) return;
|
||||
if (e.target.tagName === 'BUTTON') return;
|
||||
|
||||
const input = document.createElement('input');
|
||||
input.setAttribute('type', 'text');
|
||||
mobileInputDiv.appendChild(input);
|
||||
|
||||
// For some reason, the focus is immediately lost unless there is a delay on setting the focus
|
||||
setTimeout(() => {
|
||||
input.focus();
|
||||
}, 100);
|
||||
});
|
||||
|
||||
body.onkeydown = function(e) {
|
||||
if (!e.metaKey) {
|
||||
e.preventDefault();
|
||||
}
|
||||
drawNumberToCanvas(e.keyCode);
|
||||
|
||||
// Main e.keyCode display
|
||||
document.querySelector('.keycode-display').innerHTML = e.keyCode;
|
||||
|
||||
// Show the cards with all
|
||||
const cards = document.querySelector('.cards');
|
||||
cards.classList.add('active');
|
||||
cards.classList.remove('hide');
|
||||
document.querySelector('.text-display').classList.add('hide');
|
||||
|
||||
// Check if Key_Values is Unidentified then redirect to docs
|
||||
let newKeyText = '';
|
||||
if (e.key != null && e.key === 'Unidentified') {
|
||||
newKeyText = '<a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values#Special_values" target="_blank" rel="noopener">Unidentified</a>';
|
||||
} else if (e.key === ' ') {
|
||||
newKeyText = `<span class="text-muted">${spaceDescription}</span>`;
|
||||
} else {
|
||||
newKeyText = e.key || '';
|
||||
}
|
||||
|
||||
// Check if location is Unidentified then redirect to docs
|
||||
let newLocationText = '';
|
||||
let newLocationFriendlyText = '';
|
||||
if (e.location == null) {
|
||||
newLocationFriendlyText = 'Unknown';
|
||||
} else if (!(e.location in keyLocations)) {
|
||||
newLocationFriendlyText = '<a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/location" target="_blank" rel="noopener">Other</a>';
|
||||
} else {
|
||||
newLocationFriendlyText = keyLocations[e.location];
|
||||
}
|
||||
|
||||
if (newLocationFriendlyText !== 'Unknown') {
|
||||
newLocationText = `${e.location} <span class="text-muted">(${newLocationFriendlyText})</span>`;
|
||||
} else {
|
||||
newLocationText = newLocationFriendlyText;
|
||||
}
|
||||
|
||||
// Check if code is Unidentified then redirect to docs
|
||||
let newCodeText = '';
|
||||
if (e.code != null && e.code === 'Unidentified') {
|
||||
newCodeText = '<a href="https://w3c.github.io/uievents-code/#table-key-code-special" target="_blank" rel="noopener">Unidentified</a>';
|
||||
} else {
|
||||
newCodeText = e.code || '';
|
||||
}
|
||||
|
||||
// Clear input if manually entered
|
||||
const mobileInput = document.querySelector('.mobile-input input');
|
||||
if (mobileInput !== null) {
|
||||
mobileInput.value = '';
|
||||
}
|
||||
|
||||
document.querySelector('.item-key .main-description').innerHTML = newKeyText;
|
||||
document.querySelector('.item-location .main-description').innerHTML = newLocationText;
|
||||
document.querySelector('.item-which .main-description').innerHTML = e.which || '';
|
||||
document.querySelector('.item-code .main-description').innerHTML = newCodeText;
|
||||
};
|
||||
|
||||
body.onkeyup = function(e) {
|
||||
if(e.keyCode == '44') {
|
||||
body.onkeydown(e);
|
||||
}
|
||||
}
|
||||
|
||||
const cardDivs = document.querySelectorAll('.card');
|
||||
Array.from(cardDivs).forEach(card => {
|
||||
card.addEventListener('click', onCardClick);
|
||||
});
|
||||
|
||||
function onCardClick() {
|
||||
const card = this;
|
||||
let description = card.querySelector('.card-main .main-description').innerHTML;
|
||||
description = description.replace(/<[^>]*>?/gm, '');
|
||||
if (description === spaceDescription) {
|
||||
description = ' ';
|
||||
}
|
||||
copyTextToClipboard(description);
|
||||
}
|
||||
|
||||
// #endregion
|
||||
|
||||
// #region Theme Methods
|
||||
|
||||
function queryMediaTheme() {
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
theme = e.matches ? 'dark' : 'light';
|
||||
updateTheme();
|
||||
});
|
||||
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
theme = 'dark';
|
||||
} else {
|
||||
theme = 'light';
|
||||
}
|
||||
}
|
||||
|
||||
function toggleTheme() {
|
||||
theme = (theme === 'light') ? 'dark' : 'light';
|
||||
updateTheme();
|
||||
}
|
||||
|
||||
function updateTheme() {
|
||||
const html = document.querySelector("html");
|
||||
const button = document.querySelector("#theme-button");
|
||||
|
||||
if (theme === 'light') {
|
||||
html.classList.add('light-theme');
|
||||
html.classList.remove('dark-theme');
|
||||
button.innerHTML = 'Dark theme';
|
||||
} else {
|
||||
html.classList.add('dark-theme');
|
||||
html.classList.remove('light-theme');
|
||||
button.innerHTML = 'Light theme';
|
||||
}
|
||||
}
|
||||
|
||||
// #endregion
|
||||
|
||||
// #region Init Methods
|
||||
|
||||
queryMediaTheme();
|
||||
updateTheme();
|
||||
createTable();
|
||||
drawNumberToCanvas('⌨️');
|
||||
|
||||
// #endregion
|
||||
@@ -0,0 +1,44 @@
|
||||
/**
|
||||
* The name of the current cache
|
||||
* @type {String}
|
||||
*/
|
||||
const CACHE_NAME = 'v6';
|
||||
|
||||
/**
|
||||
* Files to cache
|
||||
* @type {Array}
|
||||
*/
|
||||
const fileCache = [
|
||||
'/',
|
||||
'/index.html',
|
||||
'/scripts.js',
|
||||
'/style.css'
|
||||
];
|
||||
|
||||
this.oninstall = event => {
|
||||
event.waitUntil(
|
||||
caches.open(CACHE_NAME)
|
||||
.then(cache => cache.addAll(fileCache))
|
||||
);
|
||||
};
|
||||
|
||||
this.onfetch = event => {
|
||||
event.respondWith(
|
||||
caches.match(event.request)
|
||||
.then(response => {
|
||||
if (response) {
|
||||
return response;
|
||||
}
|
||||
|
||||
return fetch(event.request)
|
||||
.then(res => {
|
||||
const r = res.clone();
|
||||
caches.open(CACHE_NAME)
|
||||
.then(cache => {
|
||||
cache.put(event.request, r);
|
||||
});
|
||||
return res; // Don't wait for the request to cache
|
||||
});
|
||||
})
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,439 @@
|
||||
/* Themes */
|
||||
.light-theme {
|
||||
--background: #f2f4f8;
|
||||
--primary: #b9e9ff;
|
||||
--primary-border: #a2e2ff;
|
||||
|
||||
--text: #424242;
|
||||
--love-text: #d12026;
|
||||
--muted-text: #ccc;
|
||||
--context-text: #6597b2;
|
||||
|
||||
--button: #0091d4;
|
||||
|
||||
--card-background: #fff;
|
||||
--card-hover: rgba(220, 233, 255, 0.48);
|
||||
--table-separator: #dee2e6;
|
||||
}
|
||||
|
||||
.dark-theme {
|
||||
--background: #424242;
|
||||
--primary: #5b60ff;
|
||||
--primary-border: #4347b6;
|
||||
|
||||
--text: #f2f4f8;
|
||||
--love-text: #00e4c6;
|
||||
--context-text: #8effb1;
|
||||
|
||||
--button: var(--primary);
|
||||
|
||||
--card-background: #5f5f5f;
|
||||
--card-hover: rgba(47, 47, 47, 0.76);
|
||||
--table-separator: #828282;
|
||||
}
|
||||
|
||||
/* Reset */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
font-family: 'Montserrat', 'sans-serif';
|
||||
color: var(--text);
|
||||
overflow: hidden;
|
||||
background: var(--background);
|
||||
}
|
||||
.display {
|
||||
text-align: center;
|
||||
display: table;
|
||||
height: 100%;
|
||||
max-width: 1280px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.wrap {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
p {
|
||||
font-size: 100px; /* For lamers who don't support viewport sizing */
|
||||
font-size: 40vmin;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
p.text-display {
|
||||
display: inline-block;
|
||||
color: var(--text);
|
||||
font-size: 20px;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
margin: 20px auto;
|
||||
padding: 15px 20px;
|
||||
background: var(--card-background);
|
||||
border-radius: 5px;
|
||||
min-width: 24px;
|
||||
font-size: 26px;
|
||||
box-shadow: 0 14px 26px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
span.love {
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
span.love a {
|
||||
text-decoration: none;
|
||||
color: var(--love-text);
|
||||
}
|
||||
|
||||
.twitter-follow-toggle-button {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
.twitter-share-toggle-button {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
/*
|
||||
Added New Card layout Css
|
||||
*/
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: baseline;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.card {
|
||||
background: var(--card-background);
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
margin: 10px;
|
||||
flex: 1;
|
||||
max-width: calc(25% - 20px);
|
||||
box-shadow: 0 14px 26px rgba(0, 0, 0, 0.04);
|
||||
transition: all 0.3s ease-out;
|
||||
text-decoration: none;
|
||||
border: 1px solid rgba(0, 0, 0, 0.11);
|
||||
}
|
||||
|
||||
.item-location .card-main {
|
||||
padding: 9.5px;
|
||||
}
|
||||
|
||||
.item-location .main-description {
|
||||
font-size: 23px;
|
||||
}
|
||||
|
||||
.item-location .main-description span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
cursor: pointer;
|
||||
transform: translateY(-5px) scale(1.005) translateZ(0);
|
||||
box-shadow: 0 24px 36px rgba(0, 0, 0, 0.11),
|
||||
0 24px 46px var(--card-hover);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
border-bottom: 1px solid var(--primary-border);
|
||||
background-color: var(--primary);
|
||||
padding: 5px 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.more-info {
|
||||
height: 1.2em;
|
||||
width: 1.2em;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.more-info::before {
|
||||
content: '(?)';
|
||||
color: var(--context-text);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.deprecated-link {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 12px;
|
||||
color: var(--context-text);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.card-main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.main-description {
|
||||
font-size: 28px;
|
||||
text-align: center;
|
||||
min-height: 35px;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
font-size: 0.65em;
|
||||
color: var(--muted-text);
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 50%;
|
||||
table-layout: fixed;
|
||||
margin: auto;
|
||||
margin-top: 5vh;
|
||||
box-shadow: 0 14px 26px rgba(0, 0, 0, 0.04);
|
||||
border-radius: 5px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.table-body {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
height: 77vh;
|
||||
background: var(--card-background);
|
||||
}
|
||||
|
||||
.table thead tr {
|
||||
display: block;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.table thead {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
border-bottom: 1px solid var(--primary-border);
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
.table th,
|
||||
.table td {
|
||||
padding: 0.3rem 1rem;
|
||||
text-align: left;
|
||||
min-width: 100px;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.table th {
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
.table td {
|
||||
border-bottom: 1px solid var(--table-separator);
|
||||
}
|
||||
.table tbody tr:hover {
|
||||
background-color: rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
.fixed-buttons {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
.fixed-buttons :nth-child(1) {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.toggle-button {
|
||||
font: bold 16px arial;
|
||||
color: var(--button);
|
||||
border: 2px solid var(--button);
|
||||
background: transparent;
|
||||
border-radius: 5px;
|
||||
padding: 5px 10px;
|
||||
transition: all 0.3s ease-out;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.toggle-button:hover {
|
||||
transform: translateY(-2px) scale(1.005) translateZ(0);
|
||||
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.11),
|
||||
0 6px 9px var(--card-hover);
|
||||
}
|
||||
|
||||
.toggle-button:active {
|
||||
transform: translateY(2px) scale(0.995) translateZ(0);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.mobile-input input {
|
||||
width: calc(100% - 20px);
|
||||
height: 4rem;
|
||||
margin: 10px;
|
||||
font-size: 4rem;
|
||||
border: 1px solid #dadada;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 14px 26px rgba(0, 0, 0, 0.04);
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.mobile-input input:focus {
|
||||
outline: none;
|
||||
transform: translateY(-5px) scale(1.005) translateZ(0);
|
||||
box-shadow: 0 24px 36px rgba(0, 0, 0, 0.11),
|
||||
0 24px 46px var(--card-hover);
|
||||
}
|
||||
|
||||
@media (min-width: 601px) and (max-width: 980px) {
|
||||
body {
|
||||
overflow-y: auto;
|
||||
}
|
||||
.card {
|
||||
flex: 45%;
|
||||
max-width: 45%;
|
||||
}
|
||||
.display {
|
||||
width: 80%;
|
||||
}
|
||||
.main-description {
|
||||
min-height: 34px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
body {
|
||||
overflow-y: auto;
|
||||
}
|
||||
.card {
|
||||
flex: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
.display {
|
||||
width: 90%;
|
||||
}
|
||||
.table {
|
||||
width: 100%;
|
||||
margin-top: 4rem;
|
||||
}
|
||||
.table-body {
|
||||
height: 60vh;
|
||||
}
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none !important;
|
||||
}
|
||||
.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
/* Carbon Ads */
|
||||
#carbonads * {
|
||||
margin: initial;
|
||||
padding: initial;
|
||||
}
|
||||
|
||||
#carbonads {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
top: 1rem;
|
||||
left: 1rem;
|
||||
font-size: 11px;
|
||||
overflow: hidden;
|
||||
max-width: 130px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 1px hsla(0, 0%, 0%, .15);
|
||||
}
|
||||
|
||||
#carbonads a {
|
||||
text-decoration: none;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
#carbonads a:hover {
|
||||
color: #111;
|
||||
}
|
||||
|
||||
#carbonads .carbon-img {
|
||||
display: block;
|
||||
|
||||
line-height: 1;
|
||||
max-width: 130px;
|
||||
}
|
||||
|
||||
#carbonads .carbon-img img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
|
||||
width: 130px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#carbonads .carbon-text {
|
||||
display: block;
|
||||
padding: 8px 10px;
|
||||
|
||||
line-height: 1.35;
|
||||
text-align: left;
|
||||
background-color: hsl(0, 0%, 98%);
|
||||
}
|
||||
|
||||
#carbonads .carbon-poweredby {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
|
||||
font-size: 8px;
|
||||
font-weight: 600;
|
||||
line-height: 0;
|
||||
letter-spacing: .5px;
|
||||
text-transform: uppercase;
|
||||
background: repeating-linear-gradient(-45deg,
|
||||
transparent,
|
||||
transparent 5px,
|
||||
hsla(0, 0%, 0%, .025) 5px,
|
||||
hsla(0, 0%, 0%, .025) 10px) hsla(203, 11%, 95%, .4);
|
||||
background-color: hsl(0, 0%, 98%);
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 320px) and (max-width: 759px) {
|
||||
#carbonads {
|
||||
float: none;
|
||||
position: relative;
|
||||
margin: 4rem auto 0;
|
||||
|
||||
max-width: 330px;
|
||||
}
|
||||
|
||||
#carbonads .carbon-wrap {
|
||||
display: flex;
|
||||
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#carbonads .carbon-img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#carbonads .carbon-text {
|
||||
padding: 10px 10px 0 10px;
|
||||
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#carbonads .carbon-poweredby {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
text-align: center;
|
||||
border-radius: 0;
|
||||
border-top-left-radius: 3px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user