Changeset 37572 for gs3-extensions/tabletop-dl/trunk/tabletop.css

Timestamp:

2023-03-27T00:05:32+13:00 (14 months ago)

Author:

davidb

Message:

Now with css theme selector in control bar

File:

• gs3-extensions/tabletop-dl/trunk/tabletop.css (modified) (14 diffs)

gs3-extensions/tabletop-dl/trunk/tabletop.css

@@ +1 @@
+
+/*
 :root {
     --gs-fg-primary-col: #fff;
     --gs-bg-primary-col: #29e;
 }
-
-
+*/
+
+
+
+/* provide basic background color, that tabletop themes will likely override, with an tabletop/desktop-sized image */
 html {
-    background: #102010 url(backgrounds/unsplash--dark-green-fern--overview.jpg) no-repeat center center fixed;
-    background-size: cover;
-}
+    background-color: #103010;
+}
+
 
 html, body {
@@ -20 +25 @@
 
 body {
-    font-family: Helvetica, Arial, "Open Sans", OpenSans, sans-serif;
-    color: var(--gs-fg-primary-col);
+    font-family: "Open Sans", OpenSans, Helvetica, Arial, sans-serif;
     background-color: transparent;
 }
 
+/* establish some uniformity concerning width collection divs on home page */
 div.collectionLinkText {
     min-width: 365px;
@@ -33 +38 @@
 }
 
-
-.box {
+/*
+  The overall tabletop setup allows for:
+    header
+    content
+    footer
+
+  Note: ships with 'tabletop.xsl' such that the default behaviour is
+  to NOT display the *header* or *footer*
+*/
+
+
+.tabletop-box {
     display: flex;
     flex-flow: column;
@@ -40 +55 @@
 }
 
-/* construction lines to help show what is going on */
-/*
-.box .row {
-    border: 1px dotted #0313fc;
-}
-*/
-
-.box .row.header {
+
+.tabletop-box .tabletop-row.tabletop-header {
     flex: 0 1 auto;
 }
 
-.box .row.content {
+.tabletop-box .tabletop-row.tabletop-content {
     flex: 1 1 auto;
 }
 
-.box .row.footer {
+.tabletop-box .tabletop-row.tabletop-footer {
     flex: 0 1 40px;
 }
+
+
+.tabletop-button {
+    display: inline-block;
+    width: auto;
+    border-radius: 10px;
+    padding: 15px 25px;
+    cursor: pointer;
+}
+
 
 #gs-control-bar {
@@ -63 +82 @@
     z-index: 20;
     height: 2.5rem;
-    color: var(--gs-fg-primary-col);
-    background: linear-gradient(to right, rgba(13, 17, 22, 0.64), rgba(17, 21, 28, 0.64));
     text-align: center;
     display: none;
@@ -74 +91 @@
     left: 0px;
     top: 0px;
-    /*background-color: var(--gs-bg-primary-col); */
-    background-color: #fff;
     color: #000;
     padding: 0.6rem 0.9rem 0.6rem 0.9rem;
@@ -81 +96 @@
 
 #gs-home-open {
-    z-in4dex: 21;
+    z-index: 21;
     position: absolute;
     left: 0px;
     bottom: 0px;
-    /* background-color: var(--gs-bg-primary-col); */
-    background-color: #fff;
     padding: 0.5rem;
 }
@@ -93 +106 @@
 
 /*
-#fixed-height {
-    height: 40px;
-    color: white;
-    background: linear-gradient(to right, rgba(13, 17, 22, 0.64), rgba(17, 21, 28, 0.64));
-    text-align: center; 
-}
-
-#remaining-height {
-    overflow: hidden;     
-    position: absolute;
-    top: 40px;
-    bottom: 0;
-    width: 100%;
-}
-*/
-
+Interact.JS demo CSS
 
 .info-window {
@@ -114 +112 @@
     margin: 0.5em;
 
-    /*
+    / *
     background-color: var(--gs-bg-primary-col);
     color: var(--gs-fg-primary-col);
-   */
+   * /
     
     background-color: #fff;
@@ -133 +131 @@
     transform: translate(0px, 0px);
 
-    /* This makes things *much* easier */
+    / * This makes things *much* easier * /
     box-sizing: border-box;
 
 }
 
-
+*/
+
+/* WinBox.js classes */
+
+/* inspired by interact.js drag demo div example */
 .winbox-info-window {
     min-height: 6.5em;
     margin: 0.5em;
-
-    /*
-    background-color: var(--gs-bg-primary-col);
-    color: var(--gs-fg-primary-col);
-   */
     
     background-color: #fff;
     color: #000;
-    /*
-    border: 0.25rem var(--gs-bg-primary-col) solid;
-   */
     
     font-size: 1.2rem;
 
-    /* border-radius: 0.6em; */
     padding: 1em;
 
@@ -165 +158 @@
     /* This makes things *much* easier */
     box-sizing: border-box;
-
 }
 
@@ -173 +165 @@
 }
 
-.winbox {
-    background-color: transparent;
-}
 
 .wb-n {
@@ -182 +171 @@
 
 
-
-/* Visual artefact turns up from box-shadow when roting */
-/* This is due to the parent div dtaying in the same fixed place, but the
-   scaled and rotated inner elements breaking out of that shap */
-
-/* Perhaps we only want none, when its being rotated? */
-
-.winbox {
-    box-shadow: none;
-}
-
-/* Report to help promote anti-aliasing affects on transform elements
-
-e.g. https://slickmedia.io/blog/stop-blurring-jagged-edges-css-transform-transition
-
-outline: 1px solid transparent;
--webkit-backface-visibility: hidden;
-transform: translateZ(0);
-will-change: transform;
--webkit-perspective: 1000;
-*/
-
-    
-/* currently nothing specific for resize-drag that info-window does already do */
-/*
-.resize-drag {
-}
-*/
-
-
-#scale-element {
+/* interact.js related for pinch-and-zoom */
+
+/* The following is from the pinch-and-zoom demo example */
+
+/* Current testing was without this (due to it being id/class mistake) but seemed to work OK
+   (hence why the mistake went unnoticed */
+/* Could be the max-width and touch-action would still be useful to have ?? */
+
+
+/*
+.scale-element {
     display: block;
     max-width: 100%;
@@ -218 +187 @@
     touch-action: none;
 }
-
-
-.button {
-    display: inline-block;
-    background-color: var(--gs-bg-primary-col);
-    color: var(--gs-fg-primary-col);;
-    width: auto;
-    border-radius: 10px;
-    padding: 15px 25px;
-    cursor: pointer;
-}
+*/
+
+/* Visual artefact turns up from box-shadow when roting */
+/* This is due to the parent div dtaying in the same fixed place, but the
+   scaled and rotated inner elements breaking out of that shap */
+
+/* Perhaps we only want none, when its being rotated? */
+
+.winbox {
+    background-color: transparent;
+}
+
+.winbox {
+    box-shadow: none;
+}
+
+/* Report to help promote anti-aliasing affects on transform elements
+
+e.g. https://slickmedia.io/blog/stop-blurring-jagged-edges-css-transform-transition
+
+  outline: 1px solid transparent;
+  -webkit-backface-visibility: hidden;
+  transform: translateZ(0);
+  will-change: transform;
+  -webkit-perspective: 1000;
+*/
+
+    
+
+
+