diff --git a/README.md b/README.md index 10aac341..f9a68207 100644 --- a/README.md +++ b/README.md @@ -17,4 +17,3 @@ It means some commands will need to be run with the `--recurse-submodules` flag, eg: `git clone --recurse-submodules git@github.com:Holusion/eCorpus` Day-to-day operations can be simplified by configuring git (globally or for thsi repository) to always recurse by default : `git config submodule.recurse true`. - diff --git a/source/server/templates/layouts/main.hbs b/source/server/templates/layouts/main.hbs index 187fb708..957234fa 100644 --- a/source/server/templates/layouts/main.hbs +++ b/source/server/templates/layouts/main.hbs @@ -12,15 +12,25 @@ - + {{title}} - + + + + diff --git a/source/ui/assets/favicon.png b/source/ui/assets/favicon.png index 6e781651..a5847e2c 100644 Binary files a/source/ui/assets/favicon.png and b/source/ui/assets/favicon.png differ diff --git a/source/ui/assets/favicon.svg b/source/ui/assets/favicon.svg new file mode 100644 index 00000000..422f42ff --- /dev/null +++ b/source/ui/assets/favicon.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/source/ui/assets/images/logo-full.svg b/source/ui/assets/images/logo-full.svg index eea97313..b4e401cf 100644 --- a/source/ui/assets/images/logo-full.svg +++ b/source/ui/assets/images/logo-full.svg @@ -1,30 +1,12 @@ - - - - - - - - - - - - - + + + + + + + + + + + diff --git a/source/ui/assets/images/logo-sm.svg b/source/ui/assets/images/logo-sm.svg index b7b94ba4..a21da536 100644 --- a/source/ui/assets/images/logo-sm.svg +++ b/source/ui/assets/images/logo-sm.svg @@ -1,10 +1,7 @@ - - + + + + + + diff --git a/source/ui/composants/ListItem.ts b/source/ui/composants/ListItem.ts index e5e661a7..6f8f0fb6 100644 --- a/source/ui/composants/ListItem.ts +++ b/source/ui/composants/ListItem.ts @@ -51,9 +51,9 @@ export default class ListItem extends LitElement{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; - background: #000a; + background: var(--color-element); padding: 1rem; - border-bottom: 1px solid #103040; + border-bottom: 1px solid var(--color-dark); } .list-item:hover{ background: #071922 diff --git a/source/ui/composants/Modal.ts b/source/ui/composants/Modal.ts index 024a132a..e196ed93 100644 --- a/source/ui/composants/Modal.ts +++ b/source/ui/composants/Modal.ts @@ -102,15 +102,17 @@ interface ModalOptions{ top: max(100px, 15vh); min-width: 30vw; max-width: calc(100vw - 20px); - border: none; - background-color: var(--color-dark); - color: var(--color-light); + border: 1px solid var(--color-element); + border-radius: 5px; + background-color: var(--color-background); + color: var(--color-text); box-shadow: 0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24); } .btn{ color: white; - background: var(--color-tertiary); + background: var(--color-element); + transition: background 0.2s; } .btn:hover{ background: var(--color-secondary); diff --git a/source/ui/composants/SceneCard.ts b/source/ui/composants/SceneCard.ts index 46231e0b..aa310754 100644 --- a/source/ui/composants/SceneCard.ts +++ b/source/ui/composants/SceneCard.ts @@ -93,17 +93,19 @@ import { AccessType, AccessTypes, Scene } from "../state/withScenes"; } .scene-card-inner{ - background-color: #000a; + background-color: var(--color-element); box-sizing: border-box; padding: 1rem; width: 100%; height: 100%; border-radius: 4px; - border: 1px solid #103040; + border: 2px solid var(--color-highlight); + transition: background 0.2s; } .scene-card-inner:hover{ - background-color: #071922; + background-color: var(--color-highlight); + box-shadow: 2px 2px 4px rgba(0,0,0,0.2); } @media (min-width: 664px){ @@ -123,7 +125,7 @@ import { AccessType, AccessTypes, Scene } from "../state/withScenes"; width: 70px; height: fit-content; border-radius: 4px; - border: #103040 solid 1px; + border: 1px solid var(--color-highlight); } .scene-card-inner-list img{ height: auto; @@ -156,7 +158,7 @@ import { AccessType, AccessTypes, Scene } from "../state/withScenes"; padding: 0 0.5rem; } .tools a:hover{ - color: rgb(0, 165, 232); + color: var(--color-secondary-light); } .card-title{ diff --git a/source/ui/composants/navbar/Navbar.ts b/source/ui/composants/navbar/Navbar.ts index 77fb9c32..89ae42c7 100644 --- a/source/ui/composants/navbar/Navbar.ts +++ b/source/ui/composants/navbar/Navbar.ts @@ -3,7 +3,7 @@ import { css, customElement, html, LitElement, TemplateResult } from "lit-elemen import styles from '!lit-css-loader?{"specifier":"lit-element"}!sass-loader!./styles.scss'; -import favicon from "../../assets/favicon.png"; +import logo from "../../assets/images/logo-full.svg"; /** * Main UI view for the Voyager Explorer application. @@ -20,9 +20,8 @@ import favicon from "../../assets/favicon.png"; protected render() :TemplateResult { return html`
- - logo eCorpus - eCorpus + + Site Logo
diff --git a/source/ui/composants/navbar/styles.scss b/source/ui/composants/navbar/styles.scss index 00ab72d7..5f4f4803 100644 --- a/source/ui/composants/navbar/styles.scss +++ b/source/ui/composants/navbar/styles.scss @@ -1,4 +1,4 @@ -@import "../../styles/variables.scss"; + :host(corpus-navbar) { position: fixed; @@ -10,8 +10,8 @@ align-items: baseline; justify-content: center; - background-color: $color-background-dark; - border-bottom: 3px solid $color-background-darker; + background-color: var(--color-section); + border-bottom: 3px solid var(--color-element); } nav { @@ -29,11 +29,23 @@ nav { background-color: var(--color-dark); } .brand { - display:flex; + display: flex; + height: 100%; align-items: center; + font-size: 1.1em; + color: var(--color-secondary); + font-family: var(--font-heading); + font-weight: 400; + text-decoration: none; + img{ + height: 100%; + width: auto; + display: block; + + } } .brand:hover { - filter: brightness(1.2) + filter: opacity(80%); } .navbar{ display: flex; @@ -46,7 +58,7 @@ nav { box-sizing: border-box; background-color: transparent; font-size: 13px; - color: $color-light; + color: var(--color-text); } ::slotted(.btn){ padding: 4px 10px !important; @@ -69,19 +81,19 @@ nav { > a { color: inherit; font-size: inherit; - background-color: transparent; - transition: background-color 0.2s ease 0s; + border-bottom: 3px solid transparent; + transition: border 0.2s ease 0s; svg { fill: currentColor; } &:hover, &:focus{ color: white; - background-color: $color-background-lighter; + background-color: var(--color-highlight2); } &.selected { - background-color: $color-primary; + border-bottom: 3px solid var(--color-primary); &:hover, &:focus { - background-color: $color-primary-light; + border-bottom: 3px solid var(--color-primary-lighter); } } diff --git a/source/ui/screens/Admin/AdminHome.ts b/source/ui/screens/Admin/AdminHome.ts index 911e9932..3c35f5ba 100644 --- a/source/ui/screens/Admin/AdminHome.ts +++ b/source/ui/screens/Admin/AdminHome.ts @@ -2,13 +2,16 @@ import { customElement, property, html, TemplateResult, LitElement, css } from "lit-element"; + import "./UsersList"; import i18n from "../../state/translate"; import Modal from "../../composants/Modal"; import "../../composants/Button"; +import commonStyles from '!lit-css-loader?{"specifier":"lit-element"}!sass-loader!../../styles/common.scss'; + @customElement("send-testmail") -class TestmailModalBody extends i18n(LitElement){ +export class TestmailModalBody extends i18n(LitElement){ @property({type: String}) state = "initial"; @@ -30,7 +33,7 @@ class TestmailModalBody extends i18n(LitElement){ if(this.state =="initial"){ return html`
- +
` }else if(this.state === "sending"){ return html`
@@ -38,26 +41,18 @@ class TestmailModalBody extends i18n(LitElement){
` }else{ return html`
- + 
${this.state}
`; } } - static styles = css` - button.send{ - box-sizing: border-box; - padding: 4px 10px; - border: none; - text-decoration: none; - color: white; - background-color: var(--color-primary); - } + static styles = [commonStyles, css` .state-report{ text-wrap: wrap; overflow: auto; border: 1px solid var(--color-dark); } - `; + `]; } /** @@ -72,7 +67,7 @@ export default class AdminHomeScreen extends i18n(LitElement) { protected render(): unknown { return html` -

${this.t("ui.adminSection")}

+

${this.t("ui.adminSection")}

${this.t("ui.tools")}

diff --git a/source/ui/screens/Admin/AdminStats.ts b/source/ui/screens/Admin/AdminStats.ts index 2f8893d6..18b73fe7 100644 --- a/source/ui/screens/Admin/AdminStats.ts +++ b/source/ui/screens/Admin/AdminStats.ts @@ -43,7 +43,7 @@ export default class AdminStatsScreen extends i18n(LitElement) { let now = new Date(); now.setHours(0,0,0,0); - this.scenes = b.filter(scene=>{ + this.scenes = b.scenes.filter(scene=>{ return now.valueOf() < new Date(scene.mtime).valueOf(); }); }).catch(e=>{ @@ -70,7 +70,7 @@ export default class AdminStatsScreen extends i18n(LitElement) { return html`
` } return html`
-

Server Statistics

+

Server Statistics

Files statistics

    diff --git a/source/ui/screens/Admin/UsersList.ts b/source/ui/screens/Admin/UsersList.ts index f40712ff..719158c6 100644 --- a/source/ui/screens/Admin/UsersList.ts +++ b/source/ui/screens/Admin/UsersList.ts @@ -102,7 +102,7 @@ interface User { header: "Delete user", body: html`
    ${this.t("info.userDeleteConfirm", {username : u.username})}
    `, buttons: html`
    - + this.onDeleteUser(ev, u)}>
    ` }); @@ -142,13 +142,13 @@ interface User { protected render() :TemplateResult { if(this.error){ - return html`

    Error

    ${this.error.message}
    `; + return html`

    Error

    ${this.error.message}
    `; }else if(this.loading){ return html`
    ` } return html`
    -

    ${this.t("info.userManager")}

    - +

    ${this.t("info.userManager")}

    +
    @@ -169,8 +169,8 @@ interface User { `)} diff --git a/source/ui/screens/Home.ts b/source/ui/screens/Home.ts index 3850e1a6..dc68d7d2 100644 --- a/source/ui/screens/Home.ts +++ b/source/ui/screens/Home.ts @@ -163,10 +163,10 @@ interface Upload{ return html`

    ${this.t("info.homeHeader")}

    - + ${this.t("ui.upload")} - ${this.t("info.useStandalone")} + ${this.t("info.useStandalone")}
    ${(this.list.length == 0 && Object.keys(this.uploads).length == 0)?null: html` diff --git a/source/ui/screens/LandingPage.ts b/source/ui/screens/LandingPage.ts index 77a396fe..5b8c6471 100644 --- a/source/ui/screens/LandingPage.ts +++ b/source/ui/screens/LandingPage.ts @@ -21,9 +21,11 @@ import "../composants/UserLogin" return html`
    - sketch représentant l'application voyager et son utilisation dans une borne holographique -

    ${this.t("info.lead")}

    -

    ${this.t("info.useStandalone")}

    + dessin représentant l'application voyager et son utilisation dans une borne holographique +

    ${this.t("info.lead")}.

    +

    + ${this.t("info.useStandalone")} +

    - +
    @@ -283,7 +283,7 @@ class SceneVersion{
    ${authors} ${new Date(v.start).toLocaleString()}
    - ${index==0?html`active`:html`this.onRestore(v.entries.slice(-1)[0])} text="restore" icon="restore">`} + ${index==0?html`active`:html`this.onRestore(v.entries.slice(-1)[0])} text="restore" icon="restore">`} ` })} @@ -402,7 +402,7 @@ class SceneVersion{ `, - buttons: html``, + buttons: html``, }); } diff --git a/source/ui/screens/UserSettings.ts b/source/ui/screens/UserSettings.ts index 36092045..9cdc93bb 100644 --- a/source/ui/screens/UserSettings.ts +++ b/source/ui/screens/UserSettings.ts @@ -47,7 +47,7 @@ export default class UserSettings extends i18n(withUser(LitElement)) {
    - +
    @@ -69,7 +69,7 @@ export default class UserSettings extends i18n(withUser(LitElement)) {
    - +
    diff --git a/source/ui/styles/buttons.scss b/source/ui/styles/buttons.scss index 74c3b5b3..f5f30cf8 100644 --- a/source/ui/styles/buttons.scss +++ b/source/ui/styles/buttons.scss @@ -1,4 +1,4 @@ -@import "./variables.scss"; + button, input { @@ -19,7 +19,7 @@ a{ .btn { - background: $color-background-light; + background: var(--color-highlight); color: white; display: flex; @@ -27,52 +27,65 @@ a{ align-items: center; flex: 0 1 auto; flex-wrap: wrap; - padding: 5px; + padding: 8px; + min-width: 100px; + transition: fill 0.2s; cursor: pointer; &:hover, &:focus{ - background-color: $color-background-lighter; + background-color: var(--color-highlight2); } &[selected] { - background-color: $color-primary; + background-color: var(--color-primary); &:hover, &:focus { - background-color: $color-primary-light; + background-color: var(--color-primary-light); } } - &.btn-primary { - background-color: $color-primary; + &.btn-main { + background-color: var(--color-secondary); + + &:hover:not([disabled]){ + background-color: var(--color-secondary-light); + box-shadow: 2px 2px rgba(20, 20, 20, 0.3); + } + } + + &.btn-outline{ + background: transparent; + border: 1px solid var(--color-primary); + color: var(--color-primary); &:hover:not([disabled]){ - background-color: $color-primary-light; + background: var(--color-primary); + color: white; } } &.btn-secondary { - background-color: $color-primary-light; + background-color: var(--color-secondary); &:hover:not([disabled]){ - background-color: $color-secondary; + background-color: var(--color-secondary); } } &.btn-danger { - background-color: $color-danger; + background-color: var(--color-error); color: white; &:hover{ - background-color: lighten($color-danger, 7%); + filter: brightness(110%); } } @at-root a#{&} { text-decoration: none; - padding: 8px; white-space:nowrap; } @@ -100,9 +113,9 @@ a{ } &[transparent]{ background: transparent; - color: $color-light; + color: var(--color-text); &:hover{ - color: $color-background-lighter; + color: var(--color-highlight2); } } } diff --git a/source/ui/styles/common.scss b/source/ui/styles/common.scss index d76c5c34..03d836be 100644 --- a/source/ui/styles/common.scss +++ b/source/ui/styles/common.scss @@ -1,10 +1,13 @@ -@import "./variables.scss"; @import "./normalize.scss"; - +@import "./layout.scss"; +@import "./tables.scss"; @import "./buttons.scss"; @import "./forms.scss"; +@import "./text.scss"; +@import "./titles.scss"; + .tooltip{ div{ display: none; @@ -15,16 +18,3 @@ } } } - -.text-info { - color: $color-info; -} -.text-success { - color: $color-success; -} -.text-warning{ - color: $color-warning; -} -.text-error { - color: $color-error; -} \ No newline at end of file diff --git a/source/ui/styles/forms.scss b/source/ui/styles/forms.scss index 7a132ca7..eb5ac661 100644 --- a/source/ui/styles/forms.scss +++ b/source/ui/styles/forms.scss @@ -1,4 +1,3 @@ -@import "./variables.scss"; .form-control{ @@ -23,97 +22,119 @@ .divider{ width: 1px; - background-color: $color-light; + background-color: var(--color-text); } .form-item { position: relative; box-sizing: border-box; - } - .form-item > input{ - box-sizing: border-box; - padding: 0.35rem .75rem; - display: block; - width: 100%; - font-size: 1rem; - font-weight: 400; - line-height: 1.5; - color: $color-light; - background: $color-dark; - background-clip: padding-box; - border-radius: 0; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - &:invalid:not(:placeholder-shown):not(:focus){ - outline: $color-danger solid 1px; + > input{ + box-sizing: border-box; + padding: 0.35rem .75rem; + display: block; + width: 100%; + font-size: 1rem; + font-weight: 400; + line-height: 1.5; + color: var(--color-text); + background: var(--color-element); + background-clip: padding-box; + border-radius: 0; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + &:invalid:not(:placeholder-shown):not(:focus){ + outline: var(--color-error) solid 1px; + } + &:hover:not(:disabled){ + box-shadow: inset 0 -1px var(--color-highlight2); + } + &:has( + .btn-addon){ + //To have proper outline alignment + padding-right: 2.5rem; + margin-right: -2.5rem; + } + } + > input + .btn-addon{ + width: 2.5rem; + min-width: 2.5rem; + box-shadow: none !important; + } + + > label{ + opacity: 0.7; } } - .form-item > label{ - opacity: 0.7; - } + &.form-modal{ - .form-item > input:not([type="submit"]){ - background: $color-primary; - height: calc(3.5rem + 2px); - } - &[disabled] .form-item > input, .form-item > input:disabled { - background: $color-primary-dark; - pointer-events: none; - } + .form-item { - .form-item > input::placeholder{ - display:none; - color: transparent; - } - .form-item > input:focus, .form-item > input:not(:placeholder-shown){ - &[type="text"], &[type="password"]{ - padding-top: 1.625rem; - padding-bottom: .625rem; + > input:not([type="submit"]){ + border: 0px solid var(--color-element); + border-bottom-width: 3px; + height: calc(3.5rem + 2px); } + + > input::placeholder{ + display:none; + color: transparent; + } + + > input:focus, .form-item > input:not(:placeholder-shown){ + &[type="text"], &[type="password"]{ + padding-top: 1.625rem; + padding-bottom: .625rem; + } + } + + > input:focus:not(:disabled){ + color: var(--color-text); + background: none; + border-width: 1px 1px 3px 1px; + outline: 0; + } + + > label { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 5px; + overflow: hidden; + text-align: start; + text-overflow: ellipsis; + white-space: nowrap; + pointer-events: none; + border: 1px solid transparent; + transform-origin: 0 0; + transition: opacity .1s ease-in-out,transform .1s ease-in-out; + } + input:focus ~ label, input:not(:placeholder-shown) ~label{ + opacity: .65; + transform: scale(.85) translateY(-.5rem) translateX(.15rem); + } } - .form-item > input:focus:not(:disabled){ - color: $color-light; - background-color: var(--color-hover); - outline: 0; - } - - .form-item > label { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - padding: 5px; - overflow: hidden; - text-align: start; - text-overflow: ellipsis; - white-space: nowrap; + + &[disabled] .form-item > input, .form-item > input:disabled { + background: var(--color-element); pointer-events: none; - border: 1px solid transparent; - transform-origin: 0 0; - transition: opacity .1s ease-in-out,transform .1s ease-in-out; } input:focus ~ label, input:not(:placeholder-shown) ~label{ opacity: .65; - } - .form-item{ - input:focus ~ label, input:not(:placeholder-shown) ~label{ - opacity: .65; - transform: scale(.85) translateY(-.5rem) translateX(.15rem); - } } } input[type="submit"] { - background-color: $color-primary-light; + background: var(--color-highlight2); color: white; cursor: pointer; &:hover:not(:disabled){ - background: $color-secondary; + background: var(--color-highlight); + box-shadow: 1px 1px 2px rgba(0,0,0,0.5); } } @@ -133,7 +154,7 @@ background: none; border: none; color: inherit; - background: #071922; + background: var(--color-section); cursor: pointer; option{ -webkit-appearance: none; diff --git a/source/ui/styles/globals.scss b/source/ui/styles/globals.scss index a1178631..8599d8d1 100644 --- a/source/ui/styles/globals.scss +++ b/source/ui/styles/globals.scss @@ -1,39 +1,44 @@ -@import "./variables.scss"; :root{ --nav-height: 44px; --col-width: 1320px; - --color-primary: #{$color-primary}; - --color-secondary: #{$color-secondary}; - --color-tertiary: #{$color-tertiary}; - - --color-dark: #{$color-tertiary}; - --color-medium: #{$color-primary}; - --color-hover: #{$color-primary-dark}; - --color-light: #{$color-text}; - - --color-danger: #{$color-danger}; - --color-text-dark: #{$color-text-dark}; -} - - - - -*, ::before, ::after { - box-sizing: border-box; -} - -body{ - background: #071922; - position: relative; - min-height: 100vh; - width: 100%; - padding: var(--nav-height) 0 0 0; - margin: 0; - display: block; - font-family: "Roboto", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", "sans-serif"; -} - -h1{ - font-family: "Charcoal", "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", "sans-serif"; + --color-primary: #E6B900; + --color-primary-light: #edce4c; + --color-primary-lighter: #ffda41; + --color-primary-dark: #e08f1e; + + --color-secondary: #4735df; + --color-secondary-light: #7a70db; + + --color-text: #eee; + --color-dark: #2b2938; + + --color-medium: var(--color-primary); + --color-hover: var(--color-primary-dark); + + --color-info: #73adff; + --color-success: #8ae65c; + --color-warning: #e6a345; + --color-error: #e64545; + + --font-body: 'Open Sans', 'Liberation', 'Roboto', 'sans-serif'; + --font-heading: 'Noto Serif', 'serif'; + + /* Main (body) background color */ + --color-background: #343434; + + /* Background color for "section" elements. + (large page chunks that may contain some number of items). + designed to stand out over --color-background + */ + --color-section: #272727; + + /* Background color for "block elements", like cards, navbars, modals... */ + --color-element: #1b1b1b; + + /* Main Color for elements designed to stand out in a section, like action buttons */ + --color-highlight: #1f1d29; + + /* Additional highlight color, primarily for hover effects */ + --color-highlight2: #5e5e5e; } \ No newline at end of file diff --git a/source/ui/styles/layout.scss b/source/ui/styles/layout.scss index 069e3167..6525eade 100644 --- a/source/ui/styles/layout.scss +++ b/source/ui/styles/layout.scss @@ -1,34 +1,36 @@ -@import "./variables.scss"; -html { - color: $color-text; -} - - -main{ +.section{ + --caret-width: 2px; position: relative; - max-width: var(--col-width); - margin: auto; + background: var(--color-section); + &::before, &::after{ + content: ""; + position: absolute; + height: 41px; + width: 41px; - color: $color-light; - min-height: calc(100vh - var(--nav-height) * 2); - padding-top: .67em; - - h1{ - color: $color-primary-light; + pointer-events: none; + border-color: var(--color-primary); + border-style: solid; + } + &::before{ + top: 0; + left: 0; + border-width: var(--caret-width) 0 0 var(--caret-width); + } + &::after{ + bottom: 0; + right: 0; + border-width: 0 var(--caret-width) var(--caret-width) 0; } -} -.section{ - background: rgba(0, 0, 0, 0.5); - border-radius: 4px; - border: $color-dark 1px solid; padding: 1rem; margin-bottom: 1rem; h3{ margin-top: 0; + color: var(--color-primary); } } @@ -48,7 +50,7 @@ corpus-list, home-page { right: 0; z-index: 2; background: rgba(0, 0, 0, 0.3); - border: 2px dotted $color-secondary; + border: 2px dotted var(--color-secondary); border-radius: 4px; pointer-events: none; } @@ -72,6 +74,11 @@ corpus-list{ .list-tasks{ padding: 0.5rem; width: 300px; + .section{ + display: flex; + flex-direction: column; + gap: .5rem; + } } .toolbar, .list-items{ height: fit-content; @@ -119,26 +126,28 @@ scene-card{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; - background: #000; + background: var(--color-element); padding: 1rem; - border-bottom: 1px solid $color-dark; - text-decoration: none; - &:hover{ - background: #071922 - } + border-color: transparent; + border-width: 1px 0 1px 0; } .list-header{ font-size: 1.2rem; font-weight: bold; padding: 1.2rem 1rem 0.8rem 1rem; - border-bottom: 2px solid $color-dark; + color: var(--color-primary); + border-bottom: 2px solid var(--color-primary); } - .list-item:nth-child(2n){ - background: #000; + .list-item{ + &:nth-child(2n){ + background: var(--color-section); + } &:hover{ - background: #071922 + background: var(--color-dark); + filter: opacity(80%); + border-color: var(--color-dark); } } } @@ -153,61 +162,8 @@ scene-card{ } footer{ - color: $color-light; + color: var(--color-text); height: 44px; - background-color: $color-dark; + background-color: var(--color-section); display:flex; } - -.notification { - position: relative; - left: 0; - margin: 8px; - background: $color-background-light; - color: $color-light; - box-shadow: 0 0 20px rgba(0, 0, 0, 0.35); - display: flex; - justify-content: stretch; - align-items: center; - - .ui-icon { - flex: 0 0 auto; - height: 2em; - width: 2em; - padding: 8px; - } - - &.notification-info > .ui-icon { - fill: $color-info; - } - &.notification-success > .ui-icon { - fill: $color-success; - } - &.notification-warning > .ui-icon { - fill: $color-warning; - } - &.notification-error > .ui-icon { - fill: $color-error; - } - - .notification-message { - flex: 1 1 100%; - padding: 8px; - text-overflow: ellipsis; - overflow: hidden; - } - - .notification-close { - flex: 0; - padding: 4px 6px 6px 6px; - font-weight: bolder; - color: $color-text-dark; - line-height: 1; - font-size: 1.5em; - cursor: pointer; - } - &.fade{ - transition: transform 0.5s ease-in; - transform: translateX(100%); - } -} diff --git a/source/ui/styles/main.scss b/source/ui/styles/main.scss index 12079209..0e4186b5 100644 --- a/source/ui/styles/main.scss +++ b/source/ui/styles/main.scss @@ -1,7 +1,77 @@ -@import "./variables.scss"; +@import "./common.scss"; -@import "./normalize.scss"; -@import "./common.scss"; -@import "./layout.scss"; -@import "./tables.scss"; + +html { + color: var(--color-text); +} + +main{ + position: relative; + max-width: var(--col-width); + margin: auto; + + color: var(--color-text); + min-height: calc(100vh - var(--nav-height)); + padding-top: .67em; +} + + + +/* + * Notifications styles + * (Notifications are slotted, so externally styled) + */ + + .notification { + position: relative; + left: 0; + margin: 8px; + background: var(--color-highlight); + color: var(--color-text); + box-shadow: 0 0 20px rgba(0, 0, 0, 0.35); + display: flex; + justify-content: stretch; + align-items: center; + + .ui-icon { + flex: 0 0 auto; + height: 2em; + width: 2em; + padding: 8px; + } + + &.notification-info > .ui-icon { + fill: var(--color-info); + } + &.notification-success > .ui-icon { + fill: var(--color-success); + } + &.notification-warning > .ui-icon { + fill: var(--color-warning); + } + &.notification-error > .ui-icon { + fill: var(--color-error); + } + + .notification-message { + flex: 1 1 100%; + padding: 8px; + text-overflow: ellipsis; + overflow: hidden; + } + + .notification-close { + flex: 0; + padding: 4px 6px 6px 6px; + font-weight: bolder; + color: var(--color-highlight2); + line-height: 1; + font-size: 1.5em; + cursor: pointer; + } + &.fade{ + transition: transform 0.5s ease-in; + transform: translateX(100%); + } +} diff --git a/source/ui/styles/notifications.scss b/source/ui/styles/notifications.scss index 09a2930a..409fe679 100644 --- a/source/ui/styles/notifications.scss +++ b/source/ui/styles/notifications.scss @@ -1,4 +1,4 @@ -@import "./variables.scss"; + :host{ position: fixed; z-index: 100; diff --git a/source/ui/styles/tables.scss b/source/ui/styles/tables.scss index 766e1acd..5dc904f1 100644 --- a/source/ui/styles/tables.scss +++ b/source/ui/styles/tables.scss @@ -1,11 +1,11 @@ -@import "./variables.scss"; + table.list-table { border-collapse: collapse; width: 100%; display: table; background-color:#000a; - color: $color-light; + color: var(--color-text); tr:last-child { border-bottom: 0; } @@ -21,14 +21,14 @@ table.list-table { } th { - color: $color-light; + color: var(--color-text); font-weight: bold; - background-color: $color-dark; + background-color: var(--color-dark); position: sticky; top: 0; } td { - border-bottom: solid 1px $color-dark; + border-bottom: solid 1px var(--color-dark); border-left: 0; border-right: 0; white-space: nowrap; diff --git a/source/ui/styles/text.scss b/source/ui/styles/text.scss new file mode 100644 index 00000000..b32b6069 --- /dev/null +++ b/source/ui/styles/text.scss @@ -0,0 +1,27 @@ + +.text-main{ + color: var(--color-text); +} + +.text-dark{ + color: var(--color-dark); +} + +.text-info { + color: var(--color-info); +} +.text-success { + color: var(--color-success); +} +.text-warning{ + color: var(--color-warning); +} +.text-error { + color: var(--color-error); +} + +@mixin text-colors{ + &.text-info, &.text-success, &.text-warning, &.text-error{ + @content; + } +} \ No newline at end of file diff --git a/source/ui/styles/titles.scss b/source/ui/styles/titles.scss new file mode 100644 index 00000000..a0b8ac12 --- /dev/null +++ b/source/ui/styles/titles.scss @@ -0,0 +1,26 @@ +@import "./text.scss"; + +h1, h2, h3{ + font-family: var(--font-heading); +} + +h1{ + display: inline-block; + color: var(--color-text); + padding: 1.5rem 0.2rem 0 1.5rem; + margin: 20px 0 0.4rem 0; + border-bottom: 0.6rem solid var(--color-primary); + @include text-colors { + border-bottom-color: currentColor; + } +} + +h2{ + border-left: 0.7rem solid var(--color-primary); + @include text-colors { + border-left-color: currentColor; + } + padding: 0.5rem 0 0 0.8rem; + display: flex; + justify-content: start; +} diff --git a/source/ui/styles/variables.scss b/source/ui/styles/variables.scss deleted file mode 100644 index e461c0a0..00000000 --- a/source/ui/styles/variables.scss +++ /dev/null @@ -1,37 +0,0 @@ - -$color-primary: #00517d; // blue -$color-primary-light: #00a5e8; -$color-primary-dark: darken($color-primary, 8%); - -$color-secondary: #f96; // orange -$color-secondary-light: lighten($color-secondary, 15%); -$color-secondary-dark: darken($color-secondary, 15%); - -$color-tertiary: #103040; // Holusion dark blue - -$color-info: #73adff; -$color-success: #8ae65c; -$color-warning: #e6a345; -$color-error: #e64545; - -$color-text: #eee; -$color-text-light: #eee; -$color-text-dark: #a0a0a0; -$color-text-disabled: #808080; -$color-icon: #eee b4 0a0; -$color-icon-disabled: #808080; - -$color-focus: $color-secondary-light; - -$section-border: 1px solid transparentize($color-primary, 0.5); - -$color-light: #eee; -$color-dark: #103040; -$color-danger: #dc3545; - -$color-background: #071922; -$color-background-dark: darken($color-background, 5%); -$color-background-darker: darken($color-background, 10%); -$color-background-light: lighten($color-background, 10%); -$color-background-lighter: lighten($color-background, 20%); -$color-background-hover: $color-background-lighter; \ No newline at end of file diff --git a/source/ui/webpack.config.js b/source/ui/webpack.config.js index 5ff83327..96cfcb92 100644 --- a/source/ui/webpack.config.js +++ b/source/ui/webpack.config.js @@ -92,7 +92,7 @@ module.exports = function createAppConfig(env, argv={}) new CopyPlugin({ patterns: [ { - from: "images/**/*.{svg,png}", + from: "**/*", context: path.join(project, "source/ui/assets/"), priority: 0, },
    - this.deleteUserOpen(u)} ?disabled=${u.isAdministrator}> - this.createLoginLink(u)}> + this.deleteUserOpen(u)} ?disabled=${u.isAdministrator}> + this.createLoginLink(u)}>