946 lines
21 KiB
SCSS
946 lines
21 KiB
SCSS
@use "sass:map";
|
|
|
|
// Enable negative margin classes.
|
|
$enable-negative-margins: true;
|
|
|
|
// Don't add carets to dropdowns by default.
|
|
// $enable-caret: false;
|
|
|
|
$popover-max-width: 100%;
|
|
|
|
// Only import what we need:
|
|
// https://getbootstrap.com/docs/5.1/customize/optimize/
|
|
|
|
// Configuration
|
|
@import "~/node_modules/bootstrap/scss/functions";
|
|
@import "~/node_modules/bootstrap/scss/variables";
|
|
@import "~/node_modules/bootstrap/scss/mixins";
|
|
@import "~/node_modules/bootstrap/scss/utilities";
|
|
|
|
// Layout & components
|
|
@import "~/node_modules/bootstrap/scss/root";
|
|
@import "~/node_modules/bootstrap/scss/reboot";
|
|
@import "~/node_modules/bootstrap/scss/type";
|
|
@import "~/node_modules/bootstrap/scss/images";
|
|
@import "~/node_modules/bootstrap/scss/containers";
|
|
@import "~/node_modules/bootstrap/scss/grid";
|
|
@import "~/node_modules/bootstrap/scss/tables";
|
|
@import "~/node_modules/bootstrap/scss/forms";
|
|
@import "~/node_modules/bootstrap/scss/buttons";
|
|
@import "~/node_modules/bootstrap/scss/transitions";
|
|
@import "~/node_modules/bootstrap/scss/dropdown";
|
|
@import "~/node_modules/bootstrap/scss/button-group";
|
|
@import "~/node_modules/bootstrap/scss/nav";
|
|
@import "~/node_modules/bootstrap/scss/navbar";
|
|
@import "~/node_modules/bootstrap/scss/card";
|
|
@import "~/node_modules/bootstrap/scss/accordion";
|
|
// @import "~/node_modules/bootstrap/scss/breadcrumb";
|
|
@import "~/node_modules/bootstrap/scss/pagination";
|
|
@import "~/node_modules/bootstrap/scss/badge";
|
|
@import "~/node_modules/bootstrap/scss/alert";
|
|
// @import "~/node_modules/bootstrap/scss/progress";
|
|
@import "~/node_modules/bootstrap/scss/list-group";
|
|
@import "~/node_modules/bootstrap/scss/close";
|
|
// @import "~/node_modules/bootstrap/scss/toasts";
|
|
@import "~/node_modules/bootstrap/scss/modal";
|
|
@import "~/node_modules/bootstrap/scss/tooltip";
|
|
@import "~/node_modules/bootstrap/scss/popover";
|
|
// @import "~/node_modules/bootstrap/scss/carousel";
|
|
@import "~/node_modules/bootstrap/scss/spinners";
|
|
// @import "~/node_modules/bootstrap/scss/offcanvas";
|
|
// @import "~/node_modules/bootstrap/scss/placeholders";
|
|
|
|
// Helpers
|
|
@import "~/node_modules/bootstrap/scss/helpers";
|
|
|
|
// Utilities
|
|
@import "~/node_modules/bootstrap/scss/utilities/api";
|
|
|
|
// Make the bootstrap icons available.
|
|
$bootstrap-icons-font-src: url("~node_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff2?a97b3594ad416896e15824f6787370e0") format("woff2"),
|
|
url("~node_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff?a97b3594ad416896e15824f6787370e0") format("woff") !default;
|
|
@import "../../../node_modules/bootstrap-icons/font/bootstrap-icons";
|
|
|
|
// Leave room for fixed-top navbar...
|
|
body {
|
|
padding-top: 60px;
|
|
}
|
|
|
|
// ...and make sure it doesn't overlap when we scroll to anchors.
|
|
html {
|
|
scroll-padding-top: 60px;
|
|
}
|
|
|
|
// Make textareas use a monospace font
|
|
textarea {
|
|
font-family: var(--bs-font-monospace);
|
|
}
|
|
|
|
// Wrap long lines in preformatted text.
|
|
pre {
|
|
white-space: pre-wrap;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
// Make the font size choice cascade down into group menu dropdowns.
|
|
.leftmenu li>ul {
|
|
font-size: inherit;
|
|
}
|
|
|
|
// Highlight required form field labels with bi-asterisk
|
|
.required>label:after {
|
|
display: inline-block;
|
|
width: .75rem;
|
|
height: .75rem;
|
|
margin-left: .125rem;
|
|
margin-right: .125rem;
|
|
content: "";
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a1 1 0 0 1 1 1v5.268l4.562-2.634a1 1 0 1 1 1 1.732L10 8l4.562 2.634a1 1 0 1 1-1 1.732L9 9.732V15a1 1 0 1 1-2 0V9.732l-4.562 2.634a1 1 0 1 1-1-1.732L6 8 1.438 5.366a1 1 0 0 1 1-1.732L7 6.268V1a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
|
|
background-repeat: no-repeat;
|
|
// Recolor black to $red, see https://codepen.io/sosuke/pen/Pjoqqp
|
|
filter: invert(35%) sepia(9%) saturate(5669%) hue-rotate(312deg) brightness(102%) contrast(117%);
|
|
// font-weight: bold;
|
|
}
|
|
|
|
// Make the long dropdowns in the group menu scrollable.
|
|
.group-menu .dropdown-menu {
|
|
height: auto;
|
|
width: auto;
|
|
max-height: 35em;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
// Helper to constrain the size of the main logo
|
|
.ietflogo {
|
|
width: 75%;
|
|
max-width: 300px;
|
|
}
|
|
|
|
// Add some padding when there are multiple buttons in a line than can wrap
|
|
.buttonlist .btn {
|
|
margin-top: map.get($spacers, 2);
|
|
}
|
|
|
|
// Styles for d3.js graphical SVG timelines
|
|
#timeline {
|
|
font-size: small;
|
|
}
|
|
|
|
#timeline .axis path,
|
|
#timeline .axis line {
|
|
fill: none;
|
|
stroke: black;
|
|
}
|
|
|
|
#timeline .axis.y path,
|
|
#timeline .axis.y line {
|
|
stroke: none;
|
|
}
|
|
|
|
#timeline .axis.x text {
|
|
dominant-baseline: central;
|
|
}
|
|
|
|
#timeline .bar text {
|
|
fill: white;
|
|
dominant-baseline: central;
|
|
pointer-events: none;
|
|
}
|
|
|
|
$timeline-odd-color: $primary;
|
|
$timeline-odd-hover-color: shift-color($timeline-odd-color, $link-shade-percentage) !default;
|
|
|
|
#timeline .bar:nth-child(odd) rect {
|
|
fill: $timeline-odd-color;
|
|
}
|
|
|
|
#timeline .bar:nth-child(odd) rect:hover,
|
|
#timeline .bar:nth-child(odd) rect:focus {
|
|
fill: $timeline-odd-hover-color;
|
|
}
|
|
|
|
$timeline-even-color: $success;
|
|
$timeline-even-hover-color: shift-color($timeline-even-color, $link-shade-percentage) !default;
|
|
|
|
#timeline .bar:nth-child(even) rect {
|
|
fill: $timeline-even-color;
|
|
}
|
|
|
|
#timeline .bar:nth-child(even) rect:hover,
|
|
#timeline .bar:nth-child(even) rect:focus {
|
|
fill: $timeline-even-hover-color;
|
|
}
|
|
|
|
|
|
// Styles needed for the ballot table
|
|
|
|
.ballot-icon table td {
|
|
border: $table-border-width solid $gray-500;
|
|
height: 1em;
|
|
width: .8em;
|
|
}
|
|
|
|
.ballot-icon table .my {
|
|
border: 2 * $table-border-width solid #000;
|
|
}
|
|
|
|
// See https://getbootstrap.com/docs/5.0/customize/color/#all-colors
|
|
$color-discuss: $red-500;
|
|
$color-yes: $green-500;
|
|
$color-noobj: $green-100;
|
|
$color-abstain: $orange-400;
|
|
$color-recuse: $purple-400;
|
|
$color-norecord: $gray-300;
|
|
|
|
.is-blocking {
|
|
box-shadow: 0 0 map.get($spacers, 2) map.get($spacers, 2) $color-discuss;
|
|
margin: map.get($spacers, 2);
|
|
}
|
|
|
|
.color-discuss {
|
|
color: $color-discuss;
|
|
}
|
|
|
|
.color-yes {
|
|
color: $color-yes;
|
|
}
|
|
|
|
.color-noobj {
|
|
color: $color-noobj;
|
|
}
|
|
|
|
.color-abstain {
|
|
color: $color-abstain;
|
|
}
|
|
|
|
.color-recuse {
|
|
color: $color-recuse;
|
|
}
|
|
|
|
.color-norecord {
|
|
color: $color-norecord;
|
|
}
|
|
|
|
.bg-discuss {
|
|
background-color: $color-discuss;
|
|
}
|
|
|
|
.bg-yes {
|
|
background-color: $color-yes;
|
|
}
|
|
|
|
.bg-noobj {
|
|
background-color: $color-noobj;
|
|
}
|
|
|
|
.bg-abstain {
|
|
background-color: $color-abstain;
|
|
}
|
|
|
|
.bg-recuse {
|
|
background-color: $color-recuse;
|
|
}
|
|
|
|
.bg-norecord {
|
|
background-color: $color-norecord;
|
|
}
|
|
|
|
.border-discuss {
|
|
border-color: $color-discuss;
|
|
}
|
|
|
|
.border-yes {
|
|
border-color: $color-yes;
|
|
}
|
|
|
|
.border-noobj {
|
|
border-color: $color-noobj;
|
|
}
|
|
|
|
.border-abstain {
|
|
border-color: $color-abstain;
|
|
}
|
|
|
|
.border-recuse {
|
|
border-color: $color-recuse;
|
|
}
|
|
|
|
.border-norecord {
|
|
border-color: $color-norecord;
|
|
}
|
|
|
|
td.position-moretime,
|
|
td.position-notready,
|
|
td.position-discuss,
|
|
td.position-block {
|
|
background-color: $color-discuss;
|
|
}
|
|
|
|
td.position-yes {
|
|
background-color: $color-yes;
|
|
}
|
|
|
|
td.position-noobj {
|
|
background-color: $color-noobj;
|
|
}
|
|
|
|
td.position-abstain {
|
|
background-color: $color-abstain;
|
|
}
|
|
|
|
td.position-recuse {
|
|
background-color: $color-recuse;
|
|
}
|
|
|
|
td.position-norecord {
|
|
background-color: $white; // $color-norecord;
|
|
}
|
|
|
|
td.position-empty {
|
|
border: none !important;
|
|
}
|
|
|
|
|
|
/* === Edit Meeting Schedule ====================================== */
|
|
|
|
.edit-meeting-schedule .edit-grid {
|
|
position: relative;
|
|
display: flex;
|
|
}
|
|
|
|
.edit-meeting-schedule .edit-grid .room-label-column {
|
|
/* make sure we cut this column off - the timeslots will determine
|
|
how much of it is shown */
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
overflow: hidden;
|
|
width: 8em;
|
|
}
|
|
|
|
.edit-meeting-schedule .edit-grid .day {
|
|
margin-left: 1em;
|
|
margin-bottom: 2em;
|
|
}
|
|
|
|
.edit-meeting-schedule .edit-grid .room-label-column .day {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.edit-meeting-schedule .edit-grid .day-label {
|
|
height: 3em;
|
|
}
|
|
|
|
.edit-meeting-schedule .edit-grid .day-label .swap-days {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.edit-meeting-schedule .edit-grid .day-label .swap-days:hover {
|
|
color: #666;
|
|
}
|
|
|
|
.edit-meeting-schedule #swap-days-modal .modal-body label {
|
|
display: block;
|
|
}
|
|
|
|
.edit-meeting-schedule .edit-grid .day-flow {
|
|
margin-left: 8em;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.edit-meeting-schedule .edit-grid .room-group:not(:last-child) {
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.edit-meeting-schedule .edit-grid .time-header {
|
|
position: relative;
|
|
height: 1.5em;
|
|
padding-bottom: 0.15em;
|
|
}
|
|
|
|
.edit-meeting-schedule .edit-grid .time-header .time-label {
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 100%;
|
|
align-items: center;
|
|
}
|
|
|
|
.edit-meeting-schedule .edit-grid .time-header .time-label.would-violate-hint {
|
|
background-color: #ffe0e0;
|
|
outline: #ffe0e0 solid 0.4em;
|
|
}
|
|
|
|
.edit-meeting-schedule .edit-grid .time-header .time-label span {
|
|
display: inline-block;
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #444444;
|
|
}
|
|
|
|
.edit-meeting-schedule .edit-grid .timeslots {
|
|
position: relative;
|
|
height: 4.5em;
|
|
padding-bottom: 0.15em;
|
|
}
|
|
|
|
.edit-meeting-schedule .edit-grid .timeslot {
|
|
position: relative;
|
|
display: inline-block;
|
|
background-color: #f4f4f4;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.edit-meeting-schedule .edit-grid .timeslot .time-label {
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 100%;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #999;
|
|
}
|
|
|
|
.edit-meeting-schedule .edit-grid .timeslot .drop-target {
|
|
position: relative;
|
|
/* this is merely to make sure we are positioned above the time labels */
|
|
display: flex;
|
|
flex-direction: row;
|
|
height: 100%;
|
|
}
|
|
|
|
.edit-meeting-schedule .edit-grid .timeslot.dropping {
|
|
background-color: #ccc;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.edit-meeting-schedule .edit-grid .timeslot.overfull {
|
|
border-right: 0.3em dashed #f55000;
|
|
/* cut-off illusion */
|
|
}
|
|
|
|
.edit-meeting-schedule .edit-grid .timeslot.would-violate-hint {
|
|
background-color: #ffe0e0;
|
|
outline: #ffe0e0 solid 0.4em;
|
|
}
|
|
|
|
.edit-meeting-schedule .edit-grid .timeslot.would-violate-hint.dropping {
|
|
background-color: #ccb3b3;
|
|
}
|
|
|
|
.edit-meeting-schedule .constraints .encircled,
|
|
.edit-meeting-schedule .formatted-constraints .encircled {
|
|
border: 1px solid #000;
|
|
border-radius: 1em;
|
|
padding: 0 0.3em;
|
|
text-align: center;
|
|
display: inline-block;
|
|
}
|
|
|
|
.edit-meeting-schedule .formatted-constraints .encircled {
|
|
font-size: smaller;
|
|
}
|
|
|
|
/* sessions */
|
|
.edit-meeting-schedule .session {
|
|
background-color: #fff;
|
|
margin: 0.2em;
|
|
padding-right: 0.2em;
|
|
padding-left: 0.5em;
|
|
line-height: 1.3em;
|
|
border-radius: 0.4em;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.edit-meeting-schedule .session.selected {
|
|
cursor: grabbing;
|
|
outline: #0000ff solid 0.2em;
|
|
/* blue, width matches margin on .session */
|
|
z-index: 2;
|
|
/* render above timeslot outlines */
|
|
}
|
|
|
|
.edit-meeting-schedule .session.other-session-selected {
|
|
outline: #00008b solid 0.2em;
|
|
/* darkblue, width matches margin on .session */
|
|
z-index: 2;
|
|
/* render above timeslot outlines */
|
|
}
|
|
|
|
.edit-meeting-schedule .read-only .session.selected {
|
|
cursor: default;
|
|
}
|
|
|
|
.edit-meeting-schedule .session.readonly {
|
|
cursor: default;
|
|
background-color: #ddd;
|
|
}
|
|
|
|
.edit-meeting-schedule .session.hidden-parent * {
|
|
/* This makes .session.hidden-parent's children transparent but keeps the
|
|
* .session itself opaque so the timeslot label does not show through. */
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.edit-meeting-schedule .session.selected .session-label {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.edit-meeting-schedule .session.highlight {
|
|
outline-color: #ff8c00;
|
|
/* darkorange */
|
|
background-color: #f3f3f3;
|
|
}
|
|
|
|
.edit-meeting-schedule .session.would-violate-hint {
|
|
outline: 0.3em solid #F55000;
|
|
z-index: 1;
|
|
/* raise up so the outline is not overdrawn */
|
|
}
|
|
|
|
.edit-meeting-schedule .session.highlight .session-label {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.edit-meeting-schedule .session.dragging {
|
|
opacity: 0.1;
|
|
transition: opacity 0.4s;
|
|
}
|
|
|
|
.edit-meeting-schedule .timeslot.overfull .session {
|
|
border-radius: 0.4em 0 0 0.4em;
|
|
/* remove right-side rounding to allude to being cut off */
|
|
margin-right: 0;
|
|
}
|
|
|
|
.edit-meeting-schedule .edit-grid,
|
|
.edit-meeting-schedule .session {
|
|
font-family: arial, helvetica, sans-serif;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.edit-meeting-schedule .session .session-label {
|
|
flex-grow: 1;
|
|
margin-left: 0.1em;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.edit-meeting-schedule .session .session-label .bof-tag {
|
|
font-style: normal;
|
|
font-size: smaller;
|
|
color: #8b0000;
|
|
font-weight: bold;
|
|
float: right;
|
|
margin-right: 0.2em;
|
|
}
|
|
|
|
.edit-meeting-schedule .session.too-many-attendees .attendees {
|
|
font-weight: bold;
|
|
color: #8432d4;
|
|
}
|
|
|
|
.edit-meeting-schedule .session .constraints {
|
|
margin-right: 0.2em;
|
|
text-align: right;
|
|
flex-shrink: 1;
|
|
}
|
|
|
|
.edit-meeting-schedule .session .constraints>span {
|
|
display: none;
|
|
font-size: smaller;
|
|
}
|
|
|
|
.edit-meeting-schedule .session .constraints>span .encircled {
|
|
border: 1px solid #b35eff;
|
|
}
|
|
|
|
.edit-meeting-schedule .session .constraints>span.violated-hint {
|
|
display: inline-block;
|
|
color: #8432d4;
|
|
}
|
|
|
|
.edit-meeting-schedule .session .constraints>span.would-violate-hint {
|
|
display: inline-block;
|
|
font-weight: bold;
|
|
color: #f55;
|
|
}
|
|
|
|
.edit-meeting-schedule .session .constraints>span.would-violate-hint .encircled {
|
|
border: 1px solid #f99;
|
|
}
|
|
|
|
.edit-meeting-schedule .unassigned-sessions .session .constraints>span {
|
|
display: none;
|
|
}
|
|
|
|
.edit-meeting-schedule .session .session-info {
|
|
display: none;
|
|
}
|
|
|
|
/* scheduling panel */
|
|
.edit-meeting-schedule .scheduling-panel {
|
|
position: sticky;
|
|
display: flex;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
border-top: 0.2em solid #ccc;
|
|
margin-bottom: 2em;
|
|
background-color: #fff;
|
|
opacity: 0.95;
|
|
z-index: 5;
|
|
/* raise above edit-grid items */
|
|
}
|
|
|
|
.edit-meeting-schedule .scheduling-panel .unassigned-container {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.edit-meeting-schedule .unassigned-sessions {
|
|
margin-top: 0.5em;
|
|
min-height: 4em;
|
|
max-height: 13em;
|
|
overflow-y: auto;
|
|
background-color: #f4f4f4;
|
|
}
|
|
|
|
.edit-meeting-schedule .unassigned-sessions.dropping {
|
|
background-color: #e5e5e5;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.edit-meeting-schedule .unassigned-sessions .drop-target {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: flex-start;
|
|
min-height: 5em;
|
|
/* do not disappear when empty */
|
|
}
|
|
|
|
.edit-meeting-schedule .scheduling-panel .preferences {
|
|
margin: 0.5em 0;
|
|
}
|
|
|
|
.edit-meeting-schedule .scheduling-panel .preferences>span {
|
|
margin-top: 0;
|
|
margin-right: 1em;
|
|
}
|
|
|
|
.edit-meeting-schedule .sort-unassigned select {
|
|
width: auto;
|
|
display: inline-block;
|
|
}
|
|
|
|
.edit-meeting-schedule #timeslot-group-toggles-modal .modal-body>div {
|
|
margin-bottom: 1.5em;
|
|
}
|
|
|
|
.edit-meeting-schedule #timeslot-group-toggles-modal .modal-body .individual-timeslots {
|
|
/*column-count: 3;*/
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
}
|
|
|
|
.edit-meeting-schedule #timeslot-group-toggles-modal .modal-body .individual-timeslots>* {
|
|
margin-right: 1.5em;
|
|
}
|
|
|
|
.edit-meeting-schedule #timeslot-group-toggles-modal .modal-body .individual-timeslots label {
|
|
display: block;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.edit-meeting-schedule .session-parent-toggles {
|
|
margin-top: 1em;
|
|
}
|
|
|
|
.edit-meeting-schedule .toggle-inputs label {
|
|
font-weight: normal;
|
|
margin-right: 1em;
|
|
padding: 0 1em;
|
|
border: 0.1em solid #eee;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.edit-meeting-schedule .modal .day-options {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
}
|
|
|
|
.edit-meeting-schedule .modal .timeslot-options {
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.edit-meeting-schedule .modal .room-group {
|
|
margin: 2em;
|
|
}
|
|
|
|
.edit-meeting-schedule .scheduling-panel .session-info-container {
|
|
padding-left: 0.5em;
|
|
flex: 0 0 25em;
|
|
height: 20em;
|
|
font-size: 14px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.edit-meeting-schedule .scheduling-panel .session-info-container .comments {
|
|
font-style: italic;
|
|
}
|
|
|
|
.edit-meeting-schedule .scheduling-panel .session-info-container .other-session:hover {
|
|
cursor: default;
|
|
background-color: #eee;
|
|
}
|
|
|
|
/* A modified .container-fluid without padding on very narrow devices*/
|
|
.container-fluid-narrow {
|
|
padding-right: 15px;
|
|
padding-left: 15px;
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.container-fluid-narrow {
|
|
padding-right: 0;
|
|
padding-left: 0;
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
|
|
/* === Edit Meeting Timeslots and Misc Sessions =================== */
|
|
|
|
.edit-meeting-timeslots-and-misc-sessions .day {
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.edit-meeting-timeslots-and-misc-sessions .day-label {
|
|
text-align: center;
|
|
font-size: 20px;
|
|
margin-bottom: 0.4em;
|
|
}
|
|
|
|
.edit-meeting-timeslots-and-misc-sessions .room-row {
|
|
border-bottom: 1px solid #ccc;
|
|
// height: 20px;
|
|
display: flex;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.edit-meeting-timeslots-and-misc-sessions .room-label {
|
|
width: 12em;
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.edit-meeting-timeslots-and-misc-sessions .timeline {
|
|
position: relative;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.edit-meeting-timeslots-and-misc-sessions .timeline.hover {
|
|
background: radial-gradient(#999 1px, transparent 1px);
|
|
background-size: 20px 20px;
|
|
}
|
|
|
|
.edit-meeting-timeslots-and-misc-sessions .timeline.selected.hover,
|
|
.edit-meeting-timeslots-and-misc-sessions .timeline.selected {
|
|
background: radial-gradient(#999 2px, transparent 2px);
|
|
background-size: 20px 20px;
|
|
}
|
|
|
|
.edit-meeting-timeslots-and-misc-sessions .timeslot {
|
|
position: absolute;
|
|
overflow: hidden;
|
|
background-color: #f0f0f0;
|
|
opacity: 0.8;
|
|
// height: 19px;
|
|
top: 0px;
|
|
font-size: 13px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
padding-left: 0.2em;
|
|
border-left: 1px solid #999;
|
|
border-right: 1px solid #999;
|
|
}
|
|
|
|
.edit-meeting-timeslots-and-misc-sessions .timeslot:hover {
|
|
background-color: #ccc;
|
|
}
|
|
|
|
.edit-meeting-timeslots-and-misc-sessions .timeslot.selected {
|
|
background-color: #bbb;
|
|
}
|
|
|
|
.edit-meeting-timeslots-and-misc-sessions .timeslot .session.cancelled {
|
|
color: #a00;
|
|
}
|
|
|
|
.edit-meeting-timeslots-and-misc-sessions .scheduling-panel {
|
|
position: sticky;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
border-top: 0.2em solid #ccc;
|
|
padding-top: 0.2em;
|
|
margin-bottom: 2em;
|
|
background-color: #fff;
|
|
opacity: 0.95;
|
|
}
|
|
|
|
.edit-meeting-timeslots-and-misc-sessions .scheduling-panel form {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.edit-meeting-timeslots-and-misc-sessions .scheduling-panel form button {
|
|
margin: 0 0.5em;
|
|
}
|
|
|
|
.edit-meeting-timeslots-and-misc-sessions .scheduling-panel .flowing-form {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
}
|
|
|
|
.edit-meeting-timeslots-and-misc-sessions .scheduling-panel .flowing-form .mb-3 {
|
|
margin-right: 1em;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
.edit-meeting-timeslots-and-misc-sessions .scheduling-panel .flowing-form label {
|
|
display: inline-block;
|
|
margin-right: 0.5em;
|
|
}
|
|
|
|
.edit-meeting-timeslots-and-misc-sessions .scheduling-panel .flowing-form .form-control {
|
|
display: inline-block;
|
|
width: auto;
|
|
}
|
|
|
|
.edit-meeting-timeslots-and-misc-sessions .scheduling-panel .flowing-form [name=time],
|
|
.edit-meeting-timeslots-and-misc-sessions .scheduling-panel .flowing-form [name=duration] {
|
|
width: 6em;
|
|
}
|
|
|
|
.edit-meeting-timeslots-and-misc-sessions .scheduling-panel .flowing-form [name=name] {
|
|
width: 25em;
|
|
}
|
|
|
|
.edit-meeting-timeslots-and-misc-sessions .scheduling-panel .flowing-form [name=short] {
|
|
width: 10em;
|
|
}
|
|
|
|
.timeslot-edit .tstable div.timeslot {
|
|
border: #000000 solid 1px;
|
|
border-radius: 0.5em;
|
|
padding: 0.5em;
|
|
}
|
|
|
|
.timeslot-edit .tstable .timeslot .ts-name {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.timeslot-edit .tstable .timeslot .ts-type {
|
|
font-size: smaller;
|
|
}
|
|
|
|
.timeslot-edit .tstable .timeslot .timeslot-buttons {
|
|
float: right;
|
|
}
|
|
|
|
.timeslot-edit .tstable .timeslot.in-official-use {
|
|
background-color: #d9edf7;
|
|
}
|
|
|
|
.timeslot-edit .tstable .timeslot.in-unofficial-use {
|
|
background-color: #f8f8e0;
|
|
}
|
|
|
|
.timeslot-edit .tstable td.timeslot-collision {
|
|
background-color: #ffa0a0;
|
|
}
|
|
|
|
.timeslot-edit .tstable .tstype_unavail {
|
|
background-color: #666;
|
|
}
|
|
|
|
.timeslot-edit .official-use-warning {
|
|
color: #ff0000;
|
|
}
|
|
|
|
.rightmarker,
|
|
.leftmarker {
|
|
width: 3px;
|
|
padding-right: 0px !important;
|
|
padding-left: 0px !important;
|
|
}
|
|
|
|
.ongoing>td:first-child {
|
|
background-color: red !important;
|
|
}
|
|
|
|
.ongoing>td:last-child {
|
|
background-color: red !important;
|
|
}
|
|
|
|
.timetooltip {
|
|
position: relative;
|
|
}
|
|
|
|
.timetooltip .timetooltiptext {
|
|
visibility: hidden;
|
|
background-color: #eee;
|
|
color: #000;
|
|
text-align: left;
|
|
border-radius: 6px;
|
|
padding: 5px 5px;
|
|
position: absolute;
|
|
z-index: 110;
|
|
bottom: 125%;
|
|
left: 50%;
|
|
margin-left: -60px;
|
|
opacity: 0;
|
|
transition: opacity 0.3s;
|
|
width: 60em;
|
|
}
|
|
|
|
.reschedtimetooltip .timetooltiptext {
|
|
margin-left: -300px;
|
|
}
|
|
|
|
.timetooltiptext table tr td {
|
|
padding: 1px 5px;
|
|
}
|
|
|
|
.timetooltiptext table tr th {
|
|
text-align: center;
|
|
}
|
|
|
|
.timehead {
|
|
text-align: right;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.timetooltip:hover .timetooltiptext {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
|
|
#current-time {
|
|
display: inline-block;
|
|
} |