@@ -48,12 +50,15 @@ import "../composants/UserLogin"
flex: 1 1 auto;
}
.user-login {
- background-color: var(--color-dark);
+ border: 1px solid var(--color-background-darker);
+ box-shadow: 0 0 5px 0 #00000088;
+ border-radius: 5px;
width: 33%;
padding: 1rem;
min-width:300px;
flex: 1 1 auto;
}
+
img{
display: block;
max-width: 100%;
diff --git a/source/ui/screens/List.ts b/source/ui/screens/List.ts
index 5e861094..7ddb308b 100644
--- a/source/ui/screens/List.ts
+++ b/source/ui/screens/List.ts
@@ -157,7 +157,7 @@ interface Upload{
-
+
${this.t("ui.newScene")}
diff --git a/source/ui/styles/buttons.scss b/source/ui/styles/buttons.scss
index 74c3b5b3..15499414 100644
--- a/source/ui/styles/buttons.scss
+++ b/source/ui/styles/buttons.scss
@@ -62,11 +62,11 @@ a{
}
&.btn-danger {
- background-color: $color-danger;
+ background-color: $color-error;
color: white;
&:hover{
- background-color: lighten($color-danger, 7%);
+ background-color: lighten($color-error, 7%);
}
}
diff --git a/source/ui/styles/common.scss b/source/ui/styles/common.scss
index d76c5c34..0496e5e9 100644
--- a/source/ui/styles/common.scss
+++ b/source/ui/styles/common.scss
@@ -5,6 +5,8 @@
@import "./buttons.scss";
@import "./forms.scss";
+@import "./titles.scss";
+
.tooltip{
div{
display: none;
diff --git a/source/ui/styles/forms.scss b/source/ui/styles/forms.scss
index 7a132ca7..78713d78 100644
--- a/source/ui/styles/forms.scss
+++ b/source/ui/styles/forms.scss
@@ -28,92 +28,108 @@
.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: $color-light;
+ background: $color-background-dark;
+ background-clip: padding-box;
+ border-radius: 0;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ &:invalid:not(:placeholder-shown):not(:focus){
+ outline: $color-error solid 1px;
+ }
+ &:has( + .btn-addon){
+ //To have proper outline alignment
+ padding-right: 2.5rem;
+ margin-right: -2.5rem;
+ }
+ }
+ > input + .btn-addon{
+ width: 2.5rem;
+ }
+
+ > 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 $color-background-darker;
+ 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: $color-light;
+ 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: $color-background-darker;
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: $color-background-light;
color: white;
cursor: pointer;
&:hover:not(:disabled){
- background: $color-secondary;
+ background: $color-primary-light;
}
}
@@ -133,7 +149,7 @@
background: none;
border: none;
color: inherit;
- background: #071922;
+ background: $color-background-dark;
cursor: pointer;
option{
-webkit-appearance: none;
diff --git a/source/ui/styles/globals.scss b/source/ui/styles/globals.scss
index a1178631..b3912651 100644
--- a/source/ui/styles/globals.scss
+++ b/source/ui/styles/globals.scss
@@ -5,15 +5,26 @@
--col-width: 1320px;
--color-primary: #{$color-primary};
--color-secondary: #{$color-secondary};
- --color-tertiary: #{$color-tertiary};
- --color-dark: #{$color-tertiary};
+ --color-dark: #{$color-dark};
--color-medium: #{$color-primary};
--color-hover: #{$color-primary-dark};
--color-light: #{$color-text};
- --color-danger: #{$color-danger};
- --color-text-dark: #{$color-text-dark};
+ --color-info: #{$color-info};
+ --color-success: #{$color-success};
+ --color-warning: #{$color-warning};
+ --color-error: #{$color-error};
+
+ --font-body: #{$font-body};
+ --font-heading: #{$font-heading};
+
+ --color-background: #{$color-background};
+ --color-background-dark: #{$color-background-dark};
+ --color-background-darker: #{$color-background-darker};
+ --color-background-light: #{$color-background-light};
+ --color-background-lighter: #{$color-background-lighter};
+ --color-background-hover: #{$color-background-hover};
}
@@ -24,7 +35,7 @@
}
body{
- background: #071922;
+ background: $color-background;
position: relative;
min-height: 100vh;
width: 100%;
diff --git a/source/ui/styles/layout.scss b/source/ui/styles/layout.scss
index 069e3167..792980e1 100644
--- a/source/ui/styles/layout.scss
+++ b/source/ui/styles/layout.scss
@@ -22,9 +22,9 @@ main{
.section{
- background: rgba(0, 0, 0, 0.5);
+ background: $color-background-dark;
border-radius: 4px;
- border: $color-dark 1px solid;
+ border: $color-background-dark 1px solid;
padding: 1rem;
margin-bottom: 1rem;
h3{
@@ -72,6 +72,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,13 +124,10 @@ scene-card{
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
- background: #000;
+ background: $color-background-darker;
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{
@@ -135,10 +137,13 @@ scene-card{
border-bottom: 2px solid $color-dark;
}
- .list-item:nth-child(2n){
- background: #000;
+ .list-item{
+ &:nth-child(2n){
+ background: $color-background-dark;
+ }
&:hover{
- background: #071922
+ background: transparentize($color-dark, 0.5);
+ border-color: $color-dark;
}
}
}
@@ -155,7 +160,7 @@ scene-card{
footer{
color: $color-light;
height: 44px;
- background-color: $color-dark;
+ background-color: $color-background-dark;
display:flex;
}
@@ -201,7 +206,7 @@ footer{
flex: 0;
padding: 4px 6px 6px 6px;
font-weight: bolder;
- color: $color-text-dark;
+ color: $color-dark;
line-height: 1;
font-size: 1.5em;
cursor: pointer;
diff --git a/source/ui/styles/titles.scss b/source/ui/styles/titles.scss
new file mode 100644
index 00000000..88777257
--- /dev/null
+++ b/source/ui/styles/titles.scss
@@ -0,0 +1,13 @@
+
+
+h1, h2, h3{
+ font-family: $font-heading;
+}
+
+h1{
+ color: $color-primary;
+}
+
+h2{
+ color: $color-secondary;
+}
\ No newline at end of file
diff --git a/source/ui/styles/variables.scss b/source/ui/styles/variables.scss
index e461c0a0..41c26496 100644
--- a/source/ui/styles/variables.scss
+++ b/source/ui/styles/variables.scss
@@ -1,13 +1,12 @@
$color-primary: #00517d; // blue
-$color-primary-light: #00a5e8;
+$color-primary-light: #0089bf;
$color-primary-dark: darken($color-primary, 8%);
-$color-secondary: #f96; // orange
+$color-secondary: #E6B900; // 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;
@@ -16,7 +15,6 @@ $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;
@@ -26,12 +24,14 @@ $color-focus: $color-secondary-light;
$section-border: 1px solid transparentize($color-primary, 0.5);
$color-light: #eee;
-$color-dark: #103040;
-$color-danger: #dc3545;
+$color-dark: #071922;
-$color-background: #071922;
+$color-background: #343434;
$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
+$color-background-hover: $color-background-lighter;
+
+$font-body: 'Open Sans', 'Liberation', 'Roboto', 'sans-serif';
+$font-heading: 'Noto Serif', 'serif';