BangleApps/css/main.css

.navbar { background-color: #5755d9; padding: 1em 1em 1em 1em; }
.navbar .navbar-brand {
  color: #fff;
  font-weight: bold;
}

.container.apploader-tab, ul.tab.tab-block {
  padding-left: 1rem;
  padding-right: 1rem;
  border-bottom: 0px;
}

.navbar-brand.mr-2 > img {
  margin-left: 0.3rem;
}

.panel-body.columns {
  margin: 1px;
}

.tile.column.col-6.col-sm-12.col-xs-12.app-tile {
  border: solid 1px #dadee4;
  margin: 0;
  min-height: 150px;
  padding-top: 0.5rem;
}

.tab.tab-block .tab-item  {
  border-bottom: solid 1px #dadee4;
}

a.mr-2{
  display: flex;
  align-items: center;
}

.navbar-section > a > div {
   margin-left: 0.75rem;
}

.dropdown-container {
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
}

a.btn.btn-link.dropdown-toggle {
  padding-left: 0.01em;
}

.avatar img {
  border-radius: 5px 5px 5px 5px;
  background: #fff;
}
#toastcontainer {
  position:fixed;
  bottom:8px;left:0px;right:0px;
  z-index: 500;
}
.hero {
  padding-bottom: 1rem;
  padding-top: 1rem;
  text-align:center;
}
.chip {
  cursor: pointer;
}
.filter-nav {
  display: inline-block;
}
.device-nav {
  display: inline-block;
}
.sort-nav {
  float: right;
}

.app-tile {
  position: relative;
  border-bottom: 1px solid #EEE;
  margin-bottom: 4px;
  min-height: 8em;
}

.tile-content { 
  position: relative; 
  overflow-wrap: anywhere; /* stop long text like links pushing the width out too far*/
}
.link-github {
  position:absolute;
  top: 36px;
  left: -24px;
}
.tile-screenshot {
  position:absolute;bottom:1em;right:1em;
  width:4em;height:4em;
  padding:2px;border:1px solid black;
  cursor:pointer;
}

.btn.btn-favourite { color: red; }
.btn.btn-favourite:hover { color: red; }

.icon.icon-emulator { text-indent: 0px; } /*override spectre*/
.icon.icon-emulator {
  content: url("data:image/svg+xml,%3Csvg fill='rgb(87, 85, 217)' xmlns='http://www.w3.org/2000/svg' viewBox='4 4 40 40' width='1em' height='1em'%3E%3Cpath d='M 8.5 5 C 6.0324991 5 4 7.0324991 4 9.5 L 4 30.5 C 4 32.967501 6.0324991 35 8.5 35 L 17 35 L 17 40 L 13.5 40 A 1.50015 1.50015 0 1 0 13.5 43 L 18.253906 43 A 1.50015 1.50015 0 0 0 18.740234 43 L 29.253906 43 A 1.50015 1.50015 0 0 0 29.740234 43 L 34.5 43 A 1.50015 1.50015 0 1 0 34.5 40 L 31 40 L 31 35 L 39.5 35 C 41.967501 35 44 32.967501 44 30.5 L 44 9.5 C 44 7.0324991 41.967501 5 39.5 5 L 8.5 5 z M 8.5 8 L 39.5 8 C 40.346499 8 41 8.6535009 41 9.5 L 41 30.5 C 41 31.346499 40.346499 32 39.5 32 L 29.746094 32 A 1.50015 1.50015 0 0 0 29.259766 32 L 18.746094 32 A 1.50015 1.50015 0 0 0 18.259766 32 L 8.5 32 C 7.6535009 32 7 31.346499 7 30.5 L 7 9.5 C 7 8.6535009 7.6535009 8 8.5 8 z M 17.5 12 C 16.136406 12 15 13.136406 15 14.5 L 15 25.5 C 15 26.863594 16.136406 28 17.5 28 L 30.5 28 C 31.863594 28 33 26.863594 33 25.5 L 33 14.5 C 33 13.136406 31.863594 12 30.5 12 L 17.5 12 z M 18 18 L 30 18 L 30 25 L 18 25 L 18 18 z M 20 35 L 28 35 L 28 40 L 20 40 L 20 35 z'/%3E%3C/svg%3E");
}
.icon.icon-favourite { text-indent: 0px; } /*override spectre*/
.icon.icon-favourite-active { text-indent: 0px; } /*override spectre*/
.icon.icon-favourite::before {
  content: url("data:image/svg+xml,%3Csvg fill='rgb(255, 0, 0)' xmlns='http://www.w3.org/2000/svg' viewBox='0 -3 50 47' width='1.5em' height='1.5em'%3E%3Cpath d='M 16.375 9 C 10.117188 9 5 14.054688 5 20.28125 C 5 33.050781 19.488281 39.738281 24.375 43.78125 L 25 44.3125 L 25.625 43.78125 C 30.511719 39.738281 45 33.050781 45 20.28125 C 45 14.054688 39.882813 9 33.625 9 C 30.148438 9 27.085938 10.613281 25 13.0625 C 22.914063 10.613281 19.851563 9 16.375 9 Z M 16.375 11 C 19.640625 11 22.480469 12.652344 24.15625 15.15625 L 25 16.40625 L 25.84375 15.15625 C 27.519531 12.652344 30.359375 11 33.625 11 C 38.808594 11 43 15.144531 43 20.28125 C 43 31.179688 30.738281 37.289063 25 41.78125 C 19.261719 37.289063 7 31.179688 7 20.28125 C 7 15.144531 11.1875 11 16.375 11 Z'/%3E%3C/svg%3E");
}
.icon.icon-favourite-active::before {
  content: url("data:image/svg+xml,%3Csvg fill='rgb(255, 0, 0)' xmlns='http://www.w3.org/2000/svg' viewBox='0 -3 50 47' width='1.5em' height='1.5em'%3E%3Cpath d='M 25 44.296875 L 24.363281 43.769531 C 23.363281 42.941406 22.019531 42.027344 20.46875 40.96875 C 14.308594 36.765625 5 30.414063 5 20.285156 C 5 14.0625 10.097656 9 16.363281 9 C 19.714844 9 22.851563 10.457031 25 12.957031 C 27.148438 10.457031 30.289063 9 33.636719 9 C 39.902344 9 45 14.0625 45 20.285156 C 45 30.414063 35.691406 36.765625 29.53125 40.96875 C 27.976563 42.027344 26.636719 42.941406 25.636719 43.769531 Z'/%3E%3C/svg%3E");
}
.icon.icon-favourite span {
  font-size: 50%;
  color : #F66;
  position:relative;
  top:-0.8em;
}
.icon.icon-favourite-active span {
  color : white;
}

.icon.icon-interface {text-indent: 0px;} /*override spectre*/
.icon.icon-interface::before {
  position: absolute; left: 50%; top: 70%;
  transform: translate(-50%,-50%);
  content: url("data:image/svg+xml,%3C%3Fxml version='1.0'%3F%3E%3Csvg fill='rgb(87, 85, 217)' xmlns='http://www.w3.org/2000/svg' viewBox='2 2 28 28' width='1.5em' height='1.5em'%3E%3Cpath d='M 6 4 C 4.895 4 4 4.895 4 6 L 4 24 C 4 25.105 4.895 26 6 26 L 24 26 C 25.105 26 26 25.105 26 24 L 26 8 L 22 4 L 20 4 L 20 10 C 20 10.552 19.552 11 19 11 L 10 11 C 9.448 11 9 10.552 9 10 L 9 4 L 6 4 z M 16 4 L 16 9 L 18 9 L 18 4 L 16 4 z M 10 16 L 20 16 C 21.105 16 22 16.895 22 18 L 22 24 L 8 24 L 8 18 C 8 16.895 8.895 16 10 16 z'/%3E%3C/svg%3E");
}

/* https://github.com/picturepan2/spectre/issues/595 */
.chip.tooltip:hover {
  overflow: visible;
  overflow-y: unset;
}

/* Normally tooltips don't wrap, but if you enable it, then they wrap until they are really thin!
Not sure how to get 'normal' wrap behaviour (eg fill up until max-width, then wrap) */
/*.tooltip:hover::after {
  white-space: normal;
  min-width: 160px;
}*/