WorkFlowy WIDE Sliding Page for 1920x1080 Screen Res (FHD) (1080p) 🙌 by Styling

/* ==UserStyle==
@name         WorkFlowy WIDE Sliding Page for 1920x1080 Screen Res (FHD) (1080p) 🙌
@version      20230513.06.21
@namespace    userstyles.world/user/Styling
@description  Does what it says on the tin (this dynamically adjusts the page width as the browser width changes).

The example shown in the thumbnail was made with WorkFlowy's Vintage theme found at WorkFlowy Settings > Appearance.
@author       Styling
@license      CC BY-NC-SA 4.0
==/UserStyle== */

@-moz-document url-prefix("https://workflowy.com") {
/* WF ☚☚☚☚WIDE☛☛☛☛ for 500px Wide or Larger Browser Windows

Does what it says on the tin (this adjusts the page width on the fly as the browser width changes).

This also adds styling to the border corners so it loosely resembles a 3-inch by 5-inch "Rite in the Rain" brand waterproof pocket notebook's corners, the kind I carry. Delete or change the border-radius values if you wish. You may also want to put in a border-color value other than grayish.

This userstyle further sets the font to Arial, Helvetica, 'Helvetica Neue', Sans-Serif (in that order); increases the margin between nodes aka bullets by 2px (to better match WorkFlowy's styling on their mobile apps); and adds a tiny bit of spacing between the letters, which you may or may not like. In general, a bit of extra letter spacing improves legibility when reading light text on a dark background, however.

There are a few minor additional tweaks that make WorkFlowy line up a bit better with the bullets, the distance between lines be more uniform and thus highlighting of lines retain similar-size gaps, etc.

The example shown in the thumbnail was made with contrasting white/black page/background colors for demonstration.

Additionally, you will probably want to get these userstyles fom my userstyles homepage:

WF ☛thin☚ ⮜⮜⮜Left
    (WorkFlowy ☛thin☚ on the Left Side of Window ⮜⮜⮜)

WF ☛thin☚ Right⮞⮞⮞
    (WorkFlowy ☛thin☚ on the Right Side of Window ⮞⮞⮞)

WF ☛thin☚
    (WF ☛thin☚ for 500px Wide or Larger Browser Windows)
This one is centered. You can LEAVE WF ☛thin☚ ENABLED ALL THE TIME. Then, just also enable ONE OF "WF ☚☚☚☚WIDE☛☛☛☛," "WF ☛thin☚ ⮜⮜⮜Left," or "WF ☛thin☚ Right⮞⮞⮞" when you want one of those.

Finally, I also made 16 WorkFlowy themes as userstyles!

These range from white to black, light to dark, from the very colorful to the subdued, from those with transparency effects on moving animated backgrounds to classic pages on wooden desktops.

I designed them for "circadian rhythm" health protection, as in bluer/whiter/brighter light in the morning, redder/darker/dimmer night at light, so as not to mess up melatonin production specifically and your sleep cycle generally.

They complement the WF ☚☚☚☚WIDE☛☛☛ and WF ☛thin☚ userstyles. If you're curious about these themes, they're all at my userstyles profile page. */
}

@-moz-document url-prefix("https://workflowy.com") {
/* This WF Userstyle's Notes

For this to work correctly, you must disable WorkFlowy's "Full width page" feature, found at Workflowy Settings > Experimental features. */
}

@-moz-document url-prefix("https://workflowy.com") {
/* CC BY-NC-SA 4.0 License

Copyright (c) 2023 C. Will Dollis

Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0)

CC BY-NC-SA 4.0 License Summary:

This license allows reusers to distribute, remix, adapt, and build upon the material in any medium or format for noncommercial purposes only, and only so long as attribution is given to the creator. If you remix, adapt, or build upon the material, you must license the modified material under identical terms.

CC BY-NC-SA 4.0 includes the following elements:

   BY - Credit must be given to the creator
   NC - Only noncommercial uses of the work are permitted
   SA - Adaptations must be shared under the same terms

See this URL for FULL CC BY-NC-SA 4.0 license terms:

https://creativecommons.org/licenses/by-nc-sa/4.0/legalcode
*/
}

@-moz-document url-prefix("https://workflowy.com") {
/* WF ☚☚☚☚WIDE☛☛☛☛'s CSS */
@import "https://drive.google.com/uc?export=view&id=1Ps8d7UPcc42gA724mjRLI33MErfTyiXi";
@media only screen and (min-width: 500px) {
    .page {
        max-width: 73.577% !important;
    }
}
}

@-moz-document url-prefix("https://workflowy.com") {
/* WF ☛thin☚'s CSS */
html {
    overflow-x: hidden;
}

.page {
    margin-right: auto !important;
    margin-left: auto !important;
    max-width: 364px;
    padding-left: 46px;
    padding-right: 42px;
    border-width: 1px;
    border-style: solid;
    border-color: #95989A;
    -moz-border-radius: 1px 1px 49px 49px !important;
    border-radius: 1px 1px 49px 49px !important;
    padding-top: 15px;
    padding-bottom: 1px;
    position: relative;
    top: 5px;
    margin-bottom: 56px;
}

.pageContainer {
    overflow-x: hidden !important;
}

#page container,
.mainTreeRoot.selected {
    position: relative;
    bottom: 12px;
}

#app > div.pageContainer._3blhy7 > div > div.project.selected.root.mainTreeRoot._a4lwbb > div.name._12tqtu1._3hmsj {
    height: 29px;
}

#app > div.pageContainer > div > div.project > div.name {
    margin-top: 1px;
}

#app > div.pageContainer._3blhy7 > div > div._1vs75eu {
    display: none;
}

#app > div.pageContainer > div > div.project > div.children {
    margin-bottom: 10px;
}

/* Moves Comment and Complete Buttons to the left */
div.nameHoverButtons {
    margin-left: -28px;
}

/* FONTS AND TWEAKS */
.content {
    font-family: Arial, Helvetica, 'Helvetica Neue', 'Sans-Serif';
    font-size: 1em;
    letter-spacing: 0.01em;
    line-height: 1.306435em;
}
/* 1.313em x 99.5% line-height */

.selected.project > .name > .content {
    font-size: 0.648em;
    letter-spacing: 0.00648em;
    line-height: 1.36514em;
    position: relative !important;
    top: 10px !important;
}
 /* 1.372em x 99.5% line-height */

.noted > .notes > .content {
    font-size: 0.82em;
    letter-spacing: 0.0082em;
    line-height: 1.22em;
}
}