X-Git-Url: https://git-public.kairo.at//?a=blobdiff_plain;f=style%2Flantea.css;h=16bacfcc11edc4774132d558fb0b6279d4a592d3;hb=0713fd6a18112db2b55d7e2e3c4b58658fb4c030;hp=7835b4215e3f715dcd0ea9cc58fcf895aa4e55ec;hpb=28200143f1cf692676da0ca17fa49b7de8d0b62b;p=lantea.git diff --git a/style/lantea.css b/style/lantea.css index 7835b42..16bacfc 100644 --- a/style/lantea.css +++ b/style/lantea.css @@ -183,7 +183,7 @@ h1 { @media screen and (max-width: 330px) { .menuDrawer { - left: calc(-300px - 1ch); /* account for padding */ + transform: translateX(calc(-300px - 1ch)); /* account for padding */ width: 300px; } } @@ -219,11 +219,6 @@ h1 { font-size: .75em; } -.dialogTitle { - margin: 0 0 .5em; - font-weight: bold; -} - .dialogHelp { margin: .5em 0; font-size: .8em; @@ -415,12 +410,19 @@ h1 { color: #FFFFFF; } -/* dialog area - only used for loading error */ +#loginerror { + color: red; + font-weight: bold; + padding: .5em; +} + +/* dialog area - for loading error and welcome messages */ #dialogArea { + position: absolute; top: 20%; right: 0; left: 0; - width: 30ch; + width: 50ch; max-width: 92%; z-index: 10; background-color: rgba(255, 255, 255, .8); @@ -431,10 +433,19 @@ h1 { } #dialogArea.hidden { - top: -100%; + top: -1000%; display: block; } +.dialogTitle { + margin: 0 0 .5em; + font-weight: bold; +} + +.dialogButtonLine { + text-align: center; +} + /* full screen overlay - library, etc. */ .fullScreenOverlay { position: absolute; @@ -442,7 +453,6 @@ h1 { bottom: 1%; right: 1%; left: 1%; - overflow: auto; z-index: 10; background-color: rgba(15, 15, 15, 1.0); border: 0; @@ -472,6 +482,26 @@ h1 { } */ +.fullScreenOverlay p { + margin: 0.5em 0; +} + +.fullScreenOverlay > p:first-child { + margin-top: 0; + /* leave space for close button */ + margin-right: 1.5em; +} + +#libTrackList { + overflow: auto; + /* 2em is top/bottom margin, and one line is shown above and below, with .5em margin each */ + height: calc(100% - 5em); +} + +#libTrackPages { + margin-bottom: 0; +} + /* small screen media adaptations */ @media screen and (max-width: 500px), screen and (max-height: 500px) {