Some css

[MacNaab]

I would like to offer you some cursor's suggestion for your css. It's obviously your creation this is simply proposals, do what you want. Note: I didn't know where to post this message so I put it here.

#backgroundBtn {
  cursor: pointer;
}
#donatebtn{
  cursor: pointer;
}
#hierarchylist-container{
  cursor: pointer;
}
.node-icon {
  cursor: grab;
}
#mapdiv {
  cursor: crosshair;
}

Maybe add cursor: grabbing; to .node-icon when grabbing and change the cursor for the top navbar?

[Bonkahe]

I am currently taking care of school stuff and rl things, I will see about this when I can, might be a day or two. Thank you!

[MacNaab]

Take your time. It's absolutely not urgent, IRL first !

[MacNaab]

I also have another suggestion: Add:

#hierarchylist-container .hierarchylist-open:before {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: left;
  margin-right: 5px;
}
#hierarchylist-container .hierarchylist-close:before {
  content: "\2212";
  color: white;
  font-weight: bold;
  float: left;
  margin-right: 5px;
}

And removing:

#hierarchylist-container .hierarchylist-open {
    background-image: url(./images/OpenBtn.png);
}
#hierarchylist-container .hierarchylist-close {
    background-image: url(./images/CloseBtn.png);
}

Maybe change your scrollbar for something smoother like:

/* width */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: white; 
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: whitesmoke; 
}

[Bonkahe]

Ok so for the first chunk of css changes I took everything you said except for hierarchylist-container and mapdiv, it made the pointer button for the entirety of the window, instead I made it only apply on items withing the hierarchy. Mapdiv interferes with the other custom cursors, so for now I'll leave it alone, I might just modify the custom cursors to make them more stylish, I'm open to any suggestions for that though! I communicated with my co-author and she agreed with the opening and closing buttons for children, so that's in. All the changes to the scrollbar were 100% an improvement, thank you so much man! Changes will be in the latest build, along with the new features.

[MacNaab]

Ok, it was just small tests that I did on my side, I'll leave it up to you to improve it! No problem with you new features on my side. After a few tests, I think scrollbar would be better if you remove:

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}

But it's your choice

[Bonkahe]

After a little switching it back and forth I am inclined to agree with you, I changed it back, if you get a chance check out the search function as well as the broken links tools in the options menu, (you might not have any broken links but if you do they will show up in that window when you load a project), and let me know what you think!

[MacNaab]

Nice options ! I love this search function, as I said in the issue #9 I don't have any broken links but it's good to know. New suggestions here (for your editor.css this time):

button {
  border: none;
  border-radius: 10px;
  color: white;
  cursor: pointer;
  transition: 0.5s;
}
button:focus {
     outline:none;
     box-shadow: 0 0 2pt 1pt grey;
}

select{
    border-radius: 5px;
    transition: 0.5s;
}
select:focus{
    border-radius: 5px 5px 0 0;
}

Note: you can try to change de border-radius and box-shadow value

[Bonkahe]

Hmmm in this particular case I think I prefer the way the buttons are, I kinda like the box-y nature of them, I will ask my partner what she thinks of it though.

[MacNaab]

Sure ! I'm talking about Options windows's menu not the main, but I don't understand what you mean by "box-y nature" ?

[Bonkahe]

Just like the buttons themselves when I apply that css end up a bit to rounded for my liking. As opposed to;

[MacNaab]

Oh ok ! If you like the style but they are to rounded you can edit the

button {
  border-radius: 10px;
}

Maybe 5px or 3px can be better?

[Bonkahe]

Ok I ended up with this:

button {
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: 0.5s;
}
button:focus {
     outline:none;
     box-shadow: 0 0 2pt 1pt grey;
}

select{
    border-radius: 2px;
    transition: 0.5s;
}
select:focus{
    border-radius: 2px 2px 0 0;
}

I dropped the border radius to 2px across the board and left the text black, what do you think?

[MacNaab]

That's fine, It's more homogeneous with the select. What de you think when you click on the button ? (And on the select too)

[Bonkahe]

Hmm only problem is it stays after you click it, only going away once you click off, not sure 100% how I feel about that. It looks super smooth and stylish though.

[MacNaab]

This is due to the

:focus

You can change it for another CSS Selector if you want PS: You can have a list of selector here

[MacNaab]

Hmm only problem is it stays after you click it, only going away once you click off, not sure 100% how I feel about that. It looks super smooth and stylish though.

To correct this use the following code:

button {
  border: none;
  border-radius: 2px;
  cursor: pointer;
    transition: 0.5s;
}
button:active {
     outline:none;
     box-shadow: 0 0 2pt 1pt grey;
     transform: translateY(4px)
}
button:focus {
     outline:none;
}

I also have another suggestion:

.colorbox{
    border:none;
    border-radius: 2px;
    outline:none;
    box-shadow: 0 0 2pt 1pt grey;
}
#secondaryhighlight{
  margin-bottom:5px;
}

[MacNaab]

PS: At first I thought of something but I can't test it (I can't modify the .html) so I'll let you see what it gives: Replace:

            <br>
            <p>Primary button color:</p>
            <input class="colorbox" id="primarycolor" data-jscolor="{value:'#E6A255', onChange: 'valuesChanged()'}">
            <p>Primary button on hover color:</p>
            <input class="colorbox" id="primaryhighlight" data-jscolor="{value:'#f5a64c', onChange: 'valuesChanged()'}">
            <br>
            <p>Secondary button color:</p>
            <input class="colorbox" id="secondarycolor" data-jscolor="{value:'#e05840', onChange: 'valuesChanged()'}">
            <p>Secondary button on hover color:</p>
            <input class="colorbox" id="secondaryhighlight" data-jscolor="{value:'#f75c41', onChange: 'valuesChanged()'}">
            <br>

By:

<div class="grid-container-2">
  <div>
            <p>Primary button color:</p>
            <input class="colorbox" id="primarycolor" data-jscolor="{value:'#E6A255', onChange: 'valuesChanged()'}">
  </div>
  <div>
            <p>Primary button on hover color:</p>
            <input class="colorbox" id="primaryhighlight" data-jscolor="{value:'#f5a64c', onChange: 'valuesChanged()'}">
  </div>
</div>
<div class="grid-container-2">
          <div>
            <p>Secondary button color:</p>
            <input class="colorbox" id="secondarycolor" data-jscolor="{value:'#e05840', onChange: 'valuesChanged()'}">
          </div>
          <div>
            <p>Secondary button on hover color:</p>
            <input class="colorbox" id="secondaryhighlight" data-jscolor="{value:'#f75c41', onChange: 'valuesChanged()'}">
          </div>
</div>

.colorbox{
    width: 170px;
}
@media only screen and (max-width: 175px) { /* If the screen size is less than 175px */
  .grid-container-2 {
    display: grid;
    grid-template-columns: 100%;
  }
}
@media only screen and (min-width: 175px) { /* If the screen size is larger than 175px */
  .grid-container-2 {
    display: grid;
    grid-template-columns: 50% 50%;
  }
}

[Bonkahe]

Ok so the css from the first one I implemented and it looks fantastic! I did remove the translate, mainly because if I was to implement that I would need to probably implement it everywhere, and I don't think it fits personally. For the other post that styling runs into some heavy issues when scaling:

Where as the original looks a little dorky, but it continues to look the exact same level of dorky all the way down ;)

[Bonkahe]

I also implemented those styling changes to the buttons on the character generator as well as the spline tools.

[MacNaab]

Oh I think I found it! In fact you have to know what is the width of your

<input class="colorbox ...>"

Edit: I thought he was fixed, this is why it's 175px, but i think it is relative to user's screen size. And put this value for the max-width and min-width in your CSS

@media only screen and (max-width: 175px) {

Look at the result that it gives to me:

[Bonkahe]

Ok, so I changed quite a few things, but it came down to the entry fields, due to the padding and margins that they inherit from the jscolor widget they don't scale at an even amount to the screen width, but the result I got is very appealing, I'll push out a minor update, have a look and see if it's what you were thinking.

[MacNaab]

That's nice, I think that's all folk! Maybe reuse the scrollbar in Window (option, character) ?

[Bonkahe]

Should be done in the latest version!