Add snippet - cubic discord variant

Davr1 · Davr1 · commit 53f2b2c7d1d7 · 2022-04-10T09:45:42.000+02:00
diff --git a/README.md b/README.md
@@ -95,11 +95,15 @@ Script used for generating the css: [https://gist.github.com/Davr1/42e64ec0b2ae4
   <img src="https://cdn.discordapp.com/attachments/692065688524816475/934430983934050374/unknown.png" width="49%">
 </p>
 
+---
+
 ### [Revert italics](/snippets/revert_italics.css?raw=true)
 Brings back the old slanted text design
 
 <img src="https://cdn.discordapp.com/attachments/873972327849807932/962276815756472340/revert_italics.png" width="50%">
 
+---
+
 # Other
 
 ### [Cubic discord](/snippets/cubic_discord.css?raw=true)
@@ -109,6 +113,13 @@ Turns discord into a spinning cube. firefox only.
 
 ---
 
+### [3D discord variant](/snippets/cubic_discord_var.css?raw=true)
+Same as above, but this one is actually usable.
+
+![](https://cdn.discordapp.com/attachments/692065688524816475/962618240075456552/unknown.png)
+
+---
+
 ### ~~[Channel view switch](/snippets/channel_view_switch.css?raw=true)~~ [DEPRECATED](https://github.com/Discord-Datamining/Discord-Datamining/commit/b1817ee338fd46ca49bed78c543eebf054380761#commitcomment-64133576)
 
 ![](https://cdn.discordapp.com/attachments/692065688524816475/909111815584239646/unknown.png)
diff --git a/snippets/cubic_discord_var.css b/snippets/cubic_discord_var.css
@@ -0,0 +1,61 @@
+html {
+    display: flex;
+    background: black;
+    --cube-width: 65vw;
+    --cube-height: 75vh;
+    perspective: 650px;
+}
+html::after {
+    content: '';
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    background: radial-gradient(transparent 80%, #0008);
+    pointer-events: none;
+}
+body {
+    width: var(--cube-width);
+    height: var(--cube-height);
+    margin: auto;
+    transform-style: preserve-3d;
+    background: transparent;
+    resize: both;
+}
+#app-mount::after {
+    content: '';
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+    pointer-events: none;
+    background: radial-gradient(transparent 10%, #0003), radial-gradient(transparent 85%, #0005);
+    box-shadow: inset 0 0 80px 40px #0005;
+}
+#app-mount+*, #app-mount+*+*, #app-mount+*+*+*, #app-mount+*+*+*+* {
+    display: block;
+    position: absolute;
+    font-size: 0;
+    pointer-events: none;
+    background: -moz-element(#app-mount);
+    inset: 0;
+    filter: brightness(0.75) saturate(0.8);
+}
+#app-mount+* {
+    transform: rotateY(-90deg) translateZ(calc(var(--cube-width)/-2)) translateX(calc(var(--cube-width)/2));
+    box-shadow: inset 100px 0 200px #0004;
+}
+#app-mount+*+* {
+    transform: rotateY(90deg) translateZ(calc(var(--cube-width)/-2)) translateX(calc(var(--cube-width)/-2));
+    box-shadow: inset -100px 0 200px #0004;
+}
+#app-mount+*+*+* {
+    transform: rotateX(90deg) translateZ(calc(var(--cube-height)/-2)) translateY(calc(var(--cube-height)/2));
+    box-shadow: inset 0 100px 200px #0004;
+}
+#app-mount+*+*+*+* {
+    transform: rotateX(-90deg) translateZ(calc(var(--cube-height)/-2)) translateY(calc(var(--cube-height)/-2));
+    box-shadow: inset 0 -100px 200px #0004;
+}
+.drag-previewer, .drag-announcer {
+    pointer-events: none;
+}
