mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2026-01-04 03:52:40 +00:00
Update metadataEditor.less
This commit is contained in:
Trevor Buckner
@@ -1,258 +1,239 @@
|
|||||||
@import 'naturalcrit/styles/colors.less';
|
@import 'naturalcrit/styles/colors.less';
|
||||||
|
|
||||||
.metadataEditor{
|
.metadataEditor {
|
||||||
position : absolute;
|
position : absolute;
|
||||||
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;
|
||||||
font-weight : 800;
|
font-weight : 800;
|
||||||
line-height : 1.8em;
|
line-height : 1.8em;
|
||||||
text-transform : uppercase;
|
text-transform : uppercase;
|
||||||
}
|
}
|
||||||
&>.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 {
|
||||||
|
overflow : hidden;
|
||||||
|
text-overflow : ellipsis;
|
||||||
}
|
}
|
||||||
.value{
|
button {
|
||||||
overflow: hidden;
|
padding : 0px 5px;
|
||||||
text-overflow: ellipsis;
|
color : white;
|
||||||
}
|
background-color : black;
|
||||||
button{
|
border : 1px solid #999999;
|
||||||
border: 1px solid #999;
|
&:hover { background-color : #777777; }
|
||||||
color: white;
|
|
||||||
padding: 0px 5px;
|
|
||||||
background-color: black;
|
|
||||||
&:hover{
|
|
||||||
background-color: #777;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.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;
|
||||||
justify-self: center;
|
flex : 1 1;
|
||||||
width: 80px;
|
justify-self : center;
|
||||||
height: min-content;
|
width : 80px;
|
||||||
flex: 1 1;
|
height : min-content;
|
||||||
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;
|
white-space : nowrap;
|
||||||
display : inline-flex;
|
|
||||||
}
|
|
||||||
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);
|
||||||
}
|
}
|
||||||
button.unpublish{
|
button.unpublish {
|
||||||
.button(@silver);
|
.button(@silver);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.delete.field .value{
|
.delete.field .value {
|
||||||
button{
|
button {
|
||||||
.button(@red);
|
.button(@red);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.authors.field .value{
|
.authors.field .value {
|
||||||
font-size: 0.8em;
|
font-size : 0.8em;
|
||||||
line-height : 1.5em;
|
line-height : 1.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.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;
|
color : dimgray;
|
||||||
background-color : darkgray;
|
background-color : darkgray;
|
||||||
color : dimgray;
|
|
||||||
}
|
}
|
||||||
&>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;
|
border : 2px solid rgb(118,118,118);
|
||||||
i {
|
i { float : right; }
|
||||||
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;
|
height : 1.1em;
|
||||||
text-overflow: ellipsis;
|
overflow : hidden;
|
||||||
overflow: hidden;
|
text-overflow : ellipsis;
|
||||||
height: 1.1em;
|
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;
|
position : absolute;
|
||||||
flex-direction: column;
|
top : 0;
|
||||||
background : #ccc;
|
right : 0;
|
||||||
border-radius : 5px;
|
z-index : 1;
|
||||||
box-shadow : 0 0 5px black;
|
display : flex;
|
||||||
width : 200px;
|
flex-direction : column;
|
||||||
color :black;
|
width : 200px;
|
||||||
position : absolute;
|
overflow : hidden;
|
||||||
top : 0;
|
color : black;
|
||||||
right : 0;
|
background : #CCCCCC;
|
||||||
opacity : 0;
|
border-radius : 5px;
|
||||||
transition : opacity 250ms ease;
|
box-shadow : 0 0 5px black;
|
||||||
z-index : 1;
|
opacity : 0;
|
||||||
overflow :hidden;
|
transition : opacity 250ms ease;
|
||||||
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 {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
}
|
||||||
|
&:hover > .preview { opacity : 1; }
|
||||||
.texture-container {
|
.texture-container {
|
||||||
position: absolute;
|
position : absolute;
|
||||||
width: 100%;
|
top : 0;
|
||||||
height: 100%;
|
left : 0;
|
||||||
min-height: 100%;
|
width : 100%;
|
||||||
top: 0;
|
height : 100%;
|
||||||
left: 0;
|
min-height : 100%;
|
||||||
overflow: hidden;
|
overflow : hidden;
|
||||||
> img {
|
> img {
|
||||||
mask-image : linear-gradient(90deg, transparent, black 20%);
|
position : absolute;
|
||||||
-webkit-mask-image : linear-gradient(90deg, transparent, black 20%);
|
top : 0px;
|
||||||
position : absolute;
|
right : 0;
|
||||||
right : 0;
|
width : 50%;
|
||||||
top : 0px;
|
|
||||||
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%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -260,84 +241,69 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.field .list {
|
.field .list {
|
||||||
display: flex;
|
display : flex;
|
||||||
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;
|
position : relative;
|
||||||
height: ~"calc(100% + 0.6em)";
|
top : -0.3em;
|
||||||
position: relative;
|
right : -0.3em;
|
||||||
top: -0.3em;
|
display : inline-block;
|
||||||
right: -0.3em;
|
min-width : 20px;
|
||||||
cursor: pointer;
|
height : ~'calc(100% + 0.6em)';
|
||||||
min-width: 20px;
|
color : white;
|
||||||
text-align: center;
|
text-align : center;
|
||||||
color: white;
|
cursor : pointer;
|
||||||
|
|
||||||
i {
|
i {
|
||||||
position: relative;
|
position : relative;
|
||||||
top: 50%;
|
top : 50%;
|
||||||
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;
|
margin : 2px;
|
||||||
font-size: .9em;
|
font-size : 0.9em;
|
||||||
margin: 2px;
|
background-color : #DDDDDD;
|
||||||
padding: .3em;
|
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;
|
||||||
min-width: 75px;
|
min-width : 75px;
|
||||||
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;
|
height : 97%;
|
||||||
top: -.54em;
|
font-size : 0.8em;
|
||||||
|
|
||||||
i {
|
i { font-size : 1.125em; }
|
||||||
font-size: 1.125em;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user