tm24fan8/firefox-csshacks
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

tag-browser: Some small improvements

Browse Source 
This patch makes tag-browser layout somewhat usable on mobile.
Additionally it adds few banner hints to use Ctrl keys and basic hint to
select a category when empty.
This also makes the Copy-button hidden until some content is shown in
code-block.
This commit is contained in:
MrOtherGuy
2023-02-05 10:26:53 +02:00
parent 8c41908dd8
commit c50e5df3e3
4 changed files with 86 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
html_resources/main.css
View File

@@ -1,6 +1,12 @@
body{background-color: rgb(60,50,70); color: silver; margin: 0px }
#ui{ display: flex; }
#site{ height: 100vh; overflow-y: auto; flex: 1 }
#site{
height: 100vh;
box-sizing: border-box;
overflow-y: auto;
flex: 1;
border-top: 2.2em solid transparent;
}
.categoryList{
padding-block: 1em;
@@ -71,12 +77,50 @@ pre:empty{ display: none }
.target:hover{ background-color: rgb(80,80,90) }
.target.selected{ background-color: rgb(80,80,120) }
.target > a:hover{ filter: drop-shadow(0 0 3px fuchsia) }
/*#targets{ display: grid; grid-template-columns: 1fr 1fr 1fr }*/
#targets{
display: flex;
flex-direction: column;
flex-wrap: wrap;
max-height: calc(var(--grid-rows) * 2.4rem);
align-content: space-between;
margin-bottom: 0.2em;
}
.banner{
padding: 0.5em 1em;
margin-bottom: 0.2em;
border-bottom: 1px solid black;
border-left: 1px solid black;
background: rgb(40,37,43);
position: fixed;
top: 0;
right: 0;
z-index: -1;
display: inline-block;
}
kbd{
border-radius: 3px;
padding: 2px 3px 1px;
border: 1px solid rgb(40,40,40);
box-shadow: inset 0 0 2px currentColor;
}
.banner > .keyinfo,
#targets[style] + .banner > .placeholder{
display: none;
}
#targets[style] + .banner > .keyinfo{
display: block;
}
.hint{
text-align: end
}
.hint::before{
content: "Hint: ";
font-style: italic;
}
pre{
@@ -88,7 +132,7 @@ pre{
}
pre > div{
background-color: rgb(40,37,43);;
background-color: rgb(40,37,43);
padding: 1em 0.5em;
border-inline-start: 1px solid rgb(90,90,90)
}
@@ -108,4 +152,25 @@ pre > div{
background-position: left;
animation: loadingBar 1500ms linear
}
.placeholder-text{ animation: showDelayed 2s steps(1) }
.placeholder-text{ animation: showDelayed 2s steps(1) }
/* Dirty hack for mobile but at least it's something */
@media screen and (max-width: 700px ){
#secondaryCategories{
display: none;
}
.categoryList{
opacity: 1;
margin-inline-end: -13ch;
}
.banner{
z-index: 1;
}
#site{
background-color: rgb(60,50,70);
position: relative;
}
#targets{
position: relative;
}
}