propjockey/augmented-ui

Cyberpunk-inspired web UI made easy. Get augmented.

PropJockey

not yet ready for use

augmented-ui's Issues

Is it possible to make this compatible with drop shadow?

Hi, first I just wanted to say this is great work, the library is amazing and very well documented. So many cool little features that are fun to play with.

I was hoping that I could use box-shadow with some of the elements created with the library (I'm using the additional splice script in order to make it work with nth-of-type css logic) and I was hoping to have some sort of drop shadow effect applied to some of the elements, but it keeps disappearing on load. I'm assuming this is because some of the effects use the box-shadow feature? But I'm not sure. I was wondering if there was any way to create a drop shadow effect using the tools in the library. If not, can I add that as a future feature request?

Thanks!

Invalid CSS in #230

Love augmented-ui so far. However, I'm using it in a Heroku build (React) and I'm getting a parsing error. Deployment to Netlify and AWS produced the same error.

Line 230:

--aug-_TOriginX: calc(var(--aug-t-origin-x, calc(var(--aug-_TlJoinRX, 0px) / 2 + var(--aug-_TrJoinLX, 100%) / 2)) + var(--aug-t-offset, 0px));

Heroku Log:

...n-x, calc(var(--aug-_TlJoinRX, 0px)/2 + var(--aug-_TrJoinLX, 100%)/2)) + var(--... ----------------------------------------------------------------------------^ Expecting end of input, "ADD", "SUB", "MUL", "DIV", got unexpected "RPAREN"

(For the sake of clarity due to formatting of that code snippet: the log is referencing the second parentheses after the last 2 on line 230).

There are similar lines with deeply nested calc() statements that create the same issue (i.e. 249, 268, 287, 584, 628).

How to combine augmented-ui and glow?

Hey, I appreciate the toolbox you provide and I am looking to incorporate it in a recent project.

So far I failed to combine your framework with CSS glow effects on borders.
I figured it should be done using drop-shadow as of #7, but I still have the following two problems:

1. how to use the clip-path border shape polygon to leave the interior unaffected, i.e. fully transparent and
2. how to control shadow intensity (from the border outwards to customize the glow).

The latter probably does not relate to augmented-ui, but rather shows my insufficient CSS expertise. I include it here as I feel there might be related knowledge necessary. Also in my current test case it looks like the drop-shadow filter was inherited by all nested elements, but this might also just be an effect occurring due to the missing clipping as of 1. and my specific transparency properties.

I appreciate any hints. Keep it up!

VS Code seems to support the leading comma syntax now

I was reading through the docs (thanks for this cool library btw, using it on a personal project) and in the section about ecosystem compatibility you mention that there is a compatibility issue with VS Code and link to a particular issue in the VS Code repo. That issue was resolved and verified at the end of 2020 and I have confirmed that it is working in VS Code today without any issues. Just letting you know the docs can get updated!

Invalid CSS in 1176, 1248, 1299

I am using augmented-ui with vue (and its cli-service). The problematic pattern is repeated in the three lines:
(--foo: , 0 0)

If I delete the commas, then the problems gone.

Old CDN link is broken

Hello,

We have an application that was using the CDN link from the prior version - https://unpkg.com/augmented-ui/augmented.css

This is no longer working. Is there an updated link?

Also, posting here because this may have affected others.

Thank you

Stops working when toggling "display: none" on element

First of all, amazing library! :)

It seems that an augmented element stops working when you toggle display: none on the element.

This seems to happen only when display: none is added directly in the html element itself inside a style tag.

Like this:

<div augmented-ui="t-clip-x exe" style="display: none">

and then remove it:

<div augmented-ui="t-clip-x exe">

Any idea what might be causing this?

Safari seems to render with visual artifacts

Hi there, thanks for the great lib, loving it so far!

We develop our full project around it and it really gives a nice touch with ease. When we tried it on Safari thought it seemed to render with some unwanted effects.

I tried to remove all the other CSS that might interfere with it to no avail.

(the website in question: https://hirex-game.io/)

Actual wanted result on chrome and firefox:

Visual artifacts with Safari:

I tried to inspect one by one the CSS variables and as mentioned removing all possible interfering CSS but nothing worked.

Tried the CDN and Module version but nothing so far...

Any help would be greatly appreciated! Thank you!

ps: @JaneOri I added you on discord too if you want to chat over there too.

CSS display: scroll seems to break data-augmented-ui divs

Discussed in #18

^{Originally posted by nathanoday January 31, 2024}
Hi All, I'm creating a website for a university class and excited to use the autmented-ui pack; really incredible work you've created. I'm trying to use a data-augmented-ui div to create a Star Wars-esque datapad frame around my main content area. However, I'm having trouble with overflow content not being scrollable.

HTML Snippet

<div data-augmented-ui="tl-clip-x t-clip tr-clip-x r-clip br-clip-x b-clip bl-clip-x l-clip both" class="datapadFrame">
<div class="mainArea">
... site content ...
</div>
</div>

CSS Snippet

.datapadFrame{ z-index: -10; height: 80vh; overflow-y:scroll; }

.mainArea { padding: 25px; z-index: 300; }

Screenshot

As you can see from my screenshot and associated HTML + CSS snippets, the main content area is nested inside of the .datapadFrame div, but with overflow: scroll set, the shape mask on the border is broken via offset (I think because of the presence of the scrollbar appearing), and, the scrolling doesn't actually work. There's a lot more content in the .mainArea div that should be displaying but can't because the .datapadFrame div isn't scrollable. Am I missing something simple here? Would it be better to make the datapadFrame a fixed position background layer and not try to contain the mainArea div inside it?

Thanks for taking a look!

Needs inset-bg-size

There is --inset-bg, but there's no --inset-bg-size for the background-size property.

Outline/border is cut off on long item in Chrome (Android)

I'm having a problem that only shows up in mobile on Chrome - I have a long section (my resume) on my site, and the border cuts off partway down. I can't for the life of me figure out why . . .

My site: https://www.kyds3k.com

This is such an amazing library

Holy smokes, what a fantastic idea and brilliant execution - also love the website! Thank you so much for creating this. As a long-time cyberpunk genre enthusiast this definitely scratches an itch. Love it <3

Unexpected inlay clipping

I am continuing the following issue here:

2. In order for the separate inlay to respect the border when they're split up, you'll have to manually add the --aug-border-[pos] values to the --aug-inlay-[pos] values. Inlay does not consider any of the border values unless the border is enabled.
   You could just add both on the inlay instead and give the border a transparent bg, but it's already pretty heavy so that's a trade off for your consideration

Originally posted by @James0x57 in propjockey/aug-compile#1 (comment)

Manually adding the values worked in my case.

The both option did not help as the interior was still overlapping the boundary (or at least a gap I'd like to have between inlay and border).(I am not confident that I tested that thorougly, either way I felt like I end up setting the variables anyway, which already does the trick without transparent border.)
I suppose my problem is related to the background property being set on an inlay-augmented element not behaving the same as if I was invoking --aug-inlay-bg.

As the manual adding is working and I managed to work around the background issue, this issue is not pressing by any means ;).

Augmented-UI interface

I wonder what could be the use case for --aug-inlay-bg. Is it just technical to get hold of the value as it cannot be read from the actual background property? If not, then the same could be done for the border which could decrease the amount of exposed css variables by a lot (and rely on border, background, padding only, merely extending it by your clipping system). From my current viewpoint, the augmented-ui interface would be cleaner if it would behave like a css element in content-box mode w.r.t. the background.

Disclaimer

Let me re-emphasize that you already helped me a ton and that in general I am satisfied with the results. I start nitpicking now as this has sparked some interest on my side and I am probably abusing the issue functionality for that. Maybe this outside input helps you to advance your module, which would be awesome. Maybe I start getting on your nerves, then I don't mind if you just drop this ;)