markiplier's mansion

markipliers-mansion/css/front-end.css

@@ -0,0 +1,196 @@
+/**
+ * This file holds the styles of websites while editing
+ */
+
+body {
+  min-height: 100vh;
+  min-width: 98vw; /* remove approx size of vertical scroll bar */
+}
+
+/* prevent-auto-z-index is to let the components handle their z-index */
+.section-element > .silex-element-content > *:not(.prevent-auto-z-index):not(.fixed) {
+  /* put the elements of a section on top of sections bellow */
+  z-index: 10;
+}
+/* workaround a bug of the 2.11 version (front end) */
+/* sections used to hava margin-top: -1; which can not be edited in the UI */
+.editable-style.section-element {
+  margin-top: 0;
+}
+/****************************************************/
+.website-width {
+  width: 960px;
+}
+.paged-element-hidden {
+  display: none !important;
+}
+/* resize */
+.editable-style.image-element img {
+  border-radius: inherit; /* this is to follow the element's radius */
+	width: 100%;
+	height: 100%;
+}
+/*
+ .image-element > .silex-element-content {
+	overflow: hidden;
+}
+*/
+.html-element .silex-element-content {
+  /* enable HTML content to have style="min-height: inherit;" */
+  /* removed because it makes components buggy, add it to silex if you need to
+  position: absolute;
+  min-height: inherit;
+  width: 100%; /* needed by slideshow components and probably others */
+  /*
+  height: 100%; /* needed by slideshow kreview and probably others */
+}
+/* wysihtml text editor styles */
+.wysiwyg-float-left {
+  float: left;
+  margin: 0 8px 8px 0;
+}
+.wysiwyg-float-right {
+  float: right;
+  margin: 0 0 8px 8px;
+}
+/* Remove dots surrounding links in Firefox
+    because of normalize.css */
+a:focus{ outline: none;}
+
+body .editable-style[data-silex-href] {
+  cursor: pointer;
+}
+body.enable-mobile .editable-style.hide-on-desktop {
+  display: none;
+}
+/* only outside the editor */
+/* needs to be more qualified than body.enable-mobile .editable-style:not(.prevent-mobile-style) */
+body.silex-runtime.body-initial .fixed {
+  position: absolute;
+  z-index: 20;
+}
+/* Mobile styles */
+@media (max-width:480px) {
+  /* needs to be more qualified than body.enable-mobile .editable-style:not(.prevent-mobile-style) */
+  body.silex-runtime.body-initial .fixed {
+    /* on mobile (chrome, this is needed to be on top of other content) */
+    position: relative;
+  }
+
+  /* hide horizontal scroll bar which appears because of residual values in css
+  html {
+    overflow-x: hidden;
+  }
+  */
+  body {
+    position: initial; /* used to be absolute but now only in editor (editable.css), when position is absolute the body has the size of its content */
+  }
+  /* mobile mode */
+  body.enable-mobile .editable-style:not(.prevent-mobile-style),
+  body.enable-mobile .background.background-initial {
+    position: static;
+    top: auto;
+    left: auto;
+    max-width: 100%;
+    min-width: auto; /* this is to remove sections min-width, since section min-width is set to the witdh of its content in Element::setStyle() */
+    margin-left: auto;
+    margin-right: auto;
+  }
+  body.enable-mobile .editable-style.section-element {
+    padding: 0;
+  }
+  body.enable-mobile.silex-resizing .editable-style:not(.prevent-mobile-style) {
+    max-width: unset; /* while dragging let the user size the elements freely */
+  }
+  body.enable-mobile .image-element.editable-style:not(.prevent-mobile-style) {
+    position: relative;
+  }
+  body.enable-mobile .editable-style.section-element {
+    max-width: 100%; /* section bg should be 100% width because user do not need to grab the side and resize */
+    padding: 0;
+    margin: 0;
+  }
+  body.enable-mobile .container-element:not(.paged-element-hidden) {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    flex-wrap: wrap;
+  }
+  /* but still hide paged elements or desktop only elements */
+  body.enable-mobile .editable-style.hide-on-mobile {
+    display: none;
+  }
+  body.enable-mobile .editable-style.hide-on-desktop:not(.paged-element-hidden) {
+    display: initial;
+  }
+  body.silex-runtime.enable-mobile .background.background-initial {
+    max-width: 100%;
+  }
+}
+
+/* only outside the editor */
+/* needs to be more qualified than body.enable-mobile .editable-style:not(.prevent-mobile-style) */
+body.silex-runtime.body-initial .fixed {
+  position: absolute;
+  z-index: 20;
+}
+/* Mobile styles */
+@media (max-width:480px) {
+  /* needs to be more qualified than body.enable-mobile .editable-style:not(.prevent-mobile-style) */
+  body.silex-runtime.body-initial .fixed {
+    /* on mobile (chrome, this is needed to be on top of other content) */
+    position: relative;
+  }
+}
+
+/**
+ * prodotype components
+ */
+.silex-element-content-full-height .silex-element-content {
+  height: 100%;
+}
+silex-template,
+.prodotype-preview {
+  display: none;
+}
+.prodotype-runtime,
+.prodotype-runtime-strict {
+  display: none;
+}
+.prodotype-published {
+  display: none;
+}
+body.silex-editor .prodotype-preview {
+  display: block;
+}
+body.silex-runtime .prodotype-runtime,
+body.silex-runtime .prodotype-runtime-strict {
+  display: block;
+}
+body.silex-published .prodotype-published {
+  display: block;
+}
+body.silex-publish .prodotype-runtime-strict {
+  display: none;
+}
+.prodotype-force-size {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+.silex-component-button button {
+  width: 100%;
+}
+/* full-width component*/
+div.editable-style.full-width-section {
+  min-height: 100px;
+}
+
+div.editable-style.full-width-section>.editable-style {
+  position: static;
+  min-width: 100%;
+}
+
+div.editable-style.full-width-section>.editable-style.silex-element-content {
+  display: none;
+}