css/needinfo.css

@font-face {
  font-family: Moz;
  src: url("../fonts/MozTT-Medium.ttf");
}

body {
  margin: 0px;
}

.header {
  margin-bottom: 14px;
  height:7vh;
  color: white;
  text-align: center;
  font-size:  4.5vmin;
  font-family: Moz;
  border:0px solid black;
}

.header-bg {
  position: absolute;
  z-index: -1;
  margin: 0px;
  height: 8vh;
  border-right: 100vw solid #FF9500;
}

.header div {
  display: inline-block;
  height: 100%;
  vertical-align: top;
}

#title-img {
  height: 100%;
}

.title {
  margin-top: 10px;
}

.title-details {
  margin-top: 10px;
  font-size: 3.5vmin;
}

/* include margin and padding in sizing calulations */
* {
  box-sizing: border-box;
}

#content {
  height: 67vh;
  text-align: center;
}

a {
}

.nodecoration {
  text-decoration: none;
  color: black;
}

a:hover {
  color: highlight;
}

/* index pane css */
.table-container {
  padding-top: 25px;
  padding-left: 100px;
  padding-right: 100px;
  float: left;
  width: 100%;
  display: grid;
  gap: 0px;
  border: 0px solid gray;
  font-size: 2vmin;
  font-family: Moz;
}

.report-title, .report-odr, .report-otr, .report-cdr, .report-onb, .report-cnb {
  border: 0px solid blue;
}

.report-title, .report-odr, .report-otr, .report-cdr, .report-onb, .report-cnb {
  min-height: 4vh;
  text-align: left;
  border-bottom: 1px solid #e0e0e0;
  padding-top: 7px;
}

.report-title {
  text-decoration:auto;
}

.report-title {
  grid-column: 1;
}

.report-odr {
  grid-column: 2;
  text-align: center;
}

.report-otr {
  grid-column: 3;
  text-align: center;
}

.report-cdr {
  grid-column: 4;
  text-align: center;
}

.report-onb {
  grid-column: 5;
  text-align: center;
}

.report-cnb {
  grid-column: 6;
  text-align: center;
}

/* details pane css */

.details-container {
  padding-top: 5px;
  padding-left: 2vmin;
  padding-right: 2vmin;
  float: left;
  width: 100%;
  display: grid;
  gap: 0px;
  border: 0px solid gray;
  font-family: Moz;
}

.name-nidate-hdr, .name-bugid-hdr, .name-severity-hdr, .name-priority-hdr, .name-platform-hdr,
.name-checkbox, .name-nidate, .name-bugid, .name-assignee, .name-severity, .name-priority,
.name-platform, .name-nifrom, .name-nimsg, .name-bugtitle {
  text-align: left;
  border: 1px solid #eee;
  font-size: 1.3vmin;
  overflow: hidden;
  padding: 2px;
}

.name-nifromadd {
  color: darkgray;
}

.name-checkbox {
  grid-column: 1;
}

.name-nidate-hdr {
  cursor: pointer;
  grid-column: 2;
}

.name-bugid-hdr {
  cursor: pointer;
  grid-column: 3;
}

.name-severity-hdr {
  cursor: pointer;
  grid-column: 6;
}

.name-priority-hdr {
  cursor: pointer;
  grid-column: 7;
}

.name-platform-hdr {
  grid-column: 8;
}

.name-nidate {
  grid-column: 2;
  min-width: 8vmin;
}

.name-bugid {
  grid-column: 3;
  min-width: 6vmin;
}

.name-nifrom {
  grid-column: 4;
  min-width: 10vmin;
}

.name-assignee {
  grid-column: 5;
  min-width: 10vmin;
}

.name-severity {
  grid-column: 6;
  min-width: 5vmin;
}

.name-priority {
  grid-column: 7;
  min-width: 3vmin;
}

.name-platform {
  grid-column: 8;
}

 .name-bugtitle {
  grid-column: 9;
  min-width:28vmin;
}

.name-nimsg {
  grid-column: 10;
  width:auto;
  min-width: 28vmin;
}

.bug-link-container {
  display: inline-block;
  text-align: center;
  align-self: center;
  border: 0px solid blue;
  white-space: nowrap;
  width: 100px;
}

.bug-link {
}

.bug-icon {
  border: 0px solid red;
  max-height: 5px;
  height: 5px;
  margin-left: 10px;
}

.errors-container {
  padding-top: 20px;
  padding-left: 2vmin;
  padding-right: 2vmin;
  float: left;
  width: 100%;
  border: 0px solid gray;
  font-family: Moz;
  color: #cc0000;
  display: inline-block;
  font-size: 1.5vmin;
}

.footer {
  padding-top: 10px;
  padding-left: 2vmin;
  padding-right: 2vmin;
  width: 100%;
  border: 0px solid gray;
  font-family: Moz;
  color: #909090;
  display: inline-block;
  font-size: 1.0vmin;
}

.footer a {
  text-decoration: none;
  color: #606060;
}

/* circular throbber for page loads */
.progress {
  position: absolute;
  margin-left: 40%;
  margin-top: 100px;
  visibility: visible;
}

/* COMMAND BUTTONS */

/* index.html - team select, separator, date, refresh, settings, alert */

.index-command-button-container {
  display: grid;
  grid-template-columns: 300px auto 10% 10% 10% 5px;
  grid-gap: 10px;
  font-family: Moz;
  margin-top: 10px;
}

.date-picker {
  font-family: Moz;
  background: ButtonFace;
  font-size: 1.2vmin;
  font-family: Moz;
  padding-left: 10px;
  padding-right: 10px;
  border: 1px solid grey;
  border-radius: 2px;
}

.team-select {
  margin-left: 10px;
  font-family: Moz;
}

.team-option {
  padding: 5px;
  font-family: Arial, Helvetica, sans-serif;
}

/* details.html - stats, status, selfni, saveforlater, redir-setter, redir-to, clear-cmt, clear, separator, refresh, settings, alert */

.details-command-button-container {
  display: grid;
  grid-template-columns: auto 250px repeat(4, auto) 10px repeat(2, auto) 5px;
  grid-gap: 10px;
  font-family: Moz;
  margin-top: 10px;
}

.command-button:disabled {
  cursor: default;
}

.command-button {
  font-size: 1.2vmin;
  font-family: Moz;
  padding-left: 10px;
  padding-right: 10px;
  border: 1px solid grey;
  border-radius: 2px;
}

.command-button-hidden {
  visibility: collapse;
}

.stats {
  padding-left: 10px;
  align-self: center;
}

.button-separator {
}

.settings-button-container {
}

.alert-icon {
  visibility: hidden;
  margin-left: -10px;
  margin-top: 0px;
}

.status-text {
  visibility: collapse;
  margin-top: 2px;
  padding: 3px 15px 3px 15px;
  border-radius: 2px;
  font-size: 1.2vmin;
  font-family: Moz;
  border: 1px solid #eeeeee;
  background-image: linear-gradient(to right, rgb(186 232 188), rgb(186 232 188));
  background-size: 50%;
  background-repeat: no-repeat;
  color: gray;
}

/* DIALOGS */

/* generic use dialog grid rows */
.prompt-row1 {
  grid-row: 1;
}

.prompt-row2 {
  grid-row: 2;
}

.prompt-row3 {
  grid-row: 3;
}

.prompt-row4 {
  grid-row: 4;
}

.prompt-row5 {
  grid-row: 5;
}

.prompt-row6 {
  grid-row: 6;
}

/* generic use dialog grid cols */
.prompt-col1 {
  grid-column: 1;
}

.prompt-col2 {
  grid-column: 2;
}

/* standardized dialog buttons */
.btn-confirm,
.btn-cancel {
  padding: 12px 20px;
  border: none;
  background-color: #8ebf42;
  color: #fff;
  cursor: pointer;
  width: 100%;
}

.btn-cancel {
  background-color: #cc0000;
}

/* shared dialogs */

/* settings dialog */
#settings-dialog {
  width: 40%;
}

.settings-container {
  display: grid;
  grid-gap: 10px;
  width: 100%;
  font-size: 1.4vmin;
  font-family: Moz;
}

#api-key {
  font-size: 1.4vmin;
  font-family: Moz;
  width: auto;
  border: 1px solid #ccc;
  background: #eee;
}

.settings-options-container {
  display: grid;
  gap: 0px;
  grid-row-gap: 0px;
  width: 100%;
}

.settings-header {
  grid-column: 1 / span 2;
  margin-top: 20px;
  border-bottom: 1px solid #e0e0e0;
}

.settings-col1 {
  grid-column: 1;
  justify-self: end;
  padding-right: 10px;
}

.settings-col2 {
  grid-column: 2;
  justify-self: start;
}

.settings-label {
  margin-top: 3px;
}


/* index.html dialogs */

/* specific account search dialog */
#prompt-query-account {
  width: 40%;
  padding: 10px;
}

/* specific account search dialog container */
.prompt-query-account-container {
  display: grid;
  grid-gap: 10px;
  width: 100%;
}

/* detail.html dialogs */

/* generic dialog content container grid */
.prompt-container {
  display: grid;
  grid-gap: 10px;
  width: 100%;
}

/* generic these changes will impact x bugs info grid */
.prompt-confirm-info-grid {
  display: grid;
  gap: 0px;
  font-family: Moz;
  align-items: center;
}

.prompt-account-grid {
  display: grid;
  gap: 0px;
  font-family: Moz;
}

/* generic text element styling */
.prompt-text {
  font-size: 2vmin;
  align-self: center;
  justify-self: center;
}

/* generic highlighted text element styling */
.prompt-emphasis-text {
  font-size: 5vmin;
  align-self: center;
  justify-self: center;
  color: #cc0000;
}

/* generic comment text area */
.prompt-comment-textarea {
  width: 100%;
  resize: both;
  background: #eee;
  border: 1px solid #ccc;
}

.prompt-comment-textarea:focus {
  background: #ddd;
  outline: none;
}

.text-area-container {
}

.account-label {
  font-size: 1.4vmin;
  font-family: Moz;
  float: left;
  width: auto;
}

.account-label-soft {
  font-size: 1.4vmin;
  font-family: Moz;
  float: left;
  width: auto;
  color: #777;
}

/* generic text input for bugzilla nicks or emails */
.prompt-account-edit {
  font-size: 1.4vmin;
  font-family: Moz;
  width: auto;
  border: 1px solid #ccc;
  background: #eee;
}

/* generic user bug nick search selecttion element */
.prompt-user-search {
  font-size: 1.4vmin;
  width: 100%;
  height: auto;
  background: #eee;
  border: 1px solid #ccc;
}

.prompt-user-search:focus {
  background-color: #ddd;
  outline: none;
}

/* comnfirm changes with NO comment dialog */
#prompt-confirm {
  width: 40%;
}

/* comnfirm changes with a comment dialog */
#prompt-comment-confirm {
  width: 40%;
}

/* confirm changes with a redirect to the setter and comment dialog */
#prompt-redirect-confirm {
  width: 40%;
}

/* confirm changes with a redirect to someone and comment dialog */
#prompt-redirect-to-confirm {
  width: 40%;
}

/* redirecting to (setter) info div */
.prompt-details {
  font-size: 1.4vmin;
  font-family: Moz;
  display: inline-block;
  float: left;
  width: 100%;
}