Add welcome tab and icon actions

frontend-js/dist/style.css

@@ -69,14 +69,21 @@ body.ol2013 {
   position: relative;
   z-index: 20;
 }
-.ribbon-title { margin-left: auto; font-weight: 700; font-size: 15px; letter-spacing: .2px; }
-.ribbon-logout {
+.ribbon-spacer { margin-left: auto; }
+.ribbon-icon {
+  width: 32px;
+  height: 32px;
   color: #fff;
   text-decoration: none;
-  padding: 6px 10px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   border: 1px solid rgba(255, 255, 255, .35);
+  font-size: 17px;
+  line-height: 1;
 }
-.ribbon-logout:hover {
+.ribbon-icon:hover,
+.ribbon-icon.active {
   background: var(--ol-blue-dark);
 }
 .ribbon-tabs { display: flex; gap: 2px; height: 100%; }
@@ -108,6 +115,9 @@ body.ol2013 {
 }
 .tab:hover { background: var(--ol-blue-dark); color: #fff; }
 .tab.active { background: #fff; color: var(--ol-blue); border-bottom-color: #fff; }
+.tab.app-tab {
+  font-weight: 700;
+}
 .ribbon-menu {
   position: relative;
   height: 100%;
@@ -635,6 +645,43 @@ a.tree-node { display: block; color: inherit; text-decoration: none; }
 }
 .muted { color: var(--ol-muted); }
 
+.start-page {
+  flex: 1 1 auto;
+  display: grid;
+  place-items: center;
+  padding: 28px;
+  background: #fff;
+}
+.welcome-panel {
+  width: min(760px, 100%);
+  border: 1px solid var(--ol-border);
+  background: #fff;
+  padding: 32px;
+  box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
+}
+.welcome-kicker {
+  color: var(--ol-blue-dark);
+  font-weight: 700;
+  margin-bottom: 8px;
+}
+.welcome-panel h1 {
+  margin: 0 0 12px;
+  font-size: 30px;
+  font-weight: 600;
+}
+.welcome-panel p {
+  margin: 0;
+  color: var(--ol-muted);
+  font-size: 15px;
+  line-height: 1.5;
+}
+.welcome-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 22px;
+}
+
 /* Statusleiste */
 .statusbar {
   flex: 0 0 auto;