Knah-Tsaeb/MyShaarli
Knah-Tsaeb/MyShaarli
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

[upd] use flex input and label form

Browse source
This commit is contained in:
Knah Tsaeb 2015-07-17 14:57:40 +02:00
parent e89182bacf
commit 17699d82dc
3 changed files with 95 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
tpl/myShaarli/configure.html
View file

@ -15,11 +15,11 @@
<div id="tab-content1" class="tab-content">
<p>
<label for="title">Page title :</label>
<input type="text" name="title" id="title" size="50" value="{$title}" autofocus>
<input type="text" name="title" id="title" value="{$title}" autofocus>
</p>
<p>
<label for="titleLink">Title link :</label>
<input type="text" name="titleLink" id="titleLink" size="50" value="{$titleLink}">
<input type="text" name="titleLink" id="titleLink" value="{$titleLink}">
</p>
<p>
<label for="contactLink">Contact link in footer: </label>
@ -32,7 +32,7 @@
</p>
<p>
<label for="redirector">Redirector : </label>
<input type="text" name="redirector" id="redirector" size="50" value="{$redirector}">
<input type="text" name="redirector" id="redirector" value="{$redirector}">
(e.g. <i>http://anonym.to/?</i> will mask the HTTP_REFERER)
</p>
<p>
@ -107,7 +107,7 @@
</p>
<p>
<label for="externalThumbshot">External thumbnailer : </label>
<input type="text" name="externalThumbshot" id="externalThumbshot" size="50" value="{$GLOBALS['config']['externalThumbshot']}">
<input type="text" name="externalThumbshot" id="externalThumbshot" value="{$GLOBALS['config']['externalThumbshot']}">
</p>
<p>
<label for="enableFavicon">Enable favicon : </label>

71
tpl/myShaarli/myShaarli.css
View file

@ -980,20 +980,16 @@ a:hover, .linkdescription a:hover, .linktitle a:hover, .linkWallabag a:hover, .l
*/
.tabs input[type=radio] {
left: -9999px;
position: absolute;
top: -9999px;
left: -9999px;
}
.tabs {
float: none;
list-style: none;
position: relative;
padding: 0;
}
.tabs li {
display: block;
position: relative;
}
.tabsLabel {
@ -1001,42 +997,63 @@ a:hover, .linkdescription a:hover, .linktitle a:hover, .linkWallabag a:hover, .l
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0,0,0,0.5);
color: #a2dd42;
cursor: pointer;
display: block;
font-size: 1.1em;
cursor: pointer;
padding: .3em .6em;
position: relative;
top: 3px;
transition: all .2s ease-in-out;
padding: .3em .6em;
}
.tabsLabel:hover {
color: #ffffc9;
.tab-content {
-moz-animation-duration: .5s;
-o-animation-duration: .5s;
-webkit-animation-duration: .5s;
animation-duration: .5s;
border: 1px solid #ccc;
border-radius: .3em;
box-sizing: border-box;
display: none;
left: 0;
padding: 15px;
text-align: left;
width: 100%;
z-index: 2;
}
[id^=tab]:checked + .tabsLabel {
color: #ffffc9;
.tab-content input {
margin: 0 .2em;
}
[id^=tab]:checked ~
.tab-content p {
align-content: center;
align-items: center;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
.tab-content input[type=text] {
align-items: center;
flex: 100 1 auto;
height: 1.1em;
}
.tab-content label {
align-items: center;
flex: 0 1 auto;
height: 1.1em;
}
.tabs li,[id^=tab]:checked ~
[id^=tab-content] {
display: block;
}
.tab-content {
z-index: 2;
display: none;
text-align: left;
width: 100%;
left: 0;
box-sizing: border-box;
-webkit-animation-duration: .5s;
-o-animation-duration: .5s;
-moz-animation-duration: .5s;
animation-duration: .5s;
border: 1px solid #ccc;
border-radius: .3em;
padding: 15px;
.tabsLabel:hover, [id^=tab]:checked + .tabsLabel {
color: #ffffc9;
}
@media print {

77
tpl/myShaarli_Columns/columns.css
View file

@ -990,20 +990,16 @@ a:hover, .linkdescription a:hover, .linktitle a:hover, .linkWallabag a:hover, .l
*/
.tabs input[type=radio] {
left: -9999px;
position: absolute;
top: -9999px;
left: -9999px;
}
.tabs {
float: none;
list-style: none;
position: relative;
padding: 0;
}
.tabs li {
display: block;
position: relative;
}
.tabsLabel {
@ -1011,42 +1007,63 @@ a:hover, .linkdescription a:hover, .linktitle a:hover, .linkWallabag a:hover, .l
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0,0,0,0.5);
color: #a2dd42;
cursor: pointer;
display: block;
font-size: 1.1em;
cursor: pointer;
padding: .3em .6em;
position: relative;
top: 3px;
transition: all .2s ease-in-out;
padding: .3em .6em;
}
.tabsLabel:hover {
color: #ffffc9;
.tab-content {
-moz-animation-duration: .5s;
-o-animation-duration: .5s;
-webkit-animation-duration: .5s;
animation-duration: .5s;
border: 1px solid #ccc;
border-radius: .3em;
box-sizing: border-box;
display: none;
left: 0;
padding: 15px;
text-align: left;
width: 100%;
z-index: 2;
}
[id^=tab]:checked + .tabsLabel {
color: #ffffc9;
.tab-content input {
margin: 0 .2em;
}
[id^=tab]:checked ~
.tab-content p {
align-content: center;
align-items: center;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
.tab-content input[type=text] {
align-items: center;
flex: 100 1 auto;
height: 1.1em;
}
.tab-content label {
align-items: center;
flex: 0 1 auto;
height: 1.1em;
}
.tabs li,[id^=tab]:checked ~
[id^=tab-content] {
display: block;
}
.tab-content {
z-index: 2;
display: none;
text-align: left;
width: 100%;
left: 0;
box-sizing: border-box;
-webkit-animation-duration: .5s;
-o-animation-duration: .5s;
-moz-animation-duration: .5s;
animation-duration: .5s;
border: 1px solid #ccc;
border-radius: .3em;
padding: 15px;
.tabsLabel:hover, [id^=tab]:checked + .tabsLabel {
color: #ffffc9;
}
@media print {
@ -1105,7 +1122,7 @@ a:hover, .linkdescription a:hover, .linktitle a:hover, .linkWallabag a:hover, .l
font-style: italic;
}
}
@media handheld, only screen and (max-width: 1024px), only screen and (max-device-width: 1024px) {
@media handheld, only screen and (max-width: 1024px) , only screen and (max-device-width: 1024px) {
#linklist li, #linklist li.private {
background: #fff none repeat scroll 0 0;
border: 1px solid #cdcdcd;
@ -1119,7 +1136,7 @@ a:hover, .linkdescription a:hover, .linktitle a:hover, .linkWallabag a:hover, .l
}
}
@media handheld, only screen and (max-width: 800px), only screen and (max-device-width: 800px) {
@media handheld, only screen and (max-width: 800px) , only screen and (max-device-width: 800px) {
#linklist li, #linklist li.private {
background: #fff none repeat scroll 0 0;
border: 1px solid #cdcdcd;
@ -1133,7 +1150,7 @@ a:hover, .linkdescription a:hover, .linktitle a:hover, .linkWallabag a:hover, .l
}
}
@media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
@media handheld, only screen and (max-width: 480px) , only screen and (max-device-width: 480px) {
#pageheader a {
border-radius: 5px 5px 5px 5px;
margin: 3px;