mirror of
https://github.com/zombieFox/nightTab.git
synced 2024-10-05 01:31:57 +02:00
break up logo and splash components
This commit is contained in:
Kuldeep M
GitHub
parent
80cc0bbae4
commit
b2860df315
@ -1,127 +0,0 @@
|
||||
@keyframes appear {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
0% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
10% {
|
||||
transform: translate3d(-1.2em, 0, 0);
|
||||
}
|
||||
|
||||
20% {
|
||||
transform: translate3d(1.2em, 0, 0);
|
||||
}
|
||||
|
||||
30% {
|
||||
transform: translate3d(-1em, 0, 0);
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: translate3d(1em, 0, 0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate3d(-0.8em, 0, 0);
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: translate3d(0.8em, 0, 0);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: translate3d(-0.3em, 0, 0);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: translate3d(0.3em, 0, 0);
|
||||
}
|
||||
|
||||
90% {
|
||||
transform: translate3d(-0.1em, 0, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pop {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes jello {
|
||||
0% {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
30% {
|
||||
transform: scale3d(1.25, 0.75, 1);
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: scale3d(0.75, 1.25, 1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale3d(1.15, 0.85, 1);
|
||||
}
|
||||
|
||||
65% {
|
||||
transform: scale3d(0.95, 1.05, 1);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: scale3d(1.05, 0.95, 1);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes circle-in {
|
||||
0% {
|
||||
clip-path: circle(100% at 50% 50%);
|
||||
}
|
||||
|
||||
100% {
|
||||
clip-path: circle(0% at 50% 50%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes circle-out {
|
||||
0% {
|
||||
clip-path: circle(0% at 50% 50%);
|
||||
}
|
||||
|
||||
100% {
|
||||
clip-path: circle(100% at 50% 50%);
|
||||
}
|
||||
}
|
||||
@ -1,26 +0,0 @@
|
||||
/* open sans */
|
||||
@font-face {
|
||||
font-family: "Open Sans";
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
src:
|
||||
local("Open Sans Regular"),
|
||||
local("OpenSans-Regular"),
|
||||
url("../../../font/open-sans/open-sans-400.woff") format("woff"),
|
||||
url("../../../font/open-sans/open-sans-400.woff2") format("woff2"),
|
||||
url("../../../font/open-sans/open-sans-400.ttf") format("truetype");
|
||||
}
|
||||
|
||||
/* fjalla one */
|
||||
@font-face {
|
||||
font-family: "Fjalla One";
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
src:
|
||||
local("Fjalla One"),
|
||||
url("../../../font/fjalla-one/fjalla-one-400.woff") format("woff"),
|
||||
url("../../../font/fjalla-one/fjalla-one-400.woff2") format("woff2"),
|
||||
url("../../../font/fjalla-one/fjalla-one-400.ttf") format("truetype");
|
||||
}
|
||||
@ -7,8 +7,6 @@ import '../../style/font/index.css';
|
||||
import '../../style/spacing/index.css';
|
||||
import '../../style/state/index.css';
|
||||
import '../../style/typography/index.css';
|
||||
//FIXME version to move made into its own component
|
||||
import '../../style/version/index.css';
|
||||
import '../../style/zindex/index.css';
|
||||
import '../../style/utility/index.css';
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,63 +0,0 @@
|
||||
.is-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.is-inline-block {
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
.is-block {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.is-transparent {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
.is-opaque {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.is-invisible {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
|
||||
.is-visible {
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
.is-small {
|
||||
transform: scale(0.5) !important;
|
||||
}
|
||||
|
||||
.is-large {
|
||||
transform: scale(1.5) !important;
|
||||
}
|
||||
|
||||
.is-scroll-disabled {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.is-scroll-x-disabled {
|
||||
overflow-x: hidden !important;
|
||||
}
|
||||
|
||||
.is-scroll-y-disabled {
|
||||
overflow-y: hidden !important;
|
||||
}
|
||||
|
||||
.is-appear {
|
||||
animation: appear var(--layout-transition-medium) 1;
|
||||
}
|
||||
|
||||
.is-shake {
|
||||
animation: shake var(--layout-transition-slow) 1;
|
||||
}
|
||||
|
||||
.is-pop {
|
||||
animation: pop var(--layout-transition-medium) 1;
|
||||
}
|
||||
|
||||
.is-jello {
|
||||
animation: jello var(--layout-transition-slow) 1;
|
||||
}
|
||||
@ -1,183 +0,0 @@
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0 0 1em 0;
|
||||
font-weight: normal;
|
||||
line-height: 1.6;
|
||||
color: hsl(var(--theme-primary-text-010));
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.5em;
|
||||
font-family: var(--theme-font-display-name);
|
||||
font-weight: var(--theme-font-display-weight);
|
||||
font-style: var(--theme-font-display-style);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.3em;
|
||||
font-family: var(--theme-font-display-name);
|
||||
font-weight: var(--theme-font-display-weight);
|
||||
font-style: var(--theme-font-display-style);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.1em;
|
||||
font-family: var(--theme-font-ui-name);
|
||||
font-weight: var(--theme-font-ui-weight);
|
||||
font-style: var(--theme-font-ui-style);
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1em;
|
||||
font-family: var(--theme-font-ui-name);
|
||||
font-weight: var(--theme-font-ui-weight);
|
||||
font-style: var(--theme-font-ui-style);
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1em;
|
||||
font-family: var(--theme-font-ui-name);
|
||||
font-weight: var(--theme-font-ui-weight);
|
||||
font-style: var(--theme-font-ui-style);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 0.75em;
|
||||
font-family: var(--theme-font-ui-name);
|
||||
font-weight: var(--theme-font-ui-weight);
|
||||
font-style: var(--theme-font-ui-style);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
p {
|
||||
color: hsl(var(--theme-primary-text-010));
|
||||
margin: 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
p:not(:last-child) {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
border-top: var(--layout-horizontal-rule-small);
|
||||
border-radius: calc(var(--theme-radius) * 0.01em);
|
||||
margin: calc(var(--wrap-space) * 2) 0;
|
||||
clear: both;
|
||||
transition: border-color var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
b,
|
||||
caption,
|
||||
strong {
|
||||
color: hsl(var(--theme-primary-text-010));
|
||||
font-family: var(--theme-font-ui-name);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
i {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
a {
|
||||
color: hsl(var(--theme-primary-text-010));
|
||||
text-decoration: underline;
|
||||
transition: text-decoration var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
a:link,
|
||||
a:visited {
|
||||
color: hsl(var(--theme-primary-text-010));
|
||||
}
|
||||
|
||||
a:focus {
|
||||
text-decoration-color: hsl(var(--theme-primary-text-010));
|
||||
outline: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: hsl(var(--theme-primary-text-010));
|
||||
text-decoration-color: rgb(var(--theme-accent));
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: hsl(var(--theme-primary-text-010));
|
||||
text-decoration-color: hsl(var(--theme-primary-text-010));
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0 0 0 1.5em;
|
||||
}
|
||||
|
||||
ol:not(:last-child),
|
||||
ul:not(:last-child) {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li>ul,
|
||||
li>ol {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li:not(:last-child) {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
li>ul:not(:last-child),
|
||||
li>ol:not(:last-child) {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
table {
|
||||
border: 0;
|
||||
margin: 0 0 1em;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
table thead tr td,
|
||||
table thead tr th {
|
||||
background-color: hsl(var(--theme-primary-030));
|
||||
border: 0;
|
||||
border-bottom: 1px solid hsl(var(--theme-primary-040));
|
||||
padding: 0.5em;
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
font-family: var(--theme-font-ui-name);
|
||||
font-weight: var(--theme-font-ui-weight);
|
||||
font-style: var(--theme-font-ui-style);
|
||||
font-weight: bold;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
table tr:nth-child(odd) {
|
||||
background-color: hsl(var(--theme-primary-020));
|
||||
}
|
||||
|
||||
table tbody tr td,
|
||||
table tbody tr th {
|
||||
padding: 0.25em 0.5em;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: hsl(var(--theme-primary-040));
|
||||
padding: 0.2em 0.5em;
|
||||
border-radius: calc(var(--theme-radius) * 0.01em);
|
||||
}
|
||||
@ -1,85 +0,0 @@
|
||||
:root {
|
||||
--utility-muted: var(--theme-primary-110);
|
||||
--utility-muted-hover: var(--theme-primary-110);
|
||||
--utility-muted-focus-active: var(--theme-primary-110);
|
||||
--utility-muted-checked: var(--theme-primary-110);
|
||||
--utility-muted-disabled: var(--theme-primary-030);
|
||||
}
|
||||
|
||||
.list-unstyled {
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.list-unstyled li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.list-unstyled li:not(:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.list-feature {
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
.list-feature li {
|
||||
padding: 0.25em 0.5em;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.list-feature li:not(:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.list-inline li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.large {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: hsl(var(--utility-muted));
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.d-flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.d-horizontal {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.d-vertical {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.d-center {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.d-gap {
|
||||
gap: 1em;
|
||||
}
|
||||
@ -1,40 +0,0 @@
|
||||
:root {
|
||||
--version-icon-size: 22;
|
||||
--version-icon: calc((var(--version-icon-size) / 4) * 1em);
|
||||
}
|
||||
|
||||
.version {
|
||||
font-size: 1rem;
|
||||
display: inline-grid;
|
||||
grid-template-columns: auto auto;
|
||||
grid-gap: var(--wrap-space);
|
||||
align-items: center;
|
||||
justify-items: start;
|
||||
}
|
||||
|
||||
.version-app-name {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.version-number:not(:last-child),
|
||||
.version-name:not(:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.version-number {
|
||||
background-color: rgb(var(--theme-accent));
|
||||
color: hsl(var(--theme-accent-text));
|
||||
border-radius: calc(var(--theme-radius) * 0.01em);
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
|
||||
.version-icon {
|
||||
width: var(--version-icon);
|
||||
}
|
||||
|
||||
.version-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.25em;
|
||||
}
|
||||
@ -1,11 +0,0 @@
|
||||
:root {
|
||||
--z-index-background: 1000;
|
||||
--z-index-layout: 2000;
|
||||
--z-index-toolbar: 3000;
|
||||
--z-index-edge: 4000;
|
||||
--z-index-dropdown: 5000;
|
||||
--z-index-shade: 6000;
|
||||
--z-index-menu: 7000;
|
||||
--z-index-modal: 8000;
|
||||
--z-index-suggest: 9000;
|
||||
}
|
||||
@ -7,7 +7,6 @@ import { fontawesome } from './fontawesome';
|
||||
import { icon } from './icon';
|
||||
import { keyboard } from './keyboard';
|
||||
import { layout } from './layout';
|
||||
import { logo } from './logo';
|
||||
import { menu } from './menu';
|
||||
import { pageLock } from './pageLock';
|
||||
import { theme } from './theme';
|
||||
@ -30,7 +29,6 @@ export const component = {
|
||||
icon,
|
||||
keyboard,
|
||||
layout,
|
||||
logo,
|
||||
menu,
|
||||
pageLock,
|
||||
theme,
|
||||
|
||||
@ -1,14 +1,21 @@
|
||||
:root {
|
||||
--logo-size: 22;
|
||||
--logo-width: calc((var(--logo-size) / 4) * 1em);
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 1rem;
|
||||
width: var(--logo-width);
|
||||
transform: scale(1) rotate(0deg);
|
||||
transition: transform var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
.logo:hover {
|
||||
transform: scale(1.2) rotate(180deg);
|
||||
transform: scale(1.1) rotate(180deg);
|
||||
}
|
||||
|
||||
.logo:active {
|
||||
transform: scale(1.4) rotate(180deg);
|
||||
transform: scale(1.2) rotate(180deg);
|
||||
}
|
||||
|
||||
.logo,
|
||||
@ -94,7 +101,7 @@
|
||||
|
||||
@keyframes shrink {
|
||||
0% {
|
||||
transform: scale(1.2);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
100% {
|
||||
|
||||
@ -4,24 +4,35 @@ import { node } from '../../utility/node';
|
||||
|
||||
import './index.css';
|
||||
|
||||
const logo = {};
|
||||
export const Logo = function() {
|
||||
|
||||
logo.svg =
|
||||
'<svg class="logo" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg">' +
|
||||
'<circle cx="256" cy="256" r="256" class="logo-circle"/>' +
|
||||
'<path d="M374 224H138C132.477 224 128 228.477 128 234V278C128 283.523 132.477 288 138 288H374C379.523 288 384 283.523 384 278V234C384 228.477 379.523 224 374 224Z" class="logo-cross-x"/>' +
|
||||
'<path d="M278 128H234C228.477 128 224 132.477 224 138V374C224 379.523 228.477 384 234 384H278C283.523 384 288 379.523 288 374V138C288 132.477 283.523 128 278 128Z" class="logo-cross-y"/>' +
|
||||
'</svg>';
|
||||
this.element = {
|
||||
logo: node('div|class:logo'),
|
||||
svg: '<svg class="logo" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg">' +
|
||||
'<circle cx="256" cy="256" r="256" class="logo-circle"/>' +
|
||||
'<path d="M374 224H138C132.477 224 128 228.477 128 234V278C128 283.523 132.477 288 138 288H374C379.523 288 384 283.523 384 278V234C384 228.477 379.523 224 374 224Z" class="logo-cross-x"/>' +
|
||||
'<path d="M278 128H234C228.477 128 224 132.477 224 138V374C224 379.523 228.477 384 234 384H278C283.523 384 288 379.523 288 374V138C288 132.477 283.523 128 278 128Z" class="logo-cross-y"/>' +
|
||||
'</svg>'
|
||||
};
|
||||
|
||||
logo.render = () => {
|
||||
this.assemble = () => {
|
||||
|
||||
const versionIcon = node('div|class:version-icon');
|
||||
this.element.logo.innerHTML = this.element.svg;
|
||||
|
||||
versionIcon.innerHTML = logo.svg;
|
||||
};
|
||||
|
||||
versionIcon.addEventListener('dblclick', () => { easterEgg.toaster.bind.add(); });
|
||||
this.bind = () => {
|
||||
|
||||
this.element.logo.addEventListener('dblclick', () => { easterEgg.toaster.bind.add(); });
|
||||
|
||||
};
|
||||
|
||||
this.logo = () => {
|
||||
return this.element.logo;
|
||||
};
|
||||
|
||||
this.assemble();
|
||||
|
||||
this.bind();
|
||||
|
||||
return versionIcon;
|
||||
};
|
||||
|
||||
export { logo };
|
||||
|
||||
@ -1,22 +1,19 @@
|
||||
import { version } from '../../version';
|
||||
import { logo } from '../../logo';
|
||||
import { node } from '../../../utility/node';
|
||||
|
||||
import { APP_NAME } from '../../../constant';
|
||||
|
||||
|
||||
import { Link } from '../../link';
|
||||
|
||||
|
||||
import { node } from '../../../utility/node';
|
||||
import { Splash } from '../../splash';
|
||||
|
||||
const appSetting = {};
|
||||
|
||||
appSetting[APP_NAME.toLowerCase()] = (parent) => {
|
||||
|
||||
const githubLink = new Link({ text: 'GitHub.', href: 'https://github.com/zombieFox/' + APP_NAME, openNew: true });
|
||||
const githubLink = new Link({ text: 'GitHub.', href: `https://github.com/zombieFox/${APP_NAME}`, openNew: true });
|
||||
|
||||
const redditLink = new Link({ text: `Reddit ${APP_NAME} community.`, href: 'https://www.reddit.com/r/' + APP_NAME, openNew: true });
|
||||
const redditLink = new Link({ text: `Reddit ${APP_NAME} community.`, href: `https://www.reddit.com/r/${APP_NAME}`, openNew: true });
|
||||
|
||||
const licenseLink = new Link({ text: 'GNU General Public License v3.0', href: 'https://github.com/zombieFox/' + APP_NAME + '/blob/master/license', openNew: true });
|
||||
const licenseLink = new Link({ text: 'GNU General Public License v3.0', href: `https://github.com/zombieFox/${APP_NAME}/blob/master/license`, openNew: true });
|
||||
|
||||
const para1 = node('p');
|
||||
|
||||
@ -30,16 +27,11 @@ appSetting[APP_NAME.toLowerCase()] = (parent) => {
|
||||
|
||||
para3.innerHTML = `${APP_NAME} uses the ${licenseLink.link().outerHTML}`;
|
||||
|
||||
const splash = new Splash();
|
||||
|
||||
parent.appendChild(
|
||||
node('div', [
|
||||
node('div|class:version', [
|
||||
logo.render(),
|
||||
node('div|class:version-details', [
|
||||
node('h1:' + APP_NAME + '|class:version-app-name'),
|
||||
node('p:Version ' + version.number + '|class:version-number'),
|
||||
node('p:' + version.name + '|class:version-name small')
|
||||
])
|
||||
]),
|
||||
splash.splash(),
|
||||
node('hr'),
|
||||
para1,
|
||||
para2,
|
||||
|
||||
@ -1,9 +1,4 @@
|
||||
:root {
|
||||
--version-icon-size: 22;
|
||||
--version-icon: calc((var(--version-icon-size) / 4) * 1em);
|
||||
}
|
||||
|
||||
.version {
|
||||
.splash {
|
||||
font-size: 1rem;
|
||||
display: inline-grid;
|
||||
grid-template-columns: auto auto;
|
||||
@ -12,29 +7,27 @@
|
||||
justify-items: start;
|
||||
}
|
||||
|
||||
.version-app-name {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.splash-logo {}
|
||||
|
||||
.version-number:not(:last-child),
|
||||
.version-name:not(:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.version-number {
|
||||
background-color: rgb(var(--theme-accent));
|
||||
color: hsl(var(--theme-accent-text));
|
||||
border-radius: calc(var(--theme-radius) * 0.01em);
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
|
||||
.version-icon {
|
||||
width: var(--version-icon);
|
||||
}
|
||||
|
||||
.version-details {
|
||||
.splash-description {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.25em;
|
||||
}
|
||||
|
||||
.splash-name {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.splash-version-number:not(:last-child),
|
||||
.splash-version-name:not(:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.splash-version-number {
|
||||
background-color: rgb(var(--theme-accent));
|
||||
color: hsl(var(--theme-accent-text));
|
||||
border-radius: calc(var(--theme-radius) * 0.01em);
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
47
src/component/splash/index.js
Normal file
47
src/component/splash/index.js
Normal file
@ -0,0 +1,47 @@
|
||||
import { version } from '../version';
|
||||
import { node } from '../../utility/node';
|
||||
|
||||
import { Logo } from '../logo';
|
||||
|
||||
import { APP_NAME } from '../../constant';
|
||||
|
||||
import './index.css';
|
||||
|
||||
export const Splash = function() {
|
||||
|
||||
this.logo = new Logo();
|
||||
|
||||
this.element = {
|
||||
splash: node('div|class:splash'),
|
||||
logo: node('div|class:splash-logo'),
|
||||
description: {
|
||||
description: node('div|class:splash-description'),
|
||||
name: node('h1:' + APP_NAME + '|class:splash-name'),
|
||||
versionName: node('p:' + version.name + '|class:splash-version-name small'),
|
||||
versionNumber: node('p:Version ' + version.number + '|class:splash-version-number')
|
||||
}
|
||||
};
|
||||
|
||||
this.assemble = () => {
|
||||
|
||||
this.element.logo.appendChild(this.logo.logo());
|
||||
|
||||
this.element.splash.appendChild(this.element.logo);
|
||||
|
||||
this.element.description.description.appendChild(this.element.description.name);
|
||||
|
||||
this.element.description.description.appendChild(this.element.description.versionNumber);
|
||||
|
||||
this.element.description.description.appendChild(this.element.description.versionName);
|
||||
|
||||
this.element.splash.appendChild(this.element.description.description);
|
||||
|
||||
};
|
||||
|
||||
this.splash = () => {
|
||||
return this.element.splash;
|
||||
};
|
||||
|
||||
this.assemble();
|
||||
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user