426 lines
No EOL
9.4 KiB
SCSS
426 lines
No EOL
9.4 KiB
SCSS
@use 'sass:color';
|
|
|
|
$dark-theme: false !default;
|
|
|
|
@use 'constants' as consts with ($dark-theme: $dark-theme);
|
|
@use 'calendar';
|
|
@use 'search';
|
|
@use 'toast';
|
|
@use 'modal-dialog';
|
|
@use 'mixins';
|
|
|
|
a {
|
|
color: consts.$link-color;
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
color: consts.$link-hover-color;
|
|
}
|
|
}
|
|
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
color: consts.$text-color;
|
|
background-color: consts.$color-1;
|
|
margin: 0px;
|
|
|
|
.user-message {
|
|
font-weight: 600;
|
|
color: consts.$color-highlight;
|
|
}
|
|
|
|
.drag-handle {
|
|
width: 20px;
|
|
height: 20px;
|
|
display: inline-block;
|
|
vertical-align: bottom;
|
|
background-color: blue;
|
|
}
|
|
|
|
.footer-container {
|
|
margin: var(--margin);
|
|
align-self: center;
|
|
font-size: 0.7em;
|
|
}
|
|
|
|
/// HEADER ///
|
|
.header-container {
|
|
margin: calc(2 * var(--margin));
|
|
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
|
|
.title {
|
|
font-size: var(--title-font-size);
|
|
font-style: italic;
|
|
|
|
.logo {
|
|
width: var(--logo-size);
|
|
height: var(--logo-size);
|
|
|
|
vertical-align: bottom;
|
|
margin: 0px 10px 0px 0px;
|
|
}
|
|
}
|
|
|
|
.header-menu {
|
|
.user-menu {
|
|
margin: var(--margin);
|
|
|
|
.user-edit-link {
|
|
margin-left: var(--margin);
|
|
}
|
|
}
|
|
|
|
#select-website-language {
|
|
margin: var(--margin);
|
|
padding: var(--margin);
|
|
}
|
|
}
|
|
}
|
|
|
|
.main-container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
#recipes-list {
|
|
margin: calc(2 * var(--margin));
|
|
|
|
ul {
|
|
padding-left: 20px;
|
|
|
|
li {
|
|
margin-bottom: calc(var(--margin) / 2);
|
|
|
|
a {
|
|
padding: calc(var(--margin) / 2);
|
|
}
|
|
}
|
|
}
|
|
|
|
hr {
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
height: 1px;
|
|
color: consts.$color-3;
|
|
background: consts.$color-3;
|
|
font-size: 0;
|
|
border: 0;
|
|
}
|
|
|
|
.recipe-item {
|
|
white-space: preserve nowrap;
|
|
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: 2px;
|
|
border: 0.1em solid consts.$color-3;
|
|
|
|
border-radius: 0.5em;
|
|
color: consts.$text-highlight;
|
|
background-color: consts.$color-2;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content {
|
|
margin: calc(2 * var(--margin));
|
|
|
|
flex-grow: 1;
|
|
|
|
background-color: consts.$color-2;
|
|
border: 0.1em solid consts.$color-3;
|
|
border-radius: 1em;
|
|
padding: 0.8em;
|
|
|
|
h1 {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
#hidden-templates {
|
|
display: none;
|
|
}
|
|
|
|
#recipe-edit {
|
|
display: grid;
|
|
|
|
.drag-handle {
|
|
cursor: move;
|
|
}
|
|
|
|
.group {
|
|
border: 0.1em solid color.adjust(consts.$color-3, $lightness: +30%);
|
|
margin-top: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.step {
|
|
border: 0.1em solid color.adjust(consts.$color-3, $lightness: +30%);
|
|
margin-top: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.ingredient {
|
|
border: 0.1em solid color.adjust(consts.$color-3, $lightness: +30%);
|
|
margin-top: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.dropzone {
|
|
height: 10px;
|
|
margin-top: 0px;
|
|
margin-bottom: 0px;
|
|
|
|
background-color: white;
|
|
|
|
&.active {
|
|
background-color: blue;
|
|
}
|
|
|
|
&.hover {
|
|
background-color: red;
|
|
}
|
|
}
|
|
}
|
|
|
|
#recipe-view {
|
|
.recipe-description {
|
|
@include mixins.markdown;
|
|
}
|
|
}
|
|
|
|
#logs {
|
|
.current {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.line {
|
|
padding: 3px;
|
|
|
|
&.odd {
|
|
background-color: consts.$color-1;
|
|
}
|
|
}
|
|
|
|
.date-time {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.level {
|
|
padding: 2px;
|
|
border-radius: 4px;
|
|
|
|
&.ERROR {
|
|
color: white;
|
|
background-color: red;
|
|
}
|
|
|
|
&.WARN {
|
|
color: black;
|
|
background-color: orange;
|
|
}
|
|
|
|
&.INFO {
|
|
color: white;
|
|
background-color: blue;
|
|
}
|
|
|
|
&.DEBUG {
|
|
color: white;
|
|
background-color: green;
|
|
}
|
|
|
|
&.TRACE {
|
|
color: black;
|
|
background-color: yellow;
|
|
}
|
|
}
|
|
|
|
.thread-name,
|
|
.thread-id {
|
|
font-style: italic;
|
|
font-size: 80%;
|
|
}
|
|
}
|
|
|
|
form {
|
|
display: grid;
|
|
// <label> <input>.
|
|
grid-template-columns: auto 1fr;
|
|
gap: calc(var(--margin) / 2);
|
|
align-items: center;
|
|
}
|
|
|
|
#sign-up form,
|
|
#sign-in form,
|
|
#ask-reset-password form,
|
|
#reset-password form,
|
|
#user-edit form {
|
|
// <label> <input> <user message>.
|
|
grid-template-columns: auto 1fr auto;
|
|
|
|
input[type="submit"] {
|
|
grid-column: 2
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tag {
|
|
border: 0.1em solid consts.$color-3;
|
|
border-radius: 0.5em;
|
|
background-color: consts.$color-1;
|
|
margin: var(--margin);
|
|
padding: var(--margin);
|
|
}
|
|
|
|
textarea,
|
|
input {
|
|
margin: var(--margin);
|
|
padding: calc(var(--margin) / 2) calc(2 * var(--margin));
|
|
|
|
background-color: consts.$color-1;
|
|
border: solid 1px consts.$color-3;
|
|
color: consts.$text-color;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
background-color: consts.$color-2;
|
|
box-shadow: 0 0 5px color.adjust(consts.$color-3, $lightness: -20%);
|
|
}
|
|
}
|
|
|
|
select {
|
|
margin: var(--margin);
|
|
padding: calc(var(--margin) / 2) calc(2 * var(--margin));
|
|
|
|
background-color: consts.$color-1;
|
|
border: solid 1px consts.$color-3;
|
|
color: consts.$text-color;
|
|
|
|
option {
|
|
color: inherit;
|
|
background-color: consts.$color-1;
|
|
}
|
|
}
|
|
|
|
input[type="button"],
|
|
input[type="submit"],
|
|
.button {
|
|
margin: var(--margin);
|
|
padding: calc(var(--margin) / 2) calc(2 * var(--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;
|
|
|
|
color: consts.$link-color;
|
|
|
|
&:hover {
|
|
color: consts.$link-hover-color;
|
|
}
|
|
}
|
|
|
|
/// Tooltip ///
|
|
.tooltip {
|
|
position: relative;
|
|
|
|
.tooltiptext {
|
|
color: consts.$text-color;
|
|
|
|
visibility: hidden;
|
|
width: 120px;
|
|
background-color: consts.$color-1;
|
|
text-align: center;
|
|
padding: var(--margin) 0;
|
|
|
|
border: 0.1em solid consts.$color-3;
|
|
border-radius: 0.5em;
|
|
|
|
position: absolute;
|
|
z-index: 10;
|
|
|
|
cursor: default;
|
|
|
|
top: -(var(--margin));
|
|
left: 100%;
|
|
margin-left: var(--margin);
|
|
}
|
|
|
|
&:hover .tooltiptext {
|
|
visibility: visible;
|
|
}
|
|
|
|
.tooltiptext::after {
|
|
content: " ";
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 100%;
|
|
margin-top: -(var(--margin));
|
|
border-width: var(--margin);
|
|
border-style: solid;
|
|
border-color: transparent consts.$color-3 transparent transparent;
|
|
}
|
|
}
|
|
|
|
/// Toggle theme (dark, light).
|
|
#toggle-theme {
|
|
margin: var(--margin);
|
|
|
|
position: relative;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
width: 3.5em;
|
|
height: 2em;
|
|
|
|
// Hide default HTML checkbox
|
|
input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.slider {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: consts.$color-2;
|
|
transition: .4s;
|
|
border-radius: 30px;
|
|
margin: 0px;
|
|
}
|
|
|
|
.slider::before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 1.4em;
|
|
width: 1.4em;
|
|
border-radius: 20px;
|
|
left: 0.3em;
|
|
bottom: 0.3em;
|
|
background-color: consts.$color-1;
|
|
box-shadow: inset 2px -2px 0 1.8px #ffffff;
|
|
transition: .4s;
|
|
}
|
|
|
|
input:checked+.slider:before {
|
|
background-color: yellow;
|
|
box-shadow: none;
|
|
transform: translateX(1.5em);
|
|
}
|
|
} |