Ark/terminal.css
1
0
Fork 0
mirror of https://github.com/letieu/terminal.css.git synced 2026-03-15 02:04:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

update showcase, effect

Browse Source
This commit is contained in:
letieu
2025-12-09 01:22:07 +07:00
parent 49d4ffc1ba
commit ca6a6d6621
3 changed files with 84 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
index.css
View File

@@ -52,7 +52,12 @@ body {
color: var(--terminal-black); color: var(--terminal-black);
} }
h1, h2, h3, h4, h5, h6 { h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0; margin: 0;
font-weight: bold; font-weight: bold;
line-height: 1.2; line-height: 1.2;
@@ -841,18 +846,34 @@ ol.content li::before {
background: var(--primary); background: var(--primary);
} }
.progress.is-primary::-moz-progress-bar {
background: var(--primary);
}
.progress.is-danger::-webkit-progress-value { .progress.is-danger::-webkit-progress-value {
background: var(--danger); background: var(--danger);
} }
.progress.is-danger::-moz-progress-bar {
background: var(--danger);
}
.progress.is-success::-webkit-progress-value { .progress.is-success::-webkit-progress-value {
background: var(--success); background: var(--success);
} }
.progress.is-success::-moz-progress-bar {
background: var(--success);
}
.progress.is-warning::-webkit-progress-value { .progress.is-warning::-webkit-progress-value {
background: var(--warning); background: var(--warning);
} }
.progress.is-warning::-moz-progress-bar {
background: var(--warning);
}
/* Progress bar alternative (for divs) */ /* Progress bar alternative (for divs) */
.progress-bar { .progress-bar {
height: 100%; height: 100%;
@@ -1175,10 +1196,12 @@ ol.content li::before {
} }
@keyframes cursor-blink { @keyframes cursor-blink {
0%, 50% { 0%,
50% {
opacity: 1; opacity: 1;
} }
51%, 100% { 51%,
100% {
opacity: 0; opacity: 0;
} }
} }
@@ -1198,4 +1221,3 @@ kbd {
padding: 2px 6px; padding: 2px 6px;
white-space: nowrap; white-space: nowrap;
} }

81
index.html
View File

@@ -25,9 +25,7 @@
<div class="w-3 h-3 rounded-full bg-green-500"></div> <div class="w-3 h-3 rounded-full bg-green-500"></div>
</div> </div>
<div class="has-text-muted text-sm font-bold">dev@localhost:~/</div> <div class="has-text-muted text-sm font-bold">dev@localhost:~/</div>
<div class="has-text-muted text-xs" style="opacity: 0.5"> <div class="has-text-muted text-xs" style="opacity: 0.5">v0.0.1</div>
v0.0.1
</div>
</div> </div>
<!-- BODY --> <!-- BODY -->
@@ -87,37 +85,27 @@
Monitoring and analytics for your terminal Monitoring and analytics for your terminal
</p> </p>
</div> </div>
<!-- Title Colors --> <!-- Title Colors -->
<div class="mt-6"> <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"> <div class="space-y-3">
<h3 class="title is-4 has-text-primary">Primary Title</h3> <h3 class="has-text-primary">Primary Title</h3>
<h3 class="title is-4 has-text-danger">Danger Title</h3> <h3 class="has-text-danger">Danger Title</h3>
<h3 class="title is-4 has-text-success">Success Title</h3> <h3 class="has-text-success">Success Title</h3>
<h3 class="title is-4 has-text-warning">Warning Title</h3> <h3 class="has-text-warning">Warning Title</h3>
<h3 class="title is-4 has-text-info">Info Title</h3> <h3 class="has-text-info">Info Title</h3>
<h3 class="title is-4 has-text-muted">Muted Title</h3> <h3 class="has-text-muted">Muted Title</h3>
</div> </div>
</div> </div>
<!-- Subtitle Colors --> <!-- Effects -->
<div class="mt-6"> <div class="mt-6">
<h4 class="has-text-muted text-sm mb-3">Subtitle with Colors</h4> <h4 class="has-text-muted text-sm mb-3">Effects</h4>
<div class="space-y-2"> <div class="space-y-3">
<p class="subtitle is-5 has-text-primary"> <p class="has-terminal-glow">Terminal glow effect</p>
Primary description text <p class="has-terminal-cursor">Blinking cursor</p>
</p> <hr />
<p class="subtitle is-5 has-text-danger"> <p class="has-text-muted text-sm">Divider separator</p>
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>
</div> </div>
</div> </div>
</section> </section>
@@ -551,21 +539,44 @@
<span class="has-text-muted text-sm">Download Progress</span> <span class="has-text-muted text-sm">Download Progress</span>
<span class="has-text-primary text-sm font-bold">75%</span> <span class="has-text-primary text-sm font-bold">75%</span>
</div> </div>
<div class="progress"> <progress
<div class="progress-bar" style="width: 75%"></div> class="progress is-primary"
</div> value="75"
max="100"
></progress>
</div> </div>
<div> <div>
<div class="flex justify-between mb-2"> <div class="flex justify-between mb-2">
<span class="has-text-muted text-sm">CPU Usage</span> <span class="has-text-muted text-sm">CPU Usage</span>
<span class="has-text-warning text-sm font-bold">88%</span> <span class="has-text-warning text-sm font-bold">88%</span>
</div> </div>
<div class="progress"> <progress
<div class="progress is-warning"
class="progress-bar" value="88"
style="width: 88%; background: var(--warning)" max="100"
></div> ></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> </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>
</div> </div>

18
showcase.html
View File

@@ -74,8 +74,8 @@
<button class="button is-danger">Danger</button> <button class="button is-danger">Danger</button>
<button class="button is-success">Success</button> <button class="button is-success">Success</button>
<button class="button is-warning">Warning</button> <button class="button is-warning">Warning</button>
<button class="button is-outlined">Outlined</button> <button class="button is-info">Info</button>
<button class="button is-ghost">Ghost</button> <button class="button is-info is-loading">Loading</button>
</div> </div>
</div> </div>
@@ -85,9 +85,11 @@
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<span class="tag is-primary">v0.0.1</span> <span class="tag is-primary">v0.0.1</span>
<span class="tag is-success">Active</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-danger">Error</span>
<span class="tag is-warning">Beta</span> <span class="tag is-warning">Beta</span>
<span class="tag is-info">New</span>
</div> </div>
</div> </div>
@@ -132,15 +134,19 @@
<div class="showcase-section"> <div class="showcase-section">
<h3 class="title is-5 mb-4 has-text-primary">Progress</h3> <h3 class="title is-5 mb-4 has-text-primary">Progress</h3>
<div class="space-y-3"> <div class="space-y-3">
<progress class="progress is-primary" value="75" max="100"> <div class="flex justify-between mb-2">
75% <span class="has-text-muted text-sm">Disk Usage</span>
</progress> <span class="has-text-danger text-sm font-bold">30%</span>
</div>
<progress class="progress is-success" value="100" max="100"> <progress class="progress is-success" value="100" max="100">
100% 100%
</progress> </progress>
<progress class="progress is-danger" value="30" max="100"> <progress class="progress is-danger" value="30" max="100">
30% 30%
</progress> </progress>
<progress class="progress is-primary" value="75" max="100">
75%
</progress>
</div> </div>
</div> </div>