mirror of
https://github.com/standardebooks/web.git
synced 2025-07-16 03:16:36 -04:00
Add icons to form elements across site, and remove some CSS classes in favor of :has()
This commit is contained in:
Alex Cabal
parent
40932332cb
commit
00619080a8
12 changed files with 127 additions and 61 deletions
|
|
@ -166,6 +166,11 @@ form[action^="/artworks/"]{
|
|||
margin-top: 1.4rem;
|
||||
}
|
||||
|
||||
|
||||
label.picture::before{
|
||||
bottom: 2.6rem; /* Fix alignment caused by "circa" checkbox */
|
||||
}
|
||||
|
||||
.artworks form.browse-artwork label.search{
|
||||
grid-column: span 3;
|
||||
}
|
||||
|
|
@ -210,10 +215,10 @@ form.create-update-artwork fieldset label:has(input[type="checkbox"]){
|
|||
}
|
||||
|
||||
form.create-update-artwork #pd-proof > fieldset{
|
||||
border-left-color: var(--body-text);
|
||||
border-left-width: 3px;
|
||||
border-left-style: dotted;
|
||||
padding-left: .75rem;
|
||||
border-color: var(--body-text);
|
||||
border-width: 3px;
|
||||
border-style: double;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
form.create-update-artwork fieldset p{
|
||||
|
|
@ -401,6 +406,21 @@ main section.narrow h1 ~ picture{
|
|||
}
|
||||
}
|
||||
|
||||
@media(max-width: 560px){
|
||||
form.create-update-artwork > fieldset:nth-of-type(1),
|
||||
form.create-update-artwork > fieldset:nth-of-type(2),
|
||||
form.create-update-artwork fieldset fieldset:has(input[name="artwork-publication-year"]){
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
form.create-update-artwork fieldset label:has(input[type="url"]),
|
||||
form.create-update-artwork fieldset label:has(input[type="checkbox"]),
|
||||
form.create-update-artwork > fieldset label:has(input[name="artwork-tags"]),
|
||||
form.create-update-artwork > fieldset label:has(input[name="artwork-image"]){
|
||||
grid-column: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 480px){
|
||||
main > section > ol.artwork-list{
|
||||
grid-template-columns: auto;
|
||||
|
|
|
|||
109
www/css/core.css
109
www/css/core.css
|
|
@ -1745,8 +1745,8 @@ label.automation-test{
|
|||
display: none;
|
||||
}
|
||||
|
||||
label.email,
|
||||
label.search{
|
||||
label:has(input[type="email"]),
|
||||
label:has(input[type="search"]){
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
@ -1776,9 +1776,14 @@ input[type="search"]{
|
|||
box-shadow: 1px 1px 0 rgba(255, 255, 255, .5) inset;
|
||||
}
|
||||
|
||||
label.email input,
|
||||
label.search input,
|
||||
label:has(input[type="email"]) input,
|
||||
label:has(input[type="search"]) input,
|
||||
label:has(input[type="url"]) input,
|
||||
label.captcha input,
|
||||
label.year input,
|
||||
label.tags input,
|
||||
label.picture input,
|
||||
label.user input,
|
||||
label:has(input[type="password"]) input{
|
||||
padding-left: 2.5rem;
|
||||
}
|
||||
|
|
@ -1790,12 +1795,17 @@ select{
|
|||
display: block;
|
||||
}
|
||||
|
||||
label:not(:has(input[type="checkbox"])){
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
label span{
|
||||
display: block;
|
||||
}
|
||||
|
||||
label span + span{
|
||||
font-style: italic;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
label span + span code{
|
||||
|
|
@ -1834,15 +1844,15 @@ select[multiple]{
|
|||
padding: 1rem;
|
||||
}
|
||||
|
||||
label.select > span{
|
||||
label:has(select) > span{
|
||||
display: block;
|
||||
}
|
||||
|
||||
label.select > span + span{
|
||||
label:has(select) > span + span{
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
label.select > span + span::after{
|
||||
label:has(select) > span + span::after{
|
||||
display: block;
|
||||
font-style: normal;
|
||||
position: absolute;
|
||||
|
|
@ -1859,25 +1869,35 @@ label.select > span + span::after{
|
|||
z-index: -1;
|
||||
}
|
||||
|
||||
label.search:focus-within::before,
|
||||
label.search:hover::before,
|
||||
label.select:hover > span + span::after{
|
||||
label:has(input[type="search"]):focus-within::before,
|
||||
label:has(input[type="search"]):hover::before,
|
||||
label:has(select):hover > span + span::after{
|
||||
color: var(--input-outline);
|
||||
transition: none;
|
||||
}
|
||||
|
||||
label.select > span + span,
|
||||
label.email,
|
||||
label.search,
|
||||
label:has(select) > span + span,
|
||||
label:has(input[type="email"]),
|
||||
label:has(input[type="search"]),
|
||||
label:has(input[type="url"]),
|
||||
label.captcha,
|
||||
label.year,
|
||||
label.tags,
|
||||
label.picture,
|
||||
label.user,
|
||||
label:has(input[type="password"]){
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
label.email::before,
|
||||
label.search::before,
|
||||
label:has(input[type="email"])::before,
|
||||
label:has(input[type="search"])::before,
|
||||
label.captcha::before,
|
||||
label.year::before,
|
||||
label.tags::before,
|
||||
label.picture::before,
|
||||
label.user::before,
|
||||
label:has(input[type="url"])::before,
|
||||
label:has(input[type="password"])::before{
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
|
@ -1886,7 +1906,6 @@ label:has(input[type="password"])::before{
|
|||
font-family: "Fork Awesome";
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
margin-right: 1rem;
|
||||
color: var(--sub-text);
|
||||
margin-top: -3px; /* Adjust for Crimson Pro line-height */
|
||||
text-shadow: 1px 1px 0 rgba(255, 255, 255, .5);
|
||||
|
|
@ -1895,7 +1914,11 @@ label:has(input[type="password"])::before{
|
|||
cursor: text;
|
||||
}
|
||||
|
||||
label.search::before{
|
||||
label:has(input[type="url"])::before{
|
||||
content: "\f0c1";
|
||||
}
|
||||
|
||||
label:has(input[type="search"])::before{
|
||||
content: "\f002";
|
||||
}
|
||||
|
||||
|
|
@ -1911,6 +1934,22 @@ label.captcha::before{
|
|||
content: "\f256";
|
||||
}
|
||||
|
||||
label.year::before{
|
||||
content: "\f073";
|
||||
}
|
||||
|
||||
label.tags:not(:has(select))::before{
|
||||
content: "\f02c";
|
||||
}
|
||||
|
||||
label.picture::before{
|
||||
content: "\f03e";
|
||||
}
|
||||
|
||||
label.user::before{
|
||||
content: "\f007";
|
||||
}
|
||||
|
||||
nav li.highlighted a,
|
||||
nav a[rel],
|
||||
a.button,
|
||||
|
|
@ -2015,7 +2054,7 @@ form[action="/ebooks"] label.tags select{
|
|||
height: calc(100% - 1.4rem);
|
||||
}
|
||||
|
||||
form[action="/ebooks"] label.search{
|
||||
form[action="/ebooks"] label:has(input[type="search"]){
|
||||
grid-column: 2 / span 4;
|
||||
}
|
||||
|
||||
|
|
@ -2401,8 +2440,8 @@ form[action="/newsletter/subscriptions"]{
|
|||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
form[action*="/polls/"] label.email,
|
||||
form[action="/newsletter/subscriptions"] label.email,
|
||||
form[action*="/polls/"] label:has(input[type="email"]),
|
||||
form[action="/newsletter/subscriptions"] label:has(input[type="email"]),
|
||||
form[action="/newsletter/subscriptions"] label.captcha{
|
||||
grid-column: 1 / span 2;
|
||||
}
|
||||
|
|
@ -2442,6 +2481,14 @@ fieldset p{
|
|||
border-bottom: 1px dashed var(--input-border);
|
||||
}
|
||||
|
||||
fieldset p:has(+ ul){
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
input[type="checkbox"] + span:has(+ span){
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
label.checkbox{
|
||||
display: inline-flex;
|
||||
align-items: flex-start;
|
||||
|
|
@ -2978,7 +3025,7 @@ ul.feed p{
|
|||
grid-row: 1;
|
||||
}
|
||||
|
||||
form[action="/ebooks"] label.search{
|
||||
form[action="/ebooks"] label:has(input[type="search"]){
|
||||
grid-column: 2 / span 3;
|
||||
}
|
||||
|
||||
|
|
@ -3042,7 +3089,7 @@ ul.feed p{
|
|||
height: calc(1rem + 1.4rem + 1rem + 2px); /* Size equal to a select boxes */
|
||||
}
|
||||
|
||||
form[action="/ebooks"] label.search{
|
||||
form[action="/ebooks"] label:has(input[type="search"]){
|
||||
grid-row: 1;
|
||||
grid-column: 2 / span 3;
|
||||
}
|
||||
|
|
@ -3226,7 +3273,7 @@ ul.feed p{
|
|||
grid-column: 1 / span 2;
|
||||
}
|
||||
|
||||
form[action="/ebooks"] label.search{
|
||||
form[action="/ebooks"] label:has(input[type="search"]){
|
||||
grid-row: 1;
|
||||
grid-column: 3 / span 2;
|
||||
}
|
||||
|
|
@ -3373,7 +3420,7 @@ ul.feed p{
|
|||
grid-column: 1 / span 3;
|
||||
}
|
||||
|
||||
form[action="/ebooks"] label.search{
|
||||
form[action="/ebooks"] label:has(input[type="search"]){
|
||||
grid-row: 2;
|
||||
grid-column: 1 / span 3;
|
||||
}
|
||||
|
|
@ -3582,7 +3629,7 @@ ul.feed p{
|
|||
grid-template-columns: 100%;
|
||||
}
|
||||
|
||||
form[action="/ebooks"] label.search,
|
||||
form[action="/ebooks"] label:has(input[type="search"]),
|
||||
form[action="/ebooks"] label.tags,
|
||||
form[action="/ebooks"] label.sort,
|
||||
form[action="/ebooks"] label.view,
|
||||
|
|
@ -3676,12 +3723,12 @@ ul.feed p{
|
|||
article.ebook #more-ebooks img,
|
||||
article.ebook #more-ebooks a:active img,
|
||||
ol.ebooks-list > li a[tabindex]:active,
|
||||
label.select > span + span::after,
|
||||
label.search:focus-within::before,
|
||||
label.search:hover::before,
|
||||
label.select:hover > span + span::after,
|
||||
label.email::before,
|
||||
label.search::before,
|
||||
label:has(select) > span + span::after,
|
||||
label:has(input[type="search"]):focus-within::before,
|
||||
label:has(input[type="search"]):hover::before,
|
||||
label:has(select):hover > span + span::after,
|
||||
label:has(input[type="email"])::before,
|
||||
label:has(input[type="search"])::before,
|
||||
textarea:hover,
|
||||
nav li.highlighted a,
|
||||
nav a[rel],
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@ article.ebook #more-ebooks img:hover{
|
|||
box-shadow: 3px 3px 1px rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
label.select > span + span::after,
|
||||
label:has(select) > span + span::after,
|
||||
label.search::before{
|
||||
text-shadow: 1px 1px 0 #000;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -145,12 +145,11 @@ select{
|
|||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
|
||||
label.select > span{
|
||||
label:has(select) > span{
|
||||
display: block;
|
||||
}
|
||||
|
||||
label.select > span + span{
|
||||
label:has(select) > span + span{
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
|
@ -175,11 +174,11 @@ ol.ebooks-list.list > li .thumbnail-container{
|
|||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
ol.ebooks-list.list ul.tags{
|
||||
ol.ebooks-list.list ul.genres{
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ol.ebooks-list.list ul.tags li{
|
||||
ol.ebooks-list.list ul.genres li{
|
||||
float: left;
|
||||
margin-right: .5rem;
|
||||
margin-top: .5rem;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue