/*************************************************************************************************/
/*************************************************************************************************/
/* 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); }


/* ********************************************************************************************* */
/* Description Labels / Simple Bullet-Point Items                                                */
/* ********************************************************************************************* */

/*
 * Johnny Walker Red Label, I mean Java-Doc Red Label...  Actually this is now "Desc Label"
 * (where "Desc" is short for "Description".  
 *
 * August 2024: These are, officially, simple and black-and-white labels that may be used directly
 * above your text to, sort of, "explain" what the next paragraph in your HTML-Documentation is 
 * going to be about.
 *
 * These are the Black-Colored (with White-Text) occur in many of the Java-HTML description
 * sections.  These were added much later (Year 2022), but they look very nice.
 */
B.JDDescLabel
{
    margin:         0 1em 0.75em 0;
    color:          var(--JDDescLabel-Color);
    background:     var(--JDDescLabel-Background);
    padding:        0.8em 1.25em 0.65em 1.25em;
    display:        inline-block;
    border-radius:  0.1em;
}

/*
 * Slightly more complicated, "pronounced" or "loud", Text-Labels.  These should be used more 
 * "sparingly" because they will make you puke if you place them every-where!  Text-Labels work
 * better at High-Liting / Emphasizing Text when the text inside the <B>...</B> is more important
 * than the CSS-Colors that surround it!
 *
 * "JDDescLabel" - is a Black & White Box, without any decorations or "frills"
 * This very good for FREQUENT USE inside of your Java-Doc Description areas.  It conveys a feeling
 * of:
 *      1) The words inside the Label are important
 *      2) The actual paragraph-text beneath the label is even more important
 *      3) The CSS-Decoration is not the point
 *
 * "JDDescLabel2" - is a Dark-Red, sort of "3D", Box - with a "3d-Looking Height" and a Shadow.
 * The catch?  The CSS looks more important than the words themselves!  Learning about how to use
 * CSS should be an learning process about preventing the CSS from seeming more important than the
 * meaning of the words they are decorating.
 *
 *      1) More emphasis on the colors
 *      2) Should, therefore be used sparingly
 *      3) Better in the VERY-TOP description or in the Wood-Plank Description at the beginning of
 *         a Java-Doc Web-Page.
 *      4) That, Hey - wake up!  That's what this page has... Feeling.
 */
B.JDDescLabel2
{
    margin:         0em 1em 1.25em 0em;
    color:          var(--JDDescLabel2-Color);
    background:     var(--JDDescLabel2-Background);

    padding:        1.75em 1.25em 0.65em 1.25em;
    display:        inline-block;

    border-radius:  0.1em;
    box-shadow:     6px 6px 8px 0px var(--JDDescLabel2-Shadow);

    border-top:     0.1em solid var(--JDDescLabel2-Border);
    border-left:    0.1em solid var(--JDDescLabel2-Border);
    border-bottom:  0.3em solid var(--JDDescLabel2-Border);
    border-right:   0.1em solid var(--JDDescLabel2-Border);
}

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

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


/* ********************************************************************************************* */
/* Swirling-Blue Big-Description, Hovering, Banners                                              */
/* ********************************************************************************************* */

/*
 * 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
{
    background: linear-gradient(
                    135deg,
                    var(--JDBanner-BG1) 25%,
                    var(--JDBanner-BG2) 50%,
                    var(--JDBanner-BG3) 75%
                ) !important;

    color:      var(--JDBanner-Color);
    box-shadow: 6px 6px 8px 0px var(--JDBanner-Shadow);
    padding:    0.65em 1em 0.75em 1em !important;
}

H2.JDBanner A 
{
    color:      var(--JDBanner-Anchor) !important;
    font-size:  108%;
}

H2.JDBanner A:hover
{
    color:      var(--JDBanner-Anchor-Hover) !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.5em 1em 0.4em 1em !important;
}


/* ********************************************************************************************* */
/* Minor Image-Helper                                                                            */
/* ********************************************************************************************* */

/* Used to provide a small border around HTML <IMG> elements added to JavaDoc Pages. */
IMG.JDIMG
{
    border:     0.75em solid transparent;
    padding:    0.5em;
    max-width:  90%;

    border-image: repeating-linear-gradient(
                    45deg, 
                    var(--JDIMG-Border1), 
                    var(--JDIMG-Border1) 10px, 
                    var(--JDIMG-Border2) 10px, 
                    var(--JDIMG-Border2) 20px,
                    var(--JDIMG-Border3) 20px,
                    var(--JDIMG-Border3) 30px,
                    var(--JDIMG-Border4) 30px,
                    var(--JDIMG-Border4) 40px
                ) 10;
}


/* ********************************************************************************************* */
/* Lesser Text / Label Helpers                                                                   */
/* ********************************************************************************************* */

/*
 * 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 */
    overflow-x:         auto;
    max-width:          80%;
}


/* ********************************************************************************************* */
/* 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%; }


/* ********************************************************************************************* */
/* CSS which extends the Upgrader-Widget "Flash Summary Table Row" to a User-Accessory           */
/* ********************************************************************************************* */

/*
 * For more information regarding WTF I'm talking about - please review the CSS-Definitions for
 * the CSS-Class "flashSumm", which is defined inside the "Upgrader-Widgets.css" file.
 * 
 * The ability to clikc on an HTML "Anchor-Linke (<A HREF=...>)" is a blessing, but it may also
 * be a minor curse as it IS NOT ALWAYS OBVIOUS where the page has actually re-adjusted itself!
 * When a user clicks a "Relative Link" (one which re-directs the browsers location to somewhere 
 * else on the page), if there is lots of independent-but-related data on the page, seeing exactly
 * where the window just jumped to may not be possible!
 * 
 * When a user is looking at a Detail-Element (Field-Details, Method-Details, etc...) and clicks 
 * on the Double Up-Arrow, it brings him directly to the Field-Summary or Method-Summary Table-Row
 * that summarizes the item / member in question.  When that happens the Table-Row to which the
 * browser will have just readjusted its Window-Location will "Flash & Blink Blue" for two seconds
 * just to help the user focus on what he has just selected.
 *
 * The "jumpAndFlash" CSS-ID allows a User to Extend this functionality / feature to other widgets,
 * item, HTML-Elements or Components within his HTML Files.
 * 
 * NOTE: To use this CSS-Class - simply do the following:
 *       <DIV ID=My-Own-DIV-ID> ... </DIV>  <!-- Any HTML Tag works, not just <DIV> -->
 * 
 * ELSE-WHERE: <SPAN onclick='jumpAndFlash("My-Own-DIV-ID");'>Click Me!</SPAN>
 *
 * The following "NOTE" was Block-Copied from `Colors.css`
 *
 * IMPORTANT NOTE: The reason for "extending" this feature which was originall only used for
 *                 Summary-Table & Detail Entities is because Java-Doc page are EXTREMELY
 *                 DENSE, filled with information.  When a User clicks on an HTML-Anchor
 *                 <A HREF=...>, the browser relocates the page quickly, and in order to have 
 *                 a prayer of seeing exactly which piece of data was the, actual, intended
 *                 target of his or her "click", flashing the Data, Row, Column, etc...
 *                 can help a lot!
 */

.jumpAndFlash
{
    animation:  jumpFlashBlinker 750ms linear 2; 
    color:      var(--Jump-And-Flash-Default-Color)         !important;
    background: var(--Jump-And-Flash-Default-Background)    !important;
}

@keyframes jumpFlashBlinker
{ 
    0%      { opacity: 0; }
    50%     { opacity: 1; }
    100%    { opacity: 0; }
}