123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138 |
- #lobby-screen {
- .content {
-
- .container {
- align-items: center;
- display: flex;
- flex-direction: column;
-
- .spinner {
- margin: 30px;
- }
-
- .joining-message {
- margin: 10px;
- }
- }
- }
- }
-
- #lobby-section {
- display: flex;
- flex-direction: column;
-
- .description {
- font-size: 13px;
- }
-
- .control-row {
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- margin-top: 15px;
-
- label {
- font-size: 14px;
- font-weight: bold;
- }
- }
- }
-
- #notification-participant-list {
- background-color: $newToolbarBackgroundColor;
- border: 1px solid rgba(255, 255, 255, .4);
- border-radius: 8px;
- left: 0;
- margin: 20px;
- max-height: 600px;
- overflow: hidden;
- overflow-y: auto;
- position: fixed;
- top: 30px;
- z-index: $toolbarZ + 1;
-
- &.toolbox-visible {
- // Same as toolbox subject position
- top: 120px;
- }
-
- .title {
- background-color: rgba(0, 0, 0, .2);
- font-size: 1.2em;
- padding: 15px
- }
-
- button {
- align-self: stretch;
- margin: 8px 0;
- padding: 12px;
- transition: .2s transform ease;
-
- &:disabled {
- opacity: .5;
- }
-
- &:hover {
- transform: scale(1.05);
-
- &:disabled {
- transform: none;
- }
- }
-
- &.borderLess {
- background-color: transparent;
- border-width: 0;
- }
-
- &.primary {
- background-color: rgb(3, 118, 218);
- border-width: 0;
- }
- }
- }
-
- .knocking-participants-container {
- list-style-type: none;
- padding: 0 15px 15px 15px;
- }
-
- .knocking-participant {
- align-items: center;
- display: flex;
- flex-direction: row;
- margin: 8px 0;
-
- .details {
- display: flex;
- flex: 1;
- flex-direction: column;
- justify-content: space-evenly;
- margin: 0 30px 0 10px;
- }
-
- button {
- align-self: unset;
- margin: 0 5px;
- }
- }
-
- @media (max-width: 300px) {
- #knocking-participant-list {
- margin: 0;
- text-align: center;
- width: 100%;
-
- .avatar {
- display: none;
- }
- }
-
- .knocking-participant {
- flex-direction: column;
-
- .details {
- margin: 0;
- }
- }
- }
|