body { font-family: 'Droid Sans', 'Arial Narrow', Arial, sans-serif; } #spinner { display: none; position: fixed; left: 50%; top: 50%; width: 60px; height: 60px; margin-left: -30px; margin-top: -30px; z-index: 100; background-image: url(../frontend/icons-512.png); background-color: #0071C5; border-radius: 50%; } #spinner.spin { display: inline-block; -webkit-animation:spin 1s linear infinite; -moz-animation:spin 1s linear infinite; animation:spin 1s linear infinite; } @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } } .Logo { width: 52px; height: 52px; background-image: url(../frontend/icons-192.png); background-color: #252525; background-repeat: no-repeat; background-position: center center; background-size: 50%; border-radius: 50%; display: inline-block; } .Header { background-color: #252525; color: #ffffff; position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; box-sizing: border-box; flex-direction: column; user-select: none; } .Header .Group { height: 60px; display: flex; padding-left: 1em; padding-right: calc(1em + 52px); background-color: #0071C5; align-items: center; } .Header .Group .Subtitle { font-size: 0.7em; line-height: 1.5em; } .Header .Group .Heading { margin: 0 auto; width: calc(100% - 8em); max-width: 90em; } .Header .Pages { height: 60px; display: flex; margin: 0 auto; width: calc(100% - 8em); max-width: 90em; /* justify-content: space-between;*/ font-size: 1.2em; align-items: center; } .Header .Pages .Link { display: inline-flex; align-items: center; height: 100%; box-sizing: border-box; padding: 0.5em 1em; border-bottom: 3px solid transparent; cursor: pointer; } .Header .Pages .Link.Highlight { border-bottom-color: #0071C5 !important; } .Header .Pages .Link.Active, .Header .Pages .Link:hover { border-bottom-color: #003663; /*border-bottom-color: #00A7FF;*/ } a.Link { font-family: Oswald; text-decoration: none; color: white; } .Footer { position: fixed; background-color: #252525; color: #ffffff; height: 64px; bottom: 0; left: 0; right: 0; font-size: 0.9em; font-family: Droid Sans; z-index: 20; } .Footer .Copyright { position: absolute; line-height: 64px; text-align: center; left: 64px; right: 64px; } .Body { position: absolute; display: flex; top: 0; bottom: 0; left: 0; right: 0; box-sizing: border-box; background-image: linear-gradient(#090B1A, #131524); color: #ffffff; z-index: 0; } .Body > * { display: flex; box-sizing: border-box; } .Main { display: flex; position: absolute; padding-top: 64px; padding-bottom: 64px; top: 0; left: 0; right: 0; } .Content { position: relative; box-sizing: border-box; margin: 1em auto; width: calc(100% - 8em); max-width: 90em; color: black; z-index: 10; background-color: #fff; overflow-y: scroll; scroll-behavior: smooth; padding: 1.5em 1.5em 0 1.5em; box-sizing: border-box; transition: top 1s ease-in-out; top: -100%; } .Content #MinBox { position: relative; box-sizing: border-box; min-height: calc(100% - 2.5em); padding-bottom: 1.3em; } .OnScreen { top: 0px; } body { margin: 0; padding: 0; } * { box-sizing: border-box; } .more { cursor: pointer; } #face-editor { max-width: calc(128px * 4); } #face-editor .related-faces { display: flex; flex-wrap: wrap; } #new-identity { padding: 0.5em; } button { margin: 0.25em; } #identities { display: flex; flex-wrap: wrap; border: 1px solid black; padding: 0.25em; margin: 0.25em; } #identities > div { border: 1px solid black; margin: 0.25em; padding: 0.25em; box-sizing: border-box; display: flex; flex-direction: column; } #photo-explorer { position: relative; display: flex; flex-grow: 1; background-repeat: no-repeat; background-size: contain; background-position: top left; padding: 0; margin: 0; } #photo-explorer .face-box { position: absolute; display: inline-block; border: 1px solid black; cursor: pointer; } #photo-explorer #photo-info { display: inline-block; position: absolute; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); padding: 0.25em; } .more:hover { text-decoration: underline; } .face[disabled] { filter: grayscale(100%); } .face-block { display: flex; flex-wrap: wrap; margin: 0.5em; min-width: 128px; max-width: 128px; min-height: 128px; max-height: 128px; } .face-block-nolimit { min-width: 128px; max-width: initial; min-height: 128px; max-height: initial; } .face-block .face { max-width: 64px; max-height: 64px; margin: 0; } .face { position: relative; max-width: 128px; max-height: 128px; width: 128px; height: 128px; background-size: contain; background-position: center center; background-repeat: no-repeat; display: inline-block; border: 1px solid black; margin: 0.5em; cursor: pointer; } .face:hover { box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5); } .face .distance { position: absolute; background: black; opacity: 0.5; text-align: center; left: 0; right: 0; bottom: 0; color: white; } .editor-row { display: flex; flex-direction: row; padding: 0.25em 0.5em; } .editor-row .key { width: 10em; } .Identities { display:flex; flex-direction:column; flex-grow: 1; } .Identities > div:first-child { display:flex; flex-direction:row; }