experiment: svelte ui
This commit is contained in:
@@ -1,79 +1,78 @@
|
|||||||
<script lang="ts">
|
<!-- App.svelte -->
|
||||||
import logo from './assets/images/logo-universal.png'
|
<script>
|
||||||
import {Greet} from '../wailsjs/go/main/App.js'
|
import Header from './components/Header.svelte';
|
||||||
|
import Tabs from './components/Tabs.svelte';
|
||||||
|
import Overview from './components/Overview.svelte';
|
||||||
|
import Settings from './components/Settings.svelte';
|
||||||
|
|
||||||
let resultText: string = "Please enter your name below 👇"
|
let activeTab = 'overview';
|
||||||
let name: string
|
let status = 'Status';
|
||||||
|
let uptime = '0s';
|
||||||
function greet(): void {
|
let qrCodesFound = 0;
|
||||||
Greet(name).then(result => resultText = result)
|
let isOnline = false;
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<main>
|
<div class="app-window">
|
||||||
<img alt="Wails logo" id="logo" src="{logo}">
|
<Header {isOnline} />
|
||||||
<div class="result" id="result">{resultText}</div>
|
|
||||||
<div class="input-box" id="input">
|
<Tabs bind:activeTab />
|
||||||
<input autocomplete="off" bind:value={name} class="input" id="name" type="text"/>
|
|
||||||
<button class="btn" on:click={greet}>Greet</button>
|
<main class="main-layout">
|
||||||
</div>
|
{#if activeTab === 'overview'}
|
||||||
|
<Overview {status} {uptime} {qrCodesFound} />
|
||||||
|
{:else}
|
||||||
|
<Settings />
|
||||||
|
{/if}
|
||||||
</main>
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
:root {
|
||||||
|
--bg-primary: #1c1c1c;
|
||||||
|
--bg-secondary: #121212;
|
||||||
|
--bg-header: #811A10;
|
||||||
|
--accent-primary: #a02c2c;
|
||||||
|
--accent-secondary: #7a2727;
|
||||||
|
--text-primary: #ebebeb;
|
||||||
|
--text-secondary: rgba(235, 235, 235, 0.7);
|
||||||
|
--text-dim: rgba(235, 235, 235, 0.5);
|
||||||
|
--border-color: rgba(0, 0, 0, 0.26);
|
||||||
|
--success: #a0662c;
|
||||||
|
--warning: #2ca02c;
|
||||||
|
--error: #2ca0a0;
|
||||||
|
|
||||||
#logo {
|
--spacing-xs: 4px;
|
||||||
display: block;
|
--spacing-sm: 8px;
|
||||||
width: 50%;
|
--spacing-md: 12px;
|
||||||
height: 50%;
|
--spacing-lg: 16px;
|
||||||
margin: auto;
|
--spacing-xl: 24px;
|
||||||
padding: 10% 0 0;
|
|
||||||
background-position: center;
|
--border-radius-sm: 4px;
|
||||||
background-repeat: no-repeat;
|
--border-radius-md: 6px;
|
||||||
background-size: 100% 100%;
|
--border-radius-lg: 8px;
|
||||||
background-origin: content-box;
|
|
||||||
|
--shadow-sm: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
|
||||||
|
--shadow-md: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
|
||||||
|
--shadow-lg: 0 14px 14px rgba(0, 0, 0, 0.25), 0 10px 5px rgba(0, 0, 0, 0.22);
|
||||||
}
|
}
|
||||||
|
|
||||||
.result {
|
* {
|
||||||
height: 20px;
|
margin: 0;
|
||||||
line-height: 20px;
|
padding: 0;
|
||||||
margin: 1.5rem auto;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-box .btn {
|
.app-window {
|
||||||
width: 60px;
|
border-radius: var(--border-radius-md);
|
||||||
height: 30px;
|
background-color: var(--bg-primary);
|
||||||
line-height: 30px;
|
height: 100vh;
|
||||||
border-radius: 3px;
|
color: var(--text-primary);
|
||||||
border: none;
|
|
||||||
margin: 0 0 0 20px;
|
|
||||||
padding: 0 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-box .btn:hover {
|
.main-layout {
|
||||||
background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
|
padding: var(--spacing-lg);
|
||||||
color: #333333;
|
overflow: hidden;
|
||||||
|
height: auto;
|
||||||
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-box .input {
|
|
||||||
border: none;
|
|
||||||
border-radius: 3px;
|
|
||||||
outline: none;
|
|
||||||
height: 30px;
|
|
||||||
line-height: 30px;
|
|
||||||
padding: 0 10px;
|
|
||||||
background-color: rgba(240, 240, 240, 1);
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-box .input:hover {
|
|
||||||
border: none;
|
|
||||||
background-color: rgba(255, 255, 255, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-box .input:focus {
|
|
||||||
border: none;
|
|
||||||
background-color: rgba(255, 255, 255, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
82
frontend/src/components/Header.svelte
Normal file
82
frontend/src/components/Header.svelte
Normal file
@@ -0,0 +1,82 @@
|
|||||||
|
<!-- components/Header.svelte -->
|
||||||
|
<script>
|
||||||
|
export let isOnline = true;
|
||||||
|
export let title = "QRminator";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<header class="headerbar">
|
||||||
|
<h1 class="header-title">{title}</h1>
|
||||||
|
<div class="header-status">
|
||||||
|
{#if isOnline}
|
||||||
|
<span>Online</span>
|
||||||
|
{:else}
|
||||||
|
<span class="text-dim">Offline</span>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
<div class="header-controls">
|
||||||
|
<button class="control-button toggle">
|
||||||
|
<div class="toggle-indicator"></div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.headerbar {
|
||||||
|
background-color: var(--bg-header);
|
||||||
|
padding: var(--spacing-md) var(--spacing-lg);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-title {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-status {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-controls {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-button {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-button:hover {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-button.toggle {
|
||||||
|
background-color: var(--accent-primary);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-indicator {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
background-color: var(--bg-primary);
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
57
frontend/src/components/Overview.svelte
Normal file
57
frontend/src/components/Overview.svelte
Normal file
@@ -0,0 +1,57 @@
|
|||||||
|
<!-- components/Overview.svelte -->
|
||||||
|
<script>
|
||||||
|
import StatusPanel from './StatusPanel.svelte';
|
||||||
|
import Terminal from './Terminal.svelte';
|
||||||
|
|
||||||
|
export let status = 'Looking for QR-codes';
|
||||||
|
export let uptime = '1h 12m 15s';
|
||||||
|
export let qrCodesFound = 12;
|
||||||
|
|
||||||
|
const terminalLines = [
|
||||||
|
'Window()',
|
||||||
|
'[Fx] INVOKE main.main.func1()',
|
||||||
|
'[Fx] BEFORE RUN provide: git.weirdcat.su/weirdcat/auto-attendance/internal/ui.NewBuilder()',
|
||||||
|
'[Fx] RUN provide: git.weirdcat.su/weirdcat/auto-attendance/internal/ui.NewBuilder() in',
|
||||||
|
'46.723905ms',
|
||||||
|
'[Fx] BEFORE RUN provide: git.weirdcat.su/weirdcat/auto-attendance/internal/ui.NewMainWindow()',
|
||||||
|
'[Fx] RUN provide: git.weirdcat.su/weirdcat/auto-attendance/internal/ui.NewMainWindow()',
|
||||||
|
'in 11.655448ms',
|
||||||
|
'[Fx] RUNNING',
|
||||||
|
' '
|
||||||
|
];
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="overview-layout">
|
||||||
|
<div class="grid-layout">
|
||||||
|
<!-- QR Code Section -->
|
||||||
|
<!-- <div class="qr-container"> -->
|
||||||
|
<!-- <div class="qr-placeholder"> -->
|
||||||
|
<!-- QR Code Display -->
|
||||||
|
<!-- </div> -->
|
||||||
|
<!-- </div> -->
|
||||||
|
|
||||||
|
<!-- Status Panel -->
|
||||||
|
<StatusPanel {status} {uptime} {qrCodesFound} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Terminal Output -->
|
||||||
|
<Terminal {terminalLines} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.overview-layout {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--spacing-lg);
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-layout {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--spacing-xl);
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
15
frontend/src/components/Settings.svelte
Normal file
15
frontend/src/components/Settings.svelte
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
<!-- components/Settings.svelte -->
|
||||||
|
<script>
|
||||||
|
// Settings logic will go here
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="settings-content">
|
||||||
|
<h2>Settings</h2>
|
||||||
|
<p>Settings interface to be implemented...</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.settings-content {
|
||||||
|
padding: var(--spacing-lg);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
70
frontend/src/components/StatusPanel.svelte
Normal file
70
frontend/src/components/StatusPanel.svelte
Normal file
@@ -0,0 +1,70 @@
|
|||||||
|
<!-- components/StatusPanel.svelte -->
|
||||||
|
<script>
|
||||||
|
export let status = '';
|
||||||
|
export let uptime = '';
|
||||||
|
export let qrCodesFound = 0;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="status-panel">
|
||||||
|
<div class="status-row">
|
||||||
|
<span class="status-label">Status</span>
|
||||||
|
<span class="status-value">{status}</span>
|
||||||
|
</div>
|
||||||
|
<div class="status-row">
|
||||||
|
<span class="status-label">Uptime</span>
|
||||||
|
<span class="status-value">{uptime}</span>
|
||||||
|
</div>
|
||||||
|
<div class="status-row">
|
||||||
|
<span class="status-label">QR-codes found</span>
|
||||||
|
<span class="status-value">{qrCodesFound}</span>
|
||||||
|
</div>
|
||||||
|
<div class="status-row">
|
||||||
|
<span class="status-label">Link</span>
|
||||||
|
<span class="status-value link">Click here! (2 s)</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.status-panel {
|
||||||
|
background-color: var(--bg-primary);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: var(--border-radius-sm);
|
||||||
|
padding: var(--spacing-lg);
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
padding: var(--spacing-sm) 0;
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-row:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-row > *:nth-child(2) {
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-label {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-value {
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-value.link {
|
||||||
|
color: var(--accent-primary);
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-value.link:hover {
|
||||||
|
color: #bd6b6b;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
57
frontend/src/components/Tabs.svelte
Normal file
57
frontend/src/components/Tabs.svelte
Normal file
@@ -0,0 +1,57 @@
|
|||||||
|
<!-- components/Tabs.svelte -->
|
||||||
|
<script>
|
||||||
|
export let activeTab = 'overview';
|
||||||
|
export let tabs = [
|
||||||
|
{ id: 'overview', label: 'Overview' },
|
||||||
|
{ id: 'settings', label: 'Settings' }
|
||||||
|
];
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="tabs-container">
|
||||||
|
{#each tabs as tab}
|
||||||
|
<button
|
||||||
|
class="tab {activeTab === tab.id ? 'active' : ''}"
|
||||||
|
on:click={() => activeTab = tab.id}
|
||||||
|
>
|
||||||
|
{tab.label}
|
||||||
|
</button>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.tabs-container {
|
||||||
|
background-color: var(--bg-primary);
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab {
|
||||||
|
flex: 1;
|
||||||
|
padding: var(--spacing-md) var(--spacing-lg);
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
transition: color 0.2s ease;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab:hover {
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab.active {
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab.active::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 2px;
|
||||||
|
background-color: var(--accent-primary);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
50
frontend/src/components/Terminal.svelte
Normal file
50
frontend/src/components/Terminal.svelte
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
<!-- components/Terminal.svelte -->
|
||||||
|
<script>
|
||||||
|
export let terminalLines = [];
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="terminal">
|
||||||
|
<div class="terminal-header">Output</div>
|
||||||
|
<div class="terminal-content">
|
||||||
|
{#each terminalLines as line}
|
||||||
|
<div class="terminal-line">{line}</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.terminal {
|
||||||
|
background-color: var(--bg-primary);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: var(--border-radius-sm);
|
||||||
|
overflow: hidden;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-header {
|
||||||
|
background-color: var(--bg-secondary);
|
||||||
|
padding: var(--spacing-sm) var(--spacing-md);
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-content {
|
||||||
|
padding: var(--spacing-md);
|
||||||
|
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
line-height: 1.4;
|
||||||
|
color: var(--text-primary);
|
||||||
|
max-height: 200px;
|
||||||
|
overflow-y: auto;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-line {
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-line:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,26 +1,351 @@
|
|||||||
|
|
||||||
|
/*! normalize.css v8.0.1 | 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 iOS.
|
||||||
|
*/
|
||||||
|
|
||||||
html {
|
html {
|
||||||
background-color: rgba(27, 38, 54, 1);
|
line-height: 1.15; /* 1 */
|
||||||
text-align: center;
|
-webkit-text-size-adjust: 100%; /* 2 */
|
||||||
color: white;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Sections
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the margin in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: white;
|
|
||||||
font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
|
|
||||||
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
|
|
||||||
sans-serif;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
/**
|
||||||
font-family: "Nunito";
|
* Render the `main` element consistently in IE.
|
||||||
font-style: normal;
|
*/
|
||||||
font-weight: 400;
|
|
||||||
src: local(""),
|
main {
|
||||||
url("assets/fonts/nunito-v16-latin-regular.woff2") format("woff2");
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
#app {
|
/**
|
||||||
height: 100vh;
|
* Correct the font size and margin on `h1` elements within `section` and
|
||||||
text-align: center;
|
* `article` contexts in Chrome, Firefox, and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2em;
|
||||||
|
margin: 0.67em 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Grouping content
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the gray background on active links in IE 10.
|
||||||
|
*/
|
||||||
|
|
||||||
|
a {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Remove the bottom border in Chrome 57-
|
||||||
|
* 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 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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 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
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the border on images inside links in IE 10.
|
||||||
|
*/
|
||||||
|
|
||||||
|
img {
|
||||||
|
border-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Forms
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Change the font styles in all browsers.
|
||||||
|
* 2. Remove the margin in Firefox and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
input,
|
||||||
|
optgroup,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
font-family: inherit; /* 1 */
|
||||||
|
font-size: 100%; /* 1 */
|
||||||
|
line-height: 1.15; /* 1 */
|
||||||
|
margin: 0; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct the inability to style clickable types in iOS and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
[type="button"],
|
||||||
|
[type="reset"],
|
||||||
|
[type="submit"] {
|
||||||
|
-webkit-appearance: button;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct the padding in Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
padding: 0.35em 0.75em 0.625em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||||
|
*/
|
||||||
|
|
||||||
|
progress {
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the default vertical scrollbar in IE 10+.
|
||||||
|
*/
|
||||||
|
|
||||||
|
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 in Chrome and Safari on macOS.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[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 Edge, IE 10+, and Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
details {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Add the correct display in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
summary {
|
||||||
|
display: list-item;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Misc
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct display in IE 10+.
|
||||||
|
*/
|
||||||
|
|
||||||
|
template {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct display in IE 10.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[hidden] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user