Merge pull request #239 from nextcloud/backport/238/stable20

[stable20] Various design and typography improvements

Author: MorrisJobke

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%;
 	}
 }
+*/

templates/settings-admin.php

@@ -90,7 +90,7 @@ function FormatMegabytes($byte) {
 					<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 @@ function FormatMegabytes($byte) {
 					<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 @@ function FormatMegabytes($byte) {
 						</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 @@ function FormatMegabytes($byte) {
 			<?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>