experiment: svelte ui
This commit is contained in:
@@ -1,79 +1,78 @@
|
||||
<script lang="ts">
|
||||
import logo from './assets/images/logo-universal.png'
|
||||
import {Greet} from '../wailsjs/go/main/App.js'
|
||||
<!-- App.svelte -->
|
||||
<script>
|
||||
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 name: string
|
||||
|
||||
function greet(): void {
|
||||
Greet(name).then(result => resultText = result)
|
||||
}
|
||||
let activeTab = 'overview';
|
||||
let status = 'Status';
|
||||
let uptime = '0s';
|
||||
let qrCodesFound = 0;
|
||||
let isOnline = false;
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<img alt="Wails logo" id="logo" src="{logo}">
|
||||
<div class="result" id="result">{resultText}</div>
|
||||
<div class="input-box" id="input">
|
||||
<input autocomplete="off" bind:value={name} class="input" id="name" type="text"/>
|
||||
<button class="btn" on:click={greet}>Greet</button>
|
||||
</div>
|
||||
<div class="app-window">
|
||||
<Header {isOnline} />
|
||||
|
||||
<Tabs bind:activeTab />
|
||||
|
||||
<main class="main-layout">
|
||||
{#if activeTab === 'overview'}
|
||||
<Overview {status} {uptime} {qrCodesFound} />
|
||||
{:else}
|
||||
<Settings />
|
||||
{/if}
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<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 {
|
||||
display: block;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
margin: auto;
|
||||
padding: 10% 0 0;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-origin: content-box;
|
||||
--spacing-xs: 4px;
|
||||
--spacing-sm: 8px;
|
||||
--spacing-md: 12px;
|
||||
--spacing-lg: 16px;
|
||||
--spacing-xl: 24px;
|
||||
|
||||
--border-radius-sm: 4px;
|
||||
--border-radius-md: 6px;
|
||||
--border-radius-lg: 8px;
|
||||
|
||||
--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;
|
||||
line-height: 20px;
|
||||
margin: 1.5rem auto;
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.input-box .btn {
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
border-radius: 3px;
|
||||
border: none;
|
||||
margin: 0 0 0 20px;
|
||||
padding: 0 8px;
|
||||
cursor: pointer;
|
||||
.app-window {
|
||||
border-radius: var(--border-radius-md);
|
||||
background-color: var(--bg-primary);
|
||||
height: 100vh;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.input-box .btn:hover {
|
||||
background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
|
||||
color: #333333;
|
||||
.main-layout {
|
||||
padding: var(--spacing-lg);
|
||||
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>
|
||||
|
||||
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 {
|
||||
background-color: rgba(27, 38, 54, 1);
|
||||
text-align: center;
|
||||
color: white;
|
||||
line-height: 1.15; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the margin in all browsers.
|
||||
*/
|
||||
|
||||
body {
|
||||
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";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local(""),
|
||||
url("assets/fonts/nunito-v16-latin-regular.woff2") format("woff2");
|
||||
/**
|
||||
* Render the `main` element consistently in IE.
|
||||
*/
|
||||
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#app {
|
||||
height: 100vh;
|
||||
text-align: center;
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Firefox, and Safari.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 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