nik/FreedomBox
1
0
Fork 0
mirror of https://github.com/freedombox/FreedomBox.git synced 2026-05-27 10:44:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

ui: css: Use rem as the primary unit

Browse Source 
- 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 2020-12-12 21:03:49 -08:00 committed by Veiko Aasa
parent 83dcafac55
commit f4a48f3e36
No known key found for this signature in database
GPG Key ID: 478539CAE680674E
15 changed files with 124 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
plinth/modules/backups/templates/backups.html
View File

@ -8,7 +8,7 @@
{% block page_head %} {% block page_head %}
<style type="text/css"> <style type="text/css">
.mount-error, .mount-success, .encrypted { .mount-error, .mount-success, .encrypted {
padding: 0px 5px; padding: 0 0.3125rem;
} }
.mount-error { .mount-error {
color: orange; color: orange;

2
plinth/modules/calibre/templates/calibre.html
View File

@ -12,7 +12,7 @@
width: 40%; width: 40%;
} }
.list-group-item .btn { .list-group-item .btn {
margin: -5px 2px; margin: -0.3125rem 0.125rem;
} }
</style> </style>
{% endblock %} {% endblock %}

6
plinth/modules/gitweb/templates/gitweb_configure.html
View File

@ -14,13 +14,13 @@
width: 40%; width: 40%;
} }
.repo-private-icon { .repo-private-icon {
margin: 4px 10px; margin: 0.25rem 0.625rem;
} }
.list-group-item .btn { .list-group-item .btn {
margin: -5px 2px; margin: -0.3125rem 0.125rem;
} }
.repo-cloning { .repo-cloning {
margin: 0px 10px; margin: 0 0.625rem;
} }
</style> </style>
{% endblock %} {% endblock %}

2
plinth/modules/help/templates/help_about.html
View File

@ -59,7 +59,7 @@
href="https://wiki.debian.org/FreedomBox" href="https://wiki.debian.org/FreedomBox"
target="_blank">{% trans "Learn more &raquo;" %}</a></p> target="_blank">{% trans "Learn more &raquo;" %}</a></p>
<p style='margin-top:30px'> <p style='margin-top:1.875rem'>
{% blocktrans trimmed %} {% blocktrans trimmed %}
You are running {{ os_release }} and {{ box_name }} version {{ version }}. You are running {{ os_release }} and {{ box_name }} version {{ version }}.
{% endblocktrans %} {% endblocktrans %}

2
plinth/modules/help/templates/help_manual.html
View File

@ -9,7 +9,7 @@
{% block page_head %} {% block page_head %}
<style type="text/css"> <style type="text/css">
dd { dd {
margin-left: 30px; margin-left: 1.875rem;
} }
.pdf { .pdf {
float: right; float: right;

6
plinth/modules/jsxc/static/jsxc-plinth.css
View File

@ -43,14 +43,14 @@ h1 {
/* Server connection status message */ /* Server connection status message */
#server-flash { #server-flash {
margin: 0; margin: 0;
margin-top: 10px; margin-top: 0.625rem;
} }
#server-flash:before { #server-flash:before {
content: "\e031"; content: "\e031";
position: relative; position: relative;
top: 1px; top: 0.0625rem;
padding-right: 5px; padding-right: 0.3125rem;
display: inline-block; display: inline-block;
font-family: 'Glyphicons Halflings'; font-family: 'Glyphicons Halflings';
font-style: normal; font-style: normal;

2
plinth/modules/letsencrypt/templates/letsencrypt.html
View File

@ -9,7 +9,7 @@
{% block page_head %} {% block page_head %}
<style type="text/css"> <style type="text/css">
.table .form .btn { .table .form .btn {
width: 7em; width: 6.125rem;
} }
.form-inline { .form-inline {

6
plinth/modules/monkeysphere/templates/monkeysphere.html
View File

@ -12,7 +12,7 @@
<style type="text/css"> <style type="text/css">
td li { td li {
list-style: none; list-style: none;
line-height: 2em; line-height: 2rem;
} }
td ul { td ul {
@ -20,11 +20,11 @@
} }
.form-action.pull-right { .form-action.pull-right {
margin-right: 10px; margin-right: 0.625rem;
} }
.form-action button { .form-action button {
width: 9em; width: 7.875rem;
} }
</style> </style>

2
plinth/modules/networks/templates/connection_show.html
View File

@ -10,7 +10,7 @@
{% block page_head %} {% block page_head %}
<style type="text/css"> <style type="text/css">
.list-group-item .btn { .list-group-item .btn {
margin: -5px 0; margin: -0.3125rem 0;
} }
.form-inline { .form-inline {
display: inline; display: inline;

20
plinth/modules/networks/templates/connections_diagram.html
View File

@ -7,8 +7,8 @@
<style type="text/css"> <style type="text/css">
.connection-diagram { .connection-diagram {
margin-top: 32px; margin-top: 2rem;
margin-bottom: 32px; margin-bottom: 2rem;
} }
.col-image { .col-image {
@ -17,26 +17,26 @@
} }
.network-entity { .network-entity {
max-width: 128px; max-width: 8rem;
} }
.network-type-icon { .network-type-icon {
width: 24px; width: 1.5rem;
height: 24px; height: 1.5rem;
} }
.network-connection { .network-connection {
height: 8px; height: 0.5rem;
margin-bottom: 12px; margin-bottom: 0.75rem;
} }
.network-connection-vertical { .network-connection-vertical {
width: 8px; width: 0.5rem;
margin-left: 60px; margin-left: 3.75rem;
} }
.connection-list { .connection-list {
margin-left: 24px; margin-left: 1.5rem;
} }
.connection-list-heading { .connection-list-heading {

12
plinth/modules/networks/templates/networks_configuration.html
View File

@ -10,10 +10,10 @@
<style type="text/css"> <style type="text/css">
.connection-status-label { .connection-status-label {
display: inline-block; display: inline-block;
width: 5.5em; width: 4.125rem;
padding: 5px 0px; padding: 0.3125rem 0;
text-align: center; text-align: center;
margin-right: 10px; margin-right: 0.625rem;
} }
.connection-show-label { .connection-show-label {
@ -26,15 +26,15 @@
} }
.list-group-item .btn { .list-group-item .btn {
margin: -2px 0; margin: -0.125rem 0;
} }
.form-action.pull-right { .form-action.pull-right {
margin-right: 20px; margin-right: 1.25rem;
} }
.form-action button { .form-action button {
min-width: 7em; min-width: 6.125rem;
} }
</style> </style>
{% endblock %} {% endblock %}

4
plinth/modules/pagekite/templates/pagekite_configure.html
View File

@ -11,10 +11,10 @@
<style type="text/css"> <style type="text/css">
div.custom-services span.service { div.custom-services span.service {
display: inline-block; display: inline-block;
padding-top: 6px; padding-top: 0.375rem;
} }
form.pull-right button { form.pull-right button {
margin: 10px 5px; margin: 0.625rem 0.3125rem;
} }
</style> </style>
{% endblock %} {% endblock %}

8
plinth/modules/samba/templates/samba.html
View File

@ -12,15 +12,15 @@
<style type="text/css"> <style type="text/css">
.progress { .progress {
margin-bottom: 0; margin-bottom: 0;
width: 180px; width: 11.25rem;
} }
.samba-disk-name { .samba-disk-name {
font-size: 1.3em; font-size: 1.3rem;
float: left; float: left;
} }
.samba-disk-shares { .samba-disk-shares {
padding-top: 10px; padding-top: 0.625rem;
margin-bottom: 20px; margin-bottom: 1.25rem;
} }
</style> </style>
{% endblock %} {% endblock %}

2
plinth/modules/users/templates/users_list.html
View File

@ -13,7 +13,7 @@
width: 75%; width: 75%;
} }
.list-group-item .btn { .list-group-item .btn {
margin: -5px 0; margin: -0.3125rem 0;
} }
</style> </style>
{% endblock %} {% endblock %}

190
static/themes/default/css/main.css
View File

@ -126,8 +126,8 @@ h1, h2, h3, h4, h5, h6 {
/* Help block removed from bootstrap 4, needs updated django-bootstrap-from */ /* Help block removed from bootstrap 4, needs updated django-bootstrap-from */
.help-block { .help-block {
display: block; display: block;
margin-top: 5px; margin-top: 0.3125rem;
margin-bottom: 10px; margin-bottom: 0.625rem;
color: #737373; color: #737373;
} }
@ -135,8 +135,8 @@ h1, h2, h3, h4, h5, h6 {
.form-horizontal > .form-group { .form-horizontal > .form-group {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-right: -15px; margin-right: -0.9375rem;
margin-left: -15px; margin-left: -0.9375rem;
} }
.radio .help-block { .radio .help-block {
@ -151,7 +151,7 @@ h1, h2, h3, h4, h5, h6 {
* Basic styling * Basic styling
*/ */
body { body {
padding-top: 6em; padding-top: 6rem;
position: relative; position: relative;
font-family: Lato, sans-serif; font-family: Lato, sans-serif;
background: url('../img/noise.png') var(--background-color); background: url('../img/noise.png') var(--background-color);
@ -174,18 +174,18 @@ body {
} }
.navbar .fa:not(.fa-bars) { .navbar .fa:not(.fa-bars) {
margin-right: 4px; margin-right: 0.25rem;
} }
.navbar-brand .fa { .navbar-brand .fa {
float: left; float: left;
margin-top: -7px; margin-top: -0.4375rem;
padding: 8px; padding: 0.5rem;
} }
.navbar-brand { .navbar-brand {
height: 53px; height: 3.3125rem;
margin-right: -20px; margin-right: -1.25rem;
} }
@media (max-width: 767px) { @media (max-width: 767px) {
@ -195,7 +195,7 @@ body {
} }
.nav-tabs { .nav-tabs {
margin-bottom: 20px; margin-bottom: 1.25rem;
} }
.dropdown-toggle::after { .dropdown-toggle::after {
@ -209,17 +209,17 @@ body {
.running-status { .running-status {
border-radius: 50%; border-radius: 50%;
border: 1px solid black; border: 1px solid black;
width: 8px; width: 0.5rem;
height: 8px; height: 0.5rem;
display: inline-block; display: inline-block;
} }
.running-status.loading { .running-status.loading {
border: 4px solid var(--neutral-light-color); border: 0.25rem solid var(--neutral-light-color);
border-top: 4px solid var(--progress-color); border-top: 0.25rem solid var(--progress-color);
border-radius: 50%; border-radius: 50%;
width: 16px; width: 1rem;
height: 16px; height: 1rem;
display: inline-block; display: inline-block;
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
} }
@ -248,7 +248,7 @@ body {
} }
.diagnostics-results .diagnostics-result { .diagnostics-results .diagnostics-result {
width: 60px; width: 3.75rem;
text-align: center; text-align: center;
} }
@ -259,7 +259,7 @@ body {
/* Sticky footer styles /* Sticky footer styles
-------------------------------------------------- */ -------------------------------------------------- */
.footer-logo { .footer-logo {
width: 140px; width: 8.75rem;
} }
html { html {
@ -281,15 +281,15 @@ html {
} }
.content-container { .content-container {
margin-bottom: 20px; margin-bottom: 1.25rem;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.content-container { .content-container {
padding: 25px 50px 50px; padding: 1.5rem 3rem 3rem;
background-color: white; background-color: white;
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 4px; border-radius: 0.25rem;
} }
} }
@ -298,12 +298,8 @@ footer {
position: relative; position: relative;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
height: 150px; height: 9.375rem;
padding-top: 150px; padding-top: 9.375rem;
}
.shortcut-label {
min-height: 50px;
} }
/* /*
@ -313,23 +309,23 @@ footer {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
height: auto; height: auto;
max-height: 20px; max-height: 1.25rem;
max-width: 20px; max-width: 1.25rem;
margin: auto; margin: auto;
} }
#clients .btn { #clients .btn {
width: 9em; width: 9rem;
margin-right: 1em; margin-right: 1rem;
} }
#clients th, #clients td { #clients th, #clients td {
line-height: 3.1em; line-height: 3rem;
} }
/* Icon when collapsible content is shown */ /* Icon when collapsible content is shown */
.collapsible-button .fa { .collapsible-button .fa {
margin-left: 5px; margin-left: 0.3125rem;
} }
.collapsible-button .fa-chevron-right:before, .collapsible-button .fa-chevron-right:before,
@ -355,7 +351,7 @@ footer {
*/ */
.main-header { .main-header {
background: var(--freedombox-blue-color); 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; border: none;
} }
@ -369,8 +365,8 @@ footer {
} }
.main-header .nav-item .nav-link { .main-header .nav-item .nav-link {
padding: 15px !important; padding: 0.9375rem !important;
height: 52px; height: 3.25rem;
} }
.main-header .navbar-toggler { .main-header .navbar-toggler {
@ -403,7 +399,7 @@ footer {
display: flex; display: flex;
font-style: italic; font-style: italic;
font-weight: 800; font-weight: 800;
font-size: 20px; font-size: 1.25rem;
padding: 0 2.875rem; padding: 0 2.875rem;
margin: 1.25rem 0; margin: 1.25rem 0;
} }
@ -432,59 +428,45 @@ a.menu_link_active {
display: block; display: block;
line-height: 1.42857143; line-height: 1.42857143;
text-align: center; 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; width: 10rem;
padding: 0; padding: 0;
margin: 0 10px 20px; margin: 0 0.625rem 1.25rem;
border: none; border: none;
border-radius: 8px; border-radius: 0.5rem;
transition: border .2s ease-in-out; transition: border .2s ease-in-out;
} }
.card:hover { .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 { .card .nav-link {
display: block; display: block;
padding: 4px; padding: 0.25rem;
color: #646464; color: #646464;
} }
.card-title { .card-title {
font-style: italic; font-style: italic;
font-weight: 800; font-weight: 800;
font-size: 20px; font-size: 1.25rem;
padding: 12px 0; padding: 0.75rem 0;
margin-bottom: 0; margin-bottom: 0;
} }
.card-description { .card-description {
font-size: 18px; font-weight: 400;
font-weight: 400; padding: 0.75rem 0;
padding: 12px 0;
}
.card-description {
color: #646464; color: #646464;
font-size: 12px; font-size: 0.75rem;
} }
.card-icon span,
.card-icon img { .card-icon img {
width: 128px; width: 6.25rem;
height: 128px; height: 6.25rem;
} font-size: 5rem;
.card-icon span {
width: 100px;
height: 100px;
font-size: 80px;
}
.card-icon img {
width: 100px;
height: 100px;
font-size: 80px;
} }
/* System page - special card styling */ /* System page - special card styling */
@ -495,13 +477,13 @@ a.menu_link_active {
.system-page .card .nav-link { .system-page .card .nav-link {
display: grid; display: grid;
grid-template-columns: 35px auto; grid-template-columns: 2.1875rem auto;
grid-column-gap: 10px; grid-column-gap: 0.625rem;
padding: 13px; padding: 0.8125rem;
} }
.system-page .card-title { .system-page .card-title {
font-size: 18px; font-size: 1.125rem;
font-style: normal; font-style: normal;
font-weight: bold; font-weight: bold;
overflow: hidden; overflow: hidden;
@ -519,7 +501,7 @@ a.menu_link_active {
.system-page .card-icon span { .system-page .card-icon span {
height: auto; height: auto;
font-size: 35px; font-size: 2.1875rem;
} }
.system-page .card-description { .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 - Tables with a list of actions as buttons on top */
.button-table > .button-row + .table-responsive { .button-table > .button-row + .table-responsive {
margin-top: 10px; margin-top: 0.625rem;
} }
.index-page .card-list:before, .index-page .card-list:before,
@ -575,9 +557,9 @@ a.menu_link_active {
* Toggle button * Toggle button
*/ */
.toggle-button { .toggle-button {
border-radius: 13px; border-radius: 0.8125rem;
width: 50px; width: 3.125rem;
height: 26px; height: 1.625rem;
background: #ccc; background: #ccc;
position: relative; position: relative;
} }
@ -585,8 +567,8 @@ a.menu_link_active {
.toggle-button::before { .toggle-button::before {
content: ''; content: '';
display: block; display: block;
height: 24px; height: 1.5rem;
width: 24px; width: 1.5rem;
border-radius: 100%; border-radius: 100%;
background: #fff; background: #fff;
position: absolute; position: absolute;
@ -606,13 +588,13 @@ a.menu_link_active {
.toggle-button.running-status-button::before { .toggle-button.running-status-button::before {
top: 0; top: 0;
border: 4px solid var(--neutral-light-color); border: 0.25rem solid var(--neutral-light-color);
border-top: 4px solid var(--progress-color); border-top: 0.25rem solid var(--progress-color);
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
} }
.toggle-button.toggle-button--toggled.running-status-button::before { .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 { .running-status-button-before {
display: inline-block; display: inline-block;
border: 4px solid var(--neutral-light-color); border: 0.25rem solid var(--neutral-light-color);
border-top: 4px solid var(--progress-color); border-top: 0.25rem solid var(--progress-color);
border-radius: 50%; border-radius: 50%;
width: 16px; width: 1rem;
height: 16px; height: 1rem;
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
margin-left: 10px; margin-left: 0.625rem;
margin-bottom: -4px; margin-bottom: -0.25rem;
margin-right: -26px; margin-right: -1.625rem;
} }
.running-status-button:disabled { .running-status-button:disabled {
@ -636,15 +618,15 @@ a.menu_link_active {
} }
input[type='submit'].running-status-button { input[type='submit'].running-status-button {
padding-left: 32px; padding-left: 2rem;
} }
/* /*
* Button toolbar * Button toolbar
*/ */
.btn-toolbar { .btn-toolbar {
margin-top: 10px; margin-top: 0.625rem;
margin-bottom: 10px; margin-bottom: 0.625rem;
} }
.btn-toolbar > :not(:last-child):not(.running-status-button-before) { .btn-toolbar > :not(:last-child):not(.running-status-button-before) {
@ -668,12 +650,12 @@ input[type='submit'].running-status-button {
.app-header { .app-header {
display: grid; display: grid;
grid-template-columns: 0.2fr 1fr; grid-template-columns: 0.2fr 1fr;
column-gap: 20px; column-gap: 1.25rem;
margin-bottom: 20px; margin-bottom: 1.25rem;
} }
.app-header > img { .app-header > img {
margin: 25px auto 0; margin: 1.5625rem auto 0;
width: 100%; width: 100%;
} }
@ -713,8 +695,8 @@ input[type='submit'].running-status-button {
} }
.app-header img { .app-header img {
width: 150px; width: 9.375rem;
height: 150px; height: 9.375rem;
margin-top: 0; margin-top: 0;
} }
@ -726,11 +708,11 @@ input[type='submit'].running-status-button {
} }
.app-titles h2 { .app-titles h2 {
margin: 0 0 15px 0; margin: 0 0 0.9375rem 0;
} }
.app-titles .form-app-enable-disable { .app-titles .form-app-enable-disable {
margin: 30px auto; margin: 1.875rem auto;
} }
.app-titles .toggle-button { .app-titles .toggle-button {
@ -742,8 +724,8 @@ input[type='submit'].running-status-button {
*[id^='idm']:before { *[id^='idm']:before {
display: block; display: block;
content: " "; content: " ";
margin-top: -60px; margin-top: -3.75rem;
height: 60px; height: 3.75rem;
visibility: hidden; visibility: hidden;
} }
@ -751,8 +733,8 @@ input[type='submit'].running-status-button {
* Notifications * Notifications
*/ */
.notifications { .notifications {
margin-left: -15px; margin-left: -0.9375rem;
margin-right: -15px; margin-right: -0.9375rem;
} }
.notifications .dropdown-menu { .notifications .dropdown-menu {
@ -768,7 +750,7 @@ input[type='submit'].running-status-button {
/* Style for individual notification */ /* Style for individual notification */
.notification { .notification {
padding: 0.625rem 0.9375rem; padding: 0.625rem 0.9375rem;
border-left: 5px solid; border-left: 0.3125rem solid;
} }
.notification:not(:first-child) { .notification:not(:first-child) {
@ -788,8 +770,8 @@ img.notification-icon {
/* Show badge with various colors and overlap it onto icon */ /* Show badge with various colors and overlap it onto icon */
.notifications-dropdown .badge { .notifications-dropdown .badge {
padding: 2px 5px; padding: 0.125rem 0.3125rem;
margin-left: -12px; margin-left: -0.75rem;
color: #fff; color: #fff;
} }