mirror of
https://github.com/Retropex/umbrel-bitcoin.git
synced 2025-05-12 19:20:49 +02:00
group config settings by category
Co-authored-by: Mayank Chhabra <mayankchhabra9@gmail.com>
This commit is contained in:
Nathan Fretz
nmfretz
parent
4c8accc629
commit
6e682b5b42
@ -14,14 +14,32 @@
|
||||
</b-alert>
|
||||
|
||||
<b-overlay :show="isSettingsDisabled" rounded="sm">
|
||||
<div
|
||||
class="advanced-settings-container d-flex flex-column p-3 pb-sm-3 bg-light mb-2"
|
||||
>
|
||||
|
||||
<!-- PEER SETTINGS -->
|
||||
<b-card no-body class="setting-group-container mb-2">
|
||||
<b-card-header v-b-toggle.peer-settings header-tag="header" class="setting-group-header px-2 px-sm-3 d-flex justify-content-between align-items-center" role="tab">
|
||||
<div :class="{'fade-in-out': !hasLoadedSettings}">
|
||||
<p class="setting-group-title mb-1 font-weight-bold">Peer Settings</p>
|
||||
<small class="d-block text-muted">
|
||||
Configure how your node connects and interacts with peers (other nodes) on the network.
|
||||
</small>
|
||||
</div>
|
||||
<b-icon class="when-closed ml-2 text-muted" icon="plus" variant="secondary"></b-icon><b-icon class="when-open ml-2 text-muted" icon="dash" variant="secondary"></b-icon>
|
||||
</b-card-header>
|
||||
<b-collapse v-if="hasLoadedSettings" class="setting-group-body bg-light" id="peer-settings" accordion="peer-settings" role="tabpanel">
|
||||
|
||||
<!-- OUTGOING CLEARNET PEERS -->
|
||||
<b-card-body class="subsetting-body px-2 px-sm-3">
|
||||
<div>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="w-75">
|
||||
<div class="flex-sm-grow-1">
|
||||
<label class="mb-0" for="clearnet">
|
||||
<p class="font-weight-bold mb-0">Outgoing Connections to Clearnet Peers</p>
|
||||
<p class="subsetting-title font-weight-bold mb-0 mr-1">
|
||||
Outgoing Connections to Clearnet Peers
|
||||
<span class="subsetting-config-name text-monospace font-weight-normal d-block">
|
||||
onlynet
|
||||
</span>
|
||||
</p>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
@ -33,18 +51,24 @@
|
||||
></toggle-switch>
|
||||
</div>
|
||||
</div>
|
||||
<small class="w-sm-75 d-block text-muted mt-1">
|
||||
<small class="w-lg-75 d-block text-muted mt-1">
|
||||
Connect to peers available on the clearnet (publicly accessible internet).
|
||||
</small>
|
||||
</div>
|
||||
</b-card-body>
|
||||
|
||||
<hr class="advanced-settings-divider" />
|
||||
|
||||
<!-- OUTGOING TOR PEERS -->
|
||||
<b-card-body class="subsetting-body px-2 px-sm-3">
|
||||
<div>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="w-75">
|
||||
<div class="flex-sm-grow-1">
|
||||
<label class="mb-0" for="tor">
|
||||
<p class="font-weight-bold mb-0">Outgoing Connections to Tor Peers</p>
|
||||
<p class="subsetting-title font-weight-bold mb-0 mr-1">
|
||||
Outgoing Connections to Tor Peers
|
||||
<span class="subsetting-config-name text-monospace font-weight-normal d-block">
|
||||
onlynet
|
||||
</span>
|
||||
</p>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
@ -56,18 +80,24 @@
|
||||
></toggle-switch>
|
||||
</div>
|
||||
</div>
|
||||
<small class="w-sm-75 d-block text-muted mt-1">
|
||||
<small class="w-lg-75 d-block text-muted mt-1">
|
||||
Connect to peers available on the Tor network.
|
||||
</small>
|
||||
</div>
|
||||
</b-card-body>
|
||||
|
||||
<hr class="advanced-settings-divider" />
|
||||
|
||||
<!-- CONNECT TO ALL CLEARNET PEERS OVER TOR -->
|
||||
<b-card-body class="subsetting-body px-2 px-sm-3">
|
||||
<div>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="w-75">
|
||||
<label class="mb-0" for="proxy">
|
||||
<p class="font-weight-bold mb-0">Connect to all Clearnet Peers over Tor</p>
|
||||
<p class="subsetting-title font-weight-bold mb-0 mr-1">
|
||||
Make All Outgoing Connections to Clearnet Peers Over Tor
|
||||
<span class="subsetting-config-name text-monospace font-weight-normal d-block">
|
||||
proxy
|
||||
</span>
|
||||
</p>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
@ -81,19 +111,24 @@
|
||||
></toggle-switch>
|
||||
</div>
|
||||
</div>
|
||||
<small class="w-sm-75 d-block text-muted mt-1">
|
||||
<small class="w-lg-75 d-block text-muted mt-1">
|
||||
Connect to peers available on the clearnet via Tor to preserve your anonymity at the cost of slightly less security.
|
||||
</small>
|
||||
</div>
|
||||
</b-card-body>
|
||||
|
||||
|
||||
<hr class="advanced-settings-divider" />
|
||||
|
||||
<!-- CONNECT TO I2P PEERS -->
|
||||
<b-card-body class="subsetting-body px-2 px-sm-3">
|
||||
<div>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="w-75">
|
||||
<label class="mb-0" for="I2P">
|
||||
<p class="font-weight-bold mb-0">Outgoing Connections to I2P Peers</p>
|
||||
<p class="subsetting-title font-weight-bold mb-0 mr-1">
|
||||
Outgoing Connections to I2P Peers
|
||||
<span class="subsetting-config-name text-monospace font-weight-normal d-block">
|
||||
onlynet
|
||||
</span>
|
||||
</p>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
@ -105,21 +140,27 @@
|
||||
></toggle-switch>
|
||||
</div>
|
||||
</div>
|
||||
<small class="w-sm-75 d-block text-muted mt-1">
|
||||
<small class="w-lg-75 d-block text-muted mt-1">
|
||||
Connect to peers available on the I2P network.
|
||||
</small>
|
||||
</div>
|
||||
</b-card-body>
|
||||
|
||||
<hr class="advanced-settings-divider" />
|
||||
|
||||
<!-- INCOMING CONNECTIONS -->
|
||||
<b-card-body class="subsetting-body px-2 px-sm-3">
|
||||
<div>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="w-75">
|
||||
<label class="mb-0" for="allow-incoming-connections">
|
||||
<p class="font-weight-bold mb-0">Incoming Connections</p>
|
||||
<p class="subsetting-title font-weight-bold mb-0 mr-1">
|
||||
Incoming Connections
|
||||
<span class="subsetting-config-name text-monospace font-weight-normal d-block">
|
||||
listen | listenonion | i2pacceptincoming
|
||||
</span>
|
||||
</p>
|
||||
</label>
|
||||
</div>
|
||||
<div class="">
|
||||
<div>
|
||||
<toggle-switch
|
||||
id="allow-incoming-connections"
|
||||
class="align-self-center"
|
||||
@ -128,46 +169,79 @@
|
||||
></toggle-switch>
|
||||
</div>
|
||||
</div>
|
||||
<small class="w-sm-75 d-block text-muted mt-1">
|
||||
<small class="w-lg-75 d-block text-muted mt-1">
|
||||
Broadcast your node to the Bitcoin network to help other nodes
|
||||
access the blockchain. You may need to set up port forwarding on
|
||||
your router to allow incoming connections from clearnet-only peers.
|
||||
</small>
|
||||
</div>
|
||||
</b-card-body>
|
||||
|
||||
<hr class="advanced-settings-divider" />
|
||||
</b-collapse>
|
||||
</b-card>
|
||||
|
||||
<!-- OPTIMIZATION SETTINGS -->
|
||||
<b-card no-body class="setting-group-container mb-2">
|
||||
<b-card-header v-b-toggle.optimization-settings header-tag="header" class="setting-group-header px-2 px-sm-3 d-flex justify-content-between align-items-center" role="tab">
|
||||
<!-- IMPLEMENT HASLOADEDSETTINGS -->
|
||||
<div :class="{'fade-in-out': !hasLoadedSettings}">
|
||||
<p class="setting-group-title mb-1 font-weight-bold">Optimization</p>
|
||||
<small class="d-block text-muted">
|
||||
Fine tune the performance and resource usage of your node.
|
||||
</small>
|
||||
</div>
|
||||
<b-icon class="when-closed ml-2 text-muted" icon="plus" variant="secondary"></b-icon><b-icon class="when-open ml-2 text-muted" icon="dash" variant="secondary"></b-icon>
|
||||
</b-card-header>
|
||||
<b-collapse v-if="hasLoadedSettings" class="setting-group-body bg-light" id="optimization-settings" accordion="optimization-settings" role="tabpanel">
|
||||
|
||||
<!-- DB CACHE -->
|
||||
<b-card-body class="subsetting-body px-2 px-sm-3">
|
||||
<div>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="w-75">
|
||||
<div class="flex-sm-grow-1">
|
||||
<label class="mb-0" for="cache-size">
|
||||
<p class="font-weight-bold mb-0">Cache Size (MB)</p>
|
||||
<p class="subsetting-title font-weight-bold mb-0 mr-1">
|
||||
Cache Size
|
||||
<span class="subsetting-config-name text-monospace font-weight-normal d-block">
|
||||
dbcache
|
||||
</span>
|
||||
</p>
|
||||
</label>
|
||||
</div>
|
||||
<div class="">
|
||||
<div class="input-container ml-1">
|
||||
<b-input-group append="MB">
|
||||
<b-form-input
|
||||
class="advanced-settings-input"
|
||||
id="cache-size"
|
||||
type="number"
|
||||
v-model="settings.cacheSizeMB"
|
||||
number
|
||||
autocomplete="off"
|
||||
></b-form-input>
|
||||
</b-input-group>
|
||||
</div>
|
||||
</div>
|
||||
<small class="w-sm-75 d-block text-muted mt-1">
|
||||
<small class="w-lg-75 d-block text-muted mt-1">
|
||||
Choose the size of the UTXO set to store in RAM. A larger cache can
|
||||
speed up the initial synchronization of your Bitcoin node, but after
|
||||
the initial sync is complete, a larger cache value does not significantly
|
||||
improve performance and may use more RAM than needed.
|
||||
</small>
|
||||
</div>
|
||||
</b-card-body>
|
||||
|
||||
<hr class="advanced-settings-divider" />
|
||||
|
||||
<!-- RBF -->
|
||||
<b-card-body class="subsetting-body px-2 px-sm-3">
|
||||
<div>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="w-75">
|
||||
<div class="flex-sm-grow-1">
|
||||
<label class="mb-0" for="mempool">
|
||||
<p class="font-weight-bold mb-0">Replace-By-Fee (RBF) for All Transactions</p>
|
||||
<p class="subsetting-title font-weight-bold mb-0 mr-1">
|
||||
Replace-By-Fee (RBF) for All Transactions
|
||||
<span class="subsetting-config-name text-monospace font-weight-normal d-block">
|
||||
mempoolfullrbf
|
||||
</span>
|
||||
</p>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
@ -179,42 +253,25 @@
|
||||
></toggle-switch>
|
||||
</div>
|
||||
</div>
|
||||
<small class="w-sm-75 d-block text-muted mt-1">
|
||||
<small class="w-lg-75 d-block text-muted mt-1">
|
||||
Allow any transaction in the mempool of your Bitcoin node to be replaced with
|
||||
a newer version of the same transaction that includes a higher fee.
|
||||
</small>
|
||||
</div>
|
||||
</b-card-body>
|
||||
|
||||
<hr class="advanced-settings-divider" />
|
||||
|
||||
<!-- PRUNE -->
|
||||
<b-card-body class="subsetting-body px-2 px-sm-3">
|
||||
<div>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="w-75">
|
||||
<label class="mb-0" for="rest">
|
||||
<p class="font-weight-bold mb-0">Enable REST API</p>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<toggle-switch
|
||||
id="rest"
|
||||
class="align-self-center"
|
||||
:on="settings.rest"
|
||||
@toggle="status => (settings.rest = status)"
|
||||
></toggle-switch>
|
||||
</div>
|
||||
</div>
|
||||
<small class="w-sm-75 d-block text-muted mt-1">
|
||||
Accept public REST requests to your node. Be sure to understand the risks and limitations of an unauthenticated REST interface before enabling this feature.
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<hr class="advanced-settings-divider" />
|
||||
|
||||
<div>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="w-75">
|
||||
<div class="flex-sm-grow-1">
|
||||
<label class="mb-0" for="prune-old-blocks">
|
||||
<p class="font-weight-bold mb-0">Prune Old Blocks</p>
|
||||
<p class="subsetting-title font-weight-bold mb-0 mr-1">
|
||||
Prune Old Blocks
|
||||
<span class="subsetting-config-name text-monospace font-weight-normal d-block">
|
||||
prune
|
||||
</span>
|
||||
</p>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
@ -226,13 +283,12 @@
|
||||
></toggle-switch>
|
||||
</div>
|
||||
</div>
|
||||
<small class="w-sm-75 d-block text-muted mt-1">
|
||||
<small class="w-lg-75 d-block text-muted mt-1">
|
||||
Save storage space by pruning (deleting) old blocks and keeping only
|
||||
a limited copy of the blockchain. Use the slider to choose the size
|
||||
of the blockchain you want to store. It may take some time for your
|
||||
node to be online after you turn on pruning. If you turn off pruning
|
||||
after turning it on, you'll need to download the entire blockchain
|
||||
again.
|
||||
</small>
|
||||
<prune-slider
|
||||
id="prune-old-blocks"
|
||||
@ -244,42 +300,86 @@
|
||||
@change="value => (settings.prune.pruneSizeGB = value)"
|
||||
></prune-slider>
|
||||
</div>
|
||||
</b-card-body>
|
||||
|
||||
<hr class="advanced-settings-divider" />
|
||||
</b-collapse>
|
||||
</b-card>
|
||||
|
||||
<!-- <div>
|
||||
<!-- RPC & REST SETTINGS -->
|
||||
<b-card no-body class="setting-group-container mb-2">
|
||||
<b-card-header v-b-toggle.rpc-rest-settings header-tag="header" class="setting-group-header px-2 px-sm-3 d-flex justify-content-between align-items-center" role="tab">
|
||||
<!-- IMPLEMENT HASLOADEDSETTINGS -->
|
||||
<div :class="{'fade-in-out': !hasLoadedSettings}">
|
||||
<p class="setting-group-title mb-1 font-weight-bold">RPC and REST</p>
|
||||
<small class="d-block text-muted">
|
||||
Configure RPC and REST API access to your node.
|
||||
</small>
|
||||
</div>
|
||||
<b-icon class="when-closed ml-2 text-muted" icon="plus" variant="secondary"></b-icon><b-icon class="when-open ml-2 text-muted" icon="dash" variant="secondary"></b-icon>
|
||||
</b-card-header>
|
||||
<b-collapse v-if="hasLoadedSettings" class="setting-group-body bg-light" id="rpc-rest-settings" accordion="rpc-rest-settings" role="tabpanel">
|
||||
|
||||
<!-- RBF -->
|
||||
<!-- TODO: move to a "Transactions" accordion if we add additional transaction options -->
|
||||
<b-card-body class="subsetting-body px-2 px-sm-3">
|
||||
<div>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="w-75">
|
||||
<label class="mb-0" for="reindex-blockchain">
|
||||
<p class="font-weight-bold mb-0">Reindex Blockchain</p>
|
||||
<div class="flex-sm-grow-1">
|
||||
<label class="mb-0" for="rest">
|
||||
<p class="subsetting-title font-weight-bold mb-0 mr-1">
|
||||
Public REST API
|
||||
<span class="subsetting-config-name text-monospace font-weight-normal d-block">
|
||||
rest
|
||||
</span>
|
||||
</p>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<toggle-switch
|
||||
id="reindex-blockchain"
|
||||
id="rest"
|
||||
class="align-self-center"
|
||||
:on="settings.reindex"
|
||||
@toggle="status => (settings.reindex = status)"
|
||||
:on="settings.rest"
|
||||
@toggle="status => (settings.rest = status)"
|
||||
></toggle-switch>
|
||||
</div>
|
||||
</div>
|
||||
<small class="w-sm-75 d-block text-muted mt-1">
|
||||
Rebuild the database index used by your Bitcoin node. This can
|
||||
be useful if the index becomes corrupted.
|
||||
<small class="w-lg-75 d-block text-muted mt-1">
|
||||
Public REST API can help you connect certain wallets and apps to your node. However, because the REST API access is unauthenticated, it can lead to unauthorized access, denial-of-service (DoS) attacks, and such.
|
||||
</small>
|
||||
</div>
|
||||
</b-card-body>
|
||||
</b-collapse>
|
||||
</b-card>
|
||||
|
||||
<hr class="advanced-settings-divider" /> -->
|
||||
<!-- CHAIN SELECTION SETTINGS -->
|
||||
<b-card no-body class="setting-group-container mb-2">
|
||||
<b-card-header v-b-toggle.chain-selection-settings header-tag="header" class="setting-group-header px-2 px-sm-3 d-flex justify-content-between align-items-center" role="tab">
|
||||
<!-- IMPLEMENT HASLOADEDSETTINGS -->
|
||||
<div :class="{'fade-in-out': !hasLoadedSettings}">
|
||||
<p class="setting-group-title mb-1 font-weight-bold">Network Selection</p>
|
||||
<small class="d-block text-muted">
|
||||
Switch between mainnet, testnet, regtest, and signet.
|
||||
</small>
|
||||
</div>
|
||||
<b-icon class="when-closed ml-2 text-muted" icon="plus" variant="secondary"></b-icon><b-icon class="when-open ml-2 text-muted" icon="dash" variant="secondary"></b-icon>
|
||||
</b-card-header>
|
||||
<b-collapse v-if="hasLoadedSettings" class="setting-group-body bg-light" id="chain-selection-settings" accordion="chain-selection-settings" role="tabpanel">
|
||||
|
||||
<!-- CHAIN SELECTION -->
|
||||
<b-card-body class="subsetting-body px-2 px-sm-3">
|
||||
<div>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="w-75">
|
||||
<label class="mb-0" for="network">
|
||||
<p class="font-weight-bold mb-0">Network</p>
|
||||
<div class="flex-sm-grow-1">
|
||||
<label class="mb-0" for="chain">
|
||||
<p class="subsetting-title font-weight-bold mb-0 mr-1">
|
||||
Blockchain
|
||||
<span class="subsetting-config-name text-monospace font-weight-normal d-block">
|
||||
chain
|
||||
</span>
|
||||
</p>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="input-container ml-1">
|
||||
<b-form-select
|
||||
id="network"
|
||||
v-model="settings.network"
|
||||
@ -287,13 +387,15 @@
|
||||
></b-form-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<small class="w-sm-75 d-block text-muted mt-1">
|
||||
Choose which network you want your Bitcoin node to connect to.
|
||||
If you change the network, restart your Umbrel to make sure any
|
||||
apps connected to your Bitcoin node continue to work properly.
|
||||
<small class="w-lg-75 d-block text-muted mt-1">
|
||||
Choose which blockchain your node will connect to.
|
||||
If you change the chain, restart your Umbrel to make sure any
|
||||
apps connected to your node continue to work properly.
|
||||
</small>
|
||||
</div>
|
||||
</b-card-body>
|
||||
</b-collapse>
|
||||
</b-card>
|
||||
|
||||
<!-- template overlay with empty div to show an overlay with no spinner -->
|
||||
<template #overlay>
|
||||
@ -352,6 +454,9 @@ export default {
|
||||
rpc: state => state.bitcoin.rpc,
|
||||
p2p: state => state.bitcoin.p2p
|
||||
}),
|
||||
hasLoadedSettings() {
|
||||
return Object.keys(this.settings).length > 0;
|
||||
},
|
||||
isTorProxyDisabled() {
|
||||
return !this.settings.clearnet || !this.settings.tor;
|
||||
},
|
||||
@ -406,27 +511,81 @@ export default {
|
||||
|
||||
<!-- removed scoped in order to place scrollbar on bootstrap-vue .modal-body. Increased verbosity on other classes-->
|
||||
<style lang="scss">
|
||||
.advanced-settings-container {
|
||||
border-radius: 1rem;
|
||||
.advanced-settings-divider {
|
||||
// same styles as bootstrap <b-dropdown-divider/>
|
||||
height: 0;
|
||||
margin: 1.25rem 0;
|
||||
overflow: hidden;
|
||||
border-top: 1px solid #e9ecef;
|
||||
.setting-group-container {
|
||||
border: 1px solid #e9ecef !important;
|
||||
border-radius: 0.5rem;
|
||||
|
||||
.setting-group-header {
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.collapsed > .when-open,
|
||||
.not-collapsed > .when-closed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.setting-group-body {
|
||||
border-radius: 0 0 0.5rem 0.5rem;
|
||||
|
||||
.subsetting-body {
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
|
||||
.subsetting-title {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.subsetting-config-name {
|
||||
font-size: 0.65rem;
|
||||
opacity: 0.6;
|
||||
margin-top: 0.1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
width: 100%;
|
||||
max-width: 130px;
|
||||
|
||||
.input-group-text {
|
||||
font-size: 0.85rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.input-time {
|
||||
.input-group-append {
|
||||
.custom-select {
|
||||
|
||||
font-size: 0.85rem !important;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
cursor: pointer;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.advanced-settings-input {
|
||||
max-width: 75px;
|
||||
font-size: 0.85rem !important;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
// to remove arrows on number input field
|
||||
.advanced-settings-input::-webkit-outer-spin-button, .advanced-settings-input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.advanced-settings-input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-border {
|
||||
border: solid 1px !important;
|
||||
@ -449,11 +608,4 @@ export default {
|
||||
.modal-body::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/* sm breakpoint */
|
||||
@media (min-width: 576px) {
|
||||
.w-sm-75 {
|
||||
width: 75% !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user