.view-node-player-list main .main-container { } .view-node-player-edit main .main-container { .bottom-content { .page-content { flex: 1; .form-holder { margin: 20px 20px 20px 10px; } } } } .view-player-group-list main .main-container { .players-holder { ul.players { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; align-self: stretch; margin: 10px 0 0 0; border: 1px dashed $gscale2; border-radius: 4px; padding: 10px; li.player-item { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; align-self: stretch; margin: 0 0 2px 0; .head { display: flex; flex-direction: column; justify-content: center; align-items: center; color: $gscale9; font-size: 10px; padding: 10px; cursor: default; } &:hover { .infos .title { color: $gscaleF; } } .infos { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; color: $gscaleA; font-size: 12px; margin-right: 5px; flex: 1; max-width: 180px; background: $gscale0; border: 1px solid $gscale3; border-radius: $baseRadius; padding: 3px 7px; .title { font-size: 13px; color: $gscaleA; display: block; word-break: break-all; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .type { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; color: $gscaleA; font-size: 12px; margin-right: 5px; } } .body { display: block; flex-direction: row; justify-content: flex-start; align-items: center; margin: 0 10px 0 10px; background: $gscale1B; padding: 10px; align-self: stretch; flex: 1; border-radius: $baseRadius; color: $gscaleC; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px; font-size: 12px; span { opacity: 0.5; margin-right: 7px; font-size: 10px; } } .tail { display: flex; flex-direction: row; justify-content: center; align-items: center; a { color: $gscaleF; } } } } } }