mirror of
https://github.com/MichMich/MagicMirror.git
synced 2025-06-27 11:50:00 +00:00
add original main.css bak
This commit is contained in:
earlman
parent
162dcec331
commit
7ad12d954c
202
css/main.css
202
css/main.css
@ -1,24 +1,8 @@
|
|||||||
@import url("https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700&display=swap");
|
|
||||||
:root {
|
|
||||||
--text-xs: 0.667rem;
|
|
||||||
--text-sm: 1rem;
|
|
||||||
--text-md: 1.5rem;
|
|
||||||
--text-lg: 2.25rem;
|
|
||||||
--text-xl: 3.375rem;
|
|
||||||
--text-xxl: 5.063rem;
|
|
||||||
--text-lh: 1.5;
|
|
||||||
|
|
||||||
--grid-gap: 2rem;
|
|
||||||
--color-text-body: #aaa;
|
|
||||||
--color-text-bright: #fff;
|
|
||||||
--color-text-normal: #999;
|
|
||||||
--color-text-dimmed: #666;
|
|
||||||
--color-background: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
html {
|
||||||
cursor: none;
|
cursor: none;
|
||||||
font-size: 24px;
|
overflow: hidden;
|
||||||
|
background: #000;
|
||||||
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar {
|
::-webkit-scrollbar {
|
||||||
@ -26,14 +10,13 @@ html {
|
|||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: var(--color-background);
|
margin: 60px;
|
||||||
box-sizing: border-box;
|
position: absolute;
|
||||||
margin: 0;
|
height: calc(100% - 120px);
|
||||||
padding: 6vh 4vw 4vh;
|
width: calc(100% - 120px);
|
||||||
height: 100vh;
|
background: #000;
|
||||||
width: 100vw;
|
color: #aaa;
|
||||||
color: var(--color-text-body);
|
font-family: "Roboto Condensed", sans-serif;
|
||||||
font-family: "Quicksand", sans-serif;
|
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
line-height: 1.5em;
|
line-height: 1.5em;
|
||||||
@ -45,40 +28,41 @@ body {
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
.dimmed {
|
.dimmed {
|
||||||
color: var(--color-text-dimmed);
|
color: #666;
|
||||||
}
|
}
|
||||||
|
|
||||||
.normal {
|
.normal {
|
||||||
color: var(--color-text-normal);
|
color: #999;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bright {
|
.bright {
|
||||||
color: var(--color-text-bright);
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.xsmall {
|
.xsmall {
|
||||||
font-size: var(--text-xs);
|
font-size: 15px;
|
||||||
line-height: var(--text-lh);
|
line-height: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.small {
|
.small {
|
||||||
font-size: var(--text-sm);
|
font-size: 20px;
|
||||||
line-height: var(--text-lh);
|
line-height: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.medium {
|
.medium {
|
||||||
font-size: var(--text-md);
|
font-size: 30px;
|
||||||
line-height: var(--text-lh);
|
line-height: 35px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.large {
|
.large {
|
||||||
font-size: var(--text-lg);
|
font-size: 65px;
|
||||||
line-height: var(--text-lh);
|
line-height: 65px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.xlarge {
|
.xlarge {
|
||||||
font-size: var(--text-xl);
|
font-size: 75px;
|
||||||
line-height: var(--text-lh);
|
line-height: 75px;
|
||||||
}
|
letter-spacing: -3px;
|
||||||
.xxlarge {
|
|
||||||
font-size: var(--text-xxl);
|
|
||||||
line-height: var(--text-lh);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.thin {
|
.thin {
|
||||||
@ -87,17 +71,17 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.light {
|
.light {
|
||||||
font-family: "Quicksand", sans-serif;
|
font-family: "Roboto Condensed", sans-serif;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
}
|
}
|
||||||
|
|
||||||
.regular {
|
.regular {
|
||||||
font-family: "Quicksand", sans-serif;
|
font-family: "Roboto Condensed", sans-serif;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bold {
|
.bold {
|
||||||
font-family: "Quicksand", sans-serif;
|
font-family: "Roboto Condensed", sans-serif;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -112,7 +96,7 @@ body {
|
|||||||
header {
|
header {
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-family: "Quicksand", Arial, Helvetica, sans-serif;
|
font-family: "Roboto Condensed", Arial, Helvetica, sans-serif;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
border-bottom: 1px solid #666;
|
border-bottom: 1px solid #666;
|
||||||
line-height: 15px;
|
line-height: 15px;
|
||||||
@ -150,55 +134,103 @@ sup {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
*
|
* Region Definitions.
|
||||||
* LAYOUT STUFF
|
|
||||||
*
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
.region {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
.region.fullscreen {
|
.region.fullscreen {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
height: 100vh;
|
top: -60px;
|
||||||
width: 100vw;
|
left: -60px;
|
||||||
top: 0;
|
right: -60px;
|
||||||
left: 0;
|
bottom: -60px;
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
z-index: -1;
|
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.region.fullscreen * {
|
.region.fullscreen * {
|
||||||
pointer-events: auto;
|
pointer-events: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.region.right {
|
||||||
|
right: 0;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.region.top {
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.region.top .container {
|
||||||
|
margin-bottom: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.region.bottom .container {
|
||||||
|
margin-top: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.region.top .container:empty {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.region.top.center,
|
||||||
|
.region.bottom.center {
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.region.top.right,
|
||||||
|
.region.top.left,
|
||||||
|
.region.top.center {
|
||||||
|
top: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.region.bottom {
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.region.bottom .container:empty {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.region.bottom.right,
|
||||||
|
.region.bottom.center,
|
||||||
|
.region.bottom.left {
|
||||||
|
bottom: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.region.bar {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.region.third,
|
||||||
|
.region.middle.center {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.region.upper.third {
|
||||||
|
top: 33%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.region.middle.center {
|
||||||
|
top: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.region.lower.third {
|
||||||
|
top: 66%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.region.left {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
.region table {
|
.region table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-spacing: 0;
|
border-spacing: 0;
|
||||||
border-collapse: separate;
|
border-collapse: separate;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
|
||||||
display: grid;
|
|
||||||
grid-gap: var(--grid-gap);
|
|
||||||
grid-template-rows: repeat(5, 1fr);
|
|
||||||
}
|
|
||||||
|
|
||||||
.top.bar {
|
|
||||||
display: grid;
|
|
||||||
grid-gap: var(--grid-gap);
|
|
||||||
grid-template-columns: repeat(3, 1fr);
|
|
||||||
}
|
|
||||||
|
|
||||||
.top.bar > .container {
|
|
||||||
grid-column: 1 / -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bottom.bar {
|
|
||||||
display: grid;
|
|
||||||
grid-gap: var(--grid-gap);
|
|
||||||
grid-template-columns: repeat(3, 1fr);
|
|
||||||
}
|
|
||||||
|
|
||||||
.region {
|
|
||||||
/* for testing */
|
|
||||||
/* border: 1px solid white; */
|
|
||||||
}
|
|
||||||
|
|||||||
205
css/main_grid.css
Normal file
205
css/main_grid.css
Normal file
@ -0,0 +1,205 @@
|
|||||||
|
@import url("https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700&display=swap");
|
||||||
|
:root {
|
||||||
|
--text-xs: 0.667rem;
|
||||||
|
--text-sm: 1rem;
|
||||||
|
--text-md: 1.5rem;
|
||||||
|
--text-lg: 2.25rem;
|
||||||
|
--text-xl: 3.375rem;
|
||||||
|
--text-xxl: 5.063rem;
|
||||||
|
--text-lh: 1.5;
|
||||||
|
|
||||||
|
--grid-gap: 2rem;
|
||||||
|
--color-text-body: #aaa;
|
||||||
|
--color-text-bright: #fff;
|
||||||
|
--color-text-normal: #999;
|
||||||
|
--color-text-dimmed: #666;
|
||||||
|
--color-background: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
cursor: none;
|
||||||
|
font-size: 24px;
|
||||||
|
background-color: var(--color-background);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: var(--color-background);
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 6vh 4vw 4vh;
|
||||||
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
color: var(--color-text-body);
|
||||||
|
font-family: "Quicksand", sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 2em;
|
||||||
|
line-height: 1.5em;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Default styles.
|
||||||
|
*/
|
||||||
|
|
||||||
|
.dimmed {
|
||||||
|
color: var(--color-text-dimmed);
|
||||||
|
}
|
||||||
|
|
||||||
|
.normal {
|
||||||
|
color: var(--color-text-normal);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bright {
|
||||||
|
color: var(--color-text-bright);
|
||||||
|
}
|
||||||
|
|
||||||
|
.xsmall {
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
line-height: var(--text-lh);
|
||||||
|
}
|
||||||
|
.small {
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
line-height: var(--text-lh);
|
||||||
|
}
|
||||||
|
.medium {
|
||||||
|
font-size: var(--text-md);
|
||||||
|
line-height: var(--text-lh);
|
||||||
|
}
|
||||||
|
.large {
|
||||||
|
font-size: var(--text-lg);
|
||||||
|
line-height: var(--text-lh);
|
||||||
|
}
|
||||||
|
.xlarge {
|
||||||
|
font-size: var(--text-xl);
|
||||||
|
line-height: var(--text-lh);
|
||||||
|
}
|
||||||
|
.xxlarge {
|
||||||
|
font-size: var(--text-xxl);
|
||||||
|
line-height: var(--text-lh);
|
||||||
|
}
|
||||||
|
|
||||||
|
.thin {
|
||||||
|
font-family: Roboto, sans-serif;
|
||||||
|
font-weight: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.light {
|
||||||
|
font-family: "Quicksand", sans-serif;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.regular {
|
||||||
|
font-family: "Quicksand", sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-family: "Quicksand", sans-serif;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.align-right {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.align-left {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 15px;
|
||||||
|
font-family: "Quicksand", Arial, Helvetica, sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
border-bottom: 1px solid #666;
|
||||||
|
line-height: 15px;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
sup {
|
||||||
|
font-size: 50%;
|
||||||
|
line-height: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Module styles.
|
||||||
|
*/
|
||||||
|
|
||||||
|
.module {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.region.bottom .module {
|
||||||
|
margin-top: 30px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-wrap {
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pre-line {
|
||||||
|
white-space: pre-line;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* LAYOUT STUFF
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
.region.fullscreen {
|
||||||
|
position: absolute;
|
||||||
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: -1;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.region.fullscreen * {
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.region table {
|
||||||
|
width: 100%;
|
||||||
|
border-spacing: 0;
|
||||||
|
border-collapse: separate;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
display: grid;
|
||||||
|
grid-gap: var(--grid-gap);
|
||||||
|
grid-template-rows: repeat(5, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.top.bar {
|
||||||
|
display: grid;
|
||||||
|
grid-gap: var(--grid-gap);
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.top.bar > .container {
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom.bar {
|
||||||
|
display: grid;
|
||||||
|
grid-gap: var(--grid-gap);
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.region {
|
||||||
|
/* for testing */
|
||||||
|
/* border: 1px solid white; */
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user