keii.dev
the browser-facing portion of osu!
1// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
2// See the LICENCE file in the repository root for full licence text.
3
4.osu-table {
5 @_top: osu-table;
6 @passive-row: ~"@{_top}__body-row--highlightable";
7
8 @handle: 16px;
9 @row-height: 1.8em;
10
11 overflow-x: auto;
12 color: @osu-colour-f1;
13
14 &--with-handle {
15 margin-right: -@handle;
16 }
17
18 &__table {
19 width: 100%;
20 min-width: 800px;
21 font-size: 12px;
22 }
23
24 &__header {
25 font-size: 10px;
26 font-weight: 700;
27 text-transform: uppercase;
28 padding-bottom: 5px;
29 }
30
31 &__body-row {
32 height: @row-height;
33
34 .@{_top}--taller-rows & {
35 height: 3em;
36 }
37
38 // @passive-row
39 &--highlightable {
40 .@{_top}--menu-active & {
41 pointer-events: none;
42 }
43 }
44 }
45
46 &__cell {
47 &:first-child {
48 // rounded corners for left side
49 border-top-left-radius: 5px;
50 border-bottom-left-radius: 5px;
51 }
52
53 .@{_top}--with-handle & {
54 &:nth-last-child(2) {
55 // ...and right side
56 border-top-right-radius: 5px;
57 border-bottom-right-radius: 5px;
58 }
59 }
60
61 :not(.@{_top}--with-handle) & {
62 &:last-child {
63 // ...and right side
64 border-top-right-radius: 5px;
65 border-bottom-right-radius: 5px;
66 }
67 }
68
69 // when row is not selected
70 .@{passive-row} & {
71 background-color: @osu-colour-b5;
72 }
73
74 .@{passive-row}:nth-child(odd) & {
75 background-color: @osu-colour-b4;
76 }
77
78 // hovering over an unselected row
79 .@{passive-row}:hover & {
80 color: #fff;
81 background-color: @osu-colour-b3;
82 }
83
84 .@{passive-row}:hover:nth-child(odd) & {
85 background-color: @osu-colour-b3;
86 }
87 }
88}