home.css

html {
  height: 100%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  background: rgb(53, 54, 58);
}

body {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  height: 100%;
  margin: 0;
}

nav {
  display: flex;
  justify-content: stretch;
  align-items: stretch;
  border-bottom: 1px solid #222;
  padding: 4px 0;
  background: rgb(53, 54, 58);
  color: rgb(241, 243, 244);
}

ul {
  list-style: none;
  display: flex;
  justify-content: stretch;
  align-items: stretch;
  margin: 0 6px;
  padding: 0;
}

li {
  display: flex;
  justify-content: stretch;
  align-items: stretch;
}

nav button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  background: none;
  border-radius: 50%;
  margin: 0 2px;
  border: 0;
  padding: 0;
  color: inherit;
  transition: background-color .2s;
  outline: none;
}
nav button:hover,
nav button:focus {
  background: #ffffff22;
}
nav button:active {
  background: #ffffff55;
}

#url-bar {
  flex-grow: 1;
  display: flex;
  justify-content: left;
  align-items: center;
  background: rgb(32, 33, 36);
  border-radius: 14px;
  margin: 0 5px 0 0;
  padding: 0 14px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  outline: none;
}
#url-bar:focus {
  background: #111;
}

#url-bar-protocol,
#url-bar-host,
#url-bar-path {
  display: contents;
}
#url-bar-protocol,
#url-bar-path {
  color: rgb(144, 145, 146);
}

webview {
  flex-grow: 1;
  display: flex;
  width: 100%;
  user-select: none;
}