#titleButtonContainer>*:first-child { /* NOTE: RazorPage.RenderSection results in an empty space when the section is not defined, this means we can't use :empty tag to only pad when content exists. I'm hacking around this by adding margin to first child */ margin-left: 1em; } /* these poups need to appear above right side menu */ .popup-modal.confirm-reset, .popup-modal.setting-help-popup { z-index: 99999; } #menuContentPadder { margin-left: 4.5em; /* shifts all content {menu's min-width} to the left */ display: flex; flex-direction: column; flex-grow: 100; overflow: auto; outline: none; position: relative; } body.embed #menuContentPadder { margin-left: 0; } .side-menu { display: none; flex-direction: column; position: fixed; top: 3.5em; bottom: 0; outline: none; /*height: calc(100vh - 3.5em);*/ z-index: 99999; transition: left 0.1s, right 0.1s; } .side-menu.open { transition: left 0.25s, right 0.25s; } /* #region left side menu */ /* #region no-menu */ body.no-menu #menu > .search-wrapper { display: none; } /* #endregion */ #menu { border-top: 1px solid var(--color-menu-text); border-right: 1px solid var(--color-menu); display: flex; left: 0; min-width: 4.5em; } #btnOpenMenu { display: none; } #menu:not(.open) .menu-search { display: none; } #accordion { display: flex; flex-grow: 100; overflow-y: hidden; } #accordion > div { display: flex; flex-direction:column; transition: all 0.25s; } #accordion > div.open { flex-basis: 100%; overflow-y: auto; } #accordion > div:not(.open) { flex-basis: 0; } /* #region drawer */ #accordion > .drawer { padding: 0.25em; } #accordion > .drawer:not(.open) span { display: none; } #menu > .search-wrapper { padding: 0.25em 0.25em 0 0.75em; } #menu > .search-wrapper .menu-search { background: var(--color-menu); color: var(--color-menu-text); border: none; outline: none; border-bottom: 1px solid var(--color-menu-text); padding: 0.25em; flex-grow: 100; border-radius: 0; } #menu > .search-wrapper .menu-search::-webkit-input-placeholder { color: var(--color-menu-text); font-style: italic; } #menu > .search-wrapper .menu-search:-ms-input-placeholder { color: var(--color-menu-text); font-style: italic; } #menu > .search-wrapper .menu-search::placeholder { color: var(--color-menu-text); font-style: italic; } #menu > .search-wrapper i { margin-top: 0.325em; margin-right: 0.25em; } #accordion > .drawer > .center, #menu > .search-wrapper { color: var(--color-menu-text); font-size: 1.5em; cursor: pointer; } #accordion > .drawer i, #menu > .search-wrapper i { font-size: 1.5em; /* 1.5 * 1.5 = 2.25em */ } #accordion > .drawer > .center { border-radius: 0.25em; transition: padding 0.25s; padding: 0.5em; } #accordion > .drawer > .center:not(:first-child) { margin-top: 0.25em; } #accordion > .drawer > .center:hover:not(.selected-menu) { background: var(--color-accent-75); color: var(--color-accent-text); } #accordion > .drawer > .selected-menu { background: var(--color-text); color: var(--color-text-text); border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: -0.25em; padding-left: 0.65em; } #accordion > .drawer.open > .center i { margin-right: 0.25em; } /* #endregion */ /* #region expander */ #accordion > .expander { background: var(--color-text); } #accordion > .expander.open { padding: 0.5em 0.5em 2em 0.5em; margin-top: 0.25em; } #accordion > .expander .side-menu-group { flex-shrink: 0; /* IMPORTANT: necessary for safari */ } #accordion > .expander .side-menu-group:not(:first-child) { margin-top: 1em; } #accordion > .expander label { font-size: 1.5em; font-style: italic; color: var(--color-text-text); } #accordion > .expander label::after { content: "..."; } #accordion > .expander .side-menu-group > div { display: flex; flex-direction: column; border-radius: 0.25em; } #accordion a { text-decoration: none; display: flex; flex-shrink: 0; /* IMPORTANT: necessary for safari */ align-items: center; background: var(--color-accent); color: var(--color-accent-text); padding: 0.5em; font-size: 1.25em; } #accordion a:hover { background: var(--color-accent-text) !important; color:var(--color-accent) !important; } #accordion a:nth-child(odd) { background: var(--color-accent-75); color: var(--color-accent-text); } #accordion a:first-of-type { border-top-left-radius: 0.25em; border-top-right-radius: 0.25em; } #accordion a:last-of-type { border-bottom-left-radius: 0.25em; border-bottom-right-radius: 0.25em; } #accordion a .material-icons { margin-right: 0.25em; } #accordion a:not(:hover) mark { background: var(--color-accent-text) !important; color: var(--color-accent) !important; } /* #endregion expander */ /* #endregion */ /* #region HEADER BAR */ .side-menu > .toolbar .material-icons { display: flex; flex-grow: 100; background: none; border: none; outline: none; color: var(--color-menu-text); text-align: center; cursor: pointer; justify-content: center; text-decoration: none !important; font-size: 2em; vertical-align: middle; } @media (hover:hover) { .side-menu > .toolbar .material-icons:hover { text-decoration: none !important; color: var(--color-accent) !important; } } #PageLogoImage { content: var(--logo-img); margin-left: 0.5em; flex-grow: 100; height: 2.500em; overflow: hidden; } #btnOpenMenu, #btnHomePage { outline: none !important; } #btnOpenMenu, #btnProfile { width: 2.5em; height: 2.5em; } #pageHeader button:not([disabled]) { cursor: pointer; /** overriding material-icons cursor default */ } #btnOpenMenu::after, #btnProfile::after { font-size: 2em; } #btnOpenMenu.open, #btnProfile.profile-icon.open { background: var(--color-error); } #btnOpenMenu.open::after, #btnProfile.open::after { content: "close"; } #btnOpenMenu { background: none; border: none; color: var(--color-menu-text); padding: 0; margin-right: 0.25em; border: 2px solid transparent; border-radius: 100%; font-size: unset; } #btnOpenMenu::after { content: "menu"; font-size: 2.25em; margin-left: -0.0125em; } #btnOpenMenu.open { border-color: var(--color-menu-text); } #btnCloseSettings { float: right; } #netWarning { color: var(--color-error); font-size: 2.5em; margin-right: .25em; } #pageHeader, .side-menu > .toolbar { height: 3.5em; background: var(--color-menu); } .side-menu > .toolbar > input { padding: 0.25em; outline: none !important; } #pageHeader { color: var(--color-menu-text); /*position: fixed;*/ width: 100%; max-width: 100vw; z-index: 99999; /*500*/ top: 0; /* new flex spec */ position: relative; flex-shrink: 0; padding: 0 .35em; } #pageHeader > div.no-shrink:first-child { /* if no hamburger button, apply extra padding to left side of icon */ padding-left: 0.5em; } #titleText { font-size: 2em; margin: 0; font-weight: normal; padding: 0 0 0 0.5em; /*0 0.5em 0 0.25em;*/ text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: flex; align-items: center; justify-content: flex-end; } #titleText i { font-size: 1.5em; margin-right: 0.4em; } #menu, #pageHeader { background-color: var(--color-menu); } #menu { background: linear-gradient(var(--color-menu) 0%, var(--color-accent) 100%); } #btnOpenMenu, #pageHeader, #pageHeader h1 { color: var(--color-menu-text); } @media only screen and (max-device-width : 767px) { #pageHeader, #menu > .toolbar > .center, #settings .toolbar { height: 6rem; } #settings h1 { font-size: 2em; } .page-setting-dropdown option { font-size: .5em !important; } #pageTitle { padding: 0; font-size: 1em; margin-top: .5em; } #titleText { font-size: 1.5em; } } @media only screen and (max-width: 500px) { #PageLogoImage { content: var(--mobile-logo-img); } } @media only screen and (max-device-width: 480px) { /* making icons bigger on phones */ #PageLogoImage { height: 3em; } #btnProfile { width: 3em; height: 3em; } } /* #endregion HEADER BAR */ /* #region Settings */ #settings { width: 22em; -webkit-box-shadow: -1px 0px 5px 0px var(--color-menu); -moz-box-shadow: -1px 0px 5px 0px var(--color-menu); box-shadow: -1px 0px 5px 0px var(--color-menu); display: flex; right: -100%; background: var(--color-container); } @media screen and (max-width: 500px) { /* This is to avoid the weird bug in chrome where right side menu opens when you shrink the screen to a tiny size less than 500px wide. This is a bit of a bandaid fix, i can't remember how this side menu works but this probably wouldn't be an issue if it was redesigned with more modern CSS. This prevents the side menu from sliding back closed, so only do it when screen is tiny */ #settings:not(.open) { display: none; } } #settings #settingsContainer { overflow-y: hidden; } #settings #settingsContainer .toolbar button { width: 50%; height: 3em; background: none; outline: none; display: flex; align-items: center; border-bottom-width: 1px; } #settings #settingsContainer .toolbar button i { margin-right: 0.5em; } #settings.open { right: 0; } #settings > div:first-child { background: var(--color-header-border); } #settings .display-group-label { margin-bottom: 0; padding-bottom: 0.125em; border-bottom: 1px solid var(--color-text); } #settings .display-group-label:first-child { margin-top: 0.35em; } #settings .sign-out { color: var(--color-error); cursor: pointer; text-decoration: none; } @media (hover:hover) { #settings .sign-out:hover { text-decoration: underline; } } #settings h1 { text-align: center; } /* #region profile icon */ .profile-icon { border-radius: 100%; overflow: hidden; } .profile-icon img { width: 100%; height: 100%; display: block; background: var(--color-container); } #btnProfile.profile-icon { background: var(--color-menu-text); border: 1px solid var(--color-menu-text); /* border needs to be outside because applying it to object causes image to be offset by border-thickness */ width: 2.5em; height: 2.5em; padding: 0; outline: none; flex-shrink: 0; font-size: unset; } #btnProfile.open { border-width: 2px; } #btnProfile.open img { display: none; } #btnProfile.open::after { content: "close"; font-size: 2em; } #settings .profile-icon { background: var(--color-text); border: 2px solid var(--color-text); /* border needs to be outside because applying it to object causes image to be offset by border-thickness */ margin: 0.5em 1em; width: 7em; height: 7em; } /* #endregion */ /* #region tiles */ #settings .tiles { display: flex; flex-wrap: wrap; padding: .25em; } #settings .tiles .tile-outer { display: flex; min-width: 33.33%; flex-grow: 100; padding: .25em; } #settings .tiles .tile-inner { background: var(--color-text); color: var(--color-text-text); display: flex; flex-direction: column; flex-grow: 100; align-items: center; text-align: center; padding: .25em; cursor: pointer; border-radius: 0.125em; } #settings .tiles a.tile-inner { text-decoration: none; } @media screen and (hover: hover) { #settings .tiles .tile-inner:hover { background: var(--color-accent); color: var(--color-accent-text); } } #settings .tiles .tile-inner i { margin: .25em 0; } /* #endregion tiles */ #settingsItems .help-label { font-weight: bold; font-style: italic; font-size: 1.25em; line-height: 1em; } #settingsItems .help-label:not(:first-child) { margin-top: .5em; } #settingsItems { text-align: center; overflow-y: auto; } #settingsItems .setting:not(:first-child) { border-top: 1px solid var(--color-stripe-border); } #settingsItems details > div > details > summary { border-radius: 0 !important; } #settingsItems details > div > details[open] > summary { background: var(--color-accent); color: var(--color-accent-text); } #settingsItems span.disabled { opacity: 0.5; } #settings input { color: var(--color-text); } /* #region page notes */ #settings.editor { width: 600px } @media screen and (max-width: 600px) { #settings.editor { width: 100%; } } #pageNotes, #settingsContainer { display: none; } #pageNotes iframe { height: 100%; border: none; } /* #endregion page notes */ #settingsItems .btn-manage-user-settings { padding: 0.15em 0.5em; } #settingsItems .setting-group details { border-bottom: none; } #settingsItems .setting-group details:not(:first-child) { border-top: 1px solid var(--color-text); } /* #endregion Settings */ /* #region quill / syntax highlight */ .ql-video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100% } .ql-video-wrapper iframe, .ql-video-wrapper object, .ql-video-wrapper embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .ql-editor { color: black; -webkit-user-select: text !important; /* NOTE: this is required for editor to be usable on safari... */ } .ql-toolbar.ql-snow .ql-formats { background: #f4f4f4 !important; border-radius: 1em; margin: 0.25em 0.25em 0.25em 0; } .hljs-keyword, .hljs-attribute, .hljs-selector-tag, .hljs-meta-keyword, .hljs-doctag, .hljs-name { font-weight: normal !important; color: #31708f !important; } .ql-snow .ql-editor pre.ql-syntax { background-color: #f4f4f4 !important; color: black; } /* #endregion quill / syntax highlight */ #userHome h3 { width: 100%; margin-bottom: 0; } @media only screen and (max-device-width: 767px) { #btnOpenMenu { display: block; } .side-menu { width: 100% !important; top: 6rem; /*height: calc(100vh - 6rem);*/ } .side-menu.open { width: 100%; } #menu:not(.open) { left: -100%; } #menuContentPadder { margin-left: 0; } } /* #region global search */ #pageHeader #globalSearch > button { font-size: 2em; /* margin-right: 0.33em; margin-left: -0.33em; */ width: 48px; height: 48px; padding: 0; align-self: center; } #pageHeader #globalSearch { position: relative; display: flex; flex-grow: 1; justify-content: center; max-width: 48px; height: 100%; } #pageHeader #globalSearch > input { display: none; width: 100%; outline: none; border: none; background: transparent; font-size: 1.5em; padding-left: 0.5em; } #pageHeader #globalSearch .results { display: none; flex-direction: column; } #pageHeader #globalSearch > button::after { content: "search"; } /* #region search-mode */ #pageHeader.search-mode #globalSearch > button:after { content: "close"; } #pageHeader.search-mode > * { display: none; } #pageHeader.search-mode > #globalSearch .results, #pageHeader.search-mode > #globalSearch input { display: flex; animation: searchmode-fadein 0.25s; } #pageHeader.search-mode { padding: 0 0 0 4.5em; justify-content: center; } @keyframes searchmode-fadein { 0% { opacity: 0; } 100% { opacity: 1; } } #pageHeader.search-mode > #globalSearch { max-width: 720px; transition: max-width 0.25s; } #pageHeader.search-mode #globalSearch .results { position: absolute; top: 100%; width: 100%; background: var(--color-container); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; color: var(--color-text); } /* #endregion search-mode */ #pageHeader #globalSearch .results > div { max-height: 400px; overflow-y: auto; } #pageHeader #globalSearch .results > div > div:not(:first-child) { border-top: 1px solid var(--color-auxiliary); } #pageHeader #globalSearch .results .info div { display: inline-flex; align-items: center; text-decoration: none !important; color: var(--color-auxiliary); } #pageHeader #globalSearch .results .info div:not(:last-child)::after { content: " - "; margin: 0 0.1em; text-decoration: none !important; font-weight: normal !important; color: var(--color-auxiliary); display: inline-block; width: 1.5em; text-align: center; } #pageHeader #globalSearch .results > div:empty { display: none; } #pageHeader #globalSearch footer { text-align: center; font-weight: bold; } #pageHeader #globalSearch footer:not(:empty) { border-top: 1px solid var(--color-text); } /* #region loading */ /*#pageHeader.search-mode #globalSearch.loading::after { position: absolute; content: ""; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background: var(--color-text); border-bottom-left-radius: 4px; opacity: 0; animation: search_breathe 2s alternate infinite; }*/ #pageHeader.search-mode #globalSearch.loading > button { animation: search_breathe 2s ease-out alternate infinite, search_spin 1s ease-out infinite forwards; } @keyframes search_breathe { 50% { opacity: 0.25; } } @keyframes search_spin { 100% { transform: rotate(360deg); } } #pageHeader #globalSearch > .loader { display: none; } #pageHeader.search-mode #globalSearch.loading > .loader { display: block; width: 36px; height: 36px; right: 4px; left: unset; border-width: 2px; top: 69px; pointer-events: none; } /* #endregion */ @media screen and (max-width: 499px) { #pageHeader.search-mode { padding: 0; } #pageHeader.search-mode #globalSearch > input { padding-left: 1em; } #pageHeader.search-mode #globalSearch > button { margin-right: 0.25em; } #pageHeader.search-mode #globalSearch.loading > .loader { top: 74px; right: 10px; } } @media screen and (max-device-width: 500px) { #pageHeader #globalSearch .results > div { font-size: 1.25em; } } /* #endregion */