kenmirrors/MagicMirror
1
0
Fork 0
mirror of https://github.com/MichMich/MagicMirror.git synced 2025-06-30 04:59:32 +00:00
Code Issues Projects Releases Wiki Activity

Add more properties for finer body margins

Browse Source
This commit is contained in:
rejas 2021-05-14 17:09:46 +02:00
parent 6d356ff770
commit fcfe57e5e2
2 changed files with 28 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
css/custom.css.sample
View File

@ -1,4 +1,8 @@
/* Magic Mirror Custom CSS Sample
*
* Change color and fonts here.
*
* Beware that properties cannot be unitless, so for example write '--gap-body: 0px;' instead of just '--gap-body: 0;'
*
* MIT Licensed.
*/
@ -6,13 +10,22 @@
/* Uncomment and adjust accordingly if you want to import another font from the google-fonts-api: */
/* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;700&display=swap'); */
/* Change color and fonts here: */
:root {
--color-text: #999;
--color-text-dimmed: #666;
--color-text-bright: #fff;
--color-background: black;
--font-size: 20px;
--font-primary: "Roboto Condensed";
--font-secondary: "Roboto";
--font-size: 20px;
--font-size-small: 0.75rem;
--gap-body-top: 60px;
--gap-body-right: 60px;
--gap-body-bottom: 60px;
--gap-body-left: 60px;
--gap-modules: 30px;
}

22
css/main.css
View File

@ -10,8 +10,12 @@
--font-size: 20px;
--font-size-small: 0.75rem;
--gap-body: 60px;
--gap-modules: calc(var(--gap-body) / 2);
--gap-body-top: 60px;
--gap-body-right: 60px;
--gap-body-bottom: 60px;
--gap-body-left: 60px;
--gap-modules: 30px;
}
html {
@ -27,10 +31,10 @@ html {
}
body {
margin: var(--gap-body);
margin: var(--gap-body-top) var(--gap-body-right) var(--gap-body-bottom) var(--gap-body-left);
position: absolute;
height: calc(100% - 2 * var(--gap-body));
width: calc(100% - 2 * var(--gap-body));
height: calc(100% - var(--gap-body-top) - var(--gap-body-bottom));
width: calc(100% - var(--gap-body-right) - var(--gap-body-left));
background: var(--color-background);
color: var(--color-text);
font-family: var(--font-primary), sans-serif;
@ -159,10 +163,10 @@ sup {
.region.fullscreen {
position: absolute;
top: calc(-1 * var(--gap-body));
left: calc(-1 * var(--gap-body));
right: calc(-1 * var(--gap-body));
bottom: calc(-1 * var(--gap-body));
top: calc(-1 * var(--gap-body-top));
left: calc(-1 * var(--gap-body-left));
right: calc(-1 * var(--gap-body-right));
bottom: calc(-1 * var(--gap-body-bottom));
pointer-events: none;
}