User-Accessories.css

/*************************************************************************************************/
/*************************************************************************************************/
/* CSS-Rules applied to User-Supplied HTML Widgets / Entities                                    */
/*************************************************************************************************/
/*************************************************************************************************/


/*
 * Everything in this file is used on HTML Elements that are manually added in by the end-user.
 * None of these CLASS or ID Style-Rules are used inside Widgets or Elements that are added by the
 * Upgrader.
 * 
 * For example, the very first Style-Rule is the one for "Java-Doc Unordered Lists".
 * The CSS-Class utilized for these <UL CLASS=JDUL> ... </UL>'s is simply called "JDUL"
 * 
 * Such lists are not inserted by anything that goes on in the Upgrader-Logic (or the 'javadoc'
 * Tool itself, either).  However, if a User would like to include a <UL> (Unordered List) inside
 * of his commenting, he may either add the <UL CLASS=JDUL> Element into his Java-Doc Comments, or
 * include one inside an External-HTML File.
 * 
 * Just make sure to assign the <UL CLASS=JDUL>, or the Web-Browser will not apply the Style-Rule
 */


/* ********************************************************************************************* */
/* CLASS 'JDUL' and 'JDOL' which are used for Ordered Lists and Unordered Lists                  */
/* ********************************************************************************************* */

/**
 * Class JDUL can be used with any "Un-Ordered List" that is definied in a Java-Doc.
 * Set the class attribute information in an un-ordered list that is inside of a javadoc comment
 * to colorize it
 * Set: <UL CLASS=JDUL> ... <LI>...</LI>...</UL>
 */
UL.JDUL
{ 
    border-left:    1em solid var(--JDUL-Border);
    padding:        1em 1em 1em 2.5em;
}
 
/**
 * Class JDOL can be used with any "Ordered List" that is definied in a Java-Doc.
 * Set the class attribute information in an ordered list that is inside of a javadoc comment
 * to colorize it
 * Set: <OL CLASS=JDOL> ... <LI>...</LI>...</OL>
 */
OL.JDOL
{
    border-left:    1em solid var(--JDOL-Border);
    padding:        1em 1em 1em 3.5em;
}
 
UL.JDUL LI, OL.JDOL LI { line-height: 1.5; }
 
 
/* ********************************************************************************************* */
/* These the "Brief Table" and "Brief Sample Table" CSS Classes.                                 */
/* ********************************************************************************************* */
 
/* 
 * These can be used, easily, in a Java-Doc Comment.  Simply Define a TWO-COLUMN <TABLE> in your
 * '.java' src-file code-comments section, and make sure to assign the CSS class attribute as:
 *
 * <TABLE CLASS=JDBriefTable>  ... </TABLE>
 */
TABLE.JDBriefTable
{ 
    width:          100%;
    border:         0px;
    box-shadow:     12px 12px 8px 0px var(--JDBriefTable-Shadow);
    margin:         1.5em 0em 2.0em 0em;

    /* This just absolutely sucks, but for now... */
    word-break:     break-all;

    /* More Crap to play with - and NONE of these will EVER work */
    /* padding: 0.3em 0.3em 0.3em 0.3em; */
    /* margin:         1.5em 2em 2.0em 0em; */
    /* table-layout:   fixed;  This *RUINS* the column widths! */
    /* overflow-wrap:  break-word; EVEN-WORSE ! */
}

TABLE.JDBriefTable TH
{
    padding:    1em 4em 1em 2em;
    text-align: left;
    background: var(--JDBriefTable-TH-Background);
}

TABLE.JDBriefTable TD
{
    padding:    0.3em 4em 0.3em 2em;
    text-align: left;
}

TABLE.JDBriefTable TD:Nth-Child(1)      { width: 30%; }
TABLE.JDBriefTable TD:Nth-Child(2)      { width: 70%; }
TABLE.JDBriefTable TR                   { color: var(--JDBriefTable-TR-Color); }
TABLE.JDBriefTable TR:Nth-Child(odd)    { background: var(--JDBriefTable-TR-Odd); }
TABLE.JDBriefTable TR:Nth-Child(even)   { background: var(--JDBriefTable-TR-Even); }


/* ********************************************************************************************* */
/* MISC STUFF                                                                                    */
/* ********************************************************************************************* */

/*
 * Johnny Walker Red Label, I mean Java-Doc Red Label...  Actually this is now "Desc Label"
 * (where "Desc" is short for "Description".  Note that these colors will change one day, so this
 * might one day not be red.  Changing the name to JDDescLabel allows to convert this to blue or
 * green or something.
 *
 * These are the Red-Colored (with White-Text) Oval-Shaped Labels that occur in many of the
 * description sections.  These were added much later (Year 2022), but they look very nice.
 * October 2023, They are now "JDDescLabel"
 */
B.JDDescLabel
{
    color:          var(--JDDescLabel-Color);
    background:     var(--JDDescLabel-Background);
    display:        inline-block;
    margin:         0 1em 0.75em 0;
    padding:        0.375em 2em 0.375em 1.5em;
    border-radius:  1em;
}

/* It is important to 'over-ride' the standard link-colors when the background is dark-red! */
B.JDDescLabel A
{
    color:      var(--JDDescLabel-Anchor) !important;
    font-size:  108%;
}

B.JDDescLabel A:hover
{ color: var(--JDDescLabel-Anchor-Hover) !important; }

/*
 * Banner Notes.  This is used as a "Big Heads Up".  Class 'Elements' has one.  This generally
 * belongs at the top of a class, but it may also be at the top of a method or field.  It is just
 * an "<H2>some major note</H2>"
 *
 * class FileNode also has one that states CLEARLY there are "No file system writes"
 * class ReplaceNodes also has one for a method which says "Significant Speed Improvements"
 */
H2.JDBanner
{
    /* When used inside a detail-entity, these need the "!important" override */
    color:      var(--JDBanner-Color)       !important;
    background: var(--JDBanner-Background)  !important;
    padding:    0.5em 1em 0.5em 1em !important;
}

/*
 * This should be used on the line immediately following a "JDBanner"  It is optional and is
 * helpful in adding "additional notes" to the banner
 */
I.JDBanner
{
    display:        block;
    font-weight:    bold;
    padding:        0.3em 1em 0.3em 1em !important;
}

/* Used to provide a small border around HTML <IMG> elements added to JavaDoc Pages. */
IMG.JDIMG
{
    border:       6px ridge var(--JDIMG-Border);
    max-width:    90%;
}

/*
 * file-name(s) or directory-name(s) on a Java Doc Page
 * It has black-background, and "vaguely" looks like a CRT monitor using the black-gray-black
 * linear-gradient.  Use a darker gray, or else you cannot read the text.  
 *
 * Examples On Page: Tools.JavaDoc.EmbedTag, JavaDoc.AnnotationsProcessor
 * It also looks like it is on the actual Annotation: JDHeaderBackgroundImg
 *
 * October 2nd, 2023: JDFILEDIRNAME ==> JDFileDirName
 */
SPAN.JDFileDirName
{
    color:          var(--JDFileDirName-Color);
    border:         0.2em dotted var(--JDFileDirName-Border);

    background: linear-gradient(
        to right, 
        var(--JDFileDirName-Gradient-End)       0%, 
        var(--JDFileDirName-Gradient-Middle)    50%,
        var(--JDFileDirName-Gradient-End)       100%
    );

    padding:        0.35em 0.35em 0.35em 0.5em;
    font-family:    monospace;
    font-weight:    bold;
    border-radius:  0.2em;
    display:        inline-block;
    margin:         0.3em 0.5em 0.3em 0em;
}
 
/* 
 * This is used in class AUM, and in field Features.OpenGraph
 * (right now it is literally, just a gray box).
 *
 * Some Ancient Crapola that I did in 2019
 */
.MISC_HILITE
{
    background:     var(--MISC-HILITE); 
    padding:        1em 1em 1em 2.5em;
    line-height:    1.5;
    margin:         2px;
}
 
/*
 * This is for the notice that comments were imported from the JDK
 * The background used is the same "Gradient" Background used in all of the NodeSearch Classes
 * that have the little "Search Specifier" (third-column added) in the Method-Summary Sections.
 *
 * Examples: Heavily used in Java.Additional.LRUTreeMap
 * NOTE: This was also used for some random links in other places
 *
 * October 2023:  SPAN.COPIEDJDK ==> SPAN.CopiedJDK
 */
SPAN.CopiedJDK
{
    background: repeating-radial-gradient(
        circle at 0 0, 
        var(--CopiedJDK-Gradient-Start),
        var(--CopiedJDK-Gradient-Middle) 50px
    );

    margin:         0.4em 0 0.4em 0;
    padding:        0.85em 1em 0.85em 1em;
    display:        block;
    line-height:    1.75em;
    border:         0.25em solid var(--CopiedJDK-Gradient-Border);
    border-radius:  1em;
}

/*
 * Sort of used for links to method's on a Java Doc Page...
 *
 * Examples: Only in The Reflection-HTML Wood-Plank Notices at the top of those four classes
 *           ReflHTML, JavaDocHTMLFile, SummaryTableHTML, HeaderFooterHTML
 *           (Inside the JDHBI/ External-HTML File for those classes)
 *
 * ALSO: external-html/MAIN/Implements.Replaceable.html 
 *       (Yellow Description Box for all of the "Replaceables" in package Torello.HTML)
 *
 * ALSO: The CSS-Class "JDDownloadLink" currently is ownly used in the class "Upgrade", and the
 *       Class is inside a link to the Java-Parser Download location.
 *
 *       The CSS-Class "JDReferenceFileLink" is used in StrIndexOf & StrTokIndexOf, at the top, in
 *       the @JDHeaderBackgroundImg link.  It contains a link to a Code-Generator, HiLited Java
 *       file.
 * 
 * October 2023: JDDetailLink added to MetaTagName, SplashBridge, HTTPCodes
 */
A.JDDetailLink, A.JDDownloadLink, A.JDReferenceFileLink
{
    color:          var(--JD-Link-Color) !important;
    background:     var(--JD-Link-Background);
    border:         0.1em dotted var(--JD-Link-Border);
    padding:        0.6em 1em;
    display:        inline-block;
    font-family:    monospace;
    font-weight:    bold;
}

A.JDDetailLink:hover,
A.JDDownloadLink:hover,
A.JDReferenceFileLink:hover
{ color: var(--JD-Link-Hover-Color) !important; }

/*
 * Used for (Escaped) HTML Tags.
 *
 * First used: Torello.HTML.Balance, Limited use in Features & Features.Meta
 * 
 * NOTE: Incorporating this into the entire project would take a LONG-TIME
 */
B.JDHTags
{
    color:          var(--JDHTags-Color);
    font-family:    monospace;
    font-weight:    bold;
}


/* ********************************************************************************************* */
/* JavaDoc Upgrader "WIDGETS" - The background and border for the examples of CSS TAGS           */
/* ********************************************************************************************* */

/*
 * OLD: Right now, these are used in the Java-Doc Upgrader "CSSTags" class
 *
 * This is "sort-of" a complete nightmare trying to make these look right.  These are the
 * Lighter-Colored Wood-Plank HTML "examples" of the Java-Doc Upgrader Classes.
 *
 * NOTE: Making the text centered, and properly-margined, is not a lot of fun.
 *       This might even be a less-than-perfect solution.  But I'm not changing it right now.
 */
DIV.JDExample
{
    margin-bottom:      1.5em;
    box-shadow:         12px 12px 8px 0px var(--JDExample-Shadow);
    width:              100% !important;
    background-image:   url('../img/WoodPlank.Light.jpg');
    background-origin:  content-box;
    text-align:         center;
    border:             1px solid transparent;
    border-radius:      2.5em;

    /* background-repeat:  no-repeat; */ /* This is needed for "big screens" */
}

/* This just helps center the inner-text inside of the wood-plank. */
DIV.JDExample H2,
DIV.JDExample H3,
DIV.JDExample H4,
DIV.JDExample SPAN,
DIV.JDExample DIV
{
    display:        inline-block;
    margin-left:    2.5em !important;
    margin-right:   2.5em !important;
}
 
/*
 * This is the rounded-inset BORDER and the BACKGROUND-IMAGE for the inner light-brown
 * background that is placed inside the Wood-Panel.
 *
 * This is *ALSO* a background-image, but this one is inlined directly onto this CSS Page using the
 * "Base-64" Image Encoder.  This image is nothing more than a light-brown sand-paper.  It clashes
 * a little bit with the Wood-Panel on which it is placed.  The whole issue is that trying to 
 * "Show-Case" CSS/HTML "Widgets" is next-to-impossible without putting this silly Wood-Panel
 * behind it.  **AND** the Wood-Panel necessitates this background sand-paper image.
 */
DIV.JDExInner
{
    border-radius:      2.5em;
    text-align:         initial !important;
    background:         var(--JDExInner-Background);
    border:             0.4em inset var(--JDExInner-Border);
    background-image:   var(--JD-Light-Sand-Paper-Background); /* Defined in Base64.css */
}


/* ********************************************************************************************* */
/* CSS Definitions for Method-Explanation Tables, and Parameter-Explanation Tables               */
/* ********************************************************************************************* */

/*
 * All NodeSearch Package Clases use Methods & Parameter Explanation-Heading <TABLE>'s
 * 
 * Primarily, this is used by the Node-Search Package Classes.
 * The classes in Node-Search have a giant description for each Method (and their Parmeters)
 * in the class
 * 
 * This is also used by the Torello.Java.String classes.
 *
 * These could, concievable, be reused elsewhere.  Maybe?  Possibly?  They are just those giant
 * tables at the top of the classes I just mentioned.
 */
#METHODS,
#PARAMETERS
{
    width:      95%;
    padding:    1em;
    border:     0px;
    box-shadow: inset 0 0 1em var(--JD-Method-Param-Table-Shadow);
}

#METHODS TH,
#PARAMETERS TH
{
    padding:    1.5em 2em 1.5em 2em;
    text-align: left;
    background: var(--JD-Method-Param-Table-TH);
}

#METHODS TD,
#PARAMETERS TD
{ padding: 1em 2em 1em 2em; }

#METHODS TR,
#PARAMETERS TR
{ color: var(--JD-Method-Param-Table-TR); }

#METHODS TR:Nth-Child(odd),
#PARAMETERS TR:Nth-Child(odd)
{ background: var(--JD-Method-Param-Table-TR-Odd); }

#METHODS TR:Nth-Child(even),
#PARAMETERS TR:Nth-Child(even)
{ background: var(--JD-Method-Param-Table-TR-Even); }

#METHODS TD:Nth-Child(1),
#PARAMETERS TD:Nth-Child(1)
{
    width:          30%;
    color:          var(--JD-Method-Param-Table-TD-Col1);
    font-weight:    bold;
    vertical-align: top;
}

#METHODS TD:Nth-Child(2),
#PARAMETERS TD:Nth-Child(2)
{ width: 70%; }