f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-07 12:02:44 +00:00
Code Wiki Activity

Update metadataEditor.less

Browse Source
This commit is contained in:
Trevor Buckner
2024-08-03 17:28:47 -04:00
parent ac70403203
commit 3c8aaa7465
1 changed files with 164 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

196
client/homebrew/editor/metadataEditor/metadataEditor.less
View File

@@ -5,46 +5,42 @@
z-index : 5; z-index : 5;
box-sizing : border-box; box-sizing : border-box;
width : 100%; width : 100%;
padding : 25px;
background-color : #999;
height : calc(100vh - 54px); // 54px is the height of the navbar + snippet bar. probably a better way to dynamic get this. height : calc(100vh - 54px); // 54px is the height of the navbar + snippet bar. probably a better way to dynamic get this.
padding : 25px;
overflow-y : auto; overflow-y : auto;
background-color : #999999;
.sectionHead { .sectionHead {
font-weight: 1000;
margin : 20px 0; margin : 20px 0;
font-weight : 1000;
&:first-of-type { &:first-of-type { margin-top : 0; }
margin-top: 0;
}
} }
& > div { & > div { margin-bottom : 10px; }
margin-bottom: 10px;
}
.field-group { .field-group {
display : flex; display : flex;
width: 100%;
flex-wrap : wrap; flex-wrap : wrap;
gap : 10px; gap : 10px;
width : 100%;
} }
.field-column { .field-column {
display : flex; display : flex;
flex-direction: column;
flex : 5 0 200px; flex : 5 0 200px;
flex-direction : column;
gap : 10px; gap : 10px;
} }
.field { .field {
position : relative;
display : flex; display : flex;
flex-wrap : wrap; flex-wrap : wrap;
width : 100%; width : 100%;
min-width : 200px; min-width : 200px;
position : relative;
& > label { & > label {
width : 80px; width : 80px;
font-size : 11px; font-size : 11px;
@@ -55,100 +51,90 @@
& > .value { & > .value {
flex : 1 1 auto; flex : 1 1 auto;
width : 50px; width : 50px;
&:invalid { &:invalid { background : #FFB9B9; }
background : #ffb9b9;
}
} }
input[type='text'], textarea { input[type='text'], textarea {
border : 1px solid gray; border : 1px solid gray;
&:focus { &:focus { outline : 1px solid #444444; }
outline: 1px solid #444;
}
} }
&.thumbnail { &.thumbnail {
height : 1.4em; height : 1.4em;
label{ label { line-height : 2.0em; }
line-height: 2.0em;
}
.value { .value {
overflow : hidden; overflow : hidden;
text-overflow : ellipsis; text-overflow : ellipsis;
} }
button { button {
border: 1px solid #999;
color: white;
padding : 0px 5px; padding : 0px 5px;
color : white;
background-color : black; background-color : black;
&:hover{ border : 1px solid #999999;
background-color: #777; &:hover { background-color : #777777; }
}
} }
} }
&.description { &.description {
flex : 1; flex : 1;
textarea.value { textarea.value {
resize : none;
height : auto; height : auto;
font-family : 'Open Sans', sans-serif; font-family : 'Open Sans', sans-serif;
font-size : 0.8em; font-size : 0.8em;
resize : none;
} }
} }
&.language .language-dropdown { &.language .language-dropdown {
max-width : 150px;
z-index : 200; z-index : 200;
max-width : 150px;
} }
small { small {
display : inline-block;
font-size : 0.6em; font-size : 0.6em;
font-style : italic; font-style : italic;
line-height : 1.4em; line-height : 1.4em;
display : inline-block;
} }
} }
.thumbnail-preview { .thumbnail-preview {
position : relative; position : relative;
flex : 1 1;
justify-self : center; justify-self : center;
width : 80px; width : 80px;
height : min-content; height : min-content;
flex: 1 1;
max-height : 115px; max-height : 115px;
aspect-ratio : 1 / 1; aspect-ratio : 1 / 1;
object-fit : contain; object-fit : contain;
background-color: #AAA; background-color : #AAAAAA;
} }
.systems.field .value { .systems.field .value {
label { label {
vertical-align : middle;
margin-right : 15px;
cursor : pointer;
font-size : 0.7em;
font-weight : 800;
user-select : none;
white-space : nowrap;
display : inline-flex; display : inline-flex;
align-items : center; align-items : center;
} margin-right : 15px;
a {
font-size : 0.7em; font-size : 0.7em;
font-weight : 800; font-weight : 800;
display : inline-flex; white-space : nowrap;
}
input{
vertical-align : middle; vertical-align : middle;
cursor : pointer; cursor : pointer;
user-select : none;
}
a {
display : inline-flex;
font-size : 0.7em;
font-weight : 800;
}
input {
margin : 3px; margin : 3px;
vertical-align : middle;
cursor : pointer;
} }
} }
.publish.field .value { .publish.field .value {
position : relative; position : relative;
margin-bottom : 15px; margin-bottom : 15px;
button{ button { width : 100%; }
width:100%;
}
button.publish { button.publish {
.button(@blueLight); .button(@blueLight);
} }
@@ -170,89 +156,84 @@
.themes.field { .themes.field {
font-size : 13.33px; font-size : 13.33px;
.navDropdownContainer { .navDropdownContainer {
background-color : white;
position : relative; position : relative;
z-index : 100; z-index : 100;
background-color : white;
&.disabled { &.disabled {
font-style : italic; font-style : italic;
font-style : italic;
background-color : darkgray;
color : dimgray; color : dimgray;
background-color : darkgray;
} }
& > div:first-child { & > div:first-child {
border : 2px solid rgb(118,118,118);
padding : 6px 3px; padding : 6px 3px;
background-color : inherit; background-color : inherit;
i { border : 2px solid rgb(118,118,118);
float : right; i { float : right; }
}
&:hover { &:hover {
background-color : @blue;
color : white; color : white;
background-color : @blue;
} }
} }
.navDropdown .item > p { .navDropdown .item > p {
width : 45%; width : 45%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
height : 1.1em; height : 1.1em;
overflow : hidden;
text-overflow : ellipsis;
white-space : nowrap;
} }
.navDropdown { .navDropdown {
box-shadow : 0px 5px 10px rgba(0, 0, 0, 0.3);
position : absolute; position : absolute;
width : 100%; width : 100%;
box-shadow : 0px 5px 10px rgba(0, 0, 0, 0.3);
.item { .item {
padding : 3px 3px;
border-top : 1px solid rgb(118, 118, 118);
position : relative; position : relative;
padding : 3px 3px;
overflow : visible; overflow : visible;
background-color : white; background-color : white;
border-top : 1px solid rgb(118, 118, 118);
.preview { .preview {
display : flex;
flex-direction: column;
background : #ccc;
border-radius : 5px;
box-shadow : 0 0 5px black;
width : 200px;
color :black;
position : absolute; position : absolute;
top : 0; top : 0;
right : 0; right : 0;
z-index : 1;
display : flex;
flex-direction : column;
width : 200px;
overflow : hidden;
color : black;
background : #CCCCCC;
border-radius : 5px;
box-shadow : 0 0 5px black;
opacity : 0; opacity : 0;
transition : opacity 250ms ease; transition : opacity 250ms ease;
z-index : 1;
overflow :hidden;
h6 { h6 {
font-weight : 900; padding-block : 0.5em;
padding-inline : 1em; padding-inline : 1em;
padding-block :.5em; font-weight : 900;
border-bottom : 2px solid hsl(0,0%,40%); border-bottom : 2px solid hsl(0,0%,40%);
} }
} }
&:hover { &:hover {
background-color : @blue;
color : white; color : white;
background-color : @blue;
} }
&:hover > .preview { &:hover > .preview { opacity : 1; }
opacity: 1;
}
.texture-container { .texture-container {
position : absolute; position : absolute;
top : 0;
left : 0;
width : 100%; width : 100%;
height : 100%; height : 100%;
min-height : 100%; min-height : 100%;
top: 0;
left: 0;
overflow : hidden; overflow : hidden;
> img { > img {
mask-image : linear-gradient(90deg, transparent, black 20%);
-webkit-mask-image : linear-gradient(90deg, transparent, black 20%);
position : absolute; position : absolute;
right : 0;
top : 0px; top : 0px;
right : 0;
width : 50%; width : 50%;
min-height : 100%; min-height : 100%;
-webkit-mask-image : linear-gradient(90deg, transparent, black 20%);
mask-image : linear-gradient(90deg, transparent, black 20%);
} }
} }
} }
@@ -264,21 +245,19 @@
flex : 1 0; flex : 1 0;
flex-wrap : wrap; flex-wrap : wrap;
> * { > * { flex : 0 0 auto; }
flex: 0 0 auto;
}
#groupedIcon { #groupedIcon {
#backgroundColors; #backgroundColors;
display: inline-block;
height: ~"calc(100% + 0.6em)";
position : relative; position : relative;
top : -0.3em; top : -0.3em;
right : -0.3em; right : -0.3em;
cursor: pointer; display : inline-block;
min-width : 20px; min-width : 20px;
text-align: center; height : ~'calc(100% + 0.6em)';
color : white; color : white;
text-align : center;
cursor : pointer;
i { i {
position : relative; position : relative;
@@ -286,37 +265,28 @@
transform : translateY(-50%); transform : translateY(-50%);
} }
&:not(:last-child) { &:not(:last-child) { border-right : 1px solid black; }
border-right: 1px solid black;
}
&:last-child { &:last-child { border-radius : 0 0.5em 0.5em 0; }
border-radius: 0 0.5em 0.5em 0;
}
} }
.badge { .badge {
background-color: #dddddd; padding : 0.3em;
border-radius: .5em;
font-size: .9em;
margin : 2px; margin : 2px;
padding: .3em; font-size : 0.9em;
background-color : #DDDDDD;
border-radius : 0.5em;
.icon { .icon {
#groupedIcon #groupedIcon; }
}
} }
.input-group { .input-group {
height: ~"calc(.9em + 4px + .6em)"; height : ~'calc(.9em + 4px + .6em)';
input { input { border-radius : 0.5em 0 0 0.5em; }
border-radius: .5em 0 0 .5em;
}
input:last-child { input:last-child { border-radius : 0.5em; }
border-radius: .5em;
}
.value { .value {
width : 7.5vw; width : 7.5vw;
@@ -324,20 +294,16 @@
height : 100%; height : 100%;
} }
.invalid:focus { .invalid:focus { background-color : pink; }
background-color: pink;
}
.icon { .icon {
#groupedIcon; #groupedIcon;
height: 97%; top : -0.54em;
font-size: .8em;
right : 1px; right : 1px;
top: -.54em; height : 97%;
font-size : 0.8em;
i { i { font-size : 1.125em; }
font-size: 1.125em;
}
} }
} }
} }