Updates to Material Icons and Roboto fonts (#1657)

* Replaced older Roboto WOFFs with TTFs

* Added new Material Icons and variants. Refactored the CSS for them.

* Added inclusion of custom CSS and template,

* Fix cube (missing currentColor)

* Added directory for custom assets as needed.

---------

Co-authored-by: 96LawDawg <76912527+96LawDawg@users.noreply.github.com>
This commit is contained in:
Brandon Lewis 2023-02-27 06:53:15 -08:00 committed by GitHub
parent ce43cce7dd
commit 6ea98dea38
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
49 changed files with 69 additions and 53 deletions

3
.gitignore vendored
View File

@ -1,4 +1,7 @@
config.json
assets/custom/*
!assets/custom/.keep
custom.*
coverage
node_modules
save

0
assets/custom/.keep Normal file
View File

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -1,4 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<rect x="5.5" y="5.5" width="13" height="13" rx="1"/>
<rect x="5.5" y="5.5" width="13" height="13" rx="1" fill="currentColor"/>
<rect width="24" height="24" fill="none"/>
</svg>

Before

Width:  |  Height:  |  Size: 192 B

After

Width:  |  Height:  |  Size: 212 B

View File

@ -0,0 +1 @@
/* Edit custom.css to include any extra css you might want. */

View File

@ -1,8 +1,6 @@
@font-face {
font-family: "Roboto";
src:
url("i/fonts/Roboto-Regular.woff2") format("woff2"),
url("i/fonts/Roboto-Regular.woff") format("woff");
src: url("i/fonts/Roboto-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
font-display: swap;
@ -10,9 +8,7 @@
@font-face {
font-family: "Roboto";
src:
url("i/fonts/Roboto-Bold.woff2") format("woff2"),
url("i/fonts/Roboto-Bold.woff") format("woff");
src: url("i/fonts/Roboto-Bold.ttf") format("truetype");
font-weight: bold;
font-style: normal;
font-display: swap;
@ -20,9 +16,7 @@
@font-face {
font-family: "Roboto";
src:
url("i/fonts/Roboto-Italic.woff2") format("woff2"),
url("i/fonts/Roboto-Italic.woff") format("woff");
src: url("i/fonts/Roboto-Italic.ttf") format("truetype");
font-weight: normal;
font-style: italic;
font-display: swap;
@ -30,9 +24,7 @@
@font-face {
font-family: "Roboto";
src:
url("i/fonts/Roboto-BoldItalic.woff2") format("woff2"),
url("i/fonts/Roboto-BoldItalic.woff") format("woff");
src: url("i/fonts/Roboto-BoldItalic.ttf") format("truetype");
font-weight: bold;
font-style: italic;
font-display: swap;
@ -40,9 +32,7 @@
@font-face {
font-family: "Roboto";
src:
url("i/fonts/Roboto-LightItalic.woff2") format("woff2"),
url("i/fonts/Roboto-LightItalic.woff") format("woff");
src: url("i/fonts/Roboto-LightItalic.ttf") format("truetype");
font-weight: 300;
font-style: italic;
font-display: swap;
@ -50,9 +40,7 @@
@font-face {
font-family: "Roboto";
src:
url("i/fonts/Roboto-Black.woff2") format("woff2"),
url("i/fonts/Roboto-Black.woff") format("woff");
src: url("i/fonts/Roboto-Black.ttf") format("truetype");
font-weight: 900;
font-style: normal;
font-display: swap;
@ -60,9 +48,7 @@
@font-face {
font-family: "Roboto";
src:
url("i/fonts/Roboto-Medium.woff2") format("woff2"),
url("i/fonts/Roboto-Medium.woff") format("woff");
src: url("i/fonts/Roboto-Medium.ttf") format("truetype");
font-weight: 500;
font-style: normal;
font-display: swap;
@ -70,9 +56,7 @@
@font-face {
font-family: "Roboto";
src:
url("i/fonts/Roboto-Light.woff2") format("woff2"),
url("i/fonts/Roboto-Light.woff") format("woff");
src: url("i/fonts/Roboto-Light.ttf") format("truetype");
font-weight: 300;
font-style: normal;
font-display: swap;
@ -80,9 +64,7 @@
@font-face {
font-family: "Roboto";
src:
url("i/fonts/Roboto-BlackItalic.woff2") format("woff2"),
url("i/fonts/Roboto-BlackItalic.woff") format("woff");
src: url("i/fonts/Roboto-BlackItalic.ttf") format("truetype");
font-weight: 900;
font-style: italic;
font-display: swap;
@ -90,9 +72,7 @@
@font-face {
font-family: "Roboto";
src:
url("i/fonts/Roboto-Thin.woff2") format("woff2"),
url("i/fonts/Roboto-Thin.woff") format("woff");
src: url("i/fonts/Roboto-Thin.ttf") format("truetype");
font-weight: 100;
font-style: normal;
font-display: swap;
@ -100,9 +80,7 @@
@font-face {
font-family: "Roboto";
src:
url("i/fonts/Roboto-MediumItalic.woff2") format("woff2"),
url("i/fonts/Roboto-MediumItalic.woff") format("woff");
src: url("i/fonts/Roboto-MediumItalic.ttf") format("truetype");
font-weight: 500;
font-style: italic;
font-display: swap;
@ -110,9 +88,7 @@
@font-face {
font-family: "Roboto";
src:
url("i/fonts/Roboto-ThinItalic.woff2") format("woff2"),
url("i/fonts/Roboto-ThinItalic.woff") format("woff");
src: url("i/fonts/Roboto-ThinItalic.ttf") format("truetype");
font-weight: 100;
font-style: italic;
font-display: swap;
@ -256,27 +232,38 @@
font-family: "Material Icons";
font-style: normal;
font-weight: 400;
src: url("i/fonts/Material-Icons.woff2?version=7") format("woff2");
src: url("i/fonts/MaterialIcons-Regular.ttf") format("truetype");
}
.font-material-icons{
font-family: "Material Icons";
font-weight: normal;
@font-face {
font-family: "Material Icons Outlined";
font-style: normal;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: "liga";
-webkit-font-smoothing: antialiased;
font-feature-settings: "liga";
font-weight: 400;
src: url("i/fonts/MaterialIconsOutlined-Regular.otf") format("opentype");
}
.material-icons {
font-family: "Material Icons";
@font-face {
font-family: "Material Icons Round";
font-style: normal;
font-weight: 400;
src: url("i/fonts/MaterialIconsRound-Regular.otf") format("opentype");
}
@font-face {
font-family: "Material Icons Sharp";
font-style: normal;
font-weight: 400;
src: url("i/fonts/MaterialIconsSharp-Regular.otf") format("opentype");
}
@font-face {
font-family: "Material Icons Two Tone";
font-style: normal;
font-weight: 400;
src: url("i/fonts/MaterialIconsTwoTone-Regular.otf") format("opentype");
}
.material-icons, .material-icons-outlined, .material-icons-round, .material-icons-sharp, .material-icons-twotone, .font-material-icons {
font-weight: normal;
font-style: normal;
font-size: 24px;
@ -291,10 +278,31 @@
-webkit-font-smoothing: antialiased;
font-feature-settings: "liga";
}
.material-icons.intext {
font-size: 20px;
}
.material-icons, .font-material-icons {
font-family: "Material Icons";
}
.material-icons-outlined {
font-family: "Material Icons Outlined";
}
.material-icons-round {
font-family: "Material Icons Round";
}
.material-icons-sharp {
font-family: "Material Icons Sharp";
}
.material-icons-twotone {
font-family: "Material Icons Two Tone";
}
@font-face {
font-family: "VTT-Symbols";
src: url("i/fonts/VTT-Symbols.woff?version=6") format("woff");

View File

@ -8,6 +8,9 @@ class Config {
this.config = JSON.parse(fs.readFileSync(path.resolve() + '/config.template.json'));
this.config = Object.assign(this.config, JSON.parse(fs.readFileSync(path.resolve() + '/config.json')));
if(!fs.existsSync(path.resolve() + '/client/css/custom.css'))
fs.copyFileSync(path.resolve() + '/client/css/custom_template.css', path.resolve() + '/client/css/custom.css');
}
directory(index) {

View File

@ -45,6 +45,7 @@ export default function minifyRoom() {
'client/css/widgets/timer.css',
'client/css/fonts.css',
'client/css/custom.css',
],
output: os.tmpdir() + '/out.css'
}).then(function(min) {