mirror of
https://github.com/freedombox/FreedomBox.git
synced 2026-03-11 09:04:54 +00:00
ui: css: Use rem as the primary unit
- When the base font size is changed, all the measure will scale appropriately. - Bootstrap 4 has done the same. - Keep using px for responsive lengths and some border widths that need not scale. Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org> Reviewed-by: Veiko Aasa <veiko17@disroot.org>
This commit is contained in:
Sunil Mohan Adapa
Veiko Aasa
parent
83dcafac55
commit
f4a48f3e36
@ -8,7 +8,7 @@
|
||||
{% block page_head %}
|
||||
<style type="text/css">
|
||||
.mount-error, .mount-success, .encrypted {
|
||||
padding: 0px 5px;
|
||||
padding: 0 0.3125rem;
|
||||
}
|
||||
.mount-error {
|
||||
color: orange;
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
width: 40%;
|
||||
}
|
||||
.list-group-item .btn {
|
||||
margin: -5px 2px;
|
||||
margin: -0.3125rem 0.125rem;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
@ -14,13 +14,13 @@
|
||||
width: 40%;
|
||||
}
|
||||
.repo-private-icon {
|
||||
margin: 4px 10px;
|
||||
margin: 0.25rem 0.625rem;
|
||||
}
|
||||
.list-group-item .btn {
|
||||
margin: -5px 2px;
|
||||
margin: -0.3125rem 0.125rem;
|
||||
}
|
||||
.repo-cloning {
|
||||
margin: 0px 10px;
|
||||
margin: 0 0.625rem;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
@ -59,7 +59,7 @@
|
||||
href="https://wiki.debian.org/FreedomBox"
|
||||
target="_blank">{% trans "Learn more »" %}</a></p>
|
||||
|
||||
<p style='margin-top:30px'>
|
||||
<p style='margin-top:1.875rem'>
|
||||
{% blocktrans trimmed %}
|
||||
You are running {{ os_release }} and {{ box_name }} version {{ version }}.
|
||||
{% endblocktrans %}
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
{% block page_head %}
|
||||
<style type="text/css">
|
||||
dd {
|
||||
margin-left: 30px;
|
||||
margin-left: 1.875rem;
|
||||
}
|
||||
.pdf {
|
||||
float: right;
|
||||
|
||||
@ -43,14 +43,14 @@ h1 {
|
||||
/* Server connection status message */
|
||||
#server-flash {
|
||||
margin: 0;
|
||||
margin-top: 10px;
|
||||
margin-top: 0.625rem;
|
||||
}
|
||||
|
||||
#server-flash:before {
|
||||
content: "\e031";
|
||||
position: relative;
|
||||
top: 1px;
|
||||
padding-right: 5px;
|
||||
top: 0.0625rem;
|
||||
padding-right: 0.3125rem;
|
||||
display: inline-block;
|
||||
font-family: 'Glyphicons Halflings';
|
||||
font-style: normal;
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
{% block page_head %}
|
||||
<style type="text/css">
|
||||
.table .form .btn {
|
||||
width: 7em;
|
||||
width: 6.125rem;
|
||||
}
|
||||
|
||||
.form-inline {
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
<style type="text/css">
|
||||
td li {
|
||||
list-style: none;
|
||||
line-height: 2em;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
td ul {
|
||||
@ -20,11 +20,11 @@
|
||||
}
|
||||
|
||||
.form-action.pull-right {
|
||||
margin-right: 10px;
|
||||
margin-right: 0.625rem;
|
||||
}
|
||||
|
||||
.form-action button {
|
||||
width: 9em;
|
||||
width: 7.875rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
{% block page_head %}
|
||||
<style type="text/css">
|
||||
.list-group-item .btn {
|
||||
margin: -5px 0;
|
||||
margin: -0.3125rem 0;
|
||||
}
|
||||
.form-inline {
|
||||
display: inline;
|
||||
|
||||
@ -7,8 +7,8 @@
|
||||
|
||||
<style type="text/css">
|
||||
.connection-diagram {
|
||||
margin-top: 32px;
|
||||
margin-bottom: 32px;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.col-image {
|
||||
@ -17,26 +17,26 @@
|
||||
}
|
||||
|
||||
.network-entity {
|
||||
max-width: 128px;
|
||||
max-width: 8rem;
|
||||
}
|
||||
|
||||
.network-type-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.network-connection {
|
||||
height: 8px;
|
||||
margin-bottom: 12px;
|
||||
height: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.network-connection-vertical {
|
||||
width: 8px;
|
||||
margin-left: 60px;
|
||||
width: 0.5rem;
|
||||
margin-left: 3.75rem;
|
||||
}
|
||||
|
||||
.connection-list {
|
||||
margin-left: 24px;
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
.connection-list-heading {
|
||||
|
||||
@ -10,10 +10,10 @@
|
||||
<style type="text/css">
|
||||
.connection-status-label {
|
||||
display: inline-block;
|
||||
width: 5.5em;
|
||||
padding: 5px 0px;
|
||||
width: 4.125rem;
|
||||
padding: 0.3125rem 0;
|
||||
text-align: center;
|
||||
margin-right: 10px;
|
||||
margin-right: 0.625rem;
|
||||
}
|
||||
|
||||
.connection-show-label {
|
||||
@ -26,15 +26,15 @@
|
||||
}
|
||||
|
||||
.list-group-item .btn {
|
||||
margin: -2px 0;
|
||||
margin: -0.125rem 0;
|
||||
}
|
||||
|
||||
.form-action.pull-right {
|
||||
margin-right: 20px;
|
||||
margin-right: 1.25rem;
|
||||
}
|
||||
|
||||
.form-action button {
|
||||
min-width: 7em;
|
||||
min-width: 6.125rem;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
@ -11,10 +11,10 @@
|
||||
<style type="text/css">
|
||||
div.custom-services span.service {
|
||||
display: inline-block;
|
||||
padding-top: 6px;
|
||||
padding-top: 0.375rem;
|
||||
}
|
||||
form.pull-right button {
|
||||
margin: 10px 5px;
|
||||
margin: 0.625rem 0.3125rem;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
@ -12,15 +12,15 @@
|
||||
<style type="text/css">
|
||||
.progress {
|
||||
margin-bottom: 0;
|
||||
width: 180px;
|
||||
width: 11.25rem;
|
||||
}
|
||||
.samba-disk-name {
|
||||
font-size: 1.3em;
|
||||
font-size: 1.3rem;
|
||||
float: left;
|
||||
}
|
||||
.samba-disk-shares {
|
||||
padding-top: 10px;
|
||||
margin-bottom: 20px;
|
||||
padding-top: 0.625rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
width: 75%;
|
||||
}
|
||||
.list-group-item .btn {
|
||||
margin: -5px 0;
|
||||
margin: -0.3125rem 0;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
@ -126,8 +126,8 @@ h1, h2, h3, h4, h5, h6 {
|
||||
/* Help block removed from bootstrap 4, needs updated django-bootstrap-from */
|
||||
.help-block {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 0.3125rem;
|
||||
margin-bottom: 0.625rem;
|
||||
color: #737373;
|
||||
}
|
||||
|
||||
@ -135,8 +135,8 @@ h1, h2, h3, h4, h5, h6 {
|
||||
.form-horizontal > .form-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -15px;
|
||||
margin-left: -15px;
|
||||
margin-right: -0.9375rem;
|
||||
margin-left: -0.9375rem;
|
||||
}
|
||||
|
||||
.radio .help-block {
|
||||
@ -151,7 +151,7 @@ h1, h2, h3, h4, h5, h6 {
|
||||
* Basic styling
|
||||
*/
|
||||
body {
|
||||
padding-top: 6em;
|
||||
padding-top: 6rem;
|
||||
position: relative;
|
||||
font-family: Lato, sans-serif;
|
||||
background: url('../img/noise.png') var(--background-color);
|
||||
@ -174,18 +174,18 @@ body {
|
||||
}
|
||||
|
||||
.navbar .fa:not(.fa-bars) {
|
||||
margin-right: 4px;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.navbar-brand .fa {
|
||||
float: left;
|
||||
margin-top: -7px;
|
||||
padding: 8px;
|
||||
margin-top: -0.4375rem;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
height: 53px;
|
||||
margin-right: -20px;
|
||||
height: 3.3125rem;
|
||||
margin-right: -1.25rem;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
@ -195,7 +195,7 @@ body {
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.dropdown-toggle::after {
|
||||
@ -209,17 +209,17 @@ body {
|
||||
.running-status {
|
||||
border-radius: 50%;
|
||||
border: 1px solid black;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.running-status.loading {
|
||||
border: 4px solid var(--neutral-light-color);
|
||||
border-top: 4px solid var(--progress-color);
|
||||
border: 0.25rem solid var(--neutral-light-color);
|
||||
border-top: 0.25rem solid var(--progress-color);
|
||||
border-radius: 50%;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
display: inline-block;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
@ -248,7 +248,7 @@ body {
|
||||
}
|
||||
|
||||
.diagnostics-results .diagnostics-result {
|
||||
width: 60px;
|
||||
width: 3.75rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -259,7 +259,7 @@ body {
|
||||
/* Sticky footer styles
|
||||
-------------------------------------------------- */
|
||||
.footer-logo {
|
||||
width: 140px;
|
||||
width: 8.75rem;
|
||||
}
|
||||
|
||||
html {
|
||||
@ -281,15 +281,15 @@ html {
|
||||
}
|
||||
|
||||
.content-container {
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.content-container {
|
||||
padding: 25px 50px 50px;
|
||||
padding: 1.5rem 3rem 3rem;
|
||||
background-color: white;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -298,12 +298,8 @@ footer {
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
padding-top: 150px;
|
||||
}
|
||||
|
||||
.shortcut-label {
|
||||
min-height: 50px;
|
||||
height: 9.375rem;
|
||||
padding-top: 9.375rem;
|
||||
}
|
||||
|
||||
/*
|
||||
@ -313,23 +309,23 @@ footer {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-height: 20px;
|
||||
max-width: 20px;
|
||||
max-height: 1.25rem;
|
||||
max-width: 1.25rem;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#clients .btn {
|
||||
width: 9em;
|
||||
margin-right: 1em;
|
||||
width: 9rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
#clients th, #clients td {
|
||||
line-height: 3.1em;
|
||||
line-height: 3rem;
|
||||
}
|
||||
|
||||
/* Icon when collapsible content is shown */
|
||||
.collapsible-button .fa {
|
||||
margin-left: 5px;
|
||||
margin-left: 0.3125rem;
|
||||
}
|
||||
|
||||
.collapsible-button .fa-chevron-right:before,
|
||||
@ -355,7 +351,7 @@ footer {
|
||||
*/
|
||||
.main-header {
|
||||
background: var(--freedombox-blue-color);
|
||||
box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.25);
|
||||
box-shadow: 0 0.25rem 0.375rem 0 rgba(0, 0, 0, 0.25);
|
||||
border: none;
|
||||
}
|
||||
|
||||
@ -369,8 +365,8 @@ footer {
|
||||
}
|
||||
|
||||
.main-header .nav-item .nav-link {
|
||||
padding: 15px !important;
|
||||
height: 52px;
|
||||
padding: 0.9375rem !important;
|
||||
height: 3.25rem;
|
||||
}
|
||||
|
||||
.main-header .navbar-toggler {
|
||||
@ -403,7 +399,7 @@ footer {
|
||||
display: flex;
|
||||
font-style: italic;
|
||||
font-weight: 800;
|
||||
font-size: 20px;
|
||||
font-size: 1.25rem;
|
||||
padding: 0 2.875rem;
|
||||
margin: 1.25rem 0;
|
||||
}
|
||||
@ -432,59 +428,45 @@ a.menu_link_active {
|
||||
display: block;
|
||||
line-height: 1.42857143;
|
||||
text-align: center;
|
||||
box-shadow: 0 3px 5px 0 rgba(0,0,0,0.12);
|
||||
box-shadow: 0 0.1875rem 0.3125rem 0 rgba(0,0,0,0.12);
|
||||
width: 10rem;
|
||||
padding: 0;
|
||||
margin: 0 10px 20px;
|
||||
margin: 0 0.625rem 1.25rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
border-radius: 0.5rem;
|
||||
transition: border .2s ease-in-out;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: 0 5px 15px 2px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 0.3125rem 0.9375rem 0.125rem rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.card .nav-link {
|
||||
display: block;
|
||||
padding: 4px;
|
||||
padding: 0.25rem;
|
||||
color: #646464;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-style: italic;
|
||||
font-weight: 800;
|
||||
font-size: 20px;
|
||||
padding: 12px 0;
|
||||
font-size: 1.25rem;
|
||||
padding: 0.75rem 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.card-description {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.card-description {
|
||||
font-weight: 400;
|
||||
padding: 0.75rem 0;
|
||||
color: #646464;
|
||||
font-size: 12px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.card-icon span,
|
||||
.card-icon img {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
.card-icon span {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
font-size: 80px;
|
||||
}
|
||||
|
||||
.card-icon img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
font-size: 80px;
|
||||
width: 6.25rem;
|
||||
height: 6.25rem;
|
||||
font-size: 5rem;
|
||||
}
|
||||
|
||||
/* System page - special card styling */
|
||||
@ -495,13 +477,13 @@ a.menu_link_active {
|
||||
|
||||
.system-page .card .nav-link {
|
||||
display: grid;
|
||||
grid-template-columns: 35px auto;
|
||||
grid-column-gap: 10px;
|
||||
padding: 13px;
|
||||
grid-template-columns: 2.1875rem auto;
|
||||
grid-column-gap: 0.625rem;
|
||||
padding: 0.8125rem;
|
||||
}
|
||||
|
||||
.system-page .card-title {
|
||||
font-size: 18px;
|
||||
font-size: 1.125rem;
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
overflow: hidden;
|
||||
@ -519,7 +501,7 @@ a.menu_link_active {
|
||||
|
||||
.system-page .card-icon span {
|
||||
height: auto;
|
||||
font-size: 35px;
|
||||
font-size: 2.1875rem;
|
||||
}
|
||||
|
||||
.system-page .card-description {
|
||||
@ -531,7 +513,7 @@ a.menu_link_active {
|
||||
|
||||
/* Button table - Tables with a list of actions as buttons on top */
|
||||
.button-table > .button-row + .table-responsive {
|
||||
margin-top: 10px;
|
||||
margin-top: 0.625rem;
|
||||
}
|
||||
|
||||
.index-page .card-list:before,
|
||||
@ -575,9 +557,9 @@ a.menu_link_active {
|
||||
* Toggle button
|
||||
*/
|
||||
.toggle-button {
|
||||
border-radius: 13px;
|
||||
width: 50px;
|
||||
height: 26px;
|
||||
border-radius: 0.8125rem;
|
||||
width: 3.125rem;
|
||||
height: 1.625rem;
|
||||
background: #ccc;
|
||||
position: relative;
|
||||
}
|
||||
@ -585,8 +567,8 @@ a.menu_link_active {
|
||||
.toggle-button::before {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
border-radius: 100%;
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
@ -606,13 +588,13 @@ a.menu_link_active {
|
||||
|
||||
.toggle-button.running-status-button::before {
|
||||
top: 0;
|
||||
border: 4px solid var(--neutral-light-color);
|
||||
border-top: 4px solid var(--progress-color);
|
||||
border: 0.25rem solid var(--neutral-light-color);
|
||||
border-top: 0.25rem solid var(--progress-color);
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
.toggle-button.toggle-button--toggled.running-status-button::before {
|
||||
margin-left: -24px;
|
||||
margin-left: -1.5rem;
|
||||
}
|
||||
|
||||
/*
|
||||
@ -620,15 +602,15 @@ a.menu_link_active {
|
||||
*/
|
||||
.running-status-button-before {
|
||||
display: inline-block;
|
||||
border: 4px solid var(--neutral-light-color);
|
||||
border-top: 4px solid var(--progress-color);
|
||||
border: 0.25rem solid var(--neutral-light-color);
|
||||
border-top: 0.25rem solid var(--progress-color);
|
||||
border-radius: 50%;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
animation: spin 1s linear infinite;
|
||||
margin-left: 10px;
|
||||
margin-bottom: -4px;
|
||||
margin-right: -26px;
|
||||
margin-left: 0.625rem;
|
||||
margin-bottom: -0.25rem;
|
||||
margin-right: -1.625rem;
|
||||
}
|
||||
|
||||
.running-status-button:disabled {
|
||||
@ -636,15 +618,15 @@ a.menu_link_active {
|
||||
}
|
||||
|
||||
input[type='submit'].running-status-button {
|
||||
padding-left: 32px;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
/*
|
||||
* Button toolbar
|
||||
*/
|
||||
.btn-toolbar {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 0.625rem;
|
||||
margin-bottom: 0.625rem;
|
||||
}
|
||||
|
||||
.btn-toolbar > :not(:last-child):not(.running-status-button-before) {
|
||||
@ -668,12 +650,12 @@ input[type='submit'].running-status-button {
|
||||
.app-header {
|
||||
display: grid;
|
||||
grid-template-columns: 0.2fr 1fr;
|
||||
column-gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
column-gap: 1.25rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.app-header > img {
|
||||
margin: 25px auto 0;
|
||||
margin: 1.5625rem auto 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -713,8 +695,8 @@ input[type='submit'].running-status-button {
|
||||
}
|
||||
|
||||
.app-header img {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
width: 9.375rem;
|
||||
height: 9.375rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@ -726,11 +708,11 @@ input[type='submit'].running-status-button {
|
||||
}
|
||||
|
||||
.app-titles h2 {
|
||||
margin: 0 0 15px 0;
|
||||
margin: 0 0 0.9375rem 0;
|
||||
}
|
||||
|
||||
.app-titles .form-app-enable-disable {
|
||||
margin: 30px auto;
|
||||
margin: 1.875rem auto;
|
||||
}
|
||||
|
||||
.app-titles .toggle-button {
|
||||
@ -742,8 +724,8 @@ input[type='submit'].running-status-button {
|
||||
*[id^='idm']:before {
|
||||
display: block;
|
||||
content: " ";
|
||||
margin-top: -60px;
|
||||
height: 60px;
|
||||
margin-top: -3.75rem;
|
||||
height: 3.75rem;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
@ -751,8 +733,8 @@ input[type='submit'].running-status-button {
|
||||
* Notifications
|
||||
*/
|
||||
.notifications {
|
||||
margin-left: -15px;
|
||||
margin-right: -15px;
|
||||
margin-left: -0.9375rem;
|
||||
margin-right: -0.9375rem;
|
||||
}
|
||||
|
||||
.notifications .dropdown-menu {
|
||||
@ -768,7 +750,7 @@ input[type='submit'].running-status-button {
|
||||
/* Style for individual notification */
|
||||
.notification {
|
||||
padding: 0.625rem 0.9375rem;
|
||||
border-left: 5px solid;
|
||||
border-left: 0.3125rem solid;
|
||||
}
|
||||
|
||||
.notification:not(:first-child) {
|
||||
@ -788,8 +770,8 @@ img.notification-icon {
|
||||
|
||||
/* Show badge with various colors and overlap it onto icon */
|
||||
.notifications-dropdown .badge {
|
||||
padding: 2px 5px;
|
||||
margin-left: -12px;
|
||||
padding: 0.125rem 0.3125rem;
|
||||
margin-left: -0.75rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user