/* Copyright (C) 2024 The Meme Factory, Inc.  http://www.karlpinc.com/
 *
 * This file is part of PGWUI_SQL.
 *
 * This program is free software: you can redistribute it and/or
 * modify it under the terms of the GNU Affero General Public License
 * as published by the Free Software Foundation, either version 3 of
 * the License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful, but
 * WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 * Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public
 * License along with this program.  If not, see
 * <http://www.gnu.org/licenses/>.
 *
 * Required style sheet for PGWUI_SQL.
 *
 * Karl O. Pinc <kop@karlpinc.com>
 */

/* The SQL entry window and executed sql re-display. */
.sqltext { font-family: monospace;
           text-wrap: nowrap;
           white-space-collapse: preserve; }
textarea.sqltext { height: 40em;
                   width: 68em; }

/* The "status" message which goes with each SQL result (set) */
.sql_status { font-size: 50%; }

/* The box holding the textarea of the search_path */
.search_path_data { width: 20em; }

/* The "breaks" between sql statement results; very light horizontal rules */
.innerbreak { border-style: dotted;
              border-bottom: 0px;
              color: lightgrey; }

/* For allowing headings to "float" inside an element until the containing
   element is off the screen */
/* Figuring out what the actual background color is is complex, see:
   https://stackoverflow.com/questions/46336002/how-to-get-computed-background-color-style-inherited-from-parent-element
   Summary: background-color does not inherit, so you have to traverse the DOM.
   And once you're done, figuring out if the background is transparent or not,
   and what to do about it, is non-trival because window.getComputedStyle()
   returns text, and there are multiple textual representations of a color
   and it's transparency that may vary by browser.  The point is to
   attach to the stickheading a non-transparent background matching what
   displays as the current background.  This seems either difficult or
   impossible.

   So don't try.  Instead, set the background to "white", the same that
   we set in the body's background.  And then assume that all the backgrounds
   in-between are transparent. */
.stickyheading { position: sticky;           /* attach to heading */
                 top: 0;
                 background-color: white;    /* kludge, see above */
                 border-collapse: collapse;  /* cover tbody background */
                 text-align: left; }
.stickycontainer { overflow-y: clip;       /* attach to heading's container */
                   width: fit-content; }
.stickyfooting { position: sticky;         /* attach to footer */
                 bottom: 0;
                 background-color: white;  /* kludge, see above */
                 text-align: right; }
.stickyrightbar { position: sticky;        /* attach to span in footer */
                  right: 0; }
/* The information on EOL normalization */
tr.eol_info > td > span > p { cursor: pointer; }
tr.eol_info > td > span > p + p { margin-left: 10%;
                                  margin-right: 10%; }

/* Dim controls that are "turned off" */
[inert] {
  opacity: 0.5;
}