Schublade: Symbol, Name, Untertitel
Der Pfeil rechts klappt in beiden Leisten ein Raster auf statt einer Liste. Symbol gross, Name, Untertitel als dritte Zeile — der stand bisher nur auf den Kacheln. Entschieden gegen Symbol allein: Acht geteilte Glyphen identifizieren nicht, zwei Apps koennen dieselbe Wolke tragen. Und die Schublade macht man auf, weil man sucht — der Streifen ist der Ort fuers Wiedererkennen, dort sind die Symbole abschaltbar. Dazu 1.4 (CORS in Aether) und 1.5 (Cookie-Sitzung fuer InkNote) aus den Ideen gestrichen: Widgets, die Daten aus den eigenen Apps holen, sind nicht mehr gewollt. Der Rest ist neu durchnummeriert.
This commit is contained in:
1 parent
6fe6533667
commit
e27d1cb56b
5 files changed
+144
-48
No files matched your search
@@ -831,6 +831,47 @@ body {
|
||||
.startmenu button:hover { background: var(--p); color: var(--bg); text-shadow: none; }
|
||||
.startmenu hr { border: 0; border-top: 1px solid var(--p-faint); margin: 3px 0; }
|
||||
|
||||
/* Die Schublade — der Zwilling der Schublade in honeybar.js. Symbol groß,
|
||||
Name darunter, Untertitel als dritte Zeile: Wer sie aufmacht, sucht etwas,
|
||||
und acht geteilte Pixelsymbole allein sagen dafür zu wenig. */
|
||||
.appmenu { min-width: 318px; max-width: min(360px, calc(100vw - 12px)); }
|
||||
/* minmax(0, 1fr): Ohne das darf eine lange Beschreibung ihre Spalte
|
||||
auseinanderdrücken, und die Schublade wird breiter als der Schirm. */
|
||||
.drawer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
|
||||
.startmenu .drawer button.d-app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 9px 4px;
|
||||
text-align: center;
|
||||
border: 1px solid transparent;
|
||||
min-width: 0;
|
||||
}
|
||||
.startmenu .drawer .d-name,
|
||||
.startmenu .drawer .d-sub { max-width: 100%; }
|
||||
.startmenu .drawer .d-name { overflow: hidden; text-overflow: ellipsis; }
|
||||
.startmenu .drawer button.d-app:hover {
|
||||
background: none;
|
||||
color: var(--p);
|
||||
border-color: var(--p-dim);
|
||||
text-shadow: var(--glow);
|
||||
}
|
||||
.d-ico { width: 24px; height: 24px; }
|
||||
.d-ico svg { width: 24px; height: 24px; display: block; }
|
||||
.d-name { letter-spacing: 0.08em; }
|
||||
/* Umbrechen darf er, wachsen nicht — sonst stehen die Kacheln unterschiedlich
|
||||
hoch und das Raster franst aus. */
|
||||
.d-sub {
|
||||
font-size: 10px;
|
||||
line-height: 1.25;
|
||||
color: var(--p-dim);
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media (max-width: 620px) {
|
||||
.task-btn { min-width: 0; }
|
||||
.task-date { display: none; }
|
||||
|
||||
Reference in new issue
Block a user