sphinx-needs/sphinx_needs/css/common/needstable.css at 3aee609a574f754183779261538a54374af3e047 · useblocks/sphinx-needs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
/* These are used by the needtable directive
to style the table representation of the needs.

Note: we use `table.NEEDS_TABLE.NEEDS_TABLE` to select a needtable, to increase the specificity of the selector,
so that it should be generally higher than the specificity of the theme CSS selectors.
This avoids having to use !important.
*/

table.NEEDS_TABLE.NEEDS_TABLE,
table.NEEDS_DATATABLES.NEEDS_DATATABLES {
    display: table;
    overflow-x: auto;
    white-space: normal;
    width: 100%;
    margin: 0 auto;
}

div.needstable_wrapper {
    width: 100%;
    overflow-x: auto;
    padding: 0;
}

table.docutils.docutils td, table.docutils.docutils th {
    background: var(--sn-color-datatable-body-bg);
    border: 1px solid var(--sn-color-table-border);
    color: var(--sn-color-datatable-label);
}

table.docutils.docutils th {
    border-bottom: 1px solid var(--sn-color-datatable-btn-border);
}
/* GridJS styles for to override the default GridJS styles
to match the Sphinx Needs theme and to ensure a consistent look and feel
with the rest of the Sphinx Needs documentation.

The 3 sections of a GridJS container .gridjs-head, .gridjs-wrapper and .gridjs-footer */
div.gridjs-container {
    color: var(--sn-color-datatable-label);
}

div.gridjs-wrapper {
    border-radius: 0px;
    box-shadow: none;
}

div.gridjs-footer {
    background-color: var(--sn-color-datatable-body-bg);
    border: 1px solid var(--sn-color-datatable-btn-border);
    box-shadow: none;
    padding: 12px;
    border-top-width: 0px;
}

/* .gridjs-head */
.gridjs-search {
    float: left;
}

div.gridjs-download-btns {
    float: right;
}

div.gridjs-download-btns button {
    border-radius: 6px;
    outline: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    cursor: pointer;
    margin-left: 10px;
}

/* .gridjs-wrapper */
.gridjs-wrapper.scrolled .gridjs-th-fixed {
    background-color: #4f4f4f54;
    z-index: 999;
    outline: 1px solid var(--sn-color-table-border);
}

table thead.gridjs-thead th.gridjs-th {
    padding: 8px;
}

th.gridjs-th .gridjs-th-content {
    text-overflow: initial;
    white-space: normal;
    word-wrap: break-word;
}

button.gridjs-sort-neutral, button.gridjs-sort-asc, button.gridjs-sort-desc{
    filter: brightness(0) saturate(100%) invert(40%) sepia(10%) saturate(366%) hue-rotate(182deg) brightness(94%) contrast(89%);
}
tbody.gridjs-tbody {
    background-color: var(--sn-color-datatable-body-bg);
}

table tbody.gridjs-tbody td.gridjs-td {
    padding: 8px;
}
/* .gridjs-footer */
.gridjs-pagination {
    color: var(--sn-color-datatable-label);
}

.gridjs-pagination .gridjs-pages button {
    background-color: var(--sn-color-datatable-body-bg);
    color: var(--sn-color-datatable-label);
    border: 1px solid var(--sn-color-datatable-btn-border);
    padding: 8px;
    border-right: none
}

.gridjs-pagination .gridjs-pages button:hover {
    background-color: var(--sn-color-datatable-body-bg);
    color: var(--sn-color-datatable-label);
    opacity: 0.7;
}

.gridjs-pagination .gridjs-pages button:disabled, .gridjs-pagination .gridjs-pages button:hover:disabled, .gridjs-pagination .gridjs-pages button[disabled] {
    background-color: var(--sn-color-datatable-body-bg);
    filter: saturate(0.25);
}
.gridjs-pagination .gridjs-pages button.gridjs-currentPage {
    background-color: var(--sn-color-datatable-body-bg);
    color: var(--sn-color-datatable-label);
    font-weight: bolder;
}
.gridjs-pagination .gridjs-pages button.gridjs-spread {
    background-color: var(--sn-color-datatable-body-bg);
}

.gridjs-pagination .gridjs-pages button:last-child {
    border: 1px solid var(--sn-color-datatable-btn-border);
}

/* Other GridJS style override */
input.gridjs-input, div.gridjs-download-btns button {
    background-color: var(--sn-color-datatable-body-bg);
    color: var(--sn-color-datatable-label);
    border: 1px solid var(--sn-color-datatable-btn-border);
    padding: 8px;
}