mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2026-09-24 03:02:56 +00:00
theme changes, and accessibility htmlfor
This commit is contained in:
Víctor Losada Hernández
@@ -7,6 +7,16 @@
|
||||
}
|
||||
|
||||
.metadataEditor {
|
||||
--bg-clr: white;
|
||||
--bg-image: @backgroundImageAlt;
|
||||
--h1-clr: black;
|
||||
--h2-clr: #007;
|
||||
--label-clr: black;
|
||||
--input-bg: white;
|
||||
--input-bg-hover:#ddd;
|
||||
--input-text-clr: black;
|
||||
--input-placeholder-clr: grey;
|
||||
|
||||
position : absolute;
|
||||
box-sizing : border-box;
|
||||
width : 100%;
|
||||
@@ -14,23 +24,25 @@
|
||||
padding : 25px;
|
||||
overflow-y : auto;
|
||||
font-size : 13px;
|
||||
background-color : white;
|
||||
background-image : @backgroundImageAlt;
|
||||
background-color : var(--bg-clr);
|
||||
background-image : var(--bg-image);
|
||||
background-size : cover;
|
||||
color: var(--label-clr);
|
||||
|
||||
h1 {
|
||||
margin : 0 0 40px;
|
||||
font-weight : bold;
|
||||
font-size : 18px;
|
||||
text-transform : uppercase;
|
||||
color: var(--h1-clr);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size:15px;
|
||||
margin : 16px 0;
|
||||
font-weight : bold;
|
||||
color : #007;
|
||||
border-bottom : 2px solid #007;
|
||||
color : var(--h2-clr);
|
||||
border-bottom : 2px solid currentColor;
|
||||
}
|
||||
|
||||
& > div { margin-bottom : 10px; }
|
||||
@@ -62,6 +74,7 @@
|
||||
font-weight : 800;
|
||||
line-height : 1.8em;
|
||||
text-transform : capitalize;
|
||||
color:inherit;
|
||||
}
|
||||
& > .value {
|
||||
flex : 1 1 auto;
|
||||
@@ -76,8 +89,11 @@
|
||||
}
|
||||
}
|
||||
input[type='text'], textarea {
|
||||
border : 1px solid gray;
|
||||
&:focus { outline : 1px solid #444444; }
|
||||
background-color: var(--input-bg);
|
||||
color:var(--input-text-clr);
|
||||
border : 1px solid var(--input-placeholder-clr);
|
||||
&:hover, :focus { outline : 1px solid var(--input-placeholder-clr); background-color: var(--input-bg-hover); }
|
||||
&::placeholder { color: var(--input-placeholder-clr); }
|
||||
}
|
||||
|
||||
&.description {
|
||||
@@ -88,7 +104,6 @@
|
||||
resize : none;
|
||||
}
|
||||
}
|
||||
|
||||
&.thumbnail, &.themes {
|
||||
label { line-height : 2.0em; }
|
||||
.value {
|
||||
@@ -98,22 +113,30 @@
|
||||
button {
|
||||
.colorButton();
|
||||
padding : 0px 5px;
|
||||
color : white;
|
||||
background-color : black;
|
||||
color : var(--input-text-clr);
|
||||
background-color : var(--input-bg);
|
||||
border : 1px solid #999999;
|
||||
&:hover { background-color : #777777; }
|
||||
}
|
||||
}
|
||||
|
||||
&.tags .tagInput-dropdown {
|
||||
z-index : 400;
|
||||
max-width : 200px;
|
||||
|
||||
.dropdown-options {
|
||||
background-color:var(--input-bg);
|
||||
color: var(--input-text-clr);
|
||||
|
||||
.item:hover {
|
||||
background-color: var(--input-text-clr);
|
||||
color: var(--input-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.language .value {
|
||||
z-index : 300;
|
||||
max-width : 150px;
|
||||
}
|
||||
|
||||
&.themes {
|
||||
.value {
|
||||
overflow : visible;
|
||||
@@ -143,7 +166,6 @@
|
||||
object-fit : contain;
|
||||
background-color : #AAAAAA;
|
||||
}
|
||||
|
||||
.renderers.field .value {
|
||||
label {
|
||||
display : inline-flex;
|
||||
@@ -173,12 +195,16 @@
|
||||
.colorButton(@silver);
|
||||
}
|
||||
}
|
||||
|
||||
.delete.field .value {
|
||||
button {
|
||||
.colorButton(@red);
|
||||
}
|
||||
}
|
||||
|
||||
.tag {
|
||||
background:var(--input-text-clr);
|
||||
color: var(--input-bg);
|
||||
}
|
||||
.authors.field {
|
||||
.tag {
|
||||
font-weight:300;
|
||||
@@ -220,16 +246,12 @@
|
||||
|
||||
}
|
||||
a {
|
||||
color:black;
|
||||
text-underline-offset:0.2em;
|
||||
}
|
||||
}
|
||||
|
||||
.themes.field {
|
||||
& .dropdown-container {
|
||||
position : relative;
|
||||
z-index : 200;
|
||||
background-color : white;
|
||||
}
|
||||
& .dropdown-options { overflow-y : visible; }
|
||||
.disabled {
|
||||
@@ -239,33 +261,37 @@
|
||||
}
|
||||
.item {
|
||||
position : relative;
|
||||
padding : 3px 3px;
|
||||
overflow : visible;
|
||||
background-color : white;
|
||||
border-top : 1px solid rgb(118, 118, 118);
|
||||
color:inherit;
|
||||
background-color : var(--input-bg);
|
||||
border-top : 1px solid #767676;
|
||||
.preview {
|
||||
position : absolute;
|
||||
top : 0;
|
||||
right : 0;
|
||||
z-index : 1;
|
||||
z-index : 10;
|
||||
display : flex;
|
||||
flex-direction : column;
|
||||
width : 200px;
|
||||
overflow : hidden;
|
||||
color : black;
|
||||
background : #CCCCCC;
|
||||
color : var(--input-text-clr);
|
||||
background : var(--input-bg);
|
||||
border-radius : 5px;
|
||||
box-shadow : 0 0 5px black;
|
||||
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 hsl(0,0%,40%);
|
||||
border-bottom : 2px solid #666;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
padding-right: 25px;
|
||||
}
|
||||
|
||||
.texture-container {
|
||||
position : absolute;
|
||||
top : 0;
|
||||
@@ -285,15 +311,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color : white;
|
||||
background-color : @blue;
|
||||
filter : unset;
|
||||
}
|
||||
&:hover > .preview { opacity : 1; }
|
||||
}
|
||||
}
|
||||
|
||||
.field .list {
|
||||
display : flex;
|
||||
flex : 1 0;
|
||||
@@ -328,13 +348,16 @@
|
||||
padding : 0.35em;
|
||||
margin : 2px;
|
||||
font-size : 0.95em;
|
||||
background-color : #DDDDDD;
|
||||
border-radius : 0.5em;
|
||||
|
||||
.icon { #groupedIcon; }
|
||||
|
||||
button {
|
||||
cursor : pointer;
|
||||
|
||||
&:hover {
|
||||
color: @redLight;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -380,28 +403,16 @@
|
||||
}
|
||||
|
||||
.editor.darkMode .metadataEditor {
|
||||
background-color: #555;
|
||||
background-image: @backgroundImageAltDark;
|
||||
color:#ddd;
|
||||
--bg-clr: #555;
|
||||
--bg-image: @backgroundImageAlt;
|
||||
--h1-clr: white;
|
||||
--h2-clr: #aaf;
|
||||
--label-clr: #ddd;
|
||||
--input-bg: #333;
|
||||
--input-text-clr: #eee;
|
||||
--input-placeholder-clr: #aaa;
|
||||
|
||||
h2 {
|
||||
color:#aaf;
|
||||
border-color: #aaf;
|
||||
}
|
||||
|
||||
input, textarea, select {
|
||||
background-color:#333;
|
||||
color:#eee;
|
||||
|
||||
|
||||
&::placeholder {
|
||||
color:#aaa;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-container, .item {
|
||||
background-color: #333;
|
||||
}
|
||||
--bg-image: @backgroundImageAltDark;
|
||||
|
||||
a {
|
||||
color: @blueLight;
|
||||
|
||||
Reference in New Issue
Block a user