mirror of
https://github.com/aljazceru/btcpayserver.git
synced 2025-12-28 19:34:23 +01:00
Update bootstrap and kitchensink
Discourage use of explicit light/dark classes, because they interfere with the approach of having parallel light/dark themes.
This commit is contained in:
Dennis Reimann
@@ -39,7 +39,7 @@
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="alert alert-info" role="alert">
|
||||
Note: this is intended to be used as a quick overview/reference. Visit <a href="https://getbootstrap.com/docs/">https://getbootstrap.com/docs/</a> for full documentation!
|
||||
Note: this is intended to be used as a quick overview/reference. Visit <a href="https://getbootstrap.com/docs/" class="alert-link">https://getbootstrap.com/docs/</a> for full documentation!
|
||||
</div>
|
||||
|
||||
<h1>Headings</h1><br><h1>h1. Bootstrap heading</h1><br>
|
||||
@@ -512,12 +512,6 @@ To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
|
||||
<div class="alert alert-info" role="alert">
|
||||
A simple info alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-light" role="alert">
|
||||
A simple light alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-dark" role="alert">
|
||||
A simple dark alert—check it out!
|
||||
</div>
|
||||
|
||||
<br><br><hr><br><br>
|
||||
|
||||
@@ -539,12 +533,6 @@ To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
|
||||
<div class="alert alert-info" role="alert">
|
||||
A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
|
||||
</div>
|
||||
<div class="alert alert-light" role="alert">
|
||||
A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
|
||||
</div>
|
||||
<div class="alert alert-dark" role="alert">
|
||||
A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
|
||||
</div>
|
||||
|
||||
<br><br><hr><br><br>
|
||||
|
||||
@@ -638,8 +626,6 @@ To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
|
||||
<button type="button" class="btn btn-outline-danger">Danger</button>
|
||||
<button type="button" class="btn btn-outline-warning">Warning</button>
|
||||
<button type="button" class="btn btn-outline-info">Info</button>
|
||||
<button type="button" class="btn btn-outline-light">Light</button>
|
||||
<button type="button" class="btn btn-outline-dark">Dark</button>
|
||||
|
||||
<br><br><hr><br><br>
|
||||
|
||||
@@ -783,20 +769,6 @@ To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card bg-light mb-3" style="max-width: 18rem;">
|
||||
<div class="card-header">Header</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Light card title</h5>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
|
||||
<div class="card-header">Header</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Dark card title</h5>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br><br><hr><br><br>
|
||||
|
||||
@@ -1820,15 +1792,19 @@ sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
<h1>Progress</h1><br><div class="progress">
|
||||
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="progress">
|
||||
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="progress">
|
||||
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="progress">
|
||||
<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="progress">
|
||||
<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
@@ -1853,12 +1829,15 @@ sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
<h1>Progress > Backgrounds</h1><br><div class="progress">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
@@ -1876,15 +1855,19 @@ sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
<h1>Progress > Striped</h1><br><div class="progress">
|
||||
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
@@ -1977,13 +1960,8 @@ $(function () {
|
||||
<p class="text-danger">.text-danger</p>
|
||||
<p class="text-warning">.text-warning</p>
|
||||
<p class="text-info">.text-info</p>
|
||||
<p class="text-light bg-dark">.text-light</p>
|
||||
<p class="text-dark">.text-dark</p>
|
||||
<p class="text-body">.text-body</p>
|
||||
<p class="text-muted">.text-muted</p>
|
||||
<p class="text-white bg-dark">.text-white</p>
|
||||
<p class="text-black-50">.text-black-50</p>
|
||||
<p class="text-white-50 bg-dark">.text-white-50</p>
|
||||
|
||||
<br><br><hr><br><br>
|
||||
|
||||
@@ -1993,23 +1971,17 @@ $(function () {
|
||||
<p><a href="#" class="text-danger">Danger link</a></p>
|
||||
<p><a href="#" class="text-warning">Warning link</a></p>
|
||||
<p><a href="#" class="text-info">Info link</a></p>
|
||||
<p><a href="#" class="text-light bg-dark">Light link</a></p>
|
||||
<p><a href="#" class="text-dark">Dark link</a></p>
|
||||
<p><a href="#" class="text-muted">Muted link</a></p>
|
||||
<p><a href="#" class="text-white bg-dark">White link</a></p>
|
||||
|
||||
<br><br><hr><br><br>
|
||||
|
||||
<h1>Colors > Background color</h1><br><div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
|
||||
<h1>Colors > Background color</h1><br>
|
||||
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
|
||||
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
|
||||
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
|
||||
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
|
||||
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
|
||||
<div class="p-3 mb-2 bg-warning text-white">.bg-warning</div>
|
||||
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
|
||||
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
|
||||
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
|
||||
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
|
||||
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>
|
||||
|
||||
<br><br><hr><br><br>
|
||||
|
||||
@@ -2038,17 +2010,15 @@ $(function () {
|
||||
|
||||
<br><br><hr><br><br>
|
||||
|
||||
<h1>Shadows</h1><br><div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
|
||||
<div class="shadow-sm p-3 mb-5 bg-white rounded">Small shadow</div>
|
||||
<div class="shadow p-3 mb-5 bg-white rounded">Regular shadow</div>
|
||||
<div class="shadow-lg p-3 mb-5 bg-white rounded">Larger shadow</div>
|
||||
|
||||
<br><br><hr><br><br>
|
||||
|
||||
<h1>Sizing</h1><br><div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
|
||||
<h1>Sizing</h1><br>
|
||||
<div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
|
||||
<br>
|
||||
<div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>
|
||||
<br>
|
||||
<div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>
|
||||
<br>
|
||||
<div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>
|
||||
<br>
|
||||
<div class="w-auto p-3" style="background-color: #eee;">Width auto</div>
|
||||
|
||||
<br><br><hr><br><br>
|
||||
@@ -2157,12 +2127,8 @@ $(function () {
|
||||
|
||||
<br><br><hr><br><br>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="alert alert-info" role="alert">
|
||||
Note: this is intended to be used as a quick overview/reference. Visit <a href="https://getbootstrap.com/docs/">https://getbootstrap.com/docs/</a> for full documentation!
|
||||
Note: this is intended to be used as a quick overview/reference. Visit <a href="https://getbootstrap.com/docs/" class="alert-link">https://getbootstrap.com/docs/</a> for full documentation!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1893,48 +1893,6 @@ fieldset:disabled a.btn {
|
||||
.show > .btn-outline-danger.dropdown-toggle:focus {
|
||||
box-shadow: 0 0 0 0.2rem var(--btcpay-color-danger-backdrop); }
|
||||
|
||||
.btn-outline-light {
|
||||
color: var(--btcpay-color-light);
|
||||
border-color: var(--btcpay-color-light); }
|
||||
.btn-outline-light:hover {
|
||||
color: var(--btcpay-color-neutral-900);
|
||||
background-color: var(--btcpay-color-light);
|
||||
border-color: var(--btcpay-color-light); }
|
||||
.btn-outline-light:focus, .btn-outline-light.focus {
|
||||
box-shadow: 0 0 0 0.2rem var(--btcpay-color-light-backdrop); }
|
||||
.btn-outline-light.disabled, .btn-outline-light:disabled {
|
||||
color: var(--btcpay-color-light);
|
||||
background-color: transparent; }
|
||||
.btn-outline-light:not(:disabled):not(.disabled):active, .btn-outline-light:not(:disabled):not(.disabled).active,
|
||||
.show > .btn-outline-light.dropdown-toggle {
|
||||
color: var(--btcpay-color-neutral-900);
|
||||
background-color: var(--btcpay-color-light);
|
||||
border-color: var(--btcpay-color-light); }
|
||||
.btn-outline-light:not(:disabled):not(.disabled):active:focus, .btn-outline-light:not(:disabled):not(.disabled).active:focus,
|
||||
.show > .btn-outline-light.dropdown-toggle:focus {
|
||||
box-shadow: 0 0 0 0.2rem var(--btcpay-color-light-backdrop); }
|
||||
|
||||
.btn-outline-dark {
|
||||
color: var(--btcpay-color-dark);
|
||||
border-color: var(--btcpay-color-dark); }
|
||||
.btn-outline-dark:hover {
|
||||
color: var(--btcpay-color-neutral-100);
|
||||
background-color: var(--btcpay-color-dark);
|
||||
border-color: var(--btcpay-color-dark); }
|
||||
.btn-outline-dark:focus, .btn-outline-dark.focus {
|
||||
box-shadow: 0 0 0 0.2rem var(--btcpay-color-dark-backdrop); }
|
||||
.btn-outline-dark.disabled, .btn-outline-dark:disabled {
|
||||
color: var(--btcpay-color-dark);
|
||||
background-color: transparent; }
|
||||
.btn-outline-dark:not(:disabled):not(.disabled):active, .btn-outline-dark:not(:disabled):not(.disabled).active,
|
||||
.show > .btn-outline-dark.dropdown-toggle {
|
||||
color: var(--btcpay-color-white);
|
||||
background-color: var(--btcpay-color-dark);
|
||||
border-color: var(--btcpay-color-dark); }
|
||||
.btn-outline-dark:not(:disabled):not(.disabled):active:focus, .btn-outline-dark:not(:disabled):not(.disabled).active:focus,
|
||||
.show > .btn-outline-dark.dropdown-toggle:focus {
|
||||
box-shadow: 0 0 0 0.2rem var(--btcpay-color-dark-backdrop); }
|
||||
|
||||
.btn-link {
|
||||
font-weight: 400;
|
||||
color: var(--btcpay-body-color-link);
|
||||
@@ -3536,24 +3494,6 @@ input[type="button"].btn-block {
|
||||
.alert-danger .alert-link {
|
||||
color: var(--btcpay-color-danger-accent); }
|
||||
|
||||
.alert-light {
|
||||
color: var(--btcpay-color-light-accent);
|
||||
background-color: var(--btcpay-color-light-backdrop);
|
||||
border-color: var(--btcpay-color-light-backdrop); }
|
||||
.alert-light hr {
|
||||
border-top-color: var(--btcpay-color-light-accent); }
|
||||
.alert-light .alert-link {
|
||||
color: var(--btcpay-color-light-accent); }
|
||||
|
||||
.alert-dark {
|
||||
color: var(--btcpay-color-dark-accent);
|
||||
background-color: var(--btcpay-color-dark-backdrop);
|
||||
border-color: var(--btcpay-color-dark-backdrop); }
|
||||
.alert-dark hr {
|
||||
border-top-color: var(--btcpay-color-dark-accent); }
|
||||
.alert-dark .alert-link {
|
||||
color: var(--btcpay-color-dark-accent); }
|
||||
|
||||
@keyframes progress-bar-stripes {
|
||||
from {
|
||||
background-position: 1rem 0; }
|
||||
@@ -5248,18 +5188,6 @@ button.bg-dark:focus {
|
||||
clip: auto;
|
||||
white-space: normal; }
|
||||
|
||||
.shadow-sm {
|
||||
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; }
|
||||
|
||||
.shadow {
|
||||
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; }
|
||||
|
||||
.shadow-lg {
|
||||
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; }
|
||||
|
||||
.shadow-none {
|
||||
box-shadow: none !important; }
|
||||
|
||||
.w-25 {
|
||||
width: 25% !important; }
|
||||
|
||||
|
||||
Reference in New Issue
Block a user