/* apply a natural box layout model to all elements, but allowing components to change */ html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { margin: 0; } /* Based on .SessionView from Hydrogen */ .ArchiveView { /* this takes into account whether or not the url bar is hidden on mobile (have tested Firefox Android and Safari on iOS), see https://developers.google.com/web/updates/2016/12/url-bar-resizing */ position: fixed; width: 100%; height: 100%; display: grid; grid-template: 'status status' auto 'middle right' 1fr / 1fr 300px; min-height: 0; min-width: 0; } /* No need to open the right-panel when it's always visible at desktop widths */ .room-header-change-dates-button { display: none; color: var(--icon-color--darker-20); } /* No need to close the right-panel when it's always visible at desktop widths */ .RightPanelView_buttons .close { display: none; } @media screen and (max-width: 800px) { /* Only the middle needs to be visible mobile by default */ .ArchiveView { grid-template: 'status' auto 'middle' 1fr / 1fr; } /* Which also means hiding the right-panel by default on mobile */ .ArchiveView:not(.right-shown) .RightPanelView { display: none; } /* When the user opens the right-panel, show it */ .ArchiveView.right-shown { grid-template: 'status' auto 'right' 1fr / 1fr; } .ArchiveView.right-shown .middle { display: none; } /* And show the button to open the right-panel on mobile */ .room-header-change-dates-button { display: block; } /* And show the button to close the right-panel on mobile */ .RightPanelView_buttons .close { display: block; } } .CalendarView { } .CalendarView_header { display: flex; justify-content: space-between; } .CalendarView_header_prevButton, .CalendarView_header_nextButton { padding-left: 2em; padding-right: 2em; background: none; border: 0; } .CalendarView_header_prevButton:hover, .CalendarView_header_nextButton:hover { cursor: pointer; } .CalendarView_heading { position: relative; } .CalendarView_heading_text { display: inline-flex; align-items: center; } .CalendarView_heading_monthInput { position: absolute; top: 0; left: 0; bottom: 0; right: 0; opacity: 0; cursor: pointer; } .fallback-input-month .CalendarView_heading_monthInput { display: none; } /* The little calendar icon button in the input that opens the date picker. * We're stretching this out over the heading */ .CalendarView_heading_monthInput::-webkit-calendar-picker-indicator { width: 100%; height: 100%; margin-left: 0; background-color: #f00; cursor: pointer; } .CalendarView_heading_yearSelectFallback { display: none; position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .fallback-input-month .CalendarView_heading_yearSelectFallback { display: block; } .CalendarView_calendar { display: grid; grid-template-columns: repeat(7, 1fr); list-style: none; margin: 0; padding: 0; text-align: center; } .CalendarView_dayName { background: #eee; } .CalendarView_day { padding: 2px; } .CalendarView_dayLink { display: inline-block; width: 100%; padding-top: 18%; padding-bottom: 18%; text-decoration: none; } .CalendarView_dayLink:hover { background-color: rgba(141, 151, 165, 0.1); } .CalendarView_dayLink_active { background-color: #0dbd8b; color: #ffffff; } .CalendarView_dayLink_active:hover { background-color: #0a8f69; } .CalendarView_dayLink_disabled { opacity: 0.5; } /* Error pages */ .heading-sub-detail { font-weight: normal; } .tracing-span-list { } .tracing-span-list-item { margin-bottom: 8px; } .tracing-span-item-http-details { } .tracing-span-item-sub-details { margin-left: 4ch; }