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 {
|
||||
cursor: none;
|
||||
font-size: 24px;
|
||||
overflow: hidden;
|
||||
background: #000;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
@ -26,14 +10,13 @@ html {
|
||||
}
|
||||
|
||||
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;
|
||||
margin: 60px;
|
||||
position: absolute;
|
||||
height: calc(100% - 120px);
|
||||
width: calc(100% - 120px);
|
||||
background: #000;
|
||||
color: #aaa;
|
||||
font-family: "Roboto Condensed", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 2em;
|
||||
line-height: 1.5em;
|
||||
@ -45,40 +28,41 @@ body {
|
||||
*/
|
||||
|
||||
.dimmed {
|
||||
color: var(--color-text-dimmed);
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.normal {
|
||||
color: var(--color-text-normal);
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.bright {
|
||||
color: var(--color-text-bright);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.xsmall {
|
||||
font-size: var(--text-xs);
|
||||
line-height: var(--text-lh);
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: var(--text-sm);
|
||||
line-height: var(--text-lh);
|
||||
font-size: 20px;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
.medium {
|
||||
font-size: var(--text-md);
|
||||
line-height: var(--text-lh);
|
||||
font-size: 30px;
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
.large {
|
||||
font-size: var(--text-lg);
|
||||
line-height: var(--text-lh);
|
||||
font-size: 65px;
|
||||
line-height: 65px;
|
||||
}
|
||||
|
||||
.xlarge {
|
||||
font-size: var(--text-xl);
|
||||
line-height: var(--text-lh);
|
||||
}
|
||||
.xxlarge {
|
||||
font-size: var(--text-xxl);
|
||||
line-height: var(--text-lh);
|
||||
font-size: 75px;
|
||||
line-height: 75px;
|
||||
letter-spacing: -3px;
|
||||
}
|
||||
|
||||
.thin {
|
||||
@ -87,17 +71,17 @@ body {
|
||||
}
|
||||
|
||||
.light {
|
||||
font-family: "Quicksand", sans-serif;
|
||||
font-family: "Roboto Condensed", sans-serif;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.regular {
|
||||
font-family: "Quicksand", sans-serif;
|
||||
font-family: "Roboto Condensed", sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-family: "Quicksand", sans-serif;
|
||||
font-family: "Roboto Condensed", sans-serif;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@ -112,7 +96,7 @@ body {
|
||||
header {
|
||||
text-transform: uppercase;
|
||||
font-size: 15px;
|
||||
font-family: "Quicksand", Arial, Helvetica, sans-serif;
|
||||
font-family: "Roboto Condensed", Arial, Helvetica, sans-serif;
|
||||
font-weight: 400;
|
||||
border-bottom: 1px solid #666;
|
||||
line-height: 15px;
|
||||
@ -150,55 +134,103 @@ sup {
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* LAYOUT STUFF
|
||||
*
|
||||
* Region Definitions.
|
||||
*/
|
||||
|
||||
.region {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.region.fullscreen {
|
||||
position: absolute;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
top: -60px;
|
||||
left: -60px;
|
||||
right: -60px;
|
||||
bottom: -60px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.region.fullscreen * {
|
||||
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 {
|
||||
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; */
|
||||
}
|
||||
|
||||
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