@churchapps/apphelper 0.6.25 → 0.7.0

package/dist/website/styles/pages.css

@@ -0,0 +1,797 @@
+:root {
+  scroll-behavior: auto;
+  --light-bg-text-color: #333;
+  --light-bg-link-color: #0b4a7f;
+  --dark-bg-text-color: #EEEEEE;
+  --dark-bg-link-color: #FFFFFF;
+  --nav-bg-color: #FFFFFF;
+}
+
+body {
+  font-family: "Roboto", sans-serif;
+  color: var(--light-bg-text-color);
+}
+
+.sectionAnchor {
+  display: block;
+  position: relative;
+  top: -80px;
+  visibility: hidden;
+
+}
+
+/*
+:target {
+  scroll-margin-top: 80px;
+}*/
+
+.table {
+  width: 100%;
+}
+
+.table thead tr th {
+  text-align: left;
+}
+
+.d-block {
+  display: block;
+}
+
+a {
+  color: var(--light-bg-link-color);
+  text-decoration: none;
+}
+
+img {
+  width: 100%;
+}
+
+body {
+  background-color: #f3f3f6;
+  margin: 0px;
+}
+
+#headerLogo {
+  max-width: 260px;
+  max-height: 65px;
+}
+
+.page .editor-input {
+  font-size: inherit;
+}
+
+.page {
+  font-family: var(--bodyFont), "Roboto", sans-serif;
+}
+
+.page h1,
+.page h2,
+.page h3,
+.page h4 {
+  font-family: var(--headingFont), "Roboto", sans-serif;
+}
+
+.page h1 {
+  font-size: 3em;
+  line-height: 1.2em;
+  border-bottom: none;
+  /*margin-bottom: 40px;*/
+}
+
+.page h2 {
+  /*
+  padding-bottom: 10px;
+  margin-bottom: 25px;
+  font-size: 35px;
+  line-height: 40px;*/
+  font-size: 2.2em;
+  line-height: 1.2em;
+  text-transform: none;
+}
+
+.page h3 {
+  /*font-size: 22px;
+  line-height: 26px;*/
+  font-size: 1.6em;
+  line-height: 1.2em;
+}
+
+.page h4 {
+  /*font-size: 22px;
+  line-height: 26px;*/
+  font-size: 1.3em;
+  line-height: 1.2em;
+}
+
+.page .section {
+  min-height: 100px;
+  padding-top: 40px;
+  padding-bottom: 40px;
+  position: relative;
+}
+
+.page .sectionVideo {
+  min-height: 100px;
+  padding-top: 40px;
+  padding-bottom: 40px;
+}
+
+.page .sectionFirst {
+  padding-top: 160px;
+}
+
+.page .videoDark {
+  color: var(--dark-bg-text-color);
+}
+
+.page .sectionDark {
+  color: var(--dark-bg-text-color);
+}
+
+
+.page .sectionDark .editor-link {
+  color: var(--dark-bg-link-color);
+  font-weight: bold;
+}
+
+.page .sectionBG {
+  /*background-attachment: fixed;*/
+  background-position-x: 50%;
+  background-position-y: 50%;
+  background-size: cover;
+  position: relative;
+}
+
+.page .sectionBG:before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  background: #000;
+  opacity: .55;
+  box-sizing: inherit;
+}
+
+/*
+.section {
+  color: #333;
+}
+*/
+
+#navbar.transparent {
+  background-color: rgba(0, 0, 0, 0) !important;
+  box-shadow: none;
+}
+
+/*
+#navbar.transparent:not(.light) a {
+  color: var(--dark-bg-link-color);
+}
+*/
+
+#navbar:not(.transparent) button,
+#navbar.transparent.light button {
+  color: #333;
+}
+
+#navbar.transparent:not(.light) button {
+  color: #FFF;
+}
+
+.capitalize {
+  text-transform: capitalize;
+}
+
+.btn-warning,
+.btn-warning:hover {
+  color: #fff;
+}
+
+.logo {
+  display: flex;
+  width: 200px;
+  margin-right: 15px;
+}
+
+#navbar {
+  background-color: var(--nav-bg-color) !important;
+  padding: 11px 0;
+  margin-bottom: 20px;
+  box-shadow: 0px 3px 3px 0px #999;
+}
+
+#navbar .nav-item {
+  font-size: 14px;
+}
+
+#navbar .nav-link {
+  color: #555;
+  height: 55px;
+  vertical-align: middle;
+  line-height: 45px;
+  max-width: 150px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+#navbar svg {
+  height: 15px;
+  width: 15px;
+}
+
+#navbar .active {
+  border-bottom: 2px solid #03a9f4;
+}
+
+#navRight {
+  white-space: nowrap;
+}
+
+#navRight img {
+  width: 32px;
+  height: 24px;
+  margin-top: -3px;
+  margin-right: 8px;
+}
+
+
+#navSpacer {
+  height: 57px;
+  margin-bottom: 25px;
+}
+
+.blue {
+  color: #03a9f4;
+}
+
+.btn-info {
+  background-color: var(--light-bg-link-color);
+  border-color: var(--light-bg-link-color);
+}
+
+.btn-primary:hover {
+  filter: brightness(90%);
+}
+
+.btn-success {
+  background-color: #77cc00;
+  border-color: #70db86;
+}
+
+.btn-success:hover {
+  background-color: #55aa00;
+  border-color: #55aa00;
+}
+
+.btn-danger {
+  background-color: #cc0011;
+  border-color: #cc0011;
+}
+
+.btn-danger:hover {
+  background-color: #bb0000;
+  border-color: #bb0000;
+}
+
+#footer {
+  background-color: #333;
+  padding-top: 40px;
+  padding-bottom: 40px;
+  color: #eee;
+}
+
+#footer img {
+  max-width: 450px;
+  margin-bottom: 20px;
+}
+
+.form-control::placeholder {
+  color: #ccc;
+}
+
+label .description {
+  font-size: 12px;
+  padding-left: 10px;
+}
+
+.alert p {
+  margin-bottom: 0;
+}
+
+.no-default-style {
+  border: none;
+  background: none;
+}
+
+.lead {
+  font-size: 20px;
+  font-weight: 300;
+}
+
+.videoWrapper {
+  position: relative;
+  padding-bottom: 56.25%;
+  height: 0;
+}
+
+.videoWrapper iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+dropdown-menu a {
+  color: #03a9f4;
+}
+
+.btn-light {
+  border: 1px solid #333;
+}
+
+.smallCenterBlock {
+  max-width: 350px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+#loginBox {
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  padding: 20px;
+}
+
+#loginBox .form-group {
+  margin-bottom: 1rem;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.form-control.is-invalid {
+  background-image: none;
+}
+
+a.dropdown-toggle::after {
+  display: none;
+}
+
+.modalMarkdown textarea {
+  height: 75vh !important;
+  overflow-y: scroll !important;
+}
+
+#markdownPreview table {
+  border-spacing: 0px;
+}
+
+#markdownPreview table td,
+#markdownPreview table th {
+  border: 1px solid #DDD;
+  margin: 0px;
+  padding: 2px
+}
+
+.sectionEditButton,
+.elementEditButton {
+  float: right;
+  background-color: "#FFF";
+  border-radius: 5px;
+  background-color: #FFF;
+}
+
+.columnWrapper:hover {
+  background-color: #FF9999;
+}
+
+.elementWrapper:not(:has(.elementWrapper:hover)):hover {
+  /*background-color: #28a745;*/
+  border: 3px solid #28a745;
+}
+
+.elementWrapper:not(:has(.elementWrapper:hover)):hover:before {
+  content: "ELEMENT";
+  font-size: 14px;
+  background-color: #28a745;
+  color: #FFF;
+  display: block;
+  width: 100px;
+  position: relative;
+  text-align: center;
+  margin-top: -18px;
+  margin-left: -3px;
+  height: 18px;
+  margin-bottom: -2px;
+}
+
+.elementWrapper.box:not(:has(.elementWrapper:hover)):hover:before {
+  content: "BOX" !important;
+}
+
+.elementWrapper.card:not(:has(.elementWrapper:hover)):hover:before {
+  content: "CARD" !important;
+}
+
+.elementWrapper.carousel:not(:has(.elementWrapper:hover)):hover:before {
+  content: "CAROUSEL" !important;
+}
+
+.elementWrapper.embed:not(:has(.elementWrapper:hover)):hover:before {
+  content: "EMBED" !important;
+}
+
+.elementWrapper.expandable:not(:has(.elementWrapper:hover)):hover:before {
+  content: "EXPANDABLE" !important;
+}
+
+.elementWrapper.html:not(:has(.elementWrapper:hover)):hover:before {
+  content: "HTML" !important;
+}
+
+.elementWrapper.image:not(:has(.elementWrapper:hover)):hover:before {
+  content: "IMAGE" !important;
+}
+
+.elementWrapper.location:not(:has(.elementWrapper:hover)):hover:before {
+  content: "LOCATION" !important;
+}
+
+.elementWrapper.row:not(:has(.elementWrapper:hover)):hover:before {
+  content: "ROW" !important;
+}
+
+.elementWrapper.table:not(:has(.elementWrapper:hover)):hover:before {
+  content: "TABLE" !important;
+}
+
+.elementWrapper.text:not(:has(.elementWrapper:hover)):hover:before {
+  content: "TEXT" !important;
+}
+
+.elementWrapper.textWithPhoto:not(:has(.elementWrapper:hover)):hover:before {
+  content: "TEXT WITH PHOTO" !important;
+}
+
+.elementWrapper.video:not(:has(.elementWrapper:hover)):hover:before {
+  content: "VIDEO" !important;
+}
+
+.elementWrapper.whiteSpace:not(:has(.elementWrapper:hover)):hover:before {
+  content: "WHITE SPACE" !important;
+}
+
+.draggable-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  cursor: text; /* Keeps text selection */
+}
+
+/* Drag handle - Always present but only visible on hover */
+.drag-handle {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  background-color: green;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 3px;
+  cursor: grab;
+  user-select: none;
+  pointer-events: all;
+  opacity: 0;
+  transition: opacity 0.2s;
+  z-index: 1500;
+}
+
+/* Section drag handle - INSIDE top-left corner */
+.section-handle {
+  background-color: #3333FF;
+  left: 1px;
+  top: 30px;
+  z-index: 100;
+}
+
+/* Element drag handle - Middle-left */
+.drag-handle:not(.section-handle) {
+  left: 5px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/* Content area - text remains selectable */
+.draggable-content {
+  flex: 1;
+  user-select: text;
+}
+
+
+.sectionWrapper:not(:has(.elementWrapper:hover)):hover {
+  /*background-color: #9999FF !important;*/
+  border: 3px solid #3333FF;
+  padding-bottom: 38px;
+}
+
+.sectionWrapper:not(:has(.elementWrapper:hover)):hover:before {
+  content: "SECTION";
+  background-color: #3333FF;
+  color: #FFF;
+  display: block;
+  width: 100px;
+  position: relative;
+  text-align: center;
+  font-size: 14px;
+  height: 18px;
+  /*margin-bottom: -29px;*/
+  margin-top: -40px !important;
+  margin-bottom: 20px;
+}
+
+.sectionWrapper.sectionBlock:not(:has(.elementWrapper:hover)):hover:before {
+  content: "BLOCK" !important;
+}
+
+/*
+.sectionWrapper {
+  padding-top: 0 !important;
+}*/
+
+.sectionDark {
+  color: var(--dark-bg-text-color);
+}
+
+/*
+.sectionDark.sectionWrapper:not(:has(.elementWrapper:hover)):hover {
+  background-color: #007bff !important;
+}*/
+
+.sectionDark .columnWrapper:hover {
+  background-color: #990000;
+}
+
+/*
+.sectionDark .elementWrapper:hover {
+  background-color: #009900;
+}
+*/
+.sectionActions {
+  display: none;
+  position: absolute;
+  top: 1;
+  right: 0;
+  margin-top: -70px;
+  z-index: 999;
+}
+
+.sectionActions.alwaysVisible {
+  display: block;
+  z-index: 9999;
+}
+
+.sectionBlock .sectionActions {
+  margin-top: 30px;
+}
+
+.sectionWrapper:not(:has(.elementWrapper:hover)):hover .sectionActions {
+  display: block;
+}
+
+.elementActions {
+  display: none;
+  position: absolute;
+  top: 10;
+  right: 0;
+}
+
+.elementWrapper:hover .elementActions {
+  display: block;
+  z-index: 2;
+}
+
+#embeddedLayout {
+  height: 100vh;
+  background-color: #FFFFFF;
+}
+
+#embeddedLayout .page .sectionFirst {
+  padding-top: 0px;
+}
+
+.no-resize {
+  width: auto;
+  max-width: 100%;
+}
+
+.elBox {
+  margin-bottom: 20px;
+}
+
+.elTextWithPhoto {
+  margin-bottom: 20px;
+}
+
+.elText {
+  margin-bottom: 20px;
+}
+
+/* Style inline code */
+code {
+  background-color: #f5f5f5;
+  padding: 2px 4px;
+  border-radius: 3px;
+  font-family: "Source Code Pro", monospace !important;
+}
+
+pre {
+  background-color: #f8f9fa;
+  padding: 12px;
+  border-radius: 6px;
+  border-left: 4px solid #6c757d;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-x: auto;
+}
+
+/* Ensure code inside block follows styling */
+pre.code-block code {
+  font-size: 14px;
+  color: #222;
+  background: none;
+  padding: 0;
+}
+.editor-list-ul,
+.editor-list-ol {
+  padding-left: 0px;
+  margin-left: 40px;
+}
+
+.editor-list-ol li {
+  list-style-type: decimal !important;
+  margin-bottom: 0px;
+}
+
+
+.editor-list-ul li {
+  list-style-type: disc !important;
+}
+
+.page th {
+  font-weight: bold;
+}
+
+.pageTable {
+  width: 100%;
+}
+
+.pageTable th {
+  text-align: left;
+}
+
+.pageTable td,
+.pageTable th {
+  border-bottom: 1px solid;
+  color: inherit;
+}
+
+.calbox,
+#conbtn {
+  color: #FFFFFF;
+  background: linear-gradient(rgb(0, 0, 0), var(--darkAccent));
+}
+
+code {
+  color: #000;
+}
+
+
+
+#groupHero {
+  min-height: 200px;
+  background-color: var(--darkAccent);
+  color: #FFFFFF;
+}
+
+#groupHero .content {
+  background: linear-gradient(rgba(0, 0, 0, .8), rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0));
+  width: 100%;
+  height: 100%;
+  padding-top: 110px;
+  min-height: 260px;
+}
+
+#groupHero H1 {
+  margin-top: 0px;
+  padding-bottom: 0px;
+  margin-bottom: 0px;
+  font-size: 40px;
+}
+
+#groupHero .badge {
+  border-radius: 10px;
+  float: right;
+  margin-top: -150px;
+  margin-bottom: -120px;
+  position: relative;
+  z-index: 1000;
+
+}
+
+
+@media (max-width: 768px) {
+  #calEntity {
+    order: -1;
+  }
+
+  #groupHero .badge {
+    float: left;
+    margin-top: 15px;
+    width:100%;
+    height:auto;
+    margin-bottom: 15px;
+  }
+}
+
+.headingsLight h1, .headingsLight h2, .headingsLight h3, .headingsLight h4 { color: var(--light); }
+.headingsLightAccent h1, .headingsLightAccent h2, .headingsLightAccent h3, .headingsLightAccent h4 { color: var(--lightAccent); }
+.headingsAccent h1, .headingsAccent h2, .headingsAccent h3, .headingsAccent h4 { color: var(--accent); }
+.headingsDarkAccent h1, .headingsDarkAccent h2, .headingsDarkAccent h3, .headingsDarkAccent h4 { color: var(--darkAccent); }
+.headingsDark h1, .headingsDark h2, .headingsDark h3, .headingsDark h4 { color: var(--dark); }
+
+.linksLight a { color: var(--light); }
+.linksLightAccent a { color: var(--lightAccent); }
+.linksAccent a { color: var(--accent); }
+.linksDarkAccent a { color: var(--darkAccent); }
+.linksDark a { color: var(--dark); }
+
+/* Lightbox overlay */
+.b1-lightbox {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  background: rgba(0, 0, 0, 0.85);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.b1-lightbox img {
+  width: 98vw;
+  height: 98vh;
+  object-fit: contain;
+  cursor: default;
+}
+
+.b1-lightbox__close {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  background: none;
+  border: none;
+  color: #fff;
+  font-size: 36px;
+  line-height: 1;
+  cursor: pointer;
+  padding: 4px 12px;
+  opacity: 0.8;
+  transition: opacity 0.2s;
+}
+
+.b1-lightbox__close:hover {
+  opacity: 1;
+}
+
+/* DraggableWrapper - show drag indicator on hover (CSS-only, no React state) */
+.draggable-wrapper:hover .drag-indicator {
+  opacity: 1 !important;
+}
+