.textarea { display: block; width: 100%; overflow: hidden; resize: both; min-height: 40px; line-height: 20px; font-size:3vw; background:#EEEEEE; color:#000000; padding:5px; } .textarea[contenteditable]:empty::before { content: 'Enter Content'; color: gray; } /* "More" or "less" */ .text { height: 0; overflow: hidden; } .container { position: relative; } label { position: absolute; top: 100%; } --neoninput-color { syntax: ''; inherits: true; initial-value: #bc13fe; } --neoninput-light-color { syntax: ''; inherits: true; initial-value: white; } .neoninput-neonText:focus { color: var(--neoninput-light-color); text-shadow: 0 0 7px var(--neoninput-light-color), 0 0 10px var(--neoninput-light-color), 0 0 21px var(--neoninput-light-color), 0 0 42px var(--neoninput-color), 0 0 82px var(--neoninput-color), 0 0 92px var(--neoninput-color), 0 0 102px var(--neoninput-color), 0 0 151px var(--neoninput-color); } .neoninput-body:focus { font-size: 18px; font-family: "Sacramento", sans-serif; background-color: #010a01; display: flex; } .neoninput-p:focus { font-weight: 400; animation: neoninput-pulsate 1.5s infinite alternate; border: 0.2rem solid var(--neoninput-light-color); border-radius: 2rem; padding: 0.4em; box-shadow: 0 0 .2rem var(--neoninput-light-color), 0 0 .2rem var(--neoninput-light-color), 0 0 2rem var(--neoninput-color), 0 0 0.8rem var(--neoninput-color), 0 0 2.8rem var(--neoninput-color), inset 0 0 1.3rem var(--neoninput-color); } @keyframes neoninput-pulsate { 100% { text-shadow: 0 0 4px var(--neon-light-color), 0 0 11px var(--neon-light-color), 0 0 19px var(--neon-light-color), 0 0 40px var(--neon-color), 0 0 80px var(--neon-color), 0 0 90px var(--neon-color), 0 0 100px var(--neon-color), 0 0 150px var(--neon-color); } 0% { text-shadow: 0 0 2px var(--neoninput-light-color), 0 0 4px var(--neoninput-light-color), 0 0 6px var(--neoninput-light-color), 0 0 10px var(--neoninput-color), 0 0 45px var(--neoninput-color), 0 0 55px var(--neoninput-color), 0 0 70px var(--neoninput-color), 0 0 80px var(--neoninput-color); } } input { color:rgb(0, 0, 0); border-color: rgb(0, 0, 0); } label:after { content: "Show More"; } input:checked + label:after { content: "Show Less"; } input:checked ~ div { height: 100%; } .labeldefault { font-size:large; display:inline; position: static; top:0; } .labeldefault:after { content:normal; } input:checked + .labeldefault:after { content:normal; } /* Above part are css used by other modules */ .TempFullWidthDiv { /* Upgrade Module to use siCards. */ width: 90%; font-size: 5vw; line-height: 1.8; text-align: left; border-style:none; padding:10px; margin:auto; } /* Hyperlink for use as "Trash" */ .LinkTrashbutton { color: #333333; padding: 3px; margin: 2px; font-size: 5vw; } /* Make the usual "underlined" hyperlink look like a button. */ .Linkbutton { font-size: 5vw; text-decoration: none; background-color: #2fc974; color: #fff; padding: 2px 6px 2px 6px; border-top: 1px solid #CCCCCC; border-right: 1px solid #333333; border-bottom: 1px solid #333333; border-left: 1px solid #CCCCCC; border-radius: 15%; } .Linkbutton:hover { background: #EC2951; } .LinkbuttonDiv { display:flex; text-decoration: none; margin:auto; justify-content: center; align-items: center; } .Hyperlink-button-rounded, .Hyperlink-button-rounded-blue, .TextBoxWhite, .Upload, .Header{ color: #fff; display: block; padding: 5px; text-align: center; text-decoration: none; width: 70%; border-radius: 15%; margin:1%; font-size: 4vw; word-wrap: break-word; } .Hyperlink-button-rounded { background: #2fc974; } .Hyperlink-button-rounded-blue { background: #2f74c9; } .TextBoxWhite { background: #FFFFEE; color:black; } .Upload { background: #FFFFDD; color:black; width:auto;} .Header { background: #EC2951; border-radius: 10%; } .Hyperlink-button-rounded:hover, .Hyperlink-button-rounded-blue:hover { background: #EC2951; } .modal { position: fixed; background-color: white; padding: 2%; box-sizing: border-box; border-radius: 3%; top: 10%; left:5%; width: 90%; max-height:80%; height:80%; min-height:20%; z-index: 99999; display: none; } .modal.on { display: inline-block; } .modal-js-overlay { background: #111188; top: 0; left: 0; width: 100%; height: 100%; z-index: 99998; opacity: .5; position: fixed; } .modal-js-close { position: absolute; top: -1%; right: -1%; bottom: 0; width: 40px; height: 40px; padding: 1px; font-size: 22px; font-weight: bold; background: black; color: white; border-radius: 50%; box-shadow: var(--box-shadow); cursor: pointer; text-align: center; } /**************************** below are old css of effects and animations now part of siEffects. ************************/ /* * This css file contains static css. To make it dynamic, transfer them to class siStyles in Common.php .ImageFitFullWidth { width:100%; object-fit: cover; border-style: solid; border-color: red; box-shadow: 5px 10px #333333; } */ /* Image Shake css: Part of si effects (see ShosenEffects.php EffectsEnum). .Shake { width:100%; object-fit: cover; border-style: solid; border-color: red; box-shadow: 5px 10px #333333; } .Shake:hover { animation: shake 0.5s; animation-iteration-count: 1; -webkit-user-select: none; -webkit-touch-callout: none; } @keyframes shake { 0% { transform: translate(1px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 30% { transform: translate(3px, 2px) rotate(0deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 50% { transform: translate(-1px, 2px) rotate(-1deg); } 60% { transform: translate(-3px, 1px) rotate(0deg); } 70% { transform: translate(3px, 1px) rotate(-1deg); } 80% { transform: translate(-1px, -1px) rotate(1deg); } 90% { transform: translate(1px, 2px) rotate(0deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); } } */ /* Can delete if found not used. .row::after { content: ""; clear: both; display: table; } */ /* Flip image to show context. Part of si effects (see ShosenEffects.php EffectsEnum) .flip-box { background-color: transparent; width: 100%; height:100%; perspective: 1000px; margin: 1.3% 4%; } .flip-box-inner { position: relative; width: 92%; height:100%; text-align: center; transition: transform 0.8s; transform-style: preserve-3d; } .flip-box:hover .flip-box-inner { transform: rotateY(180deg); } .flip-box-front, .flip-box-back { position: absolute; top:2%; left:2%; width: 95%; height:80%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .flip-box-front { background-color: #bbb; color: black; font-size: 5vw; } .flip-box-back { background-color: dodgerblue; color: white; transform: rotateY(180deg); font-size: 4vw; padding-left: 1%; padding-right: 1%; } */ /* *********** Move Image to upper right then show Text */ /* Study: "MoveImgTopRight" and "MoveImgTopRightEffect" defines the "Class" name so that
uses this css. ".MoveImgTopRight p, .MoveImgTopRight h2" defines the

and

together because the traits are same. ".MoveImgTopRight p" makes a slight difference between

and

where

uses x-Large font-size while

uses xx-Large; and the margin-left for

is 5% to the right. ".MoveImgTopRightEffect img.MoveToTop:hover" defines the final position of the top when hover over, and ".MoveImgTopRightEffect img" defines how the is to animate: for "top", ease-in-out in 4s. .MoveImgTopRight { position:absolute; top:10%; left:0; width:100%; height:100%; display:block; overflow:hidden; float:left; padding-right:5%; background-color:rgba(26,76,110,0.5) } .MoveImgTopRight p, .MoveImgTopRight h2 { color:#fff; padding:10px; left:2%; top:1%; position:relative } .MoveImgTopRight p { font-size: 4vw; margin-left:5%; margin-top:0; } .MoveImgTopRight h2 { font-size: 5vw; margin:0; } .MoveImgTopRightEffect img { position:absolute; margin:0; right:0; top:0;width:100%;height:100%; cursor:pointer; -webkit-transition:top .4s ease-in-out,right .4s ease-in-out; -moz-transition:top .4s ease-in-out,right .4s ease-in-out; -o-transition:top .4s ease-in-out,right .4s ease-in-out; transition:top .4s ease-in-out,right .4s ease-in-out } .MoveImgTopRightEffect img.Image_MoveToTop:hover { top:-100%; right:-100%; padding-bottom:200px; padding-left:300px; } */