#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); } #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[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; } /* #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 */