Merge pull request #19 from brettinternet/input-font-size

make input font size 16pt which has better compatibility with safari
This commit is contained in:
Jon Schoning 2020-10-03 21:45:07 -05:00 committed by GitHub
commit cdbb612fd6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 151 additions and 108 deletions

View file

@ -153,20 +153,20 @@ bmark b' =
div [ class_ "edit_bookmark_form pa2 pt0 bg-white" ] $
[ form [ onSubmit (Just <<< BEditSubmit) ]
[ div_ [ text "url" ]
, input [ type_ InputUrl , class_ "url w-100 mb2 pt1 f7 edit_form_input" , required true , name "url"
, input [ type_ InputUrl , class_ "url w-100 mb2 pt1 edit_form_input" , required true , name "url"
, value (edit_bm.url) , onValueChange (editField Eurl) ]
, div_ [ text "title" ]
, div [class_ "flex"]
[input [ type_ InputText , class_ "title w-100 mb2 pt1 f7 edit_form_input" , name "title"
[input [ type_ InputText , class_ "title w-100 mb2 pt1 edit_form_input" , name "title"
, value (edit_bm.title) , onValueChange (editField Etitle) ]
, button [ disabled s.loading, type_ ButtonButton, onClick \_ -> Just BLookupTitle, class_ ("ml1 pa1 mb2 dark-gray ba b--moon-gray bg-near-white pointer rdim f7 " <> guard s.loading "bg-light-silver") ] [ text "fetch" ]
]
, div_ [ text "description" ]
, textarea [ class_ "description w-100 mb1 pt1 f7 edit_form_input" , name "description", rows 5
, textarea [ class_ "description w-100 mb1 pt1 edit_form_input" , name "description", rows 5
, value (edit_bm.description) , onValueChange (editField Edescription) ]
, div [ id_ "tags_input_box"]
[ div_ [ text "tags" ]
, input [ id_ (tagid edit_bm), type_ InputText , class_ "tags w-100 mb1 pt1 f7 edit_form_input" , name "tags"
, input [ id_ (tagid edit_bm), type_ InputText , class_ "tags w-100 mb1 pt1 edit_form_input" , name "tags"
, autocomplete false, attr "autocapitalize" "off"
, value (edit_bm.tags) , onValueChange (editField Etags) ]
]

View file

@ -126,12 +126,12 @@ nnote st' =
renderNote_edit _ =
form [ onSubmit (Just <<< NEditSubmit) ]
[ p [ class_ "mt2 mb1"] [ text "title:" ]
, input [ type_ InputText , class_ "title w-100 mb1 pt1 f7 edit_form_input" , name "title"
, input [ type_ InputText , class_ "title w-100 mb1 pt1 edit_form_input" , name "title"
, value (edit_note.title) , onValueChange (editField Etitle), autofocus (null edit_note.title)
]
, br_
, p [ class_ "mt2 mb1"] [ text "description:" ]
, textarea [ id_ (notetextid edit_note), class_ "description w-100 mb1 pt1 f7 edit_form_input" , name "text", rows 30
, textarea [ id_ (notetextid edit_note), class_ "description w-100 mb1 pt1 edit_form_input" , name "text", rows 30
, value (edit_note.text) , onValueChange (editField Etext)
]
, div [ class_ "edit_form_checkboxes mb3"]

View file

@ -8,23 +8,31 @@ body {
}
button {
background:none;
border:none;
padding:0;
cursor:pointer;
background: none;
border: none;
padding: 0;
cursor: pointer;
}
button:focus {
outline: none;
}
[hidden] {
display: none !important
display: none !important;
}
input::placeholder {
color: lightgray
color: lightgray;
}
input[type="text"],
input[type="url"],
input[type="password"],
textarea {
font-size: 16px;
}
.queryInput {
width: 128px;
padding: 0 22px 0 2px;
@ -34,9 +42,10 @@ input::placeholder {
border-color: gray;
height: 22px;
line-height: 22px;
transition: width .1s ease-in-out
transition: width 0.1s ease-in-out;
}
.queryInput.search-inactive {
}
.queryInput.search-inactive {}
.queryInput:focus {
width: 175px;
}
@ -44,15 +53,15 @@ input::placeholder {
.queryInput.search-active {
border-color: #990;
border-width: 2px;
background-color: #FF9;
background-color: #ff9;
width: 175px;
}
.queryIcon {
position: absolute;
right: 0;
top:1px;
cursor:pointer;
width:20px;
top: 1px;
cursor: pointer;
width: 20px;
height: 20px;
fill: currentColor;
}
@ -60,100 +69,116 @@ label {
cursor: pointer;
}
.close-x-wrap {
float: left;
width: 17px;
height: 17px;
top: 2px;
position: relative;
right: 2px;
float: left;
width: 17px;
height: 17px;
top: 2px;
position: relative;
right: 2px;
}
.close-x {
stroke: gray;
fill: transparent;
stroke-linecap: round;
stroke-width: 3;
stroke: gray;
fill: transparent;
stroke-linecap: round;
stroke-width: 3;
}
.query-info-icon {
position: absolute;
top: 0px;
right: -18px;
text-decoration: none;
font-size: 12px;
padding: 0 8px 8px 0;
position: absolute;
top: 0px;
right: -18px;
text-decoration: none;
font-size: 12px;
padding: 0 8px 8px 0;
}
.star {
margin-left:-20px;
font-size:1.2em;
position:relative;
top:-2px;
margin-left: -20px;
font-size: 1.2em;
position: relative;
top: -2px;
}
.star button {
transition: color .1s;
.star button {
transition: color 0.1s;
}
.star.selected button {
color:#22a;
.star.selected button {
color: #22a;
}
.edit_links button {
transition: color .1s ease-in;
transition: color 0.1s ease-in;
}
.tag {
color:#a51;
line-height:190%;
color: #a51;
line-height: 190%;
display: inline-block;
}
.tag-include {
color:rgb(221, 221, 221);
line-height:190%;
color: rgb(221, 221, 221);
line-height: 190%;
display: inline-block;
}
.tag-exclude {
color:rgb(255, 170, 170);
line-height:190%;
display: inline-block;
color: rgb(255, 170, 170);
line-height: 190%;
display: inline-block;
}
.private { background:#ddd;border:1px solid #d1d1d1; }
.unread { color:#b41 }
.mark_read {color: #a81;}
.flash { color:green;background:#efe }
.private {
background: #ddd;
border: 1px solid #d1d1d1;
}
.unread {
color: #b41;
}
.mark_read {
color: #a81;
}
.flash {
color: green;
background: #efe;
}
.top_menu {
margin-top:6px;
.top_menu {
margin-top: 6px;
}
.top_menu a {
color: blue;
}
.bookmarklet {
padding:1px 2px 0px 2px;
.bookmarklet {
padding: 1px 2px 0px 2px;
}
.alert {
background:#ced;
border:1px solid #acc;
.alert {
background: #ced;
border: 1px solid #acc;
}
.edit_bookmark_form {color:#888;}
.edit_bookmark_form input {border:1px solid #ddd;}
.edit_bookmark_form textarea {border:1px solid #ddd;}
.edit_bookmark_form {
color: #888;
}
.edit_bookmark_form input {
border: 1px solid #ddd;
}
.edit_bookmark_form textarea {
border: 1px solid #ddd;
}
.nav-active {
background:#ff8;
color:blue;
background: #ff8;
color: blue;
}
/* mobile device */
@media only screen and (max-width : 750px) {
body {
-webkit-text-size-adjust: none;
@media only screen and (max-width: 750px) {
body {
-webkit-text-size-adjust: none;
}
.display {
float: none
float: none;
}
}
@media only screen and (max-width : 500px) {
@media only screen and (max-width: 500px) {
.filters {
clear: both;
position: relative;
@ -162,44 +187,44 @@ label {
}
.rdim {
opacity: .8;
transition: all .15s ease-in;
opacity: 0.8;
transition: all 0.15s ease-in;
}
.rdim:hover,
.rdim:focus {
opacity: 1;
transition: all .15s ease-in;
opacity: 1;
transition: all 0.15s ease-in;
}
.display .description > div p,
.display .description > div pre
{
margin-top: 9px;
margin-bottom: 9px;
.display .description > div pre {
margin-top: 9px;
margin-bottom: 9px;
}
.display .description > div > *:first-child {
margin-top: 2px;
margin-top: 2px;
}
.display .description > div > *:last-child {
margin-bottom: 2px;
margin-bottom: 2px;
}
.display .description > div > ol li p {
margin-top: 0;
margin-bottom: 0;
margin-top: 0;
margin-bottom: 0;
}
.display .description > div > ul li p {
margin-top: 0;
margin-bottom: 0;
margin-top: 0;
margin-bottom: 0;
}
.display .description > div ol {
padding-left: 23px;
padding-left: 23px;
}
.display .description > div ul {
padding-left: 23px;
padding-left: 23px;
}
code, pre {
font-size:13px;
code,
pre {
font-size: 13px;
}
#content:not([view-rendered]) .view-delay {
display: none !important
display: none !important;
}

View file

@ -1,34 +1,52 @@
html {
box-sizing: border-box;
box-sizing: border-box;
}
[hidden] {
display: none !important
display: none !important;
}
button {
background:none;
border:none;
padding:0;
cursor:pointer;
background: none;
border: none;
padding: 0;
cursor: pointer;
}
button:focus {
outline: none;
}
.alert {
background:#ced;
border:1px solid #acc;
input[type="text"],
input[type="url"],
textarea {
font-size: 16px;
}
form label {
.alert {
background: #ced;
border: 1px solid #acc;
}
form label {
margin: 0;
vertical-align: middle;
display: table-cell;
padding: 2px 0;
}
li { list-style-type: none; margin: 0; padding: 0; display: block;}
li {
list-style-type: none;
margin: 0;
padding: 0;
display: block;
}
.when { color:#999}
.unread { color:#b41 }
a.unread { color:#b41 }
a.bookmark_title { font-size:120%;}
.when {
color: #999;
}
.unread {
color: #b41;
}
a.unread {
color: #b41;
}
a.bookmark_title {
font-size: 120%;
}
label {
cursor: pointer;

File diff suppressed because one or more lines are too long

Binary file not shown.

File diff suppressed because one or more lines are too long

Binary file not shown.