ZeusWPI/gamification

// Place all the styles related to the top4 controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

body.top4-page #page-wrapper {
    div.top4 {
        margin: auto;
        .panel {
            height: 100%;
        }

        #top-coders {
            td {
                vertical-align: middle;
            }

            .rank {
                font-size: 20pt;
                text-align: right;
                width: 45px;
                height: 45px;
            }
            .avatar {
                width: 45px;
                img {
                    border-radius: 50%;
                }
            }
            .username {
                font-weight: bold;
            }
            .score {
                text-align: right;
                font-size: 20pt;
            }

            tr:first-child {
                width: 90px;
                height: 90px;
                .name {
                    font-size: 15pt;
                }
                .username {
                    font-size: 23pt;
                }
                .avatar {
                    width: 120px;

                    img {
                        position: absolute;
                        top: -40px;
                        left: 30px;
                        border-radius: 50%;
                        box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2);
                    }
                }
                .score {
                    font-size: 25pt;
                }
            }

        }

        #top-repos {
            width: 100%;
            max-height: 100%;
            display: block;
            margin: auto;
            padding: 10px;

            vertical-align: bottom;
            shape-rendering: crisp-edges;
            image-rendering: crisp-edges;

            .repo-bar {
                fill: #1565c0;
            }

            .repo-label {
                text-anchor: middle;
                font: 16px sans-serif;
                fill: black;
            }

            .contributor-name {
                text-anchor: middle;
                fill: white;
            }

            .axis {
                text {
                    font: 16px sans-serif;
                    fill: black;
                }
            }
        }
    }

    td.truncatable {
        text-overflow: ellipsis;
        overflow: hidden;
        max-width: 1px;
    }
}