aboutsummaryrefslogtreecommitdiff
path: root/ps/ui/css/screen.css
diff options
context:
space:
mode:
Diffstat (limited to 'ps/ui/css/screen.css')
-rw-r--r--ps/ui/css/screen.css411
1 files changed, 411 insertions, 0 deletions
diff --git a/ps/ui/css/screen.css b/ps/ui/css/screen.css
new file mode 100644
index 0000000..802c20a
--- /dev/null
+++ b/ps/ui/css/screen.css
@@ -0,0 +1,411 @@
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+body {
+ background: url(../img/logo-ps.svg) center center / contain no-repeat fixed, rgba(0,0,0,0.97);
+ color: rgba(250,250,250,1);
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+}
+
+body.grid {
+ position: absolute;
+ width: 16800px;
+ height: 10500px;
+}
+
+body.grid .viewport {
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+ display: grid;
+ grid-template-columns: repeat(10, 1fr);
+ grid-template-rows: auto;
+ grid-template-areas: "border-top-left border-top border-top border-top border-top border-top border-top border-top border-top border-top-right"
+ "border-left main main main main main main main main border-right"
+ "border-left main main main main main main main main border-right"
+ "border-left main main main main main main main main border-right"
+ "border-left main main main center center main main main border-right"
+ "border-left main main main center center main main main border-right"
+ "border-left main main main main main main main main border-right"
+ "border-left main main main main main main main main border-right"
+ "border-left main main main main main main main main border-right"
+ "border-bottom-left border-bottom border-bottom border-bottom border-bottom border-bottom border-bottom border-bottom border-bottom border-bottom-right";
+}
+
+body.grid section.view {
+ position: relative;
+ top: 0;
+ left: 0;
+ width: 1680px;
+ height: 1050px;
+ background: rgba(250, 240, 20, .4);
+ display: block;
+ float: left;
+ grid-area: main;
+ border: 1px solid;
+}
+body.grid section.view:nth-child(odd) {
+ background: rgba(250, 240, 20, .8);
+}
+body.grid section.view:nth-child(10n+0)::after {
+ display: table;
+ content: '';
+ clear: both;
+}
+
+body.grid section.view.center {
+ grid-area: center;
+ background: rgba(255,120,20, .8);
+}
+
+body.grid section.view:nth-child(10n) {
+ grid-area: border-right;
+ background: rgba(255,120,20, .6);
+}
+body.grid section.view:nth-child(10n):first-child {
+ grid-area: border-top-right;
+ background: rgba(255,120,20, .7);
+}
+body.grid section.view:nth-child(10n):last-child {
+ grid-area: border-bottom-right;
+ background: rgba(255,120,20, .7);
+}
+
+body.grid section.view:nth-child(10n+1) {
+ grid-area: border-left;
+ background: rgba(255,120,20, .6);
+}
+body.grid section.view:nth-child(10n+1):first-child {
+ grid-area: border-top-left;
+ background: rgba(255,120,20, .7);
+}
+body.grid section.view:nth-child(10n+1):last-child {
+ grid-area: border-bottom-left;
+ background: rgba(255,120,20, .7);
+}
+
+#info {
+ position: fixed;
+ top: 10rem;
+ left: 10rem;
+ width: 42rem;
+ min-height: 19rem;
+ z-index: 99;
+ padding: 1rem;
+ background: rgba(0,0,0,.75);
+ border: 1rem solid rgba(140,160,100,1);
+ border-radius: 2rem;
+ border-top-left-radius: 0;
+ display: block;
+ color: blue;
+ opacity: 0.25;
+}
+
+#info.on {
+ color: black;
+ opacity: 1;
+ transition: all 2s ease-out 0s;
+}
+#info.on::after {
+ display: block;
+ content: 'Information Panel';
+ text-align: center;
+ font-family: 'Cormorant Garamond';
+ font-weight: bold;
+ font-size: 2.4rem;
+ position: relative;
+ top: -5rem;
+}
+
+#info ul.features li::before {
+ content: attr(data-feature) + ' is: NOT SUPPORTED.';
+ color: #f00;
+ display: block;
+}
+#info ul.features li::after {
+ content: attr(data-feature) + ' is: DISABLED.';
+ color: #c00;
+}
+
+.slides {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ overflow-x: hidden;
+ overflow-y: auto;
+ perspective: 30rem;
+ perspective-origin: 100% 100%;
+}
+
+.slide, .slide-content {
+ transform-style: preserve-3d;
+ transform: translateZ(0); /* hw accel */
+}
+.slide-bg {
+ transform: translateZ(-20rem) scale(1.5);
+ transform-origin: 100% 100%;
+ background-image: repeating-linear-gradient( rgb(102, 204, 102), rgb(102, 204, 102) 30px, rgb(92, 184, 92) 30px, rgb(92, 184, 92) 60px );
+}
+
+
+.vdo {
+ position: absolute;
+ top: 0;
+ left: 0;
+ margin: 0 auto;
+ vertical-align: center;
+ width: 100%;
+ height: 100%;
+}
+
+
+
+/* Only add parallax effects to supporting browsers -- http://keithclark.co.uk/articles/practical-css-parallax/ */
+@supports ((perspective: 1px) and (not (-webkit-overflow-scrolling: touch))) {
+
+ #info ul.features li::before {
+ content: attr(data-feature) + ' is: SUPPORTED.';
+ color: #0c0;
+ }
+ @media screen and (min-width: 45em) {
+ #info ul.features li::after {
+ content: attr(data-feature) + ' is: ENABLED.';
+ color: #090;
+ }
+ }
+
+ body {
+ transform: translateZ(0px); /* Fix paint bugs on Edge and HW accel on Safari */
+ overflow: hidden;
+ }
+
+ body.grid {
+ perspective: auto;
+ transform-origin: center center;
+ transform: translateZ(0);
+ perspective: 150rem;
+ transform-origin: top left;
+ }
+
+ body.shift {
+ animation: colorshift 5s 3s 3 ease-in-out;
+ perspective: 1px;
+ transform-origin: center center;
+ }
+
+ .vdo {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: calc(100% + 0px);
+ height: calc(100% + 0px);
+ margin: auto;
+ z-index: 9;
+ }
+
+ .vdo .player {
+ position: relative;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ display: block;
+ opacity: 0.25;
+ }
+ .vdo .player:hover {
+ transition: all 3s ease-out;
+ opacity: .95;
+ }
+
+ .vdo .player video {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ opacity: 1;
+ }
+
+
+
+
+
+
+ .anim {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ z-index: 1;
+ background: green;
+
+ transition:
+ top 3s cubic-bezier(.34,.63,.26,.94),
+ left 3s cubic-bezier(.34,.63,.26,.94),
+ transform 1s linear;
+ }
+
+
+
+ .anim.container {
+ position: relative;
+ top: 10rem;
+ left: 10rem;
+ width: 10rem;
+ height: 10rem;
+ background: green;
+
+ transform: rotateX(90deg);
+ transform-style: preserve-3d;
+ overflow: visible;
+
+ transition:
+ top 3s cubic-bezier(.34,.63,.26,.94),
+ left 3s cubic-bezier(.34,.63,.26,.94),
+ transform 1s linear;
+ }
+
+ div.butterfly {
+ transform-style: preserve-3d;
+ position: absolute;
+ top: calc(7.5rem);
+ left: calc(50% - 7.5rem);
+ display: block;
+ width: 15rem;
+ height: 15rem;
+ border: 1px solid white;
+ border-radius: 50%;
+ animation: moveXY 2s infinite ease-out;
+ transform-origin: center center;
+ }
+ .wing {
+ transform-style: preserve-3d;
+ animation: flap 1.2s linear infinite alternate;
+ background: radial-gradient(ellipse at center, rgba(252, 180, 100, 0.9) 32%,rgba(28, 92, 42, 0.9) 100%);
+ display: block;
+ position: relative;
+ top: 30%;
+ margin-top: -1.5rem;
+ padding: 1rem;
+ border-bottom: 0.2rem solid green;
+ width: 6rem;
+ height: 8rem;
+ border-radius: 50%;
+ }
+ .rear.wing {
+ transform: scale(1.5);
+ margin-top: -6rem;
+ width: 5rem;
+ height: 10rem;
+ background: radial-gradient(ellipse at center, rgba(252, 180, 100, 0.9) 2%,rgba(28, 92, 42, 0.9) 100%);
+ }
+ .rear.left {
+ left: calc(50% - 5rem);
+ }
+ .rear.right {
+ left: calc(50% + 0px);
+ }
+ .left {
+ transform-origin: right center;
+ left: calc(50% - 6.2rem);
+ float: left;
+ }
+ .right {
+ transform-origin: left center;
+ left: calc(50% + 2px);
+ }
+
+
+ .triangle-left{
+ width: 0;
+ height: 0;
+ border-top: 50px solid transparent; /* this will fill the top gap */
+ border-right: 100px solid red; /* this will be the red triangle */
+ border-bottom: 50px solid transparent; /* this will fill the bottom gap */
+ }
+
+ .triangle-right {
+ width: 0;
+ height: 0;
+ border-top: 50px solid transparent; /* this will fill the top gap */
+ border-left: 100px solid red; /* this will be the red triangle */
+ border-bottom: 50px solid transparent; /* this will fill the bottom gap */
+ }
+
+ .entry {
+ position: relative;
+ min-height: 40rem;
+ text-align: center;
+ }
+
+ .entry div {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ }
+ .entry div::before,
+ .entry div::after {
+ position: absolute;
+ content: '';
+ display: block;
+ }
+
+ #building::after {
+ padding: 5rem;
+ content: 'Singularités';
+ left: -0.5rem;
+ top: 3.5rem;
+ color: #faf37e;
+ overflow: hidden;
+ font-size: 2.3rem;
+ text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 25px #ffa500, 0 0 40px #ffa500, 0 0 60px #f00, 0 0 80px #f00, 0 0 105px #f00;
+ }
+
+
+
+ @keyframes colorshift {
+ 58% { background-color: rgba(77,13,158, .95); }
+ }
+
+ @keyframes shake {
+ 0% { background-position: 50% 50%; transform: scale(1,1); }
+ 45% { background-position: 45% 50%; transform: scale(.085,.095); }
+ 75% { background-position: 50% 45%; }
+ 100% { background-position: 50% 50%; transform: scale(1,1); }
+ }
+
+ @keyframes moveX {
+ 0% { transform: translateX(0%); }
+ 100% { transform: translateX(100%); }
+ }
+
+ @keyframes moveY {
+ 0% { transform: translateY(0%); }
+ 100% { transform: translateY(100%); }
+ }
+
+ @keyframes moveZ {
+ 0% { transform: translateZ(0%); }
+ 100% { transform: translateZ(100%); }
+ }
+
+ @keyframes moveXY {
+ 0% { transform: translateX(0) translateY(0) translateZ(0) rotateX(45deg) rotateX(0); }
+ 50% { transform: translateX(-20rem) rotateX(-15deg) translateY(30rem); translateZ(1rem); rotateY(2deg); }
+ 100% { transform: translateX(0) translateY(-20rem) translateZ(-1rem) rotateX(45deg); }
+ }
+
+ @keyframes flap {
+ 0% {
+ transform: rotateY(80deg);
+ }
+ 100% {
+ transform: rotateY(-80deg);
+ }
+ }
+
+} /* Parallax Stuff */
+
generated by cgit v1.2.3 (git 2.39.1) at 2024-05-20 03:06:53 +0000