cybrespace base theme

3 files changed, 138 insertions, 1 deletions

diff --git a/app/javascript/styles/cybre-base.scss b/app/javascript/styles/cybre-base.scss
new file mode 100644
index 000000000..0c9e23a59
--- /dev/null
+++ b/app/javascript/styles/cybre-base.scss
@@ -0,0 +1,90 @@
+@import 'application';
+
+/* Wider compose area */
+@media screen and (min-width: 1300px) {
+  .drawer {
+    width: 17%; /* Not part of the flex fun */
+    max-width: 400px;
+    min-width: 330px;
+  }
+  .layout-multiple-columns .column {
+    flex-grow: 1 !important;
+    max-width: 400px;
+  }
+}
+
+/* Don't show outline around statuses if we're in
+ * mouse or touch mode (rather than keyboard) */
+[data-whatinput="mouse"], [data-whatinput="touch"] {
+  .status__content:focus, .status:focus,
+  .status__wrapper:focus, .status__content__text:focus {
+    outline: none;
+  }
+}
+
+/* Less emphatic show more */
+.status__content__read-more-button {
+  font-size: 14px;
+  color: $dark-text-color;
+
+  .status__prepend-icon {
+    padding-right: 4px;
+  }
+}
+
+/* Show a little arrowey thing after the time in a
+ * status to signal that you can click it to see
+ * a detailed view */
+.status time:after,
+.detailed-status__datetime span:after {
+  font: normal normal normal 14px/1 FontAwesome;
+  content: "\00a0\00a0\f08e";
+}
+
+/* Don't display the elephant mascot (we have our
+ * own, thanks) */
+.drawer__inner__mastodon {
+  display: none;
+}
+
+/* Let the compose area/drawer be short, but
+ * expand if necessary */
+.drawer .drawer__inner {
+  overflow: visible;
+  height:inherit;
+  background-image: none;
+}
+.drawer__pager {
+  overflow-y:auto;
+}
+
+/* Put a reasonable background on the single-column compose form */
+.layout-single-column .compose-panel {
+  background-color: $ui-base-color;
+  height: auto;
+  overflow-y: visible;
+  margin-top: 65px;
+}
+
+/* Better distinguish the search bar */
+.layout-single-column .compose-panel .search {
+  position:relative;
+  top: -55px;
+  margin-bottom: -55px;
+}
+
+/* Use display: none instead of visibility:hidden
+ * to hide the suggested follows list on non-mobile */
+@media screen and (min-width: 630px) {
+  .search-results .trends {
+     display:none;
+  }
+}
+
+/* Don't display the weird triangles on the modal layout,
+ * because they look strange on cybrespace themes. */
+.modal-layout__mastodon {
+  display:none;
+}
+
+@import 'fullwidth-media';
diff --git a/app/javascript/styles/fullwidth-media.scss b/app/javascript/styles/fullwidth-media.scss
new file mode 100644
index 000000000..f6a036d4f
--- /dev/null
+++ b/app/javascript/styles/fullwidth-media.scss
@@ -0,0 +1,48 @@
+
+.detailed-status > .media-spoiler,
+.status > .media-spoiler,
+.status .video-player,
+.media-gallery,
+.status .status-card.interactive {
+  margin-top: 20px;
+  margin-left: -68px;
+  width: calc(100% + 80px);
+}
+
+.detailed-status > .media-spoiler,
+.status > .media-spoiler,
+.video-player {
+  max-width: none;
+}
+
+/* If there's no status text, add an extra margin on top */
+.status .status__info + .media-gallery,
+.status .status__info + .media-spoiler,
+.status .status__info + .video-player,
+.status .status__info + .status-card {
+  margin-top: 40px;
+}
+
+.status__video-player-video {
+  transform: unset;
+  top: unset;
+}
+
+.detailed-status .media-gallery {
+  margin-left: -10px;
+  width: calc(100% + 22px);
+}
+
+.public-layout .status {
+  .status__content {
+    min-height: 15px;
+  }
+  & > .media-spoiler,
+  .video-player,
+  .media-gallery,
+  .status-card {
+    margin-top: 20px;
+    width: calc(100% + 94px);
+    margin-left: -78px;
+  }
+}
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index d6385f161..0ff77a11f 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -3195,7 +3195,6 @@ a.status-card.compact:hover {
 }
 
 .status-card__image-image {
-  border-radius: 4px 0 0 4px;
   display: block;
   margin: 0;
   width: 100%;