[3.0] Theme

[live627]

This is the new theme started by @twitchismental

I still need to convert several form grids to use CSS grids instead of floats. Also the grids abuse definition list markup, something tat has always annoyed me from the very beginning.

Submitting as a draft now to get early feedback.

[live627]

I notice that a few forms would disable textareas on submit, such as the posting form. I've changed this to do all forms by using the new HTML property to make the entire form inert.

[dragomano]

Icons in the admin area are not indented enough:

Unable to load the '' template at Forum Maintenance - Routine:

SCEditor doesn't have a dark theme?

Instead of "X Posts" and "Y Topics", maybe it would still be better to keep "Posts: X" and "Topics: Y" as it is now?

[DiegoAndresCortes]

Icons in the admin area are not indented enough:

I’m working on this

SCEditor doesn't have a dark theme?

Can be fixed later too, but also requires some tweaks. Check this topic: https://www.simplemachines.org/community/index.php?topic=586626.0

Instead of "X Posts" and "Y Topics", maybe it would still be better to keep "Posts: X" and "Topics: Y" as it is now?

I don’t have a preference, we might discuss it later for sure.

[jdarwood007]

@live627 Can you rebase this or merge and fix conflicts?

[DiegoAndresCortes]

We have this pending https://github.com/live627/SMF2.1/pull/44

Will start sending more in upcoming weeks, but it could be merged, rest of changes are more focused so can be in separated PR's

[live627]

Once I can get around to testing and merging that, I'll rebase this branch again

[live627]

@jdarwood007 I moved some of the login javascript to its own file but don't know how to test cors requests.

[jdarwood007]

When this is closer to ready I can check it. You need to run 2 domains (or 2 subdomains) and have the forum on one and the script on another. A simple SSI page where you can open the user area popup is good enough for most things. Sending credentials such as on the login form may also need to be tested, but when you can open the user area, the CORS request works.

[live627]

this latest commit adds support for either light or dark mode from system preferences—it does indeed change once I enable Dark Evil Computer Mode in Windows 10. @DiegoAndresCortes get to work ya scrub :P haha

Also we probably have too many variables. The ones for padding can be hardcoded.

[DiegoAndresCortes]

Awesome, I’ll check it out soon!

@jdarwood007 vouched for that monstrous amount of variables so he should decide 🤣

[live627]

@jdarwood007 vouched for that monstrous amount of variables so he should decide 🤣

I'm probably going to write a script soon that hardcodes the variables soon since the increased filesize is annoying me. That, and no instructions means that I get to do it MY way 😈

[DiegoAndresCortes]

I could do it manually later, I'm already fixing more issues that I discovered.

[DiegoAndresCortes]

Only use case I see for this would be something like:

Regular CSS:

.action_profile footer {
  padding-block: 70px;
}

Variables:

.action_profile {
  --footer-padding-block: 70px;
}

Or you know, modifying a cascade of elements with little effort, it's not an epic benefit from my pov.

[DiegoAndresCortes]

windowbg has various good use cases so I'll keep it on that one.

[jdarwood007]

Not all elements need to be variables. Typically I see it with things that handle colors, so dark/light mode is easy. High contrast mode is also possible—none need to be redefined border sizes, widths, padding/etc.

[dragomano]

Have you ever thought of using Tailwind CSS? It would give more opportunities for everyone.

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    /* Base vars */
}

/* Base classes */
@layer components {
    .button {
        @apply inline-block px-2 py-1 text-gray-600 text-xs uppercase cursor-pointer min-h-[calc(2em+2em*(0.9-0.85))] border border-gray-300 rounded shadow-sm box-border align-middle;
    }
    
    /* etc ... */
}

[DiegoAndresCortes]

I’m not particularly interested as I don’t use it, and our CSS is still maintainable, just unorganized.

I do think layers could be useful now that you bring this up though.

[DiegoAndresCortes]

Icons in the admin area are not indented enough:

Been looking at this today. What do you think of this instead?

[DiegoAndresCortes]

can i haz rebase next week