Skip to content

Commit

Permalink
substitute all scss variables with css replaceable ones
Browse files Browse the repository at this point in the history
rework style variables to allow better customization
  • Loading branch information
sdumetz committed Feb 23, 2024
1 parent 6238090 commit 6fd6093
Show file tree
Hide file tree
Showing 16 changed files with 120 additions and 158 deletions.
10 changes: 9 additions & 1 deletion source/server/templates/layouts/main.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,15 @@
<link rel="shortcut icon" type="image/svg+xml" href="/dist/favicon.svg"/>

<style>
body { background: #343434; }
body{
background: var(--color-background, #343434);
position: relative;
min-height: 100vh;
width: 100%;
padding: var(--nav-height, 44px) 0 0 0;
margin: 0;
display: block;
}
</style>

<link href="https://fonts.googleapis.com/css2?family=Noto+Serif&display=swap" rel="stylesheet">
Expand Down
2 changes: 1 addition & 1 deletion source/ui/composants/ListItem.ts
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export default class ListItem extends LitElement{
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
background: var(--color-background-darker);
background: var(--color-element);
padding: 1rem;
border-bottom: 1px solid var(--color-dark);
}
Expand Down
4 changes: 2 additions & 2 deletions source/ui/composants/Modal.ts
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ interface ModalOptions{
top: max(100px, 15vh);
min-width: 30vw;
max-width: calc(100vw - 20px);
border: 1px solid var(--color-background-darker);
border: 1px solid var(--color-element);
border-radius: 5px;
background-color: var(--color-background);
color: var(--color-light);
Expand All @@ -111,7 +111,7 @@ interface ModalOptions{
.btn{
color: white;
background: var(--color-background-darker);
background: var(--color-element);
transition: background 0.2s;
}
.btn:hover{
Expand Down
4 changes: 2 additions & 2 deletions source/ui/composants/SceneCard.ts
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ import { AccessType, AccessTypes, Scene } from "../state/withScenes";
}
.scene-card-inner{
background-color: var(--color-background-darker);
background-color: var(--color-element);
box-sizing: border-box;
padding: 1rem;
width: 100%;
Expand All @@ -105,7 +105,7 @@ import { AccessType, AccessTypes, Scene } from "../state/withScenes";
.scene-card-inner:hover{
background-color: var(--color-background);
border-color: var(--color-background-light);
border-color: var(--color-highlight);
}
@media (min-width: 664px){
Expand Down
18 changes: 9 additions & 9 deletions source/ui/composants/navbar/styles.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@import "../../styles/variables.scss";


:host(corpus-navbar) {
position: fixed;
Expand All @@ -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 {
Expand All @@ -33,8 +33,8 @@ nav {
height: 100%;
align-items: center;
font-size: 1.1em;
color: $color-secondary;
font-family: $font-heading;
color: var(--color-secondary);
font-family: var(--font-heading);
font-weight: 400;
text-decoration: none;
img{
Expand All @@ -58,7 +58,7 @@ nav {
box-sizing: border-box;
background-color: transparent;
font-size: 13px;
color: $color-light;
color: var(--color-light);
}
::slotted(.btn){
padding: 4px 10px !important;
Expand Down Expand Up @@ -87,13 +87,13 @@ nav {

&:hover, &:focus{
color: white;
background-color: $color-background-lighter;
background-color: var(--color-highlight2);
}

&.selected {
background-color: $color-primary-light;
background-color: var(--color-primary-light);
&:hover, &:focus {
background-color: lighten($color-primary-light, 10%);
background-color: var(--color-primary-lighter);
}
}

Expand Down
2 changes: 1 addition & 1 deletion source/ui/screens/LandingPage.ts
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ import "../composants/UserLogin"
flex: 1 1 auto;
}
.user-login {
border: 1px solid var(--color-background-darker);
border: 1px solid var(--color-element);
box-shadow: 0 0 5px 0 #00000088;
border-radius: 5px;
width: 33%;
Expand Down
26 changes: 13 additions & 13 deletions source/ui/styles/buttons.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@import "./variables.scss";



button, input {
Expand All @@ -19,7 +19,7 @@ a{


.btn {
background: $color-background-light;
background: var(--color-highlight);
color: white;

display: flex;
Expand All @@ -34,39 +34,39 @@ a{


&: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;
background-color: var(--color-primary);

&:hover:not([disabled]){
background-color: $color-primary-light;
background-color: var(--color-primary-light);
}
}

&.btn-secondary {
background-color: $color-primary-light;
background-color: var(--color-primary-light);

&:hover:not([disabled]){
background-color: $color-secondary;
background-color: var(--color-secondary);
}
}

&.btn-danger {
background-color: $color-error;
background-color: var(--color-error);
color: white;

&:hover{
background-color: lighten($color-error, 7%);
filter: brightness(110%);
}
}

Expand Down Expand Up @@ -100,9 +100,9 @@ a{
}
&[transparent]{
background: transparent;
color: $color-light;
color: var(--color-light);
&:hover{
color: $color-background-lighter;
color: var(--color-highlight2);
}
}
}
9 changes: 4 additions & 5 deletions source/ui/styles/common.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
@import "./variables.scss";

@import "./normalize.scss";

Expand All @@ -19,14 +18,14 @@
}

.text-info {
color: $color-info;
color: var(--color-info);
}
.text-success {
color: $color-success;
color: var(--color-success);
}
.text-warning{
color: $color-warning;
color: var(--color-warning);
}
.text-error {
color: $color-error;
color: var(--color-error);
}
21 changes: 10 additions & 11 deletions source/ui/styles/forms.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
@import "./variables.scss";


.form-control{
Expand All @@ -23,7 +22,7 @@

.divider{
width: 1px;
background-color: $color-light;
background-color: var(--color-light);
}
.form-item {
position: relative;
Expand All @@ -37,15 +36,15 @@
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: $color-light;
background: $color-background-dark;
color: var(--color-light);
background: var(--color-section);
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;
outline: var(--color-error) solid 1px;
}
&:has( + .btn-addon){
//To have proper outline alignment
Expand All @@ -67,7 +66,7 @@
.form-item {

> input:not([type="submit"]){
border: 0px solid $color-background-darker;
border: 0px solid var(--color-element);
border-bottom-width: 3px;
height: calc(3.5rem + 2px);
}
Expand All @@ -85,7 +84,7 @@
}

> input:focus:not(:disabled){
color: $color-light;
color: var(--color-light);
background: none;
border-width: 1px 1px 3px 1px;
outline: 0;
Expand Down Expand Up @@ -114,7 +113,7 @@
}

&[disabled] .form-item > input, .form-item > input:disabled {
background: $color-background-darker;
background: var(--color-element);
pointer-events: none;
}

Expand All @@ -125,11 +124,11 @@
}

input[type="submit"] {
background: $color-background-light;
background: var(--color-highlight);
color: white;
cursor: pointer;
&:hover:not(:disabled){
background: $color-primary-light;
background: var(--color-primary-light);
}
}

Expand All @@ -149,7 +148,7 @@
background: none;
border: none;
color: inherit;
background: $color-background-dark;
background: var(--color-section);
cursor: pointer;
option{
-webkit-appearance: none;
Expand Down
84 changes: 39 additions & 45 deletions source/ui/styles/globals.scss
Original file line number Diff line number Diff line change
@@ -1,50 +1,44 @@
@import "./variables.scss";

:root{
--nav-height: 44px;
--col-width: 1320px;
--color-primary: #{$color-primary};
--color-secondary: #{$color-secondary};

--color-dark: #{$color-dark};
--color-medium: #{$color-primary};
--color-hover: #{$color-primary-dark};
--color-light: #{$color-text};

--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};
}




*, ::before, ::after {
box-sizing: border-box;
}

body{
background: $color-background;
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: #00517d;
--color-secondary: #E6B900;

--color-primary-light: #0089bf;
--color-primary-lighter: #00acf0;

--color-primary-dark: #00324d;

--color-light: #eee;
--color-dark: #071922;

--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: #4e4e4e;

/* Additional highlight color, primarily for hover effects */
--color-highlight2: #5e5e5e;
}
Loading

0 comments on commit 6fd6093

Please sign in to comment.