cyberweb 0.4.174 → 0.5.225

data/lib/cyberweb/cascading_style_sheets/cursors.css

@@ -0,0 +1,14 @@
+/* Cursor tags */
+.cursor_default   { cursor: default; }
+.cursor_auto      { cursor: auto; }
+.cursor_sw_resize { cursor: sw-resize; }
+.cursor_pointer   { cursor: pointer; }
+.cursor_move      { cursor: move; }
+
+.cursor_happy {
+	cursor: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/happy.png"), auto;
+}
+  
+.cursor_sad {
+	cursor: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/sad.png"), auto;
+}

data/lib/cyberweb/cascading_style_sheets/custom/animated_bike.css

@@ -0,0 +1,199 @@
+/*
+ * These are the CSS rules for an animated motorbike.
+ */
+
+
+/* */
+.outer_area_for_the_animated_bike {
+  width:  180px;
+  height: 145px;
+  top:     50%;
+  left:    50%;
+  transform: translate(-50%, -50%);
+}
+/* The next CSS rule determines the totality of the bike */
+.width_of_the_bike {
+  bottom: 0px; left: 0;
+  width: 100%; /* Should be 100% to avoid offsets */
+  height: 130%;
+  overflow: hidden;
+}
+.bike {
+  bottom: 4px;
+  left: 50%;
+  width: 80px;
+  height: 140px;
+  margin-left: -40px;
+  animation:
+    bike-translate 7s ease-in-out infinite,
+    bike-shake     .5s linear infinite .75s;
+  transform-origin: 50% 100%;
+}
+.left_handle_of_the_bike,
+.right_handle_of_the_bike {
+  top:  15px;
+  width: 26px;
+  height: 5px;
+  border-radius: 1px;
+  background-color: black;
+}
+.left_handle_of_the_bike {
+  left: 0;
+  transform: rotate(-18deg);
+}
+.right_handle_of_the_bike {
+  right: 0;
+  transform: rotate(18deg);
+}
+.headlight_of_the_bike {
+  width: 26px;
+  height: 26px;
+  top: 0; left: 50%;
+  margin-left: -13px;
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 4px #041830;
+}
+.headlight_of_the_bike:before {
+  content: '';
+  width: 10px; height: 10px;
+  top: 50%; left: 50%;
+  margin: -5px 0 0 -5px;
+  border-radius: 50%;
+  background: #041830;
+}
+.headlight_of_the_bike:after {
+  content: '';
+  width: 100%;
+  height: 3px;
+  bottom: -2px;
+  left: 0;
+  border-radius: 1px;
+  background: #041830;
+}
+.left_suspension_of_the_bike {
+  width: 11px;
+  height: 26px;
+  top: 32px;
+  left: 21px;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAECAYAAAC3OK7NAAAAH0lEQVQIW2NkAAIWCYP/IBofYCSkAGYI8QqJsRZkKwCpfwUxsQUgTAAAAABJRU5ErkJggg==) repeat-y;
+  background-size: 100% auto;
+  background-position-y: 1px;
+}
+.left_suspension_of_the_bike:before {
+  content: '';
+  width: 8px;
+  height: 30px;
+  bottom: 95%;
+  left: 2px;
+  border-radius: 1px;
+  background: #fff;
+  box-shadow: inset 0 0 1px 3px #041830;
+}
+.left_suspension_of_the_bike:after {
+  content: '';
+  width: 2px;
+  height: 2px;
+  top: 100%;
+  left: 5px;
+  box-shadow:
+    -2px 0 1px #041830,
+     2px 0 1px #041830;
+}
+.left_support_of_the_bike {
+  width: 11px; height: 48px;
+  top: 60px; left: 21px;
+  border-radius: 1px;
+  background: #fff;
+  box-shadow: inset 0 0 1px 3px #041830;
+}
+.right_suspension_of_the_bike {
+  width: 11px;
+  height: 26px;
+  top: 32px;
+  right: 21px;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAECAYAAAC3OK7NAAAAH0lEQVQIW2NkAAIWCYP/IBofYCSkAGYI8QqJsRZkKwCpfwUxsQUgTAAAAABJRU5ErkJggg==) repeat-y;
+  background-size: 100% auto;
+  background-position-y: 1px;
+}
+.right_suspension_of_the_bike:before {
+  content: '';
+  width: 8px;
+  height: 30px;
+  bottom: 95%;
+  right: 2px;
+  border-radius: 1px;
+  background: #fff;
+  box-shadow: inset 0 0 1px 3px #041830;
+}
+.right_suspension_of_the_bike:after {
+  content: '';
+  width: 2px; height: 2px;
+  top: 100%; right: 4px;
+  box-shadow:
+    -2px 0 1px #041830,
+    2px 0 1px #041830;
+}
+.right_support_of_the_bike {
+  width: 11px; height: 48px;
+  top: 60px; right: 21px;
+  border-radius: 1px;
+  background: #fff;
+  box-shadow: inset 0 0 1px 3px #041830;
+}
+.body {
+  top: 29px; left: 30px;
+  border-top: 28px solid #041830;
+  border-right: 10px solid #041830;
+  border-left: 10px solid transparent;
+  border-bottom: 28px solid transparent;
+}
+.wheel {
+  overflow: hidden;
+  width: 20px; height: 86px;
+  bottom: 0; left: 30px;
+  border-radius: 20px;
+  box-shadow: inset 0 0 1px 3px #041830;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAASklEQVQIW2M8snrN/y/MLAwfHjxgYPnymYHx6LLl/7+zsjL8eP2agQkksGbS5P/iAgIMXED8g5MTKNDV9l+Cg4dBSE2d4TsbOwMALuAaA/XaXuUAAAAASUVORK5CYII=) repeat;
+  background-size: 4px 4px;
+}
+.wheel:after {
+  content: '';
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJklEQVQYV2NkgABjKI2LOstIhCKwZtooJNqNBPwBkQa5kSgwgAoBGPoCpNTsO2QAAAAASUVORK5CYII=) repeat;
+  animation: wheel 1s linear infinite;
+}
+.road {
+  bottom: 0; left: 50%;
+  width: 100%; height: 6px;
+  transform: translateX(-50%);
+  border-radius: 6px;
+  background: #1c1c38;
+  animation: road 7s ease-in-out;
+}
+
+@keyframes wheel {
+  0% {background-position: 0 0}
+  100% {background-position: 0 100%}
+}
+@keyframes road {
+    0% {width: 0%;}
+    6% {width: 120%;}
+    8% {width: 100%;}
+  100% {width: 100%;}
+}
+@keyframes bike-translate {
+    0% {transform: translateY(100%)}
+    6% {transform: translateY(-20%)}
+    8% {transform: translateY(0)}
+  100% {transform: translateY(0)}
+}
+@keyframes bike-shake {
+    0% {transform: rotate(0)}
+   25% {transform: rotate(-2deg)}
+   50% {transform: rotate(0)}
+   75% {transform: rotate(2deg)}
+  100% {transform: rotate(0)}
+}

data/lib/cyberweb/cascading_style_sheets/default.css

@@ -1,5 +1,4 @@
 /*
- *
  * Filename: default.css
  *
  * This file used to be called STD.css until July 2020 when it was renamed
@@ -106,26 +105,31 @@ img.center {
 
  /* top right bottom left like margin: 1em 2em 3em 4em   */
  /* Top, top tags, width tags and height tags see below  */
-.top-20px  {top:-20px }
-.top-19px  {top:-19px }
-.top-18px  {top:-18px }
-.top-17px  {top:-17px }
-.top-16px  {top:-16px }
-.top-15px  {top:-15px }
-.top-14px  {top:-14px }
-.top-13px  {top:-13px }
-.top-12px  {top:-12px }
-.top-11px  {top:-11px }
-.top-10px  {top:-10px }
-.top-9px   {top:-9px  }
-.top-8px   {top:-8px  }
-.top-7px   {top:-7px  }
-.top-6px   {top:-6px  }
-.top-5px   {top:-5px  }
-.top-4px   {top:-4px  }
-.top-3px   {top:-3px  }
-.top-2px   {top:-2px  }
-.top-1px   {top:-1px  }
+.top_30    {top: 30%;  }
+.top_40    {top: 40%;  }
+.top_50    {top: 50%;  }
+.top_60    {top: 60%;  }
+.top_70    {top: 70%;  }
+.top-20px  {top:-20px; }
+.top-19px  {top:-19px; }
+.top-18px  {top:-18px; }
+.top-17px  {top:-17px; }
+.top-16px  {top:-16px; }
+.top-15px  {top:-15px; }
+.top-14px  {top:-14px; }
+.top-13px  {top:-13px; }
+.top-12px  {top:-12px; }
+.top-11px  {top:-11px; }
+.top-10px  {top:-10px; }
+.top-9px   {top:-9px;  }
+.top-8px   {top:-8px;  }
+.top-7px   {top:-7px;  }
+.top-6px   {top:-6px;  }
+.top-5px   {top:-5px;  }
+.top-4px   {top:-4px;  }
+.top-3px   {top:-3px;  }
+.top-2px   {top:-2px;  }
+.top-1px   {top:-1px;  }
 .top0px    {top:0px   }
 .top1px    {top:1px   }
 .top2px    {top:2px   }
@@ -258,6 +262,7 @@ img.center {
 .right29em  {right:  29em;}
 .right30em  {right:  30em;}
   /* left tags lef tags, left tags,leftt*/
+.lef20    { left:20%;  }
 .lef30    { left:30%;  }
 .lef50    { left:50%;  }
 .lef51    { left:51%;  }
@@ -1029,6 +1034,7 @@ img.center {
 .s0_5em     { padding-right:0.5em; padding-left:0.5em}
 .s0_6em     { padding-right:0.6em; padding-left:0.6em}
 .s0_7em     { padding-right:0.7em; padding-left:0.7em}
+.s0_75em    { padding-right:0.75em; padding-left:0.75em}
 .s0_8em     { padding-right:0.8em; padding-left:0.8em}
 .s0_9em     { padding-right:0.9em; padding-left:0.9em}
 .s1em       { padding-right:1em;   padding-left:1em; }
@@ -1424,45 +1430,6 @@ img.center {
 /* And similar to that, general definitions for differencies   */
 /* Note that a - means a ,  :-)  So if there is something like 1-5em it is a class for 1.5em  ind tags indent tags*/
 
-.in0           {text-indent:0px }
-.ind0em       {text-indent:0em }
-.ind0         {text-indent:0px }
-.ind0px      {text-indent:0px }
-.ind1px      {text-indent:1px }
-.ind2px      {text-indent:2px }
-.ind3px      {text-indent:3px }
-.ind4px      {text-indent:4px }
-.ind5px      {text-indent:5px }
-.ind6px      {text-indent:6px }
-.ind7px      {text-indent:7px }
-.ind8px      {text-indent:8px }
-.ind9px      {text-indent:9px }
-.ind10px     {text-indent:10px}
-.ind11px     {text-indent:11px}
-.ind12px     {text-indent:12px}
-.ind13px     {text-indent:13px}
-.ind14px     {text-indent:14px}
-.ind15px     {text-indent:15px}
-.ind20px     {text-indent:20px}
-.ind_0-1em    {text-indent:0.1em;}
-.ind_01em     {text-indent:0.1em;}
-.ind_0-2em   {text-indent:0.1em;}
-.ind_0-5em   {text-indent:0.5em;}
-.ind_05em      {text-indent:0.5em;}
-.ind_1em      {text-indent:1em;}
-.ind1em       {text-indent:1em;}
-.ind_1-5em   {text-indent:1.5em;}
-.ind_2em      {text-indent:2em;}
-.ind2em       {text-indent:2em;}
-.ind3em       {text-indent:3em;}
-.ind4em       {text-indent:4em;}
-.ind5em       {text-indent:5em;}
-.ind_0-1emPad1px {text-indent:0.1em;padding:1px}
-.ind_0-5emPad1px {text-indent:0.5em;padding:1px}
-.ind_1emPad1px  {text-indent:1em;  padding:1px}
-.ind_0-1emPad5px {text-indent:0.1em;padding:5px}
-.ind_0-5emPad5px {text-indent:0.5em;padding:5px}
-.ind-1emPad5px  {text-indent:1em;  padding:5px}
   /* letter spacing tags, l-spacing tags, letter-spacing tags, let space tags */
 .lspa1      { letter-spacing:1px }
 .lspa2      { letter-spacing:2px }
@@ -1553,9 +1520,6 @@ img.center {
 .bordboGreen1px  { border-bottom:1px solid green;}
 .bbot2sblue      { border-bottom:2px solid blue;}
 
-  /*  Float tags, fl tags, float-right tags, float-left tags */
-.FLR    {float:right}
-.FLL    {float:left}
   /* ***************************************************************
    * Vert align tag, Align tags, pos tags,pos abs tags, tags for aligning, 
    * vert tags,vert-align tags,text-align tags,
@@ -1588,31 +1552,6 @@ img.center {
 .CL     {clear: left;  } /*  */
 .CR     {clear: right; } /*  */
 .CB     {clear: both;  } /*  */
-  /* position tags, pos tags, posab tags, posre tags  */
-  /* Bsp: position:absolute; top:30px gibt an, das das 
-   * Tochterelement 30 Pixel unterhalb des Elternelementes 
-   * beginnt.
-   */
-.pab    {position:absolute}
-.posab  {position:absolute}
-.posfi  {position:fixed}   /*  absolute positionierung, gemessen am Elternelements. Bleibt beim Scrollen stehen.*/
-.posre  {position:relative}
-.posrel {position:relative}
-
-/*
- * Display tag, dis tags, disp tags, includes display combos
- */
-.NOBLOCK   { display:inline}
-.dispin    { display:inline}
-.disin     { display:inline}
-.inline    { display:inline}
-.underline { text-decoration:underline}
-.disinud   { display:inline;text-decoration:underline} 
-.DIN       { display:inline}
-.DINUD     { display:inline;text-decoration:underline} 
-.DISUD     { display:inline;text-decoration:underline} 
-.disno, .dnone, .none { display:none}
-.disbl     { display:block}
 
 .BLOCK   { display:block}
 .BLOCKW90{ display:block;width:90%}
@@ -1625,19 +1564,8 @@ img.center {
 .BLOCKW20{ display:block;width:20%}
 .BLOCKW10{ display:block;width:10%}
 
-/* Cursor tags */
-.CURSdef {cursor: default}
-.CURSaut {cursor: auto}
-.CURSswr {cursor: sw-resize}
-.CURSpoi {cursor: pointer}
-.CURSmov {cursor: move}
-
 p[align=center] { padding:1px;} /* does what ? I guess it sets all p elements with aligned center to use 1px padding */
 
-ol, li {color:white;}
-
-pre { font-size: 1.0em;}
-
 .bigbird { font-family:"Sesame Street", "Kidprint", sans-serif; 
   color: green;
   font-size: 20pt;
@@ -1669,13 +1597,8 @@ li.bluedecim { list-style-type:decimal;color:blue;}
  color:black; font-size:0.95em;
 }
 .GREYZONE {background-color:#E0E0E0;padding-left:2em;padding-right:2em;border:1px solid black}
-.ovvis {overflow:visible }  /* always visible                                       */
-.ovhid, .ohid, .ohidden { overflow:hidden }  /* always cut if is on overflow                         */
-.ovscr {overflow:scroll  }  /* always cut but also allow scrolling                  */
-.ovaut {overflow:auto    }  /* if there is conflict, the browser decides what to do */
-
 
-img { border:0px solid black;}
+img { border:0px solid black; }
  
 div.clearer  { clear: left;  line-height: 0; height: 0;}
 div.clearerL { clear: left;  line-height: 0; height: 0;}
@@ -1792,45 +1715,157 @@ hr.thick {
   grid-gap: 4px;
 }
 
-/* Round Border, inspired from:
+/*
+ * This can be used to resize an element, such as a <div> tag.
+ */
+.resize {
+  resize: both;
+  overflow: auto;
+}
 
-     https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_round_buttons
+/*
+ * Float tags, fl tags, float-right tags, float-left tags
+ */
+.FLR, .float_right { float:right; }
+.FLL, .float_left  { float:left;  }
 
+/*
+ * Display tag, dis tags, disp tags, includes display combos
  */
-.round_border1,
-.round_border2,
-.round_border3,
-.round_border4 {
-  font-size: 1px;
-  overflow:  hidden;
-  display:   block;
+.disno, .dnone, .none { display: none; }
+.underline { text-decoration: underline; }
+.disinud   { display: inline; text-decoration: underline; } 
+.DINUD     { display: inline; text-decoration: underline; } 
+.DISUD     { display: inline; text-decoration: underline; } 
+.disbl     { display: block; }
+.NOBLOCK,
+.dispin,
+.disin,
+.disinline,
+.inline,
+.DIN {
+  display: inline;
 }
 
-.round_border1 {height:1px; background:#888; margin:0 5px;}
-.round_border2 {height:1px; background:#ddd; border-right:2px solid #888; border-left:2px solid #888; margin:0 3px;}
-.round_border3 {height:1px; background:#ddd; border-right:1px solid #888; border-left:1px solid #888; margin:0 2px;}
-.round_border4 {height:2px; background:#ddd; border-right:1px solid #888; border-left:1px solid #888; margin:0 1px;}
-.round_border_content  {background: #ddd; border-right:1px solid #888; border-left:1px solid #888;}
-.round_border_content2 {background: #8E6F90; border-right:2px solid #888; border-left:2px solid #888;}
-.round_border_content3 {background: #AE9CF4; border-right:2px solid #888; border-left:2px solid #888;}
-.round_border_content,
-.round_border_content2,
-.round_border_content3 div { margin-left: 5px; }
+/*
+ * The next two lines can be used to display three stars
+ * in the middle of a page.
+ *
+ * If you use Cyberweb::WebObject then you can use this
+ * via "hr_stars" or just "stars" - a method call.
+ */
+.hr_stars {
+  border:none;
+}
+.hr_stars::after {
+  content:'✩    ✩    ✩';
+  display:block;
+  text-align:center;
+  font-size:1.2em;
+}
 
-.rounded_border_1px { border-radius: 1px; }
-.rounded_border_2px { border-radius: 2px; }
-.rounded_border_3px { border-radius: 3px; }
-.rounded_border_4px { border-radius: 4px; }
-.rounded_border_5px { border-radius: 5px; }
-.rounded_border_6px { border-radius: 6px; }
-.rounded_border_7px { border-radius: 7px; }
-.rounded_border_8px { border-radius: 8px; }
+/*
+ * The following was disabled as of 27.11.2021:
+ *
+ * ol, li {color:white;}
+ *
+ */
+
+/*
+ * The grayscale filter can grey-out an image.
+ */
+.grayscale {
+  -webkit-filter: grayscale(1);
+  filter: grayscale(1);
+}
+
+.in0          {text-indent: 0px; }
+.ind0em       {text-indent: 0em; }
+.ind0         {text-indent: 0px; }
+.ind0px       {text-indent: 0px; }
+.ind1px       {text-indent: 1px; }
+.ind2px       {text-indent: 2px; }
+.ind3px       {text-indent: 3px; }
+.ind4px       {text-indent: 4px; }
+.ind5px       {text-indent: 5px; }
+.ind6px       {text-indent: 6px; }
+.ind7px       {text-indent: 7px; }
+.ind8px       {text-indent: 8px; }
+.ind9px       {text-indent: 9px; }
+.ind10px      {text-indent:10px; }
+.ind11px      {text-indent:11px; }
+.ind12px      {text-indent:12px; }
+.ind13px      {text-indent:13px; }
+.ind14px      {text-indent:14px; }
+.ind15px      {text-indent:15px; }
+.ind20px      {text-indent:20px; }
+.ind_0-1em    {text-indent:0.1em;}
+.ind_01em     {text-indent:0.1em;}
+.ind_0-2em    {text-indent:0.1em;}
+.ind_0-5em    {text-indent:0.5em;}
+.ind_05em     {text-indent:0.5em;}
+.ind_1em      {text-indent:1em;}
+.ind1em       {text-indent:1em;}
+.ind_1-5em    {text-indent:1.5em;}
+.ind_2em      {text-indent:2em;}
+.ind2em       {text-indent:2em;}
+.ind3em       {text-indent:3em;}
+.ind4em       {text-indent:4em;}
+.ind5em       {text-indent:5em;}
+.ind_0-1emPad1px {text-indent:0.1em;padding:1px}
+.ind_0-5emPad1px {text-indent:0.5em;padding:1px}
+.ind_1emPad1px   {text-indent:1em;  padding:1px}
+.ind_0-1emPad5px {text-indent:0.1em;padding:5px}
+.ind_0-5emPad5px {text-indent:0.5em;padding:5px}
+.ind-1emPad5px   {text-indent:1em;  padding:5px}
 
+/*
+ * This class can be used to simulate a drop-cap effect, via CSS.
+ */
+.dropcap {
+  float: left;
+  font-size: 400%;
+  color: #cf142b;
+  margin: -13px 7px -13px 0;
+}
+
+.ovvis {overflow:visible }  /* always visible                                       */
+.ovhid,
+.ohid,
+.ohidden { overflow:hidden }  /* always cut if is on overflow                         */
+.ovscr {overflow:scroll  }  /* always cut but also allow scrolling                  */
+.ovaut {overflow:auto    }  /* if there is conflict, the browser decides what to do */
 
 /*
- * This can be used to resize an element, such as a <div> tag.
+ * The next line was disabled on 04.05.2022. It conflicts when
+ * we want to set the pre-tag.
+
+pre { font-size: 1.0em;}
+
  */
-.resize {
-  resize: both;
-  overflow: auto;
+
+/* position tags, pos tags, posab tags, posre tags  */
+ /* Beispiel: position:absolute; top:30px gibt an, das das 
+  * Tochterelement 30 Pixel unterhalb des Elternelementes 
+  * beginnt. Note that position: fixed means that the
+  * element will stay at its position even if the user
+  * scrolls about.
+  */
+.pab    {position: absolute;}
+.posab  {position: absolute;}
+.fixed,
+.posfi  {position: fixed;}   /*  absolute positionierung, gemessen am Elternelements. Bleibt beim Scrollen stehen.*/
+.posre  {position: relative;}
+.posrel {position: relative;}
+
+.table_display {
+  display: table;
 }
+
+.table_row {
+  display: table-row;
+}
+
+.table_cell {
+  display: table-cell;
+}

data/lib/cyberweb/cascading_style_sheets/div.css

@@ -1,16 +1,21 @@
 /*  
  * In this file we will gather CSS code for <div> tags.
+ *
+ * Note that until April 2022 the CSS class called shadow_div1
+ * had a width and height setting. This was quite inflexible,
+ * though, so it was removed again.
  */
-.shadow_div1 {
+.shadow_div1,
+.background_shadow,
+.fancy_shadow {
   background-color: #fff;
   padding: 10px;
-  height: 100px;
-  width:  200px;
   border-radius: 4px;
   box-shadow: 0px 0px  5px #ccc;
   box-shadow: 0px 0px 15px #ccc;
   box-shadow: 0px 0px 25px #4d4d4d;
   border: 3px solid #ccc;
+  display: block;
 }
 
 .shadow_div2 {
@@ -23,4 +28,13 @@
   box-shadow: 0px 0px  5px #ccc;
   box-shadow: 0px 0px 15px #ccc;
   box-shadow: 0px 0px 25px #4d4d4d;
-}
+}
+
+.shadow_div_without_restrictions {
+  padding: 8px;
+  box-shadow: 0px 0px  3px #ccc;
+  box-shadow: 0px 0px 12px #ccc;
+  box-shadow: 0px 0px 20px #4d4d4d;
+  border-radius: 3px;
+  border: 3px solid #ccc;
+}