gburri/recipes
1
0
Fork 0
Code Issues 6 Pull requests Projects Releases Packages Wiki Activity Actions

CSS: use a $margin constant. Some CSS improvements (WIP).

Browse source
This commit is contained in:
Greg Burri 2025-04-09 15:08:43 +02:00
parent c1fc9aa46f
commit 2a288abb07
9 changed files with 218 additions and 116 deletions
Download patch file Download diff file Expand all files Collapse all files

176
backend/scss/main.scss
View file

@ -1,42 +1,18 @@
@use 'sass:color';
@use 'toast.scss';
@use 'modal-dialog.scss';
@use 'calendar.scss';
$dark-theme: false !default;
$color-1: #B29B89;
$color-2: #89B29B;
$color-3: #9B89B2;
$text-color: color.adjust($color-1, $lightness: -30%);
$text-highlight: color.adjust($color-1, $lightness: +30%);
$link-color: color.adjust($color-3, $lightness: -25%);
$link-hover-color: color.adjust($color-3, $lightness: +20%);
@if $dark-theme {
$text-color: color.adjust($color-1, $lightness: -10%);
$text-highlight: color.adjust($color-1, $lightness: +10%);
$link-color: color.adjust($color-3, $lightness: -5%);
$link-hover-color: color.adjust($color-3, $lightness: +10%);
$color-1: color.adjust($color-1, $lightness: -47%);
$color-2: color.adjust($color-2, $lightness: -47%);
$color-3: color.adjust($color-2, $lightness: -47%);
}
* {
margin: 5px;
padding: 0px;
}
@use 'constants' as consts with ($dark-theme: $dark-theme);
@use 'calendar';
@use 'toast';
@use 'modal-dialog';
a {
color: $link-color;
color: consts.$link-color;
text-decoration: none;
&:hover {
color: $link-hover-color;
color: consts.$link-hover-color;
}
}
@ -45,19 +21,14 @@ body {
flex-direction: column;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: $text-color;
background-color: $color-1;
color: consts.$text-color;
background-color: consts.$color-1;
margin: 0px;
.user-message {
font-weight: bold;
}
.footer-container {
align-self: center;
font-size: 0.7em;
}
.drag-handle {
width: 20px;
height: 20px;
@ -70,9 +41,18 @@ body {
border: 0px;
}
.footer-container {
margin: consts.$margin;
align-self: center;
font-size: 0.7em;
}
/// HEADER ///
.header-container {
margin: calc(2 * consts.$margin);
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: space-between;
.title {
@ -82,23 +62,24 @@ body {
.logo {
width: 50px;
height: 50px;
vertical-align: bottom;
margin: 0px 10px 0px 0px;
}
}
.header-menu {
align-self: flex-end;
.create-recipe {
border: 0.1em solid $color-3;
padding: 2px 8px 2px 8px;
border-radius: 0.5em;
.user-menu {
margin: consts.$margin;
}
}
#select-website-language {
padding: 5px;
// .create-recipe {
// }
#select-website-language {
margin: consts.$margin;
padding: consts.$margin;
}
}
}
@ -107,41 +88,47 @@ body {
flex-direction: row;
#recipes-list {
margin: calc(2 * consts.$margin);
ul {
padding-left: 20px;
}
hr {
margin-top: 10px;
margin-bottom: 10px;
height: 1px;
color: $color-3;
background: $color-3;
color: consts.$color-3;
background: consts.$color-3;
font-size: 0;
border: 0;
}
.recipe-item {
white-space: preserve nowrap;
padding: 4px;
padding: 2px;
// Transparent border: to keep same size than '.recipe-item-current'.
border: 0.1em solid rgba(0, 0, 0, 0);
&.current {
white-space: preserve nowrap;
padding: 4px;
border: 0.1em solid $color-3;
padding: 2px;
border: 0.1em solid consts.$color-3;
border-radius: 0.5em;
color: $text-highlight;
background-color: $color-2;
color: consts.$text-highlight;
background-color: consts.$color-2;
}
}
}
.content {
margin: calc(2 * consts.$margin);
flex-grow: 1;
margin-left: 0px;
background-color: $color-2;
border: 0.1em solid $color-3;
background-color: consts.$color-2;
border: 0.1em solid consts.$color-3;
border-radius: 1em;
padding: 0.8em;
@ -162,19 +149,19 @@ body {
}
.group {
border: 0.1em solid color.adjust($color-3, $lightness: +30%);
border: 0.1em solid color.adjust(consts.$color-3, $lightness: +30%);
margin-top: 0px;
margin-bottom: 0px;
}
.step {
border: 0.1em solid color.adjust($color-3, $lightness: +30%);
border: 0.1em solid color.adjust(consts.$color-3, $lightness: +30%);
margin-top: 0px;
margin-bottom: 0px;
}
.ingredient {
border: 0.1em solid color.adjust($color-3, $lightness: +30%);
border: 0.1em solid color.adjust(consts.$color-3, $lightness: +30%);
margin-top: 0px;
margin-bottom: 0px;
}
@ -286,9 +273,68 @@ body {
}
}
// Customize some form elements.
.button {
margin: consts.$margin;
padding: calc(consts.$margin / 2) calc(2 * consts.$margin);
border: 0.1em solid consts.$color-3;
border-radius: 0.5em;
background-color: consts.$color-2;
box-shadow:
-5px -5px 4px 3px color.adjust(consts.$color-2, $lightness: -4%) inset,
5px 5px 4px 3px color.adjust(consts.$color-2, $lightness: 4%) inset;
cursor: pointer;
&:hover {
color: consts.$link-hover-color;
}
}
/// Tooltip ///
.tooltip {
position: relative;
.tooltiptext {
color: consts.$link-hover-color;
visibility: hidden;
width: 120px;
background-color: consts.$color-1;
text-align: center;
padding: consts.$margin 0;
border: 0.1em solid consts.$color-3;
border-radius: 0.5em;
position: absolute;
z-index: 1;
cursor: default;
top: -(consts.$margin);
left: 100%;
margin-left: consts.$margin;
}
&:hover .tooltiptext {
visibility: visible;
}
.tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
right: 100%;
margin-top: -(consts.$margin);
border-width: consts.$margin;
border-style: solid;
border-color: transparent consts.$color-3 transparent transparent;
}
}
/// Toggle theme (dark, light).
#toggle-theme {
// font-size: 17px;
margin: consts.$margin;
position: relative;
display: inline-block;
vertical-align: middle;
@ -309,7 +355,7 @@ body {
left: 0;
right: 0;
bottom: 0;
background-color: $color-2;
background-color: consts.$color-2;
transition: .4s;
border-radius: 30px;
margin: 0px;
@ -323,7 +369,7 @@ body {
border-radius: 20px;
left: 0.3em;
bottom: 0.3em;
background-color: $color-1;
background-color: consts.$color-1;
box-shadow: inset 2px -2px 0 1.8px #ffffff;
transition: .4s;
}