From b5c0bc213cf115ee00a3336ab59abb6138cd0304 Mon Sep 17 00:00:00 2001 From: ulrich Date: Mon, 12 Apr 2021 07:35:21 +0000 Subject: [PATCH] Name Pan auf Startseite --- www/ui/app.css | 95 +++++++++++++++++++++++++++++++++++++++++------ 1 files changed, 82 insertions(+), 13 deletions(-) diff --git a/www/ui/app.css b/www/ui/app.css index 293101a..5799afd 100644 --- a/www/ui/app.css +++ b/www/ui/app.css @@ -3,7 +3,7 @@ padding: 0; height: 100%; /* Anmerkung 2 */ font-size: larger; - font-family: 'Roboto Condensed'; + font-family: 'Roboto'; } body { min-height: 0; /* Anmerkung 1 */ @@ -22,9 +22,12 @@ background-color: black; display: flex; flex-flow: row; - height: 2em; + height: 1.3em; align-items: center; justify-content: space-between; +} +#nav-menu { + margin-left: 0.4rem; } .sued { height: 1.5em; @@ -80,16 +83,46 @@ .app-titel { margin-left: 0.6em; color: white; + font-size: 1.2rem; } .pointer-cursor { cursor: pointer; } +.top-band { + display: flex; + flex-flow: row; + padding: 0.2rem 0 0.2rem 0.2rem; + font-size: smaller; +} + +.breadcrumb-behaelter { + display: flex; + flex-flow: row; + font-size: smaller; +} + +.breadcrumb-link { + padding-right: 0.3rem; + text-decoration: none; + color: #0a67d1; +} + +.breadcrumb-link:hover { + text-decoration: underline; +} + +.bereich-name { + padding-left: 0.4rem; + font-size: smaller; +} + .dialog { position: relative; /* height: 0.1em; */ transition: all 0.3s ease-in; + font-size: smaller; } .dialog-unten { @@ -131,6 +164,8 @@ .entity-formular { display: flex; flex-flow: column; + user-select: none; + font-size: smaller; } .entity-liste-kopf { @@ -147,7 +182,14 @@ .entity-element { margin: 0.4rem; + user-select: none; } + +/* +.entity-element:focus { + outline: none; +} +*/ .entity-element:hover { background-color: #ececec; @@ -155,10 +197,12 @@ .entity-liste { list-style-type: none; + padding: 0; + margin: 0; } .entity-eintrag { - margin-top: 0.8rem; + margin-top: 0.3rem; margin-left: 0; margin-right: 0; margin-bottom: 0; @@ -166,7 +210,7 @@ } .entity-eintrag:hover { - background-color: background; + background-color: #ececec; } .entity-typ-folder:before { @@ -208,6 +252,10 @@ background-color: #ececec; } +.added-to-playlist { + background-color: #cce1fa; +} + .dlg-btn { margin-left: 0.4rem; } @@ -228,8 +276,8 @@ margin-top: 0.2rem; } -.ctrl-btn { - width: 4rem; +.ctrl-btn, .ctrl-btn:focus { + width: 2rem; font-size: medium; display: inline-block; height: 2rem; @@ -242,11 +290,16 @@ text-transform: none; text-decoration: none; white-space: nowrap; - background-color: transparent; + /* background-color: transparent; */ border-radius: 4px; - border: 1px solid #bbb; + border: 0; cursor: pointer; box-sizing: border-box; +} + +.ctrl-btn:hover { + color: white; + background-color: #707070; /* #e1e1e1;*/ /* #707070; */ } .ctrl-select { @@ -260,21 +313,30 @@ } .top-btn-area { + display: flex; + flex-flow: row; /*margin-left: auto;*/ - margin: -0.5em 1em 0 2em; + margin: -0.2em 0.2em 0 2em; } -.top-btn { +.top-btn, .top-btn:focus { margin: 0; - padding: 0 0.2em 0 0.2em; + padding: 0 0.1rem 0 0.1rem; height: 1.3em; line-height: 1em; text-align: center; font-size: large; - background-color: white; - /* width: 1em; */ + color: white; + border-radius: 4px; + border: 0; + /* background-color: white; */ + width: 1.4rem; } +.top-btn:hover { + color: black; + background-color: #e1e1e1; /* #707070; */ +} @media (min-width: 800px) { .zentraler-inhalt { @@ -282,6 +344,13 @@ } } +/* Fonts */ + +@font-face { + font-family: 'Roboto'; + src: url('font/Roboto-Regular.ttf') format('truetype'); +} + /* Font für Piktogramme mit Fontello aus FontAwesome erzeugt */ @font-face { -- Gitblit v1.9.3