diff options
author | Jan C. Borchardt <hey@jancborchardt.net> | 2020-09-18 15:27:51 +0300 |
---|---|---|
committer | backportbot[bot] <backportbot[bot]@users.noreply.github.com> | 2020-09-18 17:12:53 +0300 |
commit | d2e577f77edaeccbc7a36d81fabf7e758f4c1551 (patch) | |
tree | a13b7a07747d942735006def7c56954b6861a0f2 | |
parent | 3680bc2af5a113b0168d87717922e5f5c6408c94 (diff) |
Various design and typography improvements
Signed-off-by: Jan C. Borchardt <hey@jancborchardt.net>
-rw-r--r-- | css/style.scss | 35 | ||||
-rw-r--r-- | templates/settings-admin.php | 20 |
2 files changed, 23 insertions, 32 deletions
diff --git a/css/style.scss b/css/style.scss index 9b71fad..9a91bfc 100644 --- a/css/style.scss +++ b/css/style.scss @@ -41,26 +41,26 @@ .info { font-weight: bold; - color: var(--color-text-light); } .smallinfo { - color: var(--color-text-light); - font-size: 11px; + color: var(--color-text-maxcontrast); } .infobox { display: flex; flex-wrap: nowrap; align-items: center; - - border: 1px solid var(--color-border); - padding: 15px; - margin: 15px 0; - color: var(--color-text-lighter); - background-color: var(--color-background-dark); - border-radius: 6px; - box-shadow: 1px 1px 9px 1px var(--color-box-shadow); + padding: 16px; + margin: 16px 0; + background-color: var(--color-main-background); + border: 2px solid var(--color-border); + border-radius: var(--border-radius-large); + + &.cpuSection, + &.memorySection { + padding: 16px 0 0 0; + } } .diskchart-container { @@ -82,17 +82,7 @@ flex: 1 0 auto; } -.infobox h2 { - color: #555; - font-size: 18px; - font-weight: bold; - padding: 5px; - margin: 0; -} - .infobox h3 { - color: #555; - font-size: 22px; font-weight: bold; padding: 5px 0 10px 0; margin: 0; @@ -208,7 +198,7 @@ min-width: 100%; } - +/* @media only screen and (max-width: 1200px) { .col-xl-6 { flex-basis: 50%; @@ -244,3 +234,4 @@ min-width: 100%; } } +*/ diff --git a/templates/settings-admin.php b/templates/settings-admin.php index c43b427..7f4e7bb 100644 --- a/templates/settings-admin.php +++ b/templates/settings-admin.php @@ -90,7 +90,7 @@ $disks = $_['diskinfo']; <img class="infoicon" src="<?php p(image_path('core', 'actions/screen.svg')); ?>"> <?php p($l->t('Load')); ?> </h2> - <div class="infobox" id="cpuSection"> + <div id="cpuSection" class="infobox"> <div class="cpu-wrapper"> <canvas id="cpuloadcanvas" style="width:100%; height:200px" width="600" height="200"></canvas> </div> @@ -103,7 +103,7 @@ $disks = $_['diskinfo']; <img class="infoicon" src="<?php p(image_path('core', 'actions/quota.svg')); ?>"> <?php p($l->t('Memory')); ?> </h2> - <div class="infobox"> + <div id="memorySection" class="infobox"> <div class="memory-wrapper"> <canvas id="memorycanvas" style="width:100%; height:200px" width="600" height="200"></canvas> </div> @@ -133,15 +133,15 @@ $disks = $_['diskinfo']; </div> <div class="diskinfo-container"> <h3><?php p(basename($disk->getDevice())); ?></h3> - <?php p($l->t('Mount')); ?> : + <?php p($l->t('Mount')); ?>: <span class="info"><?php p($disk->getMount()); ?></span><br> - <?php p($l->t('Filesystem')); ?> : + <?php p($l->t('Filesystem')); ?>: <span class="info"><?php p($disk->getFs()); ?></span><br> - <?php p($l->t('Size')); ?> : + <?php p($l->t('Size')); ?>: <span class="info"><?php p(FormatMegabytes($disk->getUsed() + $disk->getAvailable())); ?></span><br> - <?php p($l->t('Available')); ?> : + <?php p($l->t('Available')); ?>: <span class="info"><?php p(FormatMegabytes($disk->getAvailable())); ?></span><br> - <?php p($l->t('Used')); ?> : + <?php p($l->t('Used')); ?>: <span class="info"><?php p($disk->getPercent()); ?></span><br> </div> </div> @@ -153,9 +153,9 @@ $disks = $_['diskinfo']; <?php p($l->t('You will get a notification once one of your disks is nearly full.')); ?> </div> - <p><?php p($l->t('Files:')); ?> <em id="numFilesStorage"><?php p($_['storage']['num_files']); ?></em></p> - <p><?php p($l->t('Storages:')); ?> <em id="numFilesStorages"><?php p($_['storage']['num_storages']); ?></em></p> - <p><?php p($l->t('Free Space:')); ?> <em id="systemDiskFreeSpace"><?php p($_['system']['freespace']); ?></em> + <p><?php p($l->t('Files:')); ?> <strong id="numFilesStorage"><?php p($_['storage']['num_files']); ?></strong></p> + <p><?php p($l->t('Storages:')); ?> <strong id="numFilesStorages"><?php p($_['storage']['num_storages']); ?></strong></p> + <p><?php p($l->t('Free Space:')); ?> <strong id="systemDiskFreeSpace"><?php p($_['system']['freespace']); ?></strong> </p> </div> |