1 files changed, 126 insertions, 0 deletions
diff --git a/css/viewer.scss b/css/viewer.scss
new file mode 100644
index 00000000..2053a3fe
--- /dev/null
+++ b/css/viewer.scss
@@ -0,0 +1,126 @@
+#odf-canvas{
+  position: relative;
+  top: 37px;
+  left: 0px;
+  border:1px solid darkgray;
+  border-left:0 none;
+  box-shadow: 0px 4px 10px #000;
+  -moz-box-shadow: 0px 4px 10px #000;
+  -webkit-box-shadow: 0px 4px 10px #000;
+}
+
+.icon-filetype-document{
+  background-image: url('../../../../core/img/filetypes/x-office-document.svg')
+}
+
+.icon-filetype-spreadsheet{
+  background-image: url('../../../../core/img/filetypes/x-office-spreadsheet.svg');
+}
+
+.icon-filetype-presentation{
+  background-image: url('../../../../core/img/filetypes/x-office-presentation.svg');
+}
+
+.richdocuments-sharing .icon-shared {
+  display: block;
+  width: 16px;
+  height: 16px;
+  padding: 16px;
+  opacity: 0.6;
+}
+
+.richdocuments-sharing .icon-shared:hover,
+.richdocuments-sharing .icon-shared:focus {
+  opacity: 1;
+}
+
+#richdocumentsframe {
+  background-color: #fff;
+  width:100%;
+  /** TODO: This will probably look odd on 13 */
+  height: calc(100vh - 50px);
+  display:block;
+  position:absolute;
+  top:0;
+  z-index:110;
+}
+
+#editors-menu {
+  min-width: 200px;
+  top: 50px;
+
+  ul li {
+    display: flex;
+    padding: 3px;
+    border-left: 3px solid transparent;
+    &.active {
+      border-left: 3px solid var(--color-primary, $color-primary);
+    }
+
+    .label {
+      padding: 6px;
+      flex-grow: 1;
+
+      .icon-play-next {
+        opacity: .5;
+        display: inline-block;
+        padding-left: 10px;
+        vertical-align: top;
+      }
+    }
+    label.label::before {
+      margin-right: 16px;
+      margin-left: 7px;
+    }
+    .icon-close {
+      padding: 8px;
+    }
+  }
+}
+
+#richdocuments-avatars {
+  position: relative;
+
+  & > .richdocuments-avatar {
+    float: right;
+    border-radius: 50%;
+    margin: 8px;
+    margin-left: -20px;
+    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
+    position: relative;
+    &.read-only {
+      opacity: 0.8;
+    }
+  }
+}
+
+#richdocuments-actions {
+  position: relative;
+  .icon-more {
+    display: block;
+    width: 50px;
+    height: 50px;
+  }
+  li {
+    white-space: nowrap;
+    a.icon-loading-small:after {
+      left: 19px;
+    }
+  }
+}
+
+#versionsTabView li {
+  padding-left: 15px;
+  margin-left: -15px;
+}
+
+#versionsTabView li.active {
+  border-left: 3px solid var(--color-primary, #000);
+  padding-left: 12px;
+}
+
+#currentVersion li {
+  border-bottom: 1px solid rgba(100,100,100,.1);
+}
+
+@import "templatePicker";