10 files changed, 722 insertions, 0 deletions
diff --git a/app/webpack/src/stylesheets/about.scss b/app/webpack/src/stylesheets/about.scss
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/app/webpack/src/stylesheets/about.scss
diff --git a/app/webpack/src/stylesheets/application.scss b/app/webpack/src/stylesheets/application.scss
new file mode 100644
index 0000000..ae13a6c
--- /dev/null
+++ b/app/webpack/src/stylesheets/application.scss
@@ -0,0 +1,24 @@
+@import "about";
+@import "arches";
+@import "categories";
+@import "index";
+@import "keywords";
+@import "misc";
+@import "packages";
+@import "sprockets-octicons";
+@import "useflags";
+
+@import "../vendor/stylesheets/jquery.typeahead.min";
+
+body {
+  min-height: 100vh;
+  position: relative;
+  margin: 0;
+  padding-bottom: 215px;
+}
+footer {
+  position: absolute;
+  margin-top: 40px;
+  bottom: 0;
+  width: 100%;
+}
+\ No newline at end of file
diff --git a/app/webpack/src/stylesheets/arches.scss b/app/webpack/src/stylesheets/arches.scss
new file mode 100644
index 0000000..f0daf89
--- /dev/null
+++ b/app/webpack/src/stylesheets/arches.scss
@@ -0,0 +1,3 @@
+// Place all the styles related to the Arches controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: http://sass-lang.com/
diff --git a/app/webpack/src/stylesheets/categories.scss b/app/webpack/src/stylesheets/categories.scss
new file mode 100644
index 0000000..8b13789
--- /dev/null
+++ b/app/webpack/src/stylesheets/categories.scss
@@ -0,0 +1 @@
+
diff --git a/app/webpack/src/stylesheets/index.scss b/app/webpack/src/stylesheets/index.scss
new file mode 100644
index 0000000..00db929
--- /dev/null
+++ b/app/webpack/src/stylesheets/index.scss
@@ -0,0 +1,9 @@
+.site-welcome {
+  font-size: 2.5em;
+  text-align: center;
+  margin-bottom: 1em;
+
+  @media screen and (max-width: 767px) {
+    font-size: 1.75em;
+  }
+}
diff --git a/app/webpack/src/stylesheets/keywords.scss b/app/webpack/src/stylesheets/keywords.scss
new file mode 100644
index 0000000..e860d2f
--- /dev/null
+++ b/app/webpack/src/stylesheets/keywords.scss
@@ -0,0 +1,24 @@
+.kk-keyword-stable {
+  background-color: #81C784;
+  color: #2E7D32;
+}
+
+.kk-keyword-testing {
+  background-color: #FFF176;
+  color: #a08700;
+}
+
+.kk-keyword-unavailable {
+  background-color: #d5d5d5;
+  color: #666;
+}
+
+.kk-keyword-masked {
+  background-color: #EF9A9A;
+  color: #B71C1C;
+}
+
+.kk-keyword-unknown {
+  background-color: #fafafa;
+  color: #333;
+}
diff --git a/app/webpack/src/stylesheets/misc.scss b/app/webpack/src/stylesheets/misc.scss
new file mode 100644
index 0000000..f051415
--- /dev/null
+++ b/app/webpack/src/stylesheets/misc.scss
@@ -0,0 +1,179 @@
+h1 {
+  a.kk-feed-icon {
+    font-size: 65%;
+  }
+}
+
+.label {
+  cursor: default;
+}
+
+.kk-cell-sep-right {
+  border-right-width: 3px !important;
+}
+
+.panel {
+  table.table {
+    tr {
+      th:first-child,
+      td:first-child {
+        padding-left: 1em;
+      }
+    }
+  }
+}
+
+.octicon {
+  display: inline-block;
+  vertical-align: middle;
+  fill: currentColor;
+}
+
+.black {
+  color: #333;
+}
+
+td .alert {
+  margin-bottom: 0;
+}
+
+.kk-nobreak-cell {
+  white-space: nowrap;
+}
+
+.kk-panel-content-sorry {
+  background-color: #f0f0f0;
+  text-align: center;
+  padding-top: 2em;
+  padding-bottom: 2em;
+  color: #666;
+}
+
+.kk-3col-list {
+  columns: 3;
+  -webkit-columns: 3;
+  -moz-columns: 3;
+}
+
+.kk-4col-list {
+  columns: 4;
+  -webkit-columns: 4;
+  -moz-columns: 4;
+}
+
+.kk-5col-list {
+  columns: 5;
+  -webkit-columns: 5;
+  -moz-columns: 5;
+}
+
+.kk-6col-list {
+  columns: 6;
+  -webkit-columns: 6;
+  -moz-columns: 6;
+}
+
+.kk-col-list {
+  @media screen and (max-width: 767px) {
+    columns: 1;
+    -webkit-columns: 1;
+    -moz-columns: 1;
+  }
+
+  padding: 0;
+
+  li {
+    list-style-type: none;
+
+    a:link,
+    a:hover,
+    a:active,
+    a:visited {
+      display: block;
+      padding: .2em;
+    }
+
+    a:hover {
+      background-color: #eee;
+      border-radius: 2px;
+      text-decoration: none;
+    }
+  }
+}
+
+.kk-col-list-header {
+  margin-top: 1em;
+
+  .kk-group-header {
+    display: block;
+    border-bottom: 1px solid #eee;
+  }
+}
+
+.kk-col-list .kk-col-list-header:first-of-type {
+  margin-top: 0;
+}
+
+.kk-group-header {
+  color: #8a8a8a;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  font-size: 90%;
+}
+
+.kk-suggest-cat {
+  color: #8a8a8a;
+}
+
+.kk-suggest-pkg {
+}
+
+.kk-suggest-detail {
+  float: right;
+  color: #8a8a8a;
+  font-size: 90%;
+
+  @media screen and (max-width: 767px) {
+    display: block;
+    float: none;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+body.kk .typeahead-list > li > a {
+  // Firefox workaround again
+  white-space: normal;
+}
+
+.kk-site-notice {
+  font-size: 90%;
+  padding-top: .5em;
+  padding-bottom: .5em;
+  text-align: center;
+}
+
+a.kk-box-meta-link:link,
+a.kk-box-meta-link:active,
+a.kk-box-meta-link:visited {
+  color: #aaa;
+}
+
+a.kk-box-meta-link:hover {
+  color: #555;
+}
+
+.kk-header-container {
+  background: #ebebeb;
+  background: -moz-linear-gradient(top, #fafafa 0%, #ebebeb 100%);
+  background: -webkit-linear-gradient(top, #fafafa 0%, #ebebeb 100%);
+  background: linear-gradient(to bottom, #fafafa 0%, #ebebeb 100%);
+  margin-top: -20px;
+  padding-top: 10px;
+  padding-bottom: 20px;
+  margin-bottom: 20px;
+
+  .breadcrumb {
+    background: none;
+  }
+}
diff --git a/app/webpack/src/stylesheets/packages.scss b/app/webpack/src/stylesheets/packages.scss
new file mode 100644
index 0000000..777adb7
--- /dev/null
+++ b/app/webpack/src/stylesheets/packages.scss
@@ -0,0 +1,245 @@
+.kk-keyword-header {
+  width: 5em;
+  font-size: 85%;
+  white-space: normal !important;
+}
+
+@media screen and (max-width: 767px) {
+  .kk-keyword-header {
+  min-width: 5em;
+  max-width: 5em;
+  }
+}
+
+.kk-version {
+  // Only set on small screens due to:
+  // https://bugzilla.mozilla.org/show_bug.cgi?id=488725
+  @media screen and (max-width: 767px) {
+    white-space: nowrap;
+  }
+}
+
+.kk-slot {
+  color: #888;
+}
+
+.kk-keyword {
+  text-align: center;
+  white-space: normal !important;
+}
+
+.kk-search-result-header {
+  margin-top: 0;
+}
+
+.kk-metadata-key {
+  font-weight: bold;
+}
+
+.kk-package-title {
+  margin-bottom: 0;
+
+  .kk-package-icon {
+    float: left;
+  }
+
+  .kk-package-name {
+    margin-left: 1.3em;
+    word-wrap: break-word;
+  }
+
+  .kk-package-cat {
+    padding-left: 2.05em;
+  }
+}
+
+.kk-package-maindesc {
+  margin-top: 1.75em;
+  margin-bottom: 0;
+}
+
+.kk-package-homepage {
+  margin: 0;
+  margin-top: 1em;
+  font-size: 125%;
+}
+
+.kk-byline {
+  padding-left: 1em;
+  font-style: italic;
+}
+
+.kk-commit {
+  font-family: monospace;
+}
+
+.kk-changelog-diffstat {
+  margin-top: 1em;
+  margin-bottom: 0;
+  border: 1px solid #ddd;
+  border-top: none;
+}
+
+.kk-changelog-diffstat {
+  a:link, a:visited, a:active {
+    color: #333;
+  }
+}
+
+.kk-changelog-diffstat-icon {
+  width: 20px;
+}
+
+.kk-octicon-spacer {
+  padding-left: 18px;
+}
+
+.kk-useflag a:link,
+.kk-useflag a:visited {
+  padding: 0.2em;
+  padding-top: 0.1em;
+  padding-bottom: 0.1em;
+  background-color: #f0f0f0;
+  border: 1px solid #eaeaea;
+  border-radius: 2px;
+  color: #333;
+  font-family: monospace;
+  font-size: 90%;
+}
+
+.kk-useflag a:hover {
+  background-color: #e9e9e9;
+  color: #305d8c;
+}
+
+.kk-useflag a:hover {
+  text-decoration: none;
+}
+
+.kk-useflag {
+  list-style-type: none;
+  margin-bottom: 0.4em;
+  margin-right: 0.2em;
+}
+
+.kk-useflag-container {
+  padding: 0;
+  margin-top: .4em;
+
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.kk-useflag-container-many {
+  justify-content: space-between;
+}
+
+.kk-useflag-container-few {
+  justify-content: flex-start;
+}
+
+.kk-useflag-group {
+  color: #8a8a8a;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  font-size: 90%;
+}
+
+.kk-versions-table {
+  .kk-restrict-label,
+  .kk-properties-label {
+    float: right;
+
+    @media screen and (max-width: 767px) {
+      float: none;
+    }
+  }
+}
+
+.kk-version-card > p:last-of-type {
+  margin-bottom: 0;
+}
+
+@media screen and (max-width: 767px) {
+  .kk-version-card > p:first-of-type {
+    margin-top: .5em;
+  }
+}
+
+.kk-mask {
+  background-color: #f2dede;
+}
+
+.kk-mask-details {
+  font-size: 90%;
+
+  .row {
+    margin-bottom: 1em;
+  }
+
+  margin-top: 1em;
+  margin-bottom: -1em;
+}
+
+.kk-mask-reason {
+  a:link,
+  a:visited {
+    color: inherit;
+    text-decoration: underline;
+  }
+}
+
+.kk-mask-atoms {
+  max-height: 3.6em;
+  overflow-x: scroll;
+  line-height: 1.2em;
+}
+
+.popover .kk-keyword-legend {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  width: 240px;
+}
+
+.kk-package-detailed {
+  h4 {
+    margin-bottom: 5px;
+  }
+}
+
+.kk-package-detailed-toolbox {
+  float:right;
+  margin-top: -1.75em;
+}
+
+.kk-inline-changelog-entry {
+  font-size: 90%;
+  border-radius: 2px;
+  border: 1px solid #ddd;
+  background-color: #f5f5f5;
+  margin-top: 5px;
+
+  a:link,
+  a:active,
+  a:visited,
+  a:hover {
+    display: block;
+    padding: 5px;
+    color: #333;
+  }
+
+  .kk-commit-message {
+    margin-left: .5em;
+  }
+
+  .kk-commit {
+    color: #999;
+  }
+}
+
+a.kk-ebuild-link {
+  &:link,
+  &:visited {
+    color: #333;
+  }
+}
diff --git a/app/webpack/src/stylesheets/sprockets-octicons.scss b/app/webpack/src/stylesheets/sprockets-octicons.scss
new file mode 100755
index 0000000..7b975de
--- /dev/null
+++ b/app/webpack/src/stylesheets/sprockets-octicons.scss
@@ -0,0 +1,217 @@
+@font-face {
+  font-family: 'octicons';
+  src: font-url('../vendor/fonts/octicons.eot?#iefix') format('embedded-opentype'),
+       font-url('../vendor/fonts/octicons.woff') format('woff'),
+       font-url('../vendor/fonts/octicons.ttf') format('truetype'),
+       font-url('../vendor/fonts/octicons.svg#octicons') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+// .octicon is optimized for 16px.
+// .mega-octicon is optimized for 32px but can be used larger.
+.octicon, .mega-octicon {
+  font: normal normal normal 16px/1 octicons;
+  display: inline-block;
+  text-decoration: none;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.mega-octicon { font-size: 32px; }
+
+.octicon-alert:before { content: '\f02d'} /*  */
+.octicon-arrow-down:before { content: '\f03f'} /*  */
+.octicon-arrow-left:before { content: '\f040'} /*  */
+.octicon-arrow-right:before { content: '\f03e'} /*  */
+.octicon-arrow-small-down:before { content: '\f0a0'} /*  */
+.octicon-arrow-small-left:before { content: '\f0a1'} /*  */
+.octicon-arrow-small-right:before { content: '\f071'} /*  */
+.octicon-arrow-small-up:before { content: '\f09f'} /*  */
+.octicon-arrow-up:before { content: '\f03d'} /*  */
+.octicon-microscope:before,
+.octicon-beaker:before { content: '\f0dd'} /*  */
+.octicon-bell:before { content: '\f0de'} /*  */
+.octicon-book:before { content: '\f007'} /*  */
+.octicon-bookmark:before { content: '\f07b'} /*  */
+.octicon-briefcase:before { content: '\f0d3'} /*  */
+.octicon-broadcast:before { content: '\f048'} /*  */
+.octicon-browser:before { content: '\f0c5'} /*  */
+.octicon-bug:before { content: '\f091'} /*  */
+.octicon-calendar:before { content: '\f068'} /*  */
+.octicon-check:before { content: '\f03a'} /*  */
+.octicon-checklist:before { content: '\f076'} /*  */
+.octicon-chevron-down:before { content: '\f0a3'} /*  */
+.octicon-chevron-left:before { content: '\f0a4'} /*  */
+.octicon-chevron-right:before { content: '\f078'} /*  */
+.octicon-chevron-up:before { content: '\f0a2'} /*  */
+.octicon-circle-slash:before { content: '\f084'} /*  */
+.octicon-circuit-board:before { content: '\f0d6'} /*  */
+.octicon-clippy:before { content: '\f035'} /*  */
+.octicon-clock:before { content: '\f046'} /*  */
+.octicon-cloud-download:before { content: '\f00b'} /*  */
+.octicon-cloud-upload:before { content: '\f00c'} /*  */
+.octicon-code:before { content: '\f05f'} /*  */
+.octicon-color-mode:before { content: '\f065'} /*  */
+.octicon-comment-add:before,
+.octicon-comment:before { content: '\f02b'} /*  */
+.octicon-comment-discussion:before { content: '\f04f'} /*  */
+.octicon-credit-card:before { content: '\f045'} /*  */
+.octicon-dash:before { content: '\f0ca'} /*  */
+.octicon-dashboard:before { content: '\f07d'} /*  */
+.octicon-database:before { content: '\f096'} /*  */
+.octicon-clone:before,
+.octicon-desktop-download:before { content: '\f0dc'} /*  */
+.octicon-device-camera:before { content: '\f056'} /*  */
+.octicon-device-camera-video:before { content: '\f057'} /*  */
+.octicon-device-desktop:before { content: '\f27c'} /*  */
+.octicon-device-mobile:before { content: '\f038'} /*  */
+.octicon-diff:before { content: '\f04d'} /*  */
+.octicon-diff-added:before { content: '\f06b'} /*  */
+.octicon-diff-ignored:before { content: '\f099'} /*  */
+.octicon-diff-modified:before { content: '\f06d'} /*  */
+.octicon-diff-removed:before { content: '\f06c'} /*  */
+.octicon-diff-renamed:before { content: '\f06e'} /*  */
+.octicon-ellipsis:before { content: '\f09a'} /*  */
+.octicon-eye-unwatch:before,
+.octicon-eye-watch:before,
+.octicon-eye:before { content: '\f04e'} /*  */
+.octicon-file-binary:before { content: '\f094'} /*  */
+.octicon-file-code:before { content: '\f010'} /*  */
+.octicon-file-directory:before { content: '\f016'} /*  */
+.octicon-file-media:before { content: '\f012'} /*  */
+.octicon-file-pdf:before { content: '\f014'} /*  */
+.octicon-file-submodule:before { content: '\f017'} /*  */
+.octicon-file-symlink-directory:before { content: '\f0b1'} /*  */
+.octicon-file-symlink-file:before { content: '\f0b0'} /*  */
+.octicon-file-text:before { content: '\f011'} /*  */
+.octicon-file-zip:before { content: '\f013'} /*  */
+.octicon-flame:before { content: '\f0d2'} /*  */
+.octicon-fold:before { content: '\f0cc'} /*  */
+.octicon-gear:before { content: '\f02f'} /*  */
+.octicon-gift:before { content: '\f042'} /*  */
+.octicon-gist:before { content: '\f00e'} /*  */
+.octicon-gist-secret:before { content: '\f08c'} /*  */
+.octicon-git-branch-create:before,
+.octicon-git-branch-delete:before,
+.octicon-git-branch:before { content: '\f020'} /*  */
+.octicon-git-commit:before { content: '\f01f'} /*  */
+.octicon-git-compare:before { content: '\f0ac'} /*  */
+.octicon-git-merge:before { content: '\f023'} /*  */
+.octicon-git-pull-request-abandoned:before,
+.octicon-git-pull-request:before { content: '\f009'} /*  */
+.octicon-globe:before { content: '\f0b6'} /*  */
+.octicon-graph:before { content: '\f043'} /*  */
+.octicon-heart:before { content: '\2665'} /* ♥ */
+.octicon-history:before { content: '\f07e'} /*  */
+.octicon-home:before { content: '\f08d'} /*  */
+.octicon-horizontal-rule:before { content: '\f070'} /*  */
+.octicon-hubot:before { content: '\f09d'} /*  */
+.octicon-inbox:before { content: '\f0cf'} /*  */
+.octicon-info:before { content: '\f059'} /*  */
+.octicon-issue-closed:before { content: '\f028'} /*  */
+.octicon-issue-opened:before { content: '\f026'} /*  */
+.octicon-issue-reopened:before { content: '\f027'} /*  */
+.octicon-jersey:before { content: '\f019'} /*  */
+.octicon-key:before { content: '\f049'} /*  */
+.octicon-keyboard:before { content: '\f00d'} /*  */
+.octicon-law:before { content: '\f0d8'} /*  */
+.octicon-light-bulb:before { content: '\f000'} /*  */
+.octicon-link:before { content: '\f05c'} /*  */
+.octicon-link-external:before { content: '\f07f'} /*  */
+.octicon-list-ordered:before { content: '\f062'} /*  */
+.octicon-list-unordered:before { content: '\f061'} /*  */
+.octicon-location:before { content: '\f060'} /*  */
+.octicon-gist-private:before,
+.octicon-mirror-private:before,
+.octicon-git-fork-private:before,
+.octicon-lock:before { content: '\f06a'} /*  */
+.octicon-logo-github:before { content: '\f092'} /*  */
+.octicon-mail:before { content: '\f03b'} /*  */
+.octicon-mail-read:before { content: '\f03c'} /*  */
+.octicon-mail-reply:before { content: '\f051'} /*  */
+.octicon-mark-github:before { content: '\f00a'} /*  */
+.octicon-markdown:before { content: '\f0c9'} /*  */
+.octicon-megaphone:before { content: '\f077'} /*  */
+.octicon-mention:before { content: '\f0be'} /*  */
+.octicon-milestone:before { content: '\f075'} /*  */
+.octicon-mirror-public:before,
+.octicon-mirror:before { content: '\f024'} /*  */
+.octicon-mortar-board:before { content: '\f0d7'} /*  */
+.octicon-mute:before { content: '\f080'} /*  */
+.octicon-no-newline:before { content: '\f09c'} /*  */
+.octicon-octoface:before { content: '\f008'} /*  */
+.octicon-organization:before { content: '\f037'} /*  */
+.octicon-package:before { content: '\f0c4'} /*  */
+.octicon-paintcan:before { content: '\f0d1'} /*  */
+.octicon-pencil:before { content: '\f058'} /*  */
+.octicon-person-add:before,
+.octicon-person-follow:before,
+.octicon-person:before { content: '\f018'} /*  */
+.octicon-pin:before { content: '\f041'} /*  */
+.octicon-plug:before { content: '\f0d4'} /*  */
+.octicon-repo-create:before,
+.octicon-gist-new:before,
+.octicon-file-directory-create:before,
+.octicon-file-add:before,
+.octicon-plus:before { content: '\f05d'} /*  */
+.octicon-primitive-dot:before { content: '\f052'} /*  */
+.octicon-primitive-square:before { content: '\f053'} /*  */
+.octicon-pulse:before { content: '\f085'} /*  */
+.octicon-question:before { content: '\f02c'} /*  */
+.octicon-quote:before { content: '\f063'} /*  */
+.octicon-radio-tower:before { content: '\f030'} /*  */
+.octicon-repo-delete:before,
+.octicon-repo:before { content: '\f001'} /*  */
+.octicon-repo-clone:before { content: '\f04c'} /*  */
+.octicon-repo-force-push:before { content: '\f04a'} /*  */
+.octicon-gist-fork:before,
+.octicon-repo-forked:before { content: '\f002'} /*  */
+.octicon-repo-pull:before { content: '\f006'} /*  */
+.octicon-repo-push:before { content: '\f005'} /*  */
+.octicon-rocket:before { content: '\f033'} /*  */
+.octicon-rss:before { content: '\f034'} /*  */
+.octicon-ruby:before { content: '\f047'} /*  */
+.octicon-screen-full:before { content: '\f066'} /*  */
+.octicon-screen-normal:before { content: '\f067'} /*  */
+.octicon-search-save:before,
+.octicon-search:before { content: '\f02e'} /*  */
+.octicon-server:before { content: '\f097'} /*  */
+.octicon-settings:before { content: '\f07c'} /*  */
+.octicon-shield:before { content: '\f0e1'} /*  */
+.octicon-log-in:before,
+.octicon-sign-in:before { content: '\f036'} /*  */
+.octicon-log-out:before,
+.octicon-sign-out:before { content: '\f032'} /*  */
+.octicon-squirrel:before { content: '\f0b2'} /*  */
+.octicon-star-add:before,
+.octicon-star-delete:before,
+.octicon-star:before { content: '\f02a'} /*  */
+.octicon-stop:before { content: '\f08f'} /*  */
+.octicon-repo-sync:before,
+.octicon-sync:before { content: '\f087'} /*  */
+.octicon-tag-remove:before,
+.octicon-tag-add:before,
+.octicon-tag:before { content: '\f015'} /*  */
+.octicon-telescope:before { content: '\f088'} /*  */
+.octicon-terminal:before { content: '\f0c8'} /*  */
+.octicon-three-bars:before { content: '\f05e'} /*  */
+.octicon-thumbsdown:before { content: '\f0db'} /*  */
+.octicon-thumbsup:before { content: '\f0da'} /*  */
+.octicon-tools:before { content: '\f031'} /*  */
+.octicon-trashcan:before { content: '\f0d0'} /*  */
+.octicon-triangle-down:before { content: '\f05b'} /*  */
+.octicon-triangle-left:before { content: '\f044'} /*  */
+.octicon-triangle-right:before { content: '\f05a'} /*  */
+.octicon-triangle-up:before { content: '\f0aa'} /*  */
+.octicon-unfold:before { content: '\f039'} /*  */
+.octicon-unmute:before { content: '\f0ba'} /*  */
+.octicon-versions:before { content: '\f064'} /*  */
+.octicon-watch:before { content: '\f0e0'} /*  */
+.octicon-remove-close:before,
+.octicon-x:before { content: '\f081'} /*  */
+.octicon-zap:before { content: '\26A1'} /* ⚡ */
diff --git a/app/webpack/src/stylesheets/useflags.scss b/app/webpack/src/stylesheets/useflags.scss
new file mode 100644
index 0000000..90f667d
--- /dev/null
+++ b/app/webpack/src/stylesheets/useflags.scss
@@ -0,0 +1,20 @@
+.kk-useflag-circle {
+  cursor: pointer;
+}
+
+.kk-useflag-bubble-container {
+  text-align: center;
+  overflow: scroll;
+}
+
+.kk-useflag-listing {
+  a:link,
+  a:visited {
+    color: #333;
+  }
+}
+
+form.useflag-search {
+  margin-top: 2.5em;
+  margin-bottom: 1em;
+}