mirror of
https://github.com/letieu/terminal.css.git
synced 2026-03-15 02:04:30 -07:00
update showcase, effect
This commit is contained in:
letieu
30
index.css
30
index.css
@@ -52,7 +52,12 @@ body {
|
||||
color: var(--terminal-black);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0;
|
||||
font-weight: bold;
|
||||
line-height: 1.2;
|
||||
@@ -841,18 +846,34 @@ ol.content li::before {
|
||||
background: var(--primary);
|
||||
}
|
||||
|
||||
.progress.is-primary::-moz-progress-bar {
|
||||
background: var(--primary);
|
||||
}
|
||||
|
||||
.progress.is-danger::-webkit-progress-value {
|
||||
background: var(--danger);
|
||||
}
|
||||
|
||||
.progress.is-danger::-moz-progress-bar {
|
||||
background: var(--danger);
|
||||
}
|
||||
|
||||
.progress.is-success::-webkit-progress-value {
|
||||
background: var(--success);
|
||||
}
|
||||
|
||||
.progress.is-success::-moz-progress-bar {
|
||||
background: var(--success);
|
||||
}
|
||||
|
||||
.progress.is-warning::-webkit-progress-value {
|
||||
background: var(--warning);
|
||||
}
|
||||
|
||||
.progress.is-warning::-moz-progress-bar {
|
||||
background: var(--warning);
|
||||
}
|
||||
|
||||
/* Progress bar alternative (for divs) */
|
||||
.progress-bar {
|
||||
height: 100%;
|
||||
@@ -1175,10 +1196,12 @@ ol.content li::before {
|
||||
}
|
||||
|
||||
@keyframes cursor-blink {
|
||||
0%, 50% {
|
||||
0%,
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
51%, 100% {
|
||||
51%,
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@@ -1198,4 +1221,3 @@ kbd {
|
||||
padding: 2px 6px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
81
index.html
81
index.html
@@ -25,9 +25,7 @@
|
||||
<div class="w-3 h-3 rounded-full bg-green-500"></div>
|
||||
</div>
|
||||
<div class="has-text-muted text-sm font-bold">dev@localhost:~/</div>
|
||||
<div class="has-text-muted text-xs" style="opacity: 0.5">
|
||||
v0.0.1
|
||||
</div>
|
||||
<div class="has-text-muted text-xs" style="opacity: 0.5">v0.0.1</div>
|
||||
</div>
|
||||
|
||||
<!-- BODY -->
|
||||
@@ -87,37 +85,27 @@
|
||||
Monitoring and analytics for your terminal
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Title Colors -->
|
||||
<div class="mt-6">
|
||||
<h4 class="has-text-muted text-sm mb-3">Title with Colors</h4>
|
||||
<h4 class="has-text-muted text-sm mb-3">Colors</h4>
|
||||
<div class="space-y-3">
|
||||
<h3 class="title is-4 has-text-primary">Primary Title</h3>
|
||||
<h3 class="title is-4 has-text-danger">Danger Title</h3>
|
||||
<h3 class="title is-4 has-text-success">Success Title</h3>
|
||||
<h3 class="title is-4 has-text-warning">Warning Title</h3>
|
||||
<h3 class="title is-4 has-text-info">Info Title</h3>
|
||||
<h3 class="title is-4 has-text-muted">Muted Title</h3>
|
||||
<h3 class="has-text-primary">Primary Title</h3>
|
||||
<h3 class="has-text-danger">Danger Title</h3>
|
||||
<h3 class="has-text-success">Success Title</h3>
|
||||
<h3 class="has-text-warning">Warning Title</h3>
|
||||
<h3 class="has-text-info">Info Title</h3>
|
||||
<h3 class="has-text-muted">Muted Title</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Subtitle Colors -->
|
||||
<!-- Effects -->
|
||||
<div class="mt-6">
|
||||
<h4 class="has-text-muted text-sm mb-3">Subtitle with Colors</h4>
|
||||
<div class="space-y-2">
|
||||
<p class="subtitle is-5 has-text-primary">
|
||||
Primary description text
|
||||
</p>
|
||||
<p class="subtitle is-5 has-text-danger">
|
||||
Danger description text
|
||||
</p>
|
||||
<p class="subtitle is-5 has-text-success">
|
||||
Success description text
|
||||
</p>
|
||||
<p class="subtitle is-5 has-text-warning">
|
||||
Warning description text
|
||||
</p>
|
||||
<p class="subtitle is-5 has-text-info">Info description text</p>
|
||||
<h4 class="has-text-muted text-sm mb-3">Effects</h4>
|
||||
<div class="space-y-3">
|
||||
<p class="has-terminal-glow">Terminal glow effect</p>
|
||||
<p class="has-terminal-cursor">Blinking cursor</p>
|
||||
<hr />
|
||||
<p class="has-text-muted text-sm">Divider separator</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -551,21 +539,44 @@
|
||||
<span class="has-text-muted text-sm">Download Progress</span>
|
||||
<span class="has-text-primary text-sm font-bold">75%</span>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar" style="width: 75%"></div>
|
||||
</div>
|
||||
<progress
|
||||
class="progress is-primary"
|
||||
value="75"
|
||||
max="100"
|
||||
></progress>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex justify-between mb-2">
|
||||
<span class="has-text-muted text-sm">CPU Usage</span>
|
||||
<span class="has-text-warning text-sm font-bold">88%</span>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div
|
||||
class="progress-bar"
|
||||
style="width: 88%; background: var(--warning)"
|
||||
></div>
|
||||
<progress
|
||||
class="progress is-warning"
|
||||
value="88"
|
||||
max="100"
|
||||
></progress>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex justify-between mb-2">
|
||||
<span class="has-text-muted text-sm">Upload</span>
|
||||
<span class="has-text-success text-sm font-bold">100%</span>
|
||||
</div>
|
||||
<progress
|
||||
class="progress is-success"
|
||||
value="100"
|
||||
max="100"
|
||||
></progress>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex justify-between mb-2">
|
||||
<span class="has-text-muted text-sm">Disk Usage</span>
|
||||
<span class="has-text-danger text-sm font-bold">30%</span>
|
||||
</div>
|
||||
<progress
|
||||
class="progress is-danger"
|
||||
value="30"
|
||||
max="100"
|
||||
></progress>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -74,8 +74,8 @@
|
||||
<button class="button is-danger">Danger</button>
|
||||
<button class="button is-success">Success</button>
|
||||
<button class="button is-warning">Warning</button>
|
||||
<button class="button is-outlined">Outlined</button>
|
||||
<button class="button is-ghost">Ghost</button>
|
||||
<button class="button is-info">Info</button>
|
||||
<button class="button is-info is-loading">Loading</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -85,9 +85,11 @@
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="tag is-primary">v0.0.1</span>
|
||||
<span class="tag is-success">Active</span>
|
||||
<span class="tag is-danger is-active">Error</span>
|
||||
<span class="tag is-warning is-active">Beta</span>
|
||||
<span class="tag is-info">New</span>
|
||||
<span class="tag is-danger">Error</span>
|
||||
<span class="tag is-warning">Beta</span>
|
||||
<span class="tag is-info">New</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -132,15 +134,19 @@
|
||||
<div class="showcase-section">
|
||||
<h3 class="title is-5 mb-4 has-text-primary">Progress</h3>
|
||||
<div class="space-y-3">
|
||||
<progress class="progress is-primary" value="75" max="100">
|
||||
75%
|
||||
</progress>
|
||||
<div class="flex justify-between mb-2">
|
||||
<span class="has-text-muted text-sm">Disk Usage</span>
|
||||
<span class="has-text-danger text-sm font-bold">30%</span>
|
||||
</div>
|
||||
<progress class="progress is-success" value="100" max="100">
|
||||
100%
|
||||
</progress>
|
||||
<progress class="progress is-danger" value="30" max="100">
|
||||
30%
|
||||
</progress>
|
||||
<progress class="progress is-primary" value="75" max="100">
|
||||
75%
|
||||
</progress>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user