Use vendored semantic UI CSS and JS

front/src/App.vue

@@ -222,181 +222,5 @@ export default {
 </script>
 
 <style lang="scss">
-// we do the import here instead in main.js
-// as resolve order is not deterministric in webpack
-// and we end up with CSS rules not applied,
-// see https://github.com/webpack/webpack/issues/215
-@import "semantic/semantic.css";
-@import "style/vendor/media";
-
-html,
-body {
-  @include media("<desktop") {
-    font-size: 90%;
-  }
-}
-#app {
-  font-family: "Avenir", Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.instance-chooser {
-  margin-top: 2em;
-}
-
-.main.pusher,
-.footer {
-  @include media(">desktop") {
-    margin-left: 350px !important;
-    margin-top: 50px;
-  }
-  transform: none !important;
-}
-
-.main.pusher > .ui.secondary.menu {
-  margin-left: 0;
-  margin-right: 0;
-  border: none;
-  box-shadow: inset 0px -2px 0px 0px rgba(34, 36, 38, 0.15);
-  .ui.item {
-    border: none;
-    border-bottom-style: none;
-    margin-bottom: 0px;
-    &.active {
-      box-shadow: inset 0px -2px 0px 0px #000;
-    }
-  }
-  @include media(">tablet") {
-    padding: 0 2.5rem;
-  }
-  @include media(">desktop") {
-    position: fixed;
-    left: 350px;
-    right: 0px;
-    top: 0px;
-    z-index: 99;
-  }
-  background-color: white;
-  .item {
-    padding-top: 1.5em;
-    padding-bottom: 1.5em;
-  }
-}
-
-.service-messages {
-  position: fixed;
-  bottom: 1em;
-  left: 1em;
-  @include media(">desktop") {
-    left: 350px;
-  }
-}
-.main-pusher {
-  padding: 1.5rem 0;
-}
-.ui.stripe.segment,
-#footer {
-  padding: 2em;
-  @include media(">tablet") {
-    padding: 4em;
-  }
-}
-
-.ellipsis {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.ui.small.text.container {
-  max-width: 500px !important;
-}
-
-.button.icon.tiny {
-  padding: 0.5em !important;
-}
-
-.sidebar {
-  .logo {
-    path {
-      fill: white;
-    }
-  }
-}
-
-.discrete {
-  color: rgba(0, 0, 0, 0.87);
-}
-.link {
-  cursor: pointer;
-}
-
-.ui.really.basic.button {
-  &:not(:focus) {
-    box-shadow: none !important;
-    background-color: none !important;
-  }
-}
-
-.floated.buttons .button ~ .dropdown {
-  border-left: none;
-}
-
-.ui.icon.header .circular.icon {
-  display: flex;
-  justify-content: center;
-}
-
-.segment-content .button {
-  margin: 0.5em;
-}
-
-a {
-  cursor: pointer;
-}
-.segment.hidden {
-  display: none;
-}
-
-button.reset {
-  border: none;
-  margin: 0;
-  padding: 0;
-  width: auto;
-  overflow: visible;
-
-  background: transparent;
-
-  /* inherit font & color from ancestor */
-  color: inherit;
-  font: inherit;
-
-  /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
-  line-height: normal;
-
-  /* Corrects font smoothing for webkit */
-  -webkit-font-smoothing: inherit;
-  -moz-osx-font-smoothing: inherit;
-  /* Corrects inability to style clickable `input` types in iOS */
-  -webkit-appearance: none;
-  text-align: inherit;
-}
-
-.ui.table > caption {
-  font-weight: bold;
-  padding: 0.5em;
-  text-align: left;
-}
-[role="button"] {
-  cursor: pointer;
-}
-
-.left.floated {
-  float: left;
-}
-
-.right.floated {
-  float: right;
-}
+@import "style/_main";
 </style>