/** File: /Pictures/Version2022/css/pictures-Version2022.css * maintained by Jesse M. Heines, jesse@jesseheines.com * Copyright (c) 2022 by Jesse Heines. All rights reserved. May be freely * copied or excerpted for educational purposes with credit to the author. * updated by JMH on November 22, 2022 at 7:59 PM * updated by JMH on December 17, 2022 at 8:56 PM * updated by JMH on December 23, 2022 at 1:38 PM * updated by JMH on December 25, 2022 at 9:38 PM * updated by JMH on April 10, 2023 at 10:22 AM * updated by JMH on April 22, 2023 at 4:24 PM * updated by JMH on May 6, 2023 at 10:45 PM * updated by JMH on July 8, 2023 at 8:10 AM to add my own tag * updated by JMH on August 10, 2023 at 6:35 AM to add background colors for tags * updated by JMH on August 10, 2023 at 1:55 PM to make the default background black and * adjust all the text colors appropriately * updated by JMH on August 11, 2023 at 10:26 AM to add my own tag and class * updated by JMH on August 12, 2023 at 8:56 PM to set color of #DevInfo code * updated by JMH on August 16, 2023 at 8:32 AM to add .bold, .nobold, .ital, & .noital * updated by JMH on October 4, 2023 at 8:11 PM to add .bg-lightgray-240 * updated by JMH on October 5, 2023 at 9:28 PM to accommodate btnPrevNextColl1 and * btnPrevNextColl2 as well as btnPrevNextColl * updated by JMH on October 6, 2023 at 8:34 AM to set color of #DevInfo pre * updated by JMH on January 30, 2024 at 11:56 AM to add manual formatting classes and tags * updated by JMH on March 20, 2024 at 8:35 AM to test z-index approach to links within * HTML "image" pages * updated by JMH on April 7, 2024 at 9:35 PM to add styling for anchor tags in second lines * updated by JMH on April 8, 2024 at 8:07 AM to update #caption h4 a * updated by JMH on May 7, 2024 at 12:24 PM to add class debug-strPicFileName * updated by JMH on July 28, 2024 at 8:11 PM to add class yellow * updated by JMH on October 24, 2024 at 6:53 PM to add class orange * updated by JMH on March 22, 2025 at 12:09 PM to add 0.5rem to caption credit line * updated by JMH on May 25, 2025 at 9:06 AM to hide "Reset Pan and Zoom" button on * non-mobile } */ :root { --viewer-body-bg-color: black ; --viewer-h1-color: RGB( 85, 170, 85 ) ; --viewer-h2-color: RGB( 200, 200, 200 ) ; --viewer-h4-color: lightgray ; --viewer-link-color: lightgreen ; --index-h3-color: green ; --about-strong-color: orange ; } /*** the following comment is not quite true... */ /*** all of the following .bg-* classes are obsolete and have been replaced by variables ***/ .bg-lightgray-211 { /* originally used in PictureViewer_Jesse.php */ background-color: lightgray ; } .bg-lightgray-225 { /* originally used in PictureViewer_Jesse.php */ background-color: RGB( 225, 225, 225 ) ; } .bg-black { /* originally used in PictureViewer_Jesse.php */ background-color: black ; } .bg-lightgray-230 { /* used in PictureIndex.php */ background-color: RGB( 230, 230, 230 ) ; } .bg-lightgray-240 { /* used in PictureIndex.php */ background-color: RGB( 240, 240, 240 ) ; } /* for manual formatting */ .bold { font-weight: bold ; } .nobold, nobold { font-weight: normal ; } .ital, ital, italic { font-style: italic ; } .noital, noital { font-style: normal ; } .notop { margin-top: 0 ; } .nobot { margin-bottom: 0 ; } .notopbot { margin-top: 0 ; margin-bottom: 0 ; } /* for PictureViewer_Jesse.php */ body { background-color: var( --viewer-body-bg-color ) ; } body, #fullpage, #head-matter, #navHeader { /* margin: 0 ; */ /* border: 1px dotted red ; */ } /* CSS for PictureViewer.php and PictureIndex.php */ h4, h4 a { /* for links to further information */ margin: 0 ; font-size: 13pt ; color: var( --viewer-link-color ) ; } #viewer h4, #viewer h4 a, #viewer .caption-list, #viewer .caption-list a { color: var( --viewer-h4-color ) ; } .left_1em { margin-left: 1em ; } .left_1pt5em { margin-right: 0 ; margin-bottom: 0.5em ; margin-left: 1.5em ; } .large-caps { font-size: 1.5em ; text-transform: uppercase ; } .left-justify { text-align: left ; } .center { text-align: center ; } .pt12 { font-size: 12pt ; } .times { font-family: Times New Roman ; font-size: 14pt ; } .subtitle { text-align: left ; color: maroon ; margin-top: 0 ; margin-bottom: 0.5em ; } #viewer .subtitle { color: var( --viewer-h4-color ) ; } .caption-list .only-with-picture { display: none ; /* does not take up space */ } .caption-list ol { margin-top: 0 ; margin-bottom: 1em ; } ol.collection-title { margin: 0 0 0 0.5em ; /* background-color: yellow ; */ /* for debugging */ } #caption h1 { color: maroon ; margin-bottom: 0 ; } #caption h1.v2 { font-size: 14pt ; } #caption h2 { color: green ; margin: 0 ; } #caption #credit-line { margin-bottom: 0.5rem ; } #viewer #caption h1, #viewer #caption h3, #viewer #debuginfo, #picno, #photoid { color: var( --viewer-h1-color ) ; } #viewer #debuginfo, #viewer #debuginfo a { color: var( --viewer-link-color ) ; } #viewer #debuginfo #debug-strPicFileName, .debug-strPicFileName { padding: 0 0.5em 2px 0.5em ; background-color: yellow ; font-weight: bold ; color: black ; border-radius: 5px ; } #viewer #caption h2 { color: var( --viewer-h2-color ) ; } #caption h2.v2 { font-size: 18pt ; } #caption h2 div.secondline { font-weight: normal ; font-style: italic ; font-size: 0.8em ; margin-bottom: 2px ; } #caption h2 div.secondlinenoital { font-weight: normal ; font-size: 0.8em ; margin-bottom: 2px ; } #caption h2 div.secondline a, #caption h2 div.secondlinenoital a, #caption h4 a { color: orange ; } #caption h2 div.secondline a:hover, #caption h2 div.secondlinenoital a:hover, #caption h4 a:hover { font-weight: bold ; text-decoration: none ; } #caption h3 { color: maroon ; margin: 0 ; font-weight: normal ; font-style: italic ; } #caption div.subCaption { font-size: 14pt ; font-weight: normal ; margin: 0 50px 0.25rem 50px ; } #divReset { display: none ; } #img-container { /* z-index: -100 ; */ /* this does NOT help make links take precedence over */ /* the advance to next picture event */ } .htmlpicture { border: 1px solid black ; padding: 1em 2em ; text-align: left ; width: 85% ; } .htmlpicture p { font-size: 1.2em ; } #tdPicNo { /* this CSS is replaced by JavaScript that sets it depending upon the screen size */ /* text-align: center ; */ /* padding-right: 0.5em ; */ /* border: 1px dotted blue ; */ color: maroon ; font-weight: bold; } #btnBackToIndex, #btnSlideShow { color: white ; font-weight: bold ; height: 2em ; -moz-border-radius: 8px ; -webkit-border-radius: 8px ; border-radius: 8px ; z-index: 0 ; } #btnBackToIndex { background-color: maroon ; border-color: maroon ; } #btnSlideShow { background-color: green ; border-color: green ; } /* #frst, #prev, #next, #last { */ input[type="image"] { /* all four of the navigation buttons */ border-radius: 50% ; z-index: 0 ; width: 30px ; } #iconIndex:hover, .glow-on-hover:hover, #btnBackToIndex:hover, #btnSlideShow:hover { /* https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow */ /* box-shadow: 0 0 12px maroon ; */ /* box-shadow: 0 0 12px green ; */ box-shadow: 0 0 12px 3px green ; z-index: 10 ; } #spinner { width: 3em ; } .vtop { vertical-align: text-top ; } /* CSS for the About page */ #AboutInfo h2, #AboutInfo p, #AboutInfo td, #DevInfo h2, #DevInfo h3, #DevInfo p, #DevInfo li, #DevInfo code, #DevInfo pre { color: var( --viewer-h4-color ) ; } #AboutInfo a, #DevInfo a { color: var( --viewer-link-color ) ; } #AboutInfo strong, #DevInfo strong, #DevInfo code, #DevInfo pre { color: var( --about-strong-color ) ; } #AboutInfo table tr td:first-child { padding-right: 0.5rem ; vertical-align: middle ; } #AboutInfo table tr td { /* border: 1px solid yellow ; */ /* vertical-align: top ; */ /* padding-top: 0.5em ; */ } #AboutInfo button { border-radius: 0.4rem ; } #DevInfo code, #DevInfo pre { font-size: 1.05rem ; } .red { color: red ; } .orange { color: orange ; } .green-text, .gray-text, .red-text { padding: 0 0.45em 3px 0.45em ; color: white ; font-weight: bold ; border-radius: 4px ; } .green-text { background-color: green ; } .gray-text { background-color: RGB( 170, 170, 170 ) ; } .red-text { background-color: red ; padding: 1px 0.5em 2px 0.5em ; } .yellow { color: yellow ; } AboutInfo table tr td:first-child { padding-right: 0.5em ; } #AboutInfo img { /* all four of the navigation buttons */ border-radius: 50% ; z-index: 0 ; width: 30px ; } /* CSS specifically for PictureIndex.php, in which has class "index" */ .index h1, .index h3, .index h4, .index h4 a { color: var( --index-h3-color ) ; } .index h4, .index h4 a { font-size: 10pt ; } .index blockquote { margin-top: 0.5em ; } .index blockquote.note { margin: 0 ; } .index ul.index { margin: 0 0 0 3em ; list-style-type: disc ; } .index .omitfromindex { display: none ; } /* the Previous or Next collection in current series button */ #btnPrevNextColl, #btnPrevNextColl1, #btnPrevNextColl2 { /* using display: none makes it impossible to display the element later. * use jquery .hide() and .show() instead * https://stackoverflow.com/questions/4396983/difference-between-jquery-s-hide-and-setting-css-to-display-none */ /* display: none ; */ /* does not take up space */ margin-top: 0.5em ; /* background-color: green ; */ background-color: yellow ; /* 2024-08-28 18:52 updated by JMH */ /* border: 1px solid green ; */ border: 1px solid yellow ; /* 2024-08-28 18:52 updated by JMH */ border-radius: 5px ; /* color: white ; */ color: black ; /* 2024-08-28 18:52 updated by JMH */ padding: 2px 0.75em 1px 0.75em ; } /* add a bottom margin to top-level list elements on the About page in the Developer Information section */ #DevInfo ol > li { margin-bottom: 1em ; } #DevInfo blockquote { margin-top: 0 ; margin-bottom: 0 ; } /* horizontal menu of main category headings */ #main-headings-menu { margin-bottom: 2em ; background-color: green ; color: white ; padding: 1em 1em ; font-weight: bold ; border-radius: 0.75em ; width: fit-content ; width: -moz-fit-content ; /* for Firefox */ } #main-headings-menu a:link, #main-headings-menu a:visited, #main-headings-menu a:active { color: white ; } #main-headings-menu a:hover { color: yellow ; text-decoration: none ; /* offset-x | offset-y | blur-radius | spread-radius | color */ box-shadow: 0px 0px 1em 0.75em yellow ; } /* Reset Pan and Zoom button */ #btnReset { display: none ; } /* my own custom tag to prevent wrapping */ nowrap { white-space: nowrap ; } /* my own custom tag for normal key cap character sequences */ .key, key, .keyI, keyI { /* rules for all key caps */ padding: 0 0.25em ; /* a bit of space inside the left and right borders */ border: 2px solid black ; /* border around text */ border-radius: 0.35em ; /* rounded corners on border */ font-weight: bold ; /* enhance text */ margin: 0 0.1em ; /* add space to the left and right */ font-size: 0.85em ; /* reduce font size slightly */ font-family: Arial ; /* change from the default font */ font-style: normal ; /* suppress italics */ white-space: nowrap ; /* to suppress automatic text wrapping */ } /* additional rules for the capital I key cap */ .keyI, keyI { font-family: /* all sans-serif fonts */ Lucida Console, Ubuntu Mono, Lucida Sans Typewriter, Lucida Sans Typewriter Regular, Terminal, Courier New, Courier ; font-size: 0.95em ; /* special size for the letter I in code */ } /** JavaScript and jQuery return values for my iPhone: * window.innerWidth = 980 pixels * window.innerHeight = 1681 pixels * $(window).width = 980 pixels * $(window).height = 1681 pixels * N.B. When using
, be sure to precede or follow this tag by a * space so that if the line break is omitted, a space appears in its place * Also, in CaptionList.js files, be sure to code this with single quotes: *
*/ @media ( min-width: 981px ) { /* for desktops */ .mobile-only { display: none ; } } @media ( max-width: 980px ) { /* for iPhone */ .desktop-only { display: none ; } } /** Super cool trick to make the scrollbar *always* appear, thus avoiding * the menu jumping left to right when you navigate to other pages due to the * presence or absence of the scrollbar. * Source: http://www.mediacollege.com/internet/css/scroll-always.html * added by JMH on October 9, 2011 at 11:16 AM */ html { overflow-y: scroll ; }