3bcf86a0995e5a15ad5a2a8ff5533f48d5d43653 max Fri Sep 18 07:15:28 2026 -0700 hgTracks: tell the user what a session load just did, refs #38157 #Preview2 week - bugs introduced now will need a build patch to fix When a saved session is loaded it replaces the whole cart, and the view the user had before is gone without a word. hgTracks now shows a note on that page saying which session was opened, who saved it and when, the session description if it has one, and that the previous configuration cannot be brought back. Only on that one page: cart.c leaves a marker when a full (non-merge) session load happens and hgTracks takes it out again. Recommended track sets merge into the cart, so they get no note. The note uses a new notifBoxOnce() in utils.js, which has only a Close button: a one-page message does not need 'Don't show again'. Its .notifBoxOnce style is the card grey of the new Sessions page, and it sets no width, so unlike the other notifBoxes it cannot stick out of the window. Switch off with sessionLoadNotice=off in hg.conf. diff --git src/hg/htdocs/style/HGStyle.css src/hg/htdocs/style/HGStyle.css index 4b78759460d..e9ae7abad97 100644 --- src/hg/htdocs/style/HGStyle.css +++ src/hg/htdocs/style/HGStyle.css @@ -1,1505 +1,1516 @@ /* The browser UI is designed for a light background only. Declare that, so iOS * Safari (and macOS Safari / Chrome) do not auto-darken native form controls in * Dark Mode - which otherwise turns button text white on the light-grey button * background, making the nav/zoom buttons unreadable on iPhones. */ :root { color-scheme: light; /* Stop iOS Safari from auto-inflating "body" text (blue-bar group labels, * the tutorial notice, "Zoom out", #size, ...) to a larger size than the * form controls next to it, which leaves the page with wildly uneven text. * 100% (not none) still lets the user pinch-zoom. */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { font-family: Arial, Helvetica, sans-serif; background: #fff9d2; } body.cgi { margin: 0; padding: 0; background: #FFF9D2; } body.hgTracks { background: url("../../images/internal_bg1.jpg") repeat-x fixed left bottom #F9F9F7; } body.training { background: url("../../images/internal_bg1.jpg") repeat-x fixed left bottom #F9F9F7; } #searchHelp { display: inline; margin-left: 0.5em; font-size: 80%; } #chromAliases { display: inline; margin-left: 0.1em; margin-right: 0.1em; font-size: 95%; vertical-align: middle; cursor: help; } #chromAliases a { text-decoration: none; color: #aaa; } a:link { color: #121E9A; text-decoration: underline } input[type="submit"], input[type="button"], button { border: 1px solid rgba(100, 100, 100, .5); border-radius: 3px; margin: 0; padding-top: 3px; padding-bottom: 3px; background-color: #EEE; color: #000; } input[type="submit"]:hover, input[type="button"]:hover, button:hover { background-color: #E8E8E8; } #trackCtrlTable { width: 95%; margin-top: 6px; } .moveButtonText { font-size: 80% } .infoText { font-size: 90%; text-align: center; } .infoText > input { margin-left: 3px; margin-right: 3px; padding-left: 8px; padding-right: 8px; } #patchNote { margin-left: 3em; } /* Word wrap if possible staying in width. this allows easy-to-read labels * .trackLabelTdBreakAll is added to when any one word is too long to * work break and stay in width (RM #34299). */ .trackLabelTd { /* WARNING: min-width must match hgTracks/hgTracks.c MAX_WIDTH_CHARS */ min-width: 16ch max-width: 22ch; vertical-align: top; white-space: normal; word-break: break-word; overflow-wrap: break-word; } /* For words that exceed max-width */ .trackLabelTdBreakAll { word-break: break-all; } .trackDeleteIcon { margin-right: 4px; display: inline; cursor: pointer; } .quickLiftDelIcon { margin-right: 4px; display: inline; cursor: pointer; } .controlButtons { margin-bottom: 6px; } .blueLink { color: #121E9A !important; cursor: pointer; } span.link { color: #121E9A; text-decoration: underline; cursor: pointer } td.hotkey { font-family: courier; } pre.code { font-family: Monaco,'andale mono','lucida console',monospace; font-size: 0.8em; width:800px; margin-left: 40px; overflow:auto; background-color: rgb(255,255,250); border: 1px dashed rgb(230,230,230); color: rgb(17,17,17); padding:5px; } span.inlineCode { display: inline; font-family: Monaco,'andale mono','lucida console',monospace; font-size: 0.9em; } .topBlueBar { font-family: arial, Geneva, Helvetica, sans-serif; font-size: 15px; text-decoration: none; font-weight: bold; color: #D9E4F8; background-color:#2636D1; border: 1px solid black; height:28px; width:100%; text-align:center; vertical-align:middle; white-space:nowrap; padding: 0px 10px;} /* CLASS DECLARATIONS TO MAKE NETSCAPE HAPPY */ .topbar { font-family: arial, Geneva, Helvetica, sans-serif; font-size: 15px; text-decoration: none; font-weight: bold; color: #D9E4F8;} .leftbar { text-decoration: none; font-family: arial, sans-serif; color: #FDFCEA; font-size: 10pt; font-weight: 600; } .hiddenText {background-color: silver} .normalText {background-color: white} /* CLASS DECLARATIONS FOR THE REST OF THE BROWSERS */ .topbar { white-space: nowrap; padding: 0px 10px;} A:link.topbar { text-decoration: none; font-family: arial, Geneva, Helvetica, sans-serif; color: #E0F0F0; font-size: 15px; } A:visited.topbar { text-decoration: none; font-family: arial, Geneva, Helvetica, sans-serif; color: #E0F0F0; font-size: 15px; } A:active.topbar { text-decoration: none; font-family: arial, Geneva, Helvetica, sans-serif; color: #E0F0F0; font-size: 15px; } A:hover.topbar { text-decoration: none; font-family: arial, Geneva, Helvetica, sans-serif; color: #EAE360; font-size: 15px; } A:link.leftbar { text-decoration: none; font-family: arial, sans-serif; color: #E0F0F0; font-size: 10pt; font-weight: 600; } A:visited.leftbar { text-decoration: none; font-family: arial, sans-serif; color: #E0F0F0; font-size: 10pt; font-weight: 600; } A:active.leftbar { text-decoration: none; font-family: arial, sans-serif; color: #E0F0F0; font-size: 10pt; font-weight: 600; } A:hover.leftbar { text-decoration: none; font-family: arial, sans-serif; color: #FFFF99; font-size: 10pt; font-weight: 600; } /*-- #FFFF00; --*/ A:link.ug { text-decoration: none; font-family: arial, sans-serif; color: #888888; font-size: 11pt; font-weight: 600; } A:visited.ug { text-decoration: none; font-family: arial, sans-serif; color: #888888; font-size: 11pt; font-weight: 600; } A:active.ug { text-decoration: none; font-family: arial, sans-serif; color: #888888; font-size: 11pt; font-weight: 600; } A:hover.ug { text-decoration: none; font-family: arial, sans-serif; color: #888888; font-size: 11pt; font-weight: 600; } A:link.bigBlue { text-decoration: none; font-family: arial, sans-serif; color: #0000A0; font-size: 16pt; font-weight: 600; } A:visited.bigBlue { text-decoration: none; font-family: arial, sans-serif; color: #A000A0; font-size: 16pt; font-weight: 600; } A:active.bigBlue { text-decoration: none; font-family: arial, sans-serif; color: #A000A0; font-size: 16pt; font-weight: 600; } A:hover.bigBlue { text-decoration: none; font-family: arial, sans-serif; color: #0000A0; font-size: 16pt; font-weight: 600; } IMG.bigBlue {vertical-align: middle;} TD.bigBlue {vertical-align: middle;} A:link.toc { text-decoration: none; color: #0000CC; } A:visited.toc { text-decoration: none; color: #0000CC; } A:active.toc { text-decoration: none; color: #6666FF; } A:hover.toc { text-decoration: none; color: #6666FF; } A:link IMG { border-width: 0px; padding: 0px; margin: 0px;} A:visited IMG { border-width: 0px; padding: 0px; margin: 0px;} A:active IMG { border-width: 0px; padding: 0px; margin: 0px;} /* A toggle bar can be seen in hgTracks, under the image groups that can be opened and closed. */ .hubToggleBar {font-weight: bold; color:#FFFFFF; background-color:#536ED3; height:28px; width:100%; text-align:center; vertical-align:middle; white-space:nowrap;} .quickToggleBar {font-weight: bold; color:#FFFFFF; background-color:#108020; height:28px; width:100%; text-align:center; vertical-align:middle; white-space:nowrap;} .errorToggleBar {font-weight: bold; color:#FFFFFF; background-color:#ff0000; height:28px; width:100%; text-align:center; vertical-align:middle; white-space:nowrap;} .nativeToggleBar {font-weight: bold; color:#FFFFFF; background-color:#00457c; height:28px; width:100%; text-align:center; vertical-align:middle; white-space:nowrap;} .visibleTracksToggleBar {font-weight: bold; color:#FFFFFF; background-color:#66A3EE; height:28px; width:100%; text-align:center; vertical-align:middle; white-space:nowrap;} .toggleButton {height: 20px; width: 20px; vertical-align:middle;} /* Web section styles - for use with functions webNewSectionDiv and webEndSectionTablesDiv */ .section { background-color: #fffee8; border: 1px solid #888888; margin-bottom: 20px; } .subsection { padding:14px 13px 2px 14px; } .centeredStdTbl { margin: 10px auto; width: 98%; } .stdTblHead { background-color: #fcecc0; } /* A subheading bar is the light blue bar that appears at the top of web.c section boxes */ .subheadingBar {font-weight: bold; font-size:1.1em; color:#000000; background-color:#D9E4F8; width:100%; text-align:left; vertical-align:bottom; white-space:nowrap; text-indent:10px; padding-top:2px; } /* OVERALL DEFINITIONS */ P { line-height: 1.2; text-align: left; color: black; margin-left: 0px; } P.two { line-height: 1.6; text-align: left; color: black; margin-left: 15px; } P.leftjustify{ line-height: 1.2; text-align: left; color: black; margin-left: 0px; } UL {} TABLE{ border: 0; } LI { line-height: 1.5; } /*** used by CCDS, GENCODE, and other details page in hgc *** */ /* give the tables some breathing room and a consistent width */ TABLE.hgcCcds { margin-bottom: 30px; width: 500px; } TABLE.hgcCcds, TABLE.hgcCcds TH, TABLE.hgcCcds TD { border: 1px gray ridge; border-collapse: collapse; text-align: left; vertical-align: top; padding-left: 2px; padding-right: 4px } TABLE.hgcCcds TH { white-space: nowrap; } TABLE.hgcCcds TD { height: 1em; } /* table header has white text, include links */ TABLE.hgcCcds THEAD { background-color: #2636D1; color: #ffffff; } TABLE.hgcCcds THEAD * A { color: #ffffff; } TABLE.hgcCcds TR.hgcCcdsSub { background-color: #606ce2; color: #ffffff; } TABLE.hgcCcds TBODY { background-color: #D0FFD0; } TABLE.hgcCcds CAPTION { caption-side: top; text-align: left; font: medium bold; } /* used by OMIM track table */ table.omimTbl, table.omimTbl th { width: 90%; table-layout: fixed; } table.omimTbl, table.omimTbl th, table.omimTbl td { border: 1px solid #909090; border-collapse: collapse; text-align: left; vertical-align: top; padding: 5px; } table.omimTbl thead { font-weight: bold; background-color: #fffadb; } table.omimTbl tbody { background-color: #fffadb; } table.hgBlatTable td { text-align: left; } /* end OMIM table */ /* used by bed extra fields in hgc */ table.bedExtraTbl, table.bedExtraTbl th { width: 90%; table-layout: fixed; } table.bedExtraTbl, table.bedExtraTbl th, table.bedExtraTbl td { border: 1px solid #909090; border-collapse: collapse; text-align: left; vertical-align: top; padding: 5px; } table.bedExtraTbl td:first-child { width: 200px; font-weight: bold; } table.bedExtraTbl tbody { background-color: #fffadb; } .bedExtraTblNote { font-size: small; font-weight: normal; } .bedExtraTblVal { word-wrap: break-word; } /* used by transMap details page in hgc */ TABLE.transMap, TABLE.transMap TH, TABLE.transMap TD { border: 3px gray ridge; border-collapse: collapse; text-align: right; vertical-align: top; } TABLE.transMap THEAD { background-color: #a8c7ff; text-align: center; } TABLE.transMap TBODY { background-color: #D0FFD0; } TABLE.transMap CAPTION { caption-side: top; text-align: left; font: medium bold; } TABLE.transMapLayout TR TD { vertical-align: top; } TR.transMapLayout { vertical-align: top; } TR.transMapLeft TD { text-align: left; } .transMapNoWrap { white-space: nowrap; } .errorBg { background-color: #ff704f; } .warnBg { background-color: #f8ff30; } /* Used by LS-SNP protein structure mappings page in hgc. Each row has * multiple columns that are grouped together with a seperator border */ TABLE.hgcLsSnp { border: 2px black solid; border-collapse: collapse; white-space: nowrap; } TABLE.hgcLsSnp TD.hgcLsSnpSep { border-right: 2px black solid; border-collapse: collapse; } TABLE.hgcLsSnp TR, TABLE.hgcLsSnp TD { border: 1px gray ridge; border-collapse: collapse; text-align: left; vertical-align: top; padding-left: 5px; padding-right: 5px; } /* Used by hgc json tables */ TABLE.jsonTable, TABLE.jsonTable td, TABLE.jsonTable td { border: 1px solid #909090; border-collapse: collapse; text-align: left; vertical-align: top; padding: 5px; } TABLE.jsonTable thead tr td { font-weight: bold; } /* hgTrackUi page formatting */ label.trackUiHicLabel { font-style: italic; font-size: 0.9em; } table.trackUiFilterTable { padding : 3px;` margin-top : 6px; border-collapse : collapse; border: none; } table.trackUiFilterTable tr:first-child td { border-top : 1px solid #CCC; padding-top: 8px; } table.trackUiFilterTable tr:last-child td { border-bottom : 1px solid #CCC; padding-bottom: 5px; } table.trackUiFilterTable tr td:first-child { border-left: 1px solid #CCC; } table.trackUiFilterTable tr td:last-child { border-right: 1px solid #CCC; } table.trackUiFilterTable td { border-left: 1px solid #CCC; padding-left: 8px; padding-right: 8px; vertical-align:top; } table.trackUiFilterTable td:first-child { border-left: none; } table.hgTrackUiScoreFilterTable { border-spacing : 0; } table.hgTrackUiScoreFilterTable tr:first-child td { padding-top: 10px; } table.hgTrackUiScoreFilterTable tr:last-child td{ padding-bottom: 10px; } label.trackUiHicLabelExpand { font-style: italic; font-size: 0.9em; } img.trackUiHicLabelArrow { transform: rotate(0deg); max-width: 9px; } img.trackUiHicLabelArrow.open { transform: rotate(90deg); } div.trackUiHicHiddenAttributes { font-size: 0.9em; display: none; max-height: 10em; max-width: 60em; overflow: scroll; background-color: white; margin-top: 0.5em; margin-bottom: 0.5em; border: solid; border-width: thin; } #superTrackTable { border-collapse: collapse; } #superTrackTable tr { border-bottom: 1px solid #DDD; } #superTrackTable td { vertical-align: top; } .seg-btn-group { display: inline-flex; } /* the buttons in the middle */ .seg-btn-group button { border-radius: 0px; color: #777; padding: 2px 3px; font-size: 11px; font-weight: 500; border: 1px solid #ccc; background: #fff; cursor: pointer; transition: background 0.15s, color 0.15s; margin: 0; outline: none; margin-left: -1px; } /* the first button is round on the left */ .seg-btn-group button:first-child { margin-left: 0; border-radius: 3px 0 0 3px; } /* the last button is round on the right */ .seg-btn-group button:last-child { border-radius: 0 3px 3px 0; } .seg-btn-group button:hover:not(.seg-active) { background: #f5f5f5; } /* the active button is the 'pressed' button, dark with bright text */ .seg-btn-group button.seg-active { background: #888888; color: #fff; border-color: #AAAAAA; z-index: 1; position: relative; } /* -------------- */ /* hgTracks config page groups list */ TABLE.groupLists { background-color: #FFFEE8; width: 50em; } TABLE.groupLists TR:not(.blueToggleBar):not(.noData) TD { border: 1px solid; } /* for displaying a basic table - need to condense these to all just the .stdTbl class */ table.chainTbl, .descTbl, .stdTbl {border-collapse: collapse;} table.chainTbl td, .descTbl td, .descTbl th, .stdTbl td, .stdTbl th {border: 1px solid #666; padding: 5px;} table.descTbl td.number { text-align: right; } /* --------------- Newer UI 2.0 styles --------------- */ .ghost { background-color: #EEEEEE; } .pale { background-color: #F8F8F8; } .bgLevel1 { background-color: #FFFEE8; } .bgLevel2 { background-color: #FFF9D2; } .bgLevel3 { background-color: #FCECC0; } .bgLevel4 { background-color: #EED5B7; } /* Common boxes */ .inputBox { border: 2px inset #CCCCCC; } .lineOnTop { border-top: 1px solid #999999; } .lineOnBottom { border-bottom: 1px solid #999999; } .blueRoof { border-top: 2px groove #000088; } .greenRoof { border-top: 3px groove #008800; } /*.greenFloor { border-bottom: 3px ridge #008800; }*/ .greenBox { border: 5px outset #008800; } .blueBox { border: 4px inset #000088; } /* cfg box */ .redBox { border: 3px ridge #AA0000; background-color: #FFF9D2; padding: 10px; margin: 10px; text-align: left; } /* Special alert */ /* Experiments with squeezing giant matrices */ .up45 { text-align: left; vertical-align: middle; width: 20px; margin: 0px; padding: 10px 3px 0px 3px; white-space: nowrap; position: relative; top: 0.8em; left: -0.4em; -webkit-transform: rotate(-45deg); -webkit-transform-origin:0% 0%;/* for safari, chrome, etc. */ -moz-transform: rotate(-45deg); -moz-transform-origin:0% 0%;/* for firefox */ -ms-transform: rotate(-45deg); -ms-transform-origin:0% 0%;/* IE 9 */ -o-transform: rotate(-45deg); -o-transform-origin:0% 0%;/* Opera */ display: none; /* made visible in js code */ /* filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* IE <9 90deg NOT SUPPORTED */ /*filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.999884,M12=0.015230,M21=-0.015230,M22=0.999884);*/ /* IE<9 NOT SUPPORTED, conflits with IE9 */ } .dn45 { text-align: left; vertical-align: middle; width: 20px; margin: 0px; padding: 10px 3px 0px 3px; white-space: nowrap; position: relative; top: -1.4em; /* left: -0.1em; */ -webkit-transform: rotate(45deg); -webkit-transform-origin:0% 100%;/* for safari, chrome, etc. */ -moz-transform: rotate(45deg); -moz-transform-origin:0% 100%;/* for firefox */ -ms-transform: rotate(45deg); -ms-transform-origin:0% 100%;/* IE 9 */ -o-transform: rotate(45deg); -o-transform-origin:0% 100%;/* Opera */ display: none; /* made visible in js code */ /* filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); /* IE <9 90deg NOT SUPPORTED */ /* filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.999884,M12=-0.015230,M21=0.015230,M22=0.999884);*/ /* IE<9 NOT SUPPORTED, conflits with IE9 */ } /* For a cleaner site, we can remove underlines from links a:link {text-decoration:none;} a:visited {text-decoration:none;} a:hover {text-decoration:underline;} a:active {text-decoration:underline;} */ a.cv:link {text-decoration:none;} a.cv:visited {text-decoration:none;} a.cv:hover {text-decoration:underline;} a.cv:active {text-decoration:underline;} .matCell { border: 1px solid #FFFEE8; } /*.matCell:hover { background-color: #FCECC0; }*/ .hintCol { font-size: 70%; line-height: 80%; border-style: hidden; background-color: #FFF9D2; } .hintRow { font-size: 70%; line-height: 80%; border-style: hidden; background-color: #FFF9D2; } /* halfVis may need to be removed again, but I am hoping it works in DTD 4.01 transitional */ .halfVis { opacity: 0.5; filters.alpha.opacity:50; } /* waitMask allows waiting on long running javascript using utils.js::waitOnFunction */ .waitMask { display: none; cursor: wait; z-index: 9999; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: #fff; } .inOutButton { height: 24px; width: 24px; border-style: outset; } /* A [+][-] button can be toggled by waitOnFunction during long running scripts */ /* imageV2 */ div.dragZoom { cursor: text; } img.sliceImg { position:relative; border:0; z-index:10;} /* z-index allows highlight beneath img */ div.sliceDiv { overflow:hidden; } div.highlightItem { opacity:0.7; border-style:none; position:absolute; overflow:hidden; } div.loading { position: absolute; opacity: 0.75; z-index: 15; background: white url("/images/loading.gif") no-repeat center; } #imgTbl map {position: relative; z-index:11} /* These are for imageV2 sideButtons: */ .btn { border-style: outset; background-color: #CCCCCC; border-color: #CCCCCC; } /* border-color: works for FF but screws up IE */ .btnN { border-width: 1px 1px 1px 1px; margin: 1px 1px 0px 1px; } /* connect none */ .btnU { border-width: 0px 1px 1px 1px; margin: 0px 1px 0px 1px; } /* connect up */ .btnD { border-width: 1px 1px 0px 1px; margin: 1px 1px 0px 1px; } /* connect down */ .btnL { border-width: 0px 1px 0px 1px; margin: 0px 1px 0px 1px; } /* connect linear */ .btnBlue { background-color:#91B3E6; } .btnGreen { background-color:#108020 } .inset { border-style: inset; } /* Flatten button if not configurable */ /* These are for dragReorder: both in imageV2 and in hgTrackUi subtrack list */ .trDrag { background-color: #CCFFCC; } .dragHandle { cursor: n-resize; } /* in hgTracks imageV2, left label (and reverse rightLabel) now uses css for red line */ .tdLeft { border-right:1px solid #FFB4B4; } .tdRight { border-left:1px solid #FFB4B4; } /* These are duplicates of btnBlue and trDrag but allow useful highlighting to persist after hover */ .blueButtons { background-color:#91B3E6; } .greenRows { background-color: #CCFFCC; } /* The are for sortable tables */ table.subtracks { overflow: visible; white-space: nowrap; border: 1px solid #FFFEE8; } table.subtracks table { white-space: normal; } tr.sortable { background-color: #FCECC0; } th.sortable { color: #0000FF; } th:hover.sortable { background-color: #CCFFCC; cursor: pointer; } tbody.sorting { color: #DDDDDD; cursor: wait; } /* For color selector inputs */ input[type=color] { padding: 0px; } /* tr:hover.found { color: #000088; } */ .filterBy { display: none; } /* All filterBy's should be converted to dropdownchecklists by document.ready(). */ .noscript { background: none repeat scroll 0 0 #FFFF90; border-color: #CFCFCF; border-style: solid; border-width: 0 0 1px; color: #2F2F2F; font-size: 12px; line-height: 1.25; text-align: center; margin: 0; padding: 0; } .noscript .noscript-inner { background:url("/images/caution.gif") no-repeat scroll 20px 50% transparent; margin:0 auto; padding:12px 0; width:960px; text-align: center; } .noscript p { margin: 0; text-align: center; } .clickable:hover { cursor: pointer; } .fauxInput { border: 2px inset #CCCCCC; background-color: #fff; font-size: 10pt; display: inline-block; } div.disabled { border-color: gray; color: gray; } input.disabled { opacity: 0.5; filters.alpha.opacity:50; } span.disabled { opacity: 0.5; filters.alpha.opacity:50; } td.disabled { color: gray; } .positionDisplay { display: inline-block; padding: 3px; /* border-radius: 3px; */ border: lightgray 1px solid; font-size: 90%; } .positionDisplay:hover { cursor: default; } .positionInput { padding: 3px; /* border-radius: 3px; */ border: gray 1px solid; } #hgt\.left3, #hgt\.in1, #hgt\.out1 { border-right: 1px solid lightgray; border-top-left-radius: 3px; border-bottom-left-radius: 3px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; } #hgt\.left2, #hgt\.left1, #hgt\.right1, #hgt\.right2, #hgt\.in2, #hgt\.in3, #hgt\.out2, #hgt\.out3 { border-right: 1px solid lightgray; border-left: 1px solid lightgray; border-radius: 0px; } #hgt\.right3, #hgt\.inBase, #hgt\.out4 { border-left: 1px solid lightgray; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 0px; border-bottom-left-radius: 0px; } .pennantIconText { text-decoration: none; text-transform: capitalize; font-size: 70%; font-style: italic; font-weight: bold; vertical-align: text-top; } .folderIcon { /* color: #00457c; color of SVG must be set via fill attribute, see hui.c:printIcons() */ height: 13px; vertical-align: top; } /* Styles for hgHubConnect (formerly in separate .css) by Greg Roe Last update: 2011-11-1 (greg) */ #tabs { font-size: 100%; margin-top: 5px; } #sessionTable thead th, #sessionTable thead td { padding: 4px 4px 4px 17px !important; } #sessionTable thead .sorting, #sessionTable thead .sorting_asc, #sessionTable thead .sorting_desc, #sessionTable thead .sorting_asc_disabled, #sessionTable thead .sorting_desc_disabled { background-position: center left !important; } .hubList table { width: 930px; border-collapse: collapse; } /* Creating rounded corners at the tops of tables - works with all CSS3 supporting browsers, degrades gracefully */ .hubList table tr:first-child th:first-child {-webkit-border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; border-top-left-radius: 5px;} .hubList table tr:first-child th:last-child {-webkit-border-top-right-radius: 5px; -moz-border-radius-topright: 5px; border-top-right-radius: 5px;} /* Styling table cells */ .hubList tbody {font-size: 0.9em;} .hubList table tr td:first-child {text-align: center;} .hubList table#unlistedHubsTable tr td:last-child {text-align: center;} .hubList th, .hubList td {padding: 2px 8px; text-align: left;} .hubList th {background-color: #e5dfb1; height: 1.6em; vertical-align: middle;} .hubList table tbody tr {background-color: #fffef8;} .selectedRow {background-color: #99dd9a !important;} .hoverRow {background-color: #fdffb7 !important;} .hubList td {border-top: 1px solid #d5cd9e; border-bottom: 1px solid #d5cd9e;} .centeredCol {text-align: center;} #addHubBar {background-color: #bfbfb2; line-height: 2.3em;} #hubURL {line-height: 0.9em; color: #1c1d22;} .hubList input {margin: 3px; font-size: 0.8em;} .submitHub {margin: 10px;} .hubButton {background-color: #ffffff; width: 100px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .hubDisconnectButton { background-color: #bfbfb2; width: 100px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .tabFooter { font-size: 100%; font-family: Verdana,Arial,sans-serif; } .tabFooter input { font-size: 0.8em; margin: 7px 0 7px 3px; } .tabFooter .small {margin: 2px 40px; font-size: 0.8em;} .hubError {color: #F00000;} /* END - hgHubConnect Styles */ /* User account login/signup styles */ .formBox a {text-decoration: none} .formBox a:hover {text-decoration: underline;} .centeredContainer {margin: 0 auto;} .formBox { width: 400px; border: 2px solid #eed5b7; margin-top: 2.5em; padding: 0 30px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background-color: #fff9d2;} .formBox input {font-size: 1.04em;} .formBox label {display: block; margin-top: 10px;} .formBox label.radioLabel {display: inline; margin: 0;} #helpBox { margin-top: 20px; padding: 20px 0 10px 0; border-top: 1px solid #eed5b7;} label small { font-style: italic; font-size: 0.9em;} .highlightBox { /* combine with classes error, alert, or highlight */ border: 2px solid; padding: 10px;} .error { /* for use with highlightBox, when used for error msgs */ border-color: #f00; background-color: #ffeded; color: #f00;} .confirmationTxt { font-size: 1.2em; font-weight: normal;} /* END - User account login/signup styles */ /* [+][-] buttons are no longer images but divs */ .pmButton { font-size: small; font-weight:bold; text-align:center; font-family: courier; color: black; display: inline-block; width:16px; height:16px; vertical-align: top; border: 2px outset lightGray; border-bottom-color:darkgray; border-right-color:darkgray; background-color:#F3EDED; cursor: pointer;} .pmButton:hover { border-bottom-color:DarkBlue; border-right-color:DarkBlue; color: #0000AA; background-color:#AADDFF; } /* Experimental hilighting of all buttons on hover */ /* input[type=submit]:hover,input[type=button]:hover { color: #0000AA; border:2px outset #008800; } */ /* img[src="../images/add_sm.gif"]:hover,img[src="../images/remove_sm.gif"]:hover { outline:#008800 outset 1px; } */ /* Styles for static pages with the "original" browser look */ body.oldStaticPage { background-color: rgb(255,249,210); /* #fff9d2 */ } body.oldStaticPage .nav { margin: 6px 0 6px; } body.oldStaticPage .section h1 { background-color: rgb(217,228,248); /* #d9e4f8 */ font-size: 1.1em; padding: 3px 14px; margin: 0; } body.oldStaticPage .sectionContent { padding: 0 14px; } #hgFindResults { padding: 1em; } #warnBox { background-color: Beige; border: 3px ridge DarkRed; padding:10px; margin:10px; text-align:left; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10000; width: 800px; } #warnHead { color: DarkRed; } /* like warnBox, but under the menu, not in the middle of the screen */ .notifBox { background-color: beige; border: 1px solid grey; padding: 5px; margin: 5px; text-align: center; } +/* a notifBox that is only shown on the page where something happened, e.g. after a session + * was loaded. Card grey of the Sessions page, and left-aligned, as the text is a paragraph */ +.notifBoxOnce { + background-color: #f6f8fa; + border: 1px solid #d0d0d0; + padding: 10px 14px; + /* the width is not set, so that the box cannot stick out to the right of the window */ + margin: 5px 10px 5px 100px; + text-align: left; +} + /* For jquery-ui dialog box */ div.warnDialog { border: 2px solid; } div.warnDialog .ui-dialog-titlebar { background-color: #FF8566; } div.warnDialog .ui-dialog-title { font-weight: bold; color: #000000; } div.warnDialog .ui-dialog-content { background-color: #FFFEE8; font-size: 1em; } div.warnDialog .ui-dialog-buttonpane { border-width: 0; text-align: center; } div.warnDialog .ui-dialog-buttonset { width: 100%; display: inline-block; } body > div.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-draggable.ui-resizable * { font-size: 14px; } .centeredImage { text-align: center; margin-top: 0px; margin-bottom: 0px; padding: 0px; } /* Style for geneAlleles (haplotypes) */ table#alleles { font-size:small; } table#alleles TD.topHat {background-color:#FCECC0;} /* 1st of 2 rows in header. Not '.sortable' */ table#alleles TR.allele { text-align:center; } table#alleles TD.pop { text-align:left; } table#alleles TH.ref { text-align:right; } table#alleles TD.ref { text-align:right; } /* table#alleles TH.var { text-align:center; } table#alleles TD.var { text-align:center; font-weight:bold; } */ table#alleles TD.var { font-weight:bold; } table#alleles TH.seq { text-align:left; } table#alleles TD.seq { text-align:left; } div#haplotypes .hilite { opacity: 0.2; filters.alpha.opacity:20; position: absolute; background-color: #339933; } /* greenish */ div#haplotypes .hiliteSpecial { background-color: #33FFFF; } /* bluish */ div#haplotypes input.toggleButton { width:160px; height:1.7em; } div#haplotypes .textOpt { color:#0000CD; } /* medium blue */ div#haplotypes .textInfo { color:#006600; } /* dark green */ div#haplotypes .textAlert { color:#DC143C; } /* dark red */ .hidden { display:none; } /* allows toggling visibility by addClass/removeClass */ .readableWidth { /* For wrapping description text on pages that can get very wide */ width: 70em; } .hgtaNoGenome { color: gray; } .autoCompleteInfo { color: #666; padding-left: 3px; background-color: #EEE; } /* for autocompleteCat (autocomplete with optional category labels) */ .ui-autocomplete-category { /* Adapted from https://jqueryui.com/autocomplete/#categories */ font-weight: bold; line-height: 1.5; background: lightgray; } .ui-menu-item { /* This is necessary if a background color is specified in .ui-autocomplete-category above; * the category labels actually extend upwards, behind the preceding items! */ background: white; } /* Added for Angie's React UI stuff */ .cgiTitleBox { background-color: #D9E4F8; padding: 5px; } .cgiTitle { font-weight: bold; font-size: larger; color: #000000; text-align: left; white-space: nowrap; display: inline-block; padding-right: 5px; } .cgiContents { margin: 5px; } .sectionBorder { border: 1px solid gray; margin-top: 5px; } .sectionPanel { background-color: #FFFEE8; } .sectionHeader { background-color: #EEF3FB; font-weight: bold; color: #000000; text-align: left; vertical-align: bottom; white-space: nowrap; padding-top: 3px; padding-bottom: 3px; padding-left: 3px; } .sectionContents { margin: 5px; } .sectionRow { margin-top: 5px; } .sectionItem { display: inline-block; padding-right: 5px; } .subsectionBox { padding: 5px; border: black solid 1px; } .boldText { font-weight: bold; color: #000000; text-align: left; white-space: nowrap; } a.reactLink { /* React/JSX translates into its UTF-8 equivalent. Trouble is, our CGI code * always adds a 'CHARSET=iso-8859-1' to the header, possibly because we serve data * from MariaDB tables with that encoding ("latin1"), so I'm reluctant to change something * that CGIs have done since 2001 (622545af). * Now, why the rant about ? -- because React/JSX also smushes <A> together with * its surrounding text, if there are newlines between them in the JSX. Add some padding. */ padding-left: 0.3em; padding-right: 0.3em; } .disabledMessage { padding: 5px; color: gray; font-style: italic; } .sortHandle:hover { cursor: ns-resize; } .smallText { font-size: small; } .floatLeft { float: left; } .floatRight { float: right; } .clear { clear: both; } /* react/lib/Modal-specific */ .absoluteModal { position: absolute; display: inline-block; top: 75px; left: 5%; width: 90%; z-index: 100; background-color: #FFFEE8; border-style: solid; border-width: 2px; border-color: black; overflow: auto; } /* react/lib/LoadingImage-specific */ .loadingMessage { color: red; font-style: italic; } /* hgAi-specific */ .dataSourceSubsection { padding-top: 5px; padding-bottom: 5px; } /* hgChooseDb-specific */ img.speciesIcon { width: 50px; height: 50px; border-width: 1px; border-style: solid; margin: 5px; } .speciesButton { display: inline-block; margin-top: 5px; margin-bottom: 5px; text-align: center } /* hgPublicSessions-specific */ table.sessionTable tbody tr:hover{ background-color:#fdffb7 !important; } a:link img.sessionThumbnail { padding: 5px; } input[type="submit"].pressed { background: #d0dcff; webkit-box-shadow: inset 0 1px 4px rgba(0,0,0,0.6); moz-box-shadow: inset 0 1px 4px rgba(0,0,0,0.6); box-shadow: inset 0 1px 4px rgba(0,0,0,0.6); text-shadow: 0 -1px 0 rgba(0,0,0,0.2); border-radius: 4px; } input[type="button"].pressed { background: #ebf0ff; webkit-box-shadow: inset 0 1px 4px rgba(0,0,0,0.6); moz-box-shadow: inset 0 1px 4px rgba(0,0,0,0.6); box-shadow: inset 0 1px 4px rgba(0,0,0,0.6); text-shadow: 0 -1px 0 rgba(0,0,0,0.2); border-radius: 4px; } .positionDisplay.pressed { background: #ebf0ff; webkit-box-shadow: inset 0 1px 4px rgba(0,0,0,0.6); moz-box-shadow: inset 0 1px 4px rgba(0,0,0,0.6); box-shadow: inset 0 1px 4px rgba(0,0,0,0.6); text-shadow: 0 -1px 0 rgba(0,0,0,0.2); border-radius: 4px; } /* Session label in a box */ span.gbSessionLabelPanel { background-color: #e0e0e0; border-style: solid; border-color: #c2c2c2; border-width: 1px; padding: 3px; padding-top: 1px; margin-left: 10px; cursor: default; } span.gbSessionLabelPanel:hover { background-color: #d4d4d4; } span.gbSessionLabelText { color: darkblue; } span.gbSessionChanged { color: darkslategray !important; } /* Table browser styles */ .tbTooltip { display: inline-block; } .tbTooltipLabel { background: #EFEFEF; padding: 5px; cursor: pointer; } .tbTooltiptext { visibility: hidden; font-style: italic; font-size: smaller; padding: 5px; } .tbTooltip:hover .tbTooltiptext { visibility: visible; } /* Tooltips - Note these are just general rules all the tooltips will have, the * exact positioning is set by associated javascript in utils.js */ .tooltip { visibility: hidden; background-color: rgb(238,238,238); color: black; text-align: left; position: fixed; z-index: 1003; /* these indices are all over the place for various things */ opacity: 0; line-height: 1em; padding: 3px; border: 1px solid black; border-radius: 2px; box-shadow: 0px 1px 2px darkgrey; max-width: 400px; /* Allow breaking long lines, hopefully web browsers will mostly pick * punctuation, primarily added to support the gnomad tooltips where the 'variation' * filter is a long comma sep list with no spaces after the commas */ white-space: normal; overflow-wrap: anywhere; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 0.9; } .chainBreak { display: grid; grid-template-columns: max-content max-content; row-gap: 10px; } .dialogNewWindowIcon { position: absolute; right: 1.5em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; } .bed-form { display: grid; grid-template-columns: 1fr 2fr; gap: 0.5rem 1rem; max-width: 500px; margin: 2rem auto; font-family: sans-serif; } .bed-form label { text-align: right; padding-right: 0.5rem; } .bed-form input[type="text"], .bed-form input[type="number"], .bed-form input[type="color"] { width: 100%; padding: 0.4rem; } .bed-form button { grid-column: span 2; padding: 0.6rem; font-size: 1rem; } .hgTracksGearIcon { position: absolute !important; top: 4px; left: -25%; line-height: 16px; display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; cursor: pointer; z-index: 10; } .hgTracksCloseIcon { position: absolute !important; top: 4px; line-height: 16px; vertical-align: top; display: inline-block; width: 16px; height: 16px; cursor: pointer; z-index: 10; } .hgTracksCloseIconLeft { left: 2px; } .hgTracksCloseIconRight { right: 2px; } #hgta_doClearFilter { color: red; } #hgta_doClearIdentifiers { color: red; } #hgta_doClearIntersect { color: red; } #hgta_doClearUserRegions { color: red; } #hgta_doClearSubtrackMerge { color: red; } .section-row { display: flex; align-items: flex-start; gap: 12px; margin: 12px 0; } .table-section-title { display: inline-block; font-weight: bold; padding: 6px 12px; background: #dcdcdc; border: 1px solid #bbb; border-radius: 4px; white-space: nowrap; /* stays on one line */ } .table-scroll-wrapper { overflow-x: auto; flex: 1; } .table-grid { display: grid; grid-auto-flow: row; grid-auto-columns: minmax(120px, auto); gap: 4px; } .table-cell { padding: 6px 10px; border: 1px solid #ccc; background: #fafafa; } .table-header { background: #e6e6e6; font-weight: bold; } .searchCell { white-space: nowrap; vertical-align: top; } .searchCell > .flexContainer { display: flex; flex-direction: column; gap: 0.2em; min-width: 0; max-width: 500px; } .searchBarAndButton { display: flex; align-items: center; gap: 0.25em; } .searchCell:first-child { padding-right: 1em; } .searchBarAndButton { display: flex; align-items: center; max-width: 500px; min-width: 0; gap: 0.25em; } .genomeSearchBarDefault { flex: 1; box-sizing: border-box; min-width: 0; } .genomeSearchToggle { background: none; border: 1px solid #ccc; border-left: none; padding: 2px 5px; cursor: pointer; color: #666; font-size: 10px; line-height: 1; margin-left: -1px; } .genomeSearchToggle:hover { color: #333; background: #f0f0f0; } .tbSearchLabel { font-weight: bold; white-space: normal; max-width: 100%; box-sizing: border-box; } /* For styling facetedComposite UI elements */ #dataTypeSelector { border-left: 4px solid #4a90d9; padding: 12px 16px; margin-bottom: 16px; background: #f8fafc; } #dataTypeSelector:empty { border-left: none; background: none; padding: 0; margin-bottom: 24px; }