kenmirrors/MagicMirror
1
0
Fork 0
mirror of https://github.com/MichMich/MagicMirror.git synced 2025-06-30 13:09:34 +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 /* 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. * MIT Licensed.
*/ */
@ -6,13 +10,22 @@
/* Uncomment and adjust accordingly if you want to import another font from the google-fonts-api: */ /* 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'); */ /* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;700&display=swap'); */
/* Change color and fonts here: */
:root { :root {
--color-text: #999; --color-text: #999;
--color-text-dimmed: #666; --color-text-dimmed: #666;
--color-text-bright: #fff; --color-text-bright: #fff;
--color-background: black; --color-background: black;
--font-size: 20px;
--font-primary: "Roboto Condensed"; --font-primary: "Roboto Condensed";
--font-secondary: "Roboto"; --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: 20px;
--font-size-small: 0.75rem; --font-size-small: 0.75rem;
--gap-body: 60px; --gap-body-top: 60px;
--gap-modules: calc(var(--gap-body) / 2); --gap-body-right: 60px;
--gap-body-bottom: 60px;
--gap-body-left: 60px;
--gap-modules: 30px;
} }
html { html {
@ -27,10 +31,10 @@ html {
} }
body { body {
margin: var(--gap-body); margin: var(--gap-body-top) var(--gap-body-right) var(--gap-body-bottom) var(--gap-body-left);
position: absolute; position: absolute;
height: calc(100% - 2 * var(--gap-body)); height: calc(100% - var(--gap-body-top) - var(--gap-body-bottom));
width: calc(100% - 2 * var(--gap-body)); width: calc(100% - var(--gap-body-right) - var(--gap-body-left));
background: var(--color-background); background: var(--color-background);
color: var(--color-text); color: var(--color-text);
font-family: var(--font-primary), sans-serif; font-family: var(--font-primary), sans-serif;
@ -159,10 +163,10 @@ sup {
.region.fullscreen { .region.fullscreen {
position: absolute; position: absolute;
top: calc(-1 * var(--gap-body)); top: calc(-1 * var(--gap-body-top));
left: calc(-1 * var(--gap-body)); left: calc(-1 * var(--gap-body-left));
right: calc(-1 * var(--gap-body)); right: calc(-1 * var(--gap-body-right));
bottom: calc(-1 * var(--gap-body)); bottom: calc(-1 * var(--gap-body-bottom));
pointer-events: none; pointer-events: none;
} }