mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2026-09-25 20:12:57 +00:00
general changes to css order
This commit is contained in:
Víctor Losada Hernández
@@ -45,7 +45,7 @@
|
|||||||
border-bottom : 2px solid currentColor;
|
border-bottom : 2px solid currentColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
& > div { margin-bottom : 10px; }
|
& > div ,& > fieldset { margin-bottom : 10px; }
|
||||||
|
|
||||||
.field-group {
|
.field-group {
|
||||||
display : flex;
|
display : flex;
|
||||||
@@ -68,6 +68,7 @@
|
|||||||
width : 100%;
|
width : 100%;
|
||||||
min-width : 250px;
|
min-width : 250px;
|
||||||
padding-left : 10px;
|
padding-left : 10px;
|
||||||
|
|
||||||
& > label {
|
& > label {
|
||||||
width : 100px;
|
width : 100px;
|
||||||
font-size : 1em;
|
font-size : 1em;
|
||||||
@@ -94,15 +95,16 @@
|
|||||||
float : right;
|
float : right;
|
||||||
text-align : end;
|
text-align : end;
|
||||||
}
|
}
|
||||||
}
|
input[type='text'], textarea {
|
||||||
input[type='text'], textarea {
|
color : var(--input-text-clr);
|
||||||
color : var(--input-text-clr);
|
background-color : var(--input-bg);
|
||||||
background-color : var(--input-bg);
|
border : 1px solid var(--input-placeholder-clr);
|
||||||
border : 1px solid var(--input-placeholder-clr);
|
&:hover, :focus { outline : 1px solid var(--input-placeholder-clr); background-color : var(--input-bg-hover); }
|
||||||
&:hover, :focus { outline : 1px solid var(--input-placeholder-clr); background-color : var(--input-bg-hover); }
|
&::placeholder { color : var(--input-placeholder-clr); }
|
||||||
&::placeholder { color : var(--input-placeholder-clr); }
|
}
|
||||||
}
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
&.description {
|
&.description {
|
||||||
flex : 1;
|
flex : 1;
|
||||||
textarea.value {
|
textarea.value {
|
||||||
@@ -147,224 +149,191 @@
|
|||||||
&.themes {
|
&.themes {
|
||||||
.value {
|
.value {
|
||||||
overflow : visible;
|
overflow : visible;
|
||||||
text-overflow : auto;
|
|
||||||
}
|
}
|
||||||
button {
|
button {
|
||||||
padding-right : 5px;
|
padding-right : 5px;
|
||||||
padding-left : 5px;
|
padding-left : 5px;
|
||||||
}
|
}
|
||||||
|
& .dropdown-container { z-index : 200; }
|
||||||
|
& .dropdown-options { overflow-y : visible; }
|
||||||
|
.disabled {
|
||||||
|
font-style : italic;
|
||||||
|
color : dimgray;
|
||||||
|
background-color : darkgray;
|
||||||
|
}
|
||||||
|
.item {
|
||||||
|
position : relative;
|
||||||
|
overflow : visible;
|
||||||
|
color : inherit;
|
||||||
|
background-color : var(--input-bg);
|
||||||
|
border-top : 1px solid #767676;
|
||||||
|
.preview {
|
||||||
|
position : absolute;
|
||||||
|
top : 0;
|
||||||
|
right : 0;
|
||||||
|
z-index : 10;
|
||||||
|
display : flex;
|
||||||
|
flex-direction : column;
|
||||||
|
width : 200px;
|
||||||
|
overflow : hidden;
|
||||||
|
color : var(--input-text-clr);
|
||||||
|
background : var(--input-bg);
|
||||||
|
border-radius : 5px;
|
||||||
|
box-shadow : 0 0 5px var(--input-text-clr);
|
||||||
|
opacity : 0;
|
||||||
|
transition : opacity 250ms ease;
|
||||||
|
h6 {
|
||||||
|
padding-block : 0.5em;
|
||||||
|
padding-inline : 1em;
|
||||||
|
font-weight : 900;
|
||||||
|
border-bottom : 2px solid #666666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
input { padding-right : 25px; }
|
||||||
|
|
||||||
|
.texture-container {
|
||||||
|
position : absolute;
|
||||||
|
top : 0;
|
||||||
|
left : 0;
|
||||||
|
width : 100%;
|
||||||
|
height : 100%;
|
||||||
|
min-height : 100%;
|
||||||
|
overflow : hidden;
|
||||||
|
> img {
|
||||||
|
position : absolute;
|
||||||
|
top : 0;
|
||||||
|
right : 0;
|
||||||
|
width : 50%;
|
||||||
|
min-height : 100%;
|
||||||
|
-webkit-mask-image : linear-gradient(90deg, transparent, black 20%);
|
||||||
|
mask-image : linear-gradient(90deg, transparent, black 20%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover > .preview { opacity : 1; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.renderers .value {
|
||||||
|
label {
|
||||||
|
display : inline-flex;
|
||||||
|
align-items : center;
|
||||||
|
margin-right : 15px;
|
||||||
|
font-size : 0.9em;
|
||||||
|
font-weight : 800;
|
||||||
|
vertical-align : middle;
|
||||||
|
white-space : nowrap;
|
||||||
|
cursor : pointer;
|
||||||
|
user-select : none;
|
||||||
|
}
|
||||||
|
input {
|
||||||
|
margin : 3px;
|
||||||
|
vertical-align : middle;
|
||||||
|
cursor : pointer;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.authors {
|
||||||
|
.tag {
|
||||||
|
font-weight : 300;
|
||||||
|
transition : background-color 0.2s;
|
||||||
|
|
||||||
|
&.owner {
|
||||||
|
position : relative;
|
||||||
|
display : grid;
|
||||||
|
place-items : center;
|
||||||
|
min-width : 25px;
|
||||||
|
font-weight : 900;
|
||||||
|
background-color : @silverLight;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
position : absolute;
|
||||||
|
top : 0;
|
||||||
|
left : 0;
|
||||||
|
width : 15px;
|
||||||
|
height : 15px;
|
||||||
|
font-family : 'Font Awesome 6 Free';
|
||||||
|
color : gold;
|
||||||
|
content : '\f521';
|
||||||
|
transform : scaleY(0.7);
|
||||||
|
rotate : -25deg;
|
||||||
|
translate : -30% -50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:has(button) a { padding-right : 5px; }
|
||||||
|
&:has(button:hover) { background : #D97D7D; }
|
||||||
|
|
||||||
|
button { color : @red; }
|
||||||
|
|
||||||
|
}
|
||||||
|
a { text-underline-offset : 0.2em; }
|
||||||
|
}
|
||||||
&.invitedAuthors .value {
|
&.invitedAuthors .value {
|
||||||
z-index : 100;
|
z-index : 100;
|
||||||
|
|
||||||
.tagInput-dropdown { max-width : 200px; }
|
.tagInput-dropdown { max-width : 200px; }
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.thumbnail-preview {
|
&.publish .value {
|
||||||
position : relative;
|
position : relative;
|
||||||
flex : 1 1;
|
margin-bottom : 15px;
|
||||||
justify-self : center;
|
button { width : 100%; }
|
||||||
width : 80px;
|
button.publish {
|
||||||
height : min-content;
|
.colorButton(@blueLight);
|
||||||
max-height : 115px;
|
|
||||||
aspect-ratio : 1 / 1;
|
|
||||||
object-fit : contain;
|
|
||||||
background-color : #AAAAAA;
|
|
||||||
}
|
|
||||||
.renderers.field .value {
|
|
||||||
label {
|
|
||||||
display : inline-flex;
|
|
||||||
align-items : center;
|
|
||||||
margin-right : 15px;
|
|
||||||
font-size : 0.9em;
|
|
||||||
font-weight : 800;
|
|
||||||
vertical-align : middle;
|
|
||||||
white-space : nowrap;
|
|
||||||
cursor : pointer;
|
|
||||||
user-select : none;
|
|
||||||
}
|
|
||||||
input {
|
|
||||||
margin : 3px;
|
|
||||||
vertical-align : middle;
|
|
||||||
cursor : pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.publish.field .value {
|
|
||||||
position : relative;
|
|
||||||
margin-bottom : 15px;
|
|
||||||
button { width : 100%; }
|
|
||||||
button.publish {
|
|
||||||
.colorButton(@blueLight);
|
|
||||||
}
|
|
||||||
button.unpublish {
|
|
||||||
.colorButton(@silver);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.delete.field .value {
|
|
||||||
button {
|
|
||||||
.colorButton(@red);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag {
|
|
||||||
color : var(--input-bg);
|
|
||||||
background : var(--input-text-clr);
|
|
||||||
}
|
|
||||||
.authors.field {
|
|
||||||
.tag {
|
|
||||||
font-weight : 300;
|
|
||||||
transition : background-color 0.2s;
|
|
||||||
|
|
||||||
&.owner {
|
|
||||||
position : relative;
|
|
||||||
display : grid;
|
|
||||||
place-items : center;
|
|
||||||
min-width : 25px;
|
|
||||||
font-weight : 900;
|
|
||||||
background-color : @silverLight;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
position : absolute;
|
|
||||||
top : 0;
|
|
||||||
left : 0;
|
|
||||||
width : 15px;
|
|
||||||
height : 15px;
|
|
||||||
font-family : 'Font Awesome 6 Free';
|
|
||||||
color : gold;
|
|
||||||
content : '\f521';
|
|
||||||
transform : scaleY(0.7);
|
|
||||||
rotate : -25deg;
|
|
||||||
translate : -30% -50%;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
&:has(button) a { padding-right : 5px; }
|
button.unpublish {
|
||||||
&:has(button:hover) { background : #D97D7D; }
|
.colorButton(@silver);
|
||||||
|
|
||||||
button { color : @red; }
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
a { text-underline-offset : 0.2em; }
|
|
||||||
}
|
|
||||||
.themes.field {
|
|
||||||
& .dropdown-container { z-index : 200; }
|
|
||||||
& .dropdown-options { overflow-y : visible; }
|
|
||||||
.disabled {
|
|
||||||
font-style : italic;
|
|
||||||
color : dimgray;
|
|
||||||
background-color : darkgray;
|
|
||||||
}
|
|
||||||
.item {
|
|
||||||
position : relative;
|
|
||||||
overflow : visible;
|
|
||||||
color : inherit;
|
|
||||||
background-color : var(--input-bg);
|
|
||||||
border-top : 1px solid #767676;
|
|
||||||
.preview {
|
|
||||||
position : absolute;
|
|
||||||
top : 0;
|
|
||||||
right : 0;
|
|
||||||
z-index : 10;
|
|
||||||
display : flex;
|
|
||||||
flex-direction : column;
|
|
||||||
width : 200px;
|
|
||||||
overflow : hidden;
|
|
||||||
color : var(--input-text-clr);
|
|
||||||
background : var(--input-bg);
|
|
||||||
border-radius : 5px;
|
|
||||||
box-shadow : 0 0 5px var(--input-text-clr);
|
|
||||||
opacity : 0;
|
|
||||||
transition : opacity 250ms ease;
|
|
||||||
h6 {
|
|
||||||
padding-block : 0.5em;
|
|
||||||
padding-inline : 1em;
|
|
||||||
font-weight : 900;
|
|
||||||
border-bottom : 2px solid #666666;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
input { padding-right : 25px; }
|
|
||||||
|
|
||||||
.texture-container {
|
|
||||||
position : absolute;
|
|
||||||
top : 0;
|
|
||||||
left : 0;
|
|
||||||
width : 100%;
|
|
||||||
height : 100%;
|
|
||||||
min-height : 100%;
|
|
||||||
overflow : hidden;
|
|
||||||
> img {
|
|
||||||
position : absolute;
|
|
||||||
top : 0;
|
|
||||||
right : 0;
|
|
||||||
width : 50%;
|
|
||||||
min-height : 100%;
|
|
||||||
-webkit-mask-image : linear-gradient(90deg, transparent, black 20%);
|
|
||||||
mask-image : linear-gradient(90deg, transparent, black 20%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover > .preview { opacity : 1; }
|
|
||||||
}
|
}
|
||||||
}
|
&.delete .value {
|
||||||
.field .list {
|
|
||||||
display : flex;
|
|
||||||
flex : 1 0;
|
|
||||||
flex-wrap : wrap;
|
|
||||||
|
|
||||||
> * { flex : 0 0 auto; }
|
|
||||||
|
|
||||||
#groupedIcon {
|
|
||||||
#backgroundColors;
|
|
||||||
position : relative;
|
|
||||||
top : -0.3em;
|
|
||||||
right : -0.3em;
|
|
||||||
display : inline-block;
|
|
||||||
min-width : 20px;
|
|
||||||
height : ~'calc(100% + 0.6em)';
|
|
||||||
color : white;
|
|
||||||
text-align : center;
|
|
||||||
cursor : pointer;
|
|
||||||
|
|
||||||
i {
|
|
||||||
position : relative;
|
|
||||||
top : 50%;
|
|
||||||
transform : translateY(-50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(:last-child) { border-right : 1px solid black; }
|
|
||||||
|
|
||||||
&:last-child { border-radius : 0 0.5em 0.5em 0; }
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag {
|
|
||||||
padding : 0.35em;
|
|
||||||
margin : 2px;
|
|
||||||
font-size : 0.95em;
|
|
||||||
border-radius : 0.5em;
|
|
||||||
|
|
||||||
.icon { #groupedIcon; }
|
|
||||||
|
|
||||||
button {
|
button {
|
||||||
cursor : pointer;
|
.colorButton(@red);
|
||||||
|
|
||||||
&:hover { color : @redLight; }
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-group {
|
.list {
|
||||||
height : ~'calc(.9em + 4px + .6em)';
|
display : flex;
|
||||||
|
flex : 1 0;
|
||||||
|
flex-wrap : wrap;
|
||||||
|
|
||||||
input { border-radius : 0.5em 0 0 0.5em; }
|
> * { flex : 0 0 auto; }
|
||||||
|
|
||||||
input:last-child { border-radius : 0.5em; }
|
#groupedIcon {
|
||||||
|
#backgroundColors;
|
||||||
|
position : relative;
|
||||||
|
top : -0.3em;
|
||||||
|
right : -0.3em;
|
||||||
|
display : inline-block;
|
||||||
|
min-width : 20px;
|
||||||
|
height : ~'calc(100% + 0.6em)';
|
||||||
|
color : white;
|
||||||
|
text-align : center;
|
||||||
|
cursor : pointer;
|
||||||
|
|
||||||
|
i {
|
||||||
|
position : relative;
|
||||||
|
top : 50%;
|
||||||
|
transform : translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:last-child) { border-right : 1px solid black; }
|
||||||
|
|
||||||
|
&:last-child { border-radius : 0 0.5em 0.5em 0; }
|
||||||
|
}
|
||||||
|
|
||||||
.value {
|
.tag {
|
||||||
width : 7.5vw;
|
padding : 0.35em;
|
||||||
min-width : 75px;
|
margin : 2px;
|
||||||
height : 100%;
|
font-size : 0.95em;
|
||||||
|
border-radius : 0.5em;
|
||||||
|
|
||||||
|
.icon { #groupedIcon; }
|
||||||
|
|
||||||
|
button {
|
||||||
|
cursor : pointer;
|
||||||
|
|
||||||
|
&:hover { color : @redLight; }
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-group {
|
.input-group {
|
||||||
@@ -380,21 +349,50 @@
|
|||||||
height : 100%;
|
height : 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.invalid:focus { background-color : pink; }
|
.input-group {
|
||||||
|
height : ~'calc(.9em + 4px + .6em)';
|
||||||
|
|
||||||
.icon {
|
input { border-radius : 0.5em 0 0 0.5em; }
|
||||||
#groupedIcon;
|
|
||||||
top : -0.54em;
|
|
||||||
right : 1px;
|
|
||||||
height : 97%;
|
|
||||||
|
|
||||||
i { font-size : 1.125em; }
|
input:last-child { border-radius : 0.5em; }
|
||||||
|
|
||||||
|
.value {
|
||||||
|
width : 7.5vw;
|
||||||
|
min-width : 75px;
|
||||||
|
height : 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.invalid:focus { background-color : pink; }
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
#groupedIcon;
|
||||||
|
top : -0.54em;
|
||||||
|
right : 1px;
|
||||||
|
height : 97%;
|
||||||
|
|
||||||
|
i { font-size : 1.125em; }
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.thumbnail-preview {
|
||||||
|
position : relative;
|
||||||
|
flex : 1 1;
|
||||||
|
justify-self : center;
|
||||||
|
width : 80px;
|
||||||
|
height : min-content;
|
||||||
|
max-height : 115px;
|
||||||
|
aspect-ratio : 1 / 1;
|
||||||
|
object-fit : contain;
|
||||||
|
background-color : #AAAAAA;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
color : var(--input-bg);
|
||||||
|
background : var(--input-text-clr);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.settingsEditor .field {
|
.settingsEditor .field {
|
||||||
@@ -413,9 +411,9 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.editor.darkMode .metadataEditor {
|
.editor.darkMode .uiEditor {
|
||||||
--bg-clr : #555555;
|
--bg-clr : #555555;
|
||||||
--bg-image : @backgroundImageAlt;
|
--bg-image : @backgroundImageAltDark;
|
||||||
--h1-clr : white;
|
--h1-clr : white;
|
||||||
--h2-clr : #AAAAFF;
|
--h2-clr : #AAAAFF;
|
||||||
--label-clr : #DDDDDD;
|
--label-clr : #DDDDDD;
|
||||||
@@ -424,7 +422,7 @@
|
|||||||
--input-text-clr : #EEEEEE;
|
--input-text-clr : #EEEEEE;
|
||||||
--input-placeholder-clr : #AAAAAA;
|
--input-placeholder-clr : #AAAAAA;
|
||||||
|
|
||||||
--bg-image : @backgroundImageAltDark;
|
.field { border-color : var(--h1-clr); }
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color : @blueLight;
|
color : @blueLight;
|
||||||
|
|||||||
Reference in New Issue
Block a user