Page Menu
Home
WickedGov Phorge
Search
Configure Global Search
Log In
Files
F4144767
datatables.less
No One
Temporary
Actions
View File
Edit File
Delete File
View Transforms
Subscribe
Flag For Later
Award Token
Size
13 KB
Referenced Files
None
Subscribers
None
datatables.less
View Options
/*
* Citizen
*
* SkinStyles for dataTables
* Shared by Extension:Cargo and Extension:SemanticResultFormats
*
* Date: 2024-03-19
*/
@
import
'../../resources/mixins.less'
;
/* jquery.dataTables.css */
table
.
dataTable
{
box-sizing
:
border-box
;
/* Fix #888 */
display
:
table
;
max-width
:
100
%
;
overflow
:
hidden
;
//
let
datatables
handle
responsiveness
.mixin-citizen-font-styles(
'small'
)
;
}
table
.
dataTable
thead
th
,
table
.
dataTable
tfoot
th
{
font-weight
:
var
(
--font-weight-semi-bold
);
}
table
.
dataTable
thead
th
,
table
.
dataTable
thead
td
{
padding
:
var
(
--space-xs
)
var
(
--space-sm
);
border-bottom-color
:
var
(
--border-color-base
);
}
table
.
dataTable
tfoot
th
,
table
.
dataTable
tfoot
td
{
border-top-color
:
var
(
--border-color-base
);
}
table
.
dataTable
thead
.
sorting
,
table
.
dataTable
thead
.
sorting_asc
,
table
.
dataTable
thead
.
sorting_desc
{
&:hover
{
background-color
:
var
(
--background-color-button-quiet--hover
);
}
&
:
active
{
background-color
:
var
(
--background-color-button-quiet--active
);
}
}
table
.
dataTable
thead
.
sorting
,
table
.
dataTable
thead
.
sorting_asc
,
table
.
dataTable
thead
.
sorting_desc
,
table
.
dataTable
thead
.
sorting_asc_disabled
,
table
.
dataTable
thead
.
sorting_desc_disabled
{
//
19px
is
the
icon
size
padding-right
:
~
'calc( 19px + var( --space-sm ) )'
;
background-position-x
:
~
'calc( 100% - var( --space-xs ) )'
;
}
table
.
dataTable
tbody
tr
{
background-color
:
var
(
--color-surface-0
);
}
table
.
dataTable
tbody
tr
.
selected
{
background-color
:
var
(
--background-color-button-quiet--hover
);
}
table
.
dataTable
tbody
th
,
table
.
dataTable
tbody
td
{
padding
:
var
(
--space-xs
)
var
(
--space-sm
);
}
table
.
dataTable
.
row-border
tbody
th
,
table
.
dataTable
.
row-border
tbody
td
,
table
.
dataTable
.
display
tbody
th
,
table
.
dataTable
.
display
tbody
td
{
border-top-color
:
var
(
--border-color-base
);
}
table
.
dataTable
.
cell-border
tbody
th
,
table
.
dataTable
.
cell-border
tbody
td
{
border-top-color
:
var
(
--border-color-base
);
border-right-color
:
var
(
--border-color-base
);
}
table
.
dataTable
.
cell-border
tbody
tr
th
:
first-child
,
table
.
dataTable
.
cell-border
tbody
tr
td
:
first-child
{
border-left-color
:
var
(
--border-color-base
);
}
table
.
dataTable
.
stripe
tbody
tr
.
odd
,
table
.
dataTable
.
display
tbody
tr
.
odd
{
background-color
:
var
(
--color-surface-2
);
}
table
.
dataTable
.
stripe
tbody
tr
.
odd
.
selected
,
table
.
dataTable
.
display
tbody
tr
.
odd
.
selected
{
background-color
:
var
(
--background-color-button-quiet--hover
);
}
table
.
dataTable
.
hover
tbody
tr
:
hover
,
table
.
dataTable
.
display
tbody
tr
:
hover
,
table
.
dataTable
.
hover
tbody
tr
:
hover
.
selected
,
table
.
dataTable
.
display
tbody
tr
:
hover
.
selected
{
background-color
:
var
(
--background-color-button-quiet--hover
);
}
table
.
dataTable
.
order-column
tbody
tr
>
.
sorting_1
,
table
.
dataTable
.
order-column
tbody
tr
>
.
sorting_2
,
table
.
dataTable
.
order-column
tbody
tr
>
.
sorting_3
,
table
.
dataTable
.
display
tbody
tr
>
.
sorting_1
,
table
.
dataTable
.
display
tbody
tr
>
.
sorting_2
,
table
.
dataTable
.
display
tbody
tr
>
.
sorting_3
{
background-color
:
var
(
--color-surface-3
);
}
table
.
dataTable
.
order-column
tbody
tr
.
selected
>
.
sorting_1
,
table
.
dataTable
.
order-column
tbody
tr
.
selected
>
.
sorting_2
,
table
.
dataTable
.
order-column
tbody
tr
.
selected
>
.
sorting_3
,
table
.
dataTable
.
display
tbody
tr
.
selected
>
.
sorting_1
,
table
.
dataTable
.
display
tbody
tr
.
selected
>
.
sorting_2
,
table
.
dataTable
.
display
tbody
tr
.
selected
>
.
sorting_3
{
background-color
:
var
(
--color-surface-3
);
}
table
.
dataTable
.
display
tbody
tr
.
odd
>
.
sorting_1
,
table
.
dataTable
.
order-column
.
stripe
tbody
tr
.
odd
>
.
sorting_1
{
background-color
:
var
(
--color-surface-3
);
}
table
.
dataTable
.
display
tbody
tr
.
odd
>
.
sorting_2
,
table
.
dataTable
.
order-column
.
stripe
tbody
tr
.
odd
>
.
sorting_2
{
background-color
:
var
(
--color-surface-3
);
}
table
.
dataTable
.
display
tbody
tr
.
odd
>
.
sorting_3
,
table
.
dataTable
.
order-column
.
stripe
tbody
tr
.
odd
>
.
sorting_3
{
background-color
:
var
(
--color-surface-3
);
}
table
.
dataTable
.
display
tbody
tr
.
odd
.
selected
>
.
sorting_1
,
table
.
dataTable
.
order-column
.
stripe
tbody
tr
.
odd
.
selected
>
.
sorting_1
{
background-color
:
var
(
--color-surface-3
);
}
table
.
dataTable
.
display
tbody
tr
.
odd
.
selected
>
.
sorting_2
,
table
.
dataTable
.
order-column
.
stripe
tbody
tr
.
odd
.
selected
>
.
sorting_2
{
background-color
:
var
(
--color-surface-3
);
}
table
.
dataTable
.
display
tbody
tr
.
odd
.
selected
>
.
sorting_3
,
table
.
dataTable
.
order-column
.
stripe
tbody
tr
.
odd
.
selected
>
.
sorting_3
{
background-color
:
var
(
--color-surface-3
);
}
table
.
dataTable
.
display
tbody
tr
.
even
>
.
sorting_1
,
table
.
dataTable
.
order-column
.
stripe
tbody
tr
.
even
>
.
sorting_1
{
background-color
:
var
(
--color-surface-3
);
}
table
.
dataTable
.
display
tbody
tr
.
even
>
.
sorting_2
,
table
.
dataTable
.
order-column
.
stripe
tbody
tr
.
even
>
.
sorting_2
{
background-color
:
var
(
--color-surface-3
);
}
table
.
dataTable
.
display
tbody
tr
.
even
>
.
sorting_3
,
table
.
dataTable
.
order-column
.
stripe
tbody
tr
.
even
>
.
sorting_3
{
background-color
:
var
(
--color-surface-3
);
}
table
.
dataTable
.
display
tbody
tr
.
even
.
selected
>
.
sorting_1
,
table
.
dataTable
.
order-column
.
stripe
tbody
tr
.
even
.
selected
>
.
sorting_1
{
background-color
:
var
(
--color-surface-3
);
}
table
.
dataTable
.
display
tbody
tr
.
even
.
selected
>
.
sorting_2
,
table
.
dataTable
.
order-column
.
stripe
tbody
tr
.
even
.
selected
>
.
sorting_2
{
background-color
:
var
(
--color-surface-3
);
}
table
.
dataTable
.
display
tbody
tr
.
even
.
selected
>
.
sorting_3
,
table
.
dataTable
.
order-column
.
stripe
tbody
tr
.
even
.
selected
>
.
sorting_3
{
background-color
:
var
(
--color-surface-3
);
}
table
.
dataTable
.
display
tbody
tr
:
hover
>
.
sorting_1
,
table
.
dataTable
.
order-column
.
hover
tbody
tr
:
hover
>
.
sorting_1
{
background-color
:
var
(
--color-surface-3
);
}
table
.
dataTable
.
display
tbody
tr
:
hover
>
.
sorting_2
,
table
.
dataTable
.
order-column
.
hover
tbody
tr
:
hover
>
.
sorting_2
{
background-color
:
var
(
--color-surface-3
);
}
table
.
dataTable
.
display
tbody
tr
:
hover
>
.
sorting_3
,
table
.
dataTable
.
order-column
.
hover
tbody
tr
:
hover
>
.
sorting_3
{
background-color
:
var
(
--color-surface-3
);
}
table
.
dataTable
.
display
tbody
tr
:
hover
.
selected
>
.
sorting_1
,
table
.
dataTable
.
order-column
.
hover
tbody
tr
:
hover
.
selected
>
.
sorting_1
{
background-color
:
var
(
--color-surface-3
);
}
table
.
dataTable
.
display
tbody
tr
:
hover
.
selected
>
.
sorting_2
,
table
.
dataTable
.
order-column
.
hover
tbody
tr
:
hover
.
selected
>
.
sorting_2
{
background-color
:
var
(
--color-surface-3
);
}
table
.
dataTable
.
display
tbody
tr
:
hover
.
selected
>
.
sorting_3
,
table
.
dataTable
.
order-column
.
hover
tbody
tr
:
hover
.
selected
>
.
sorting_3
{
background-color
:
var
(
--color-surface-3
);
}
table
.
dataTable
.
no-footer
{
border-bottom-color
:
var
(
--border-color-base
);
}
table
.
dataTable
tbody
tr
.
selected
>
*
{
box-shadow
:
inset
0
0
0
9999
px
var
(
--color-progressive
);
}
.
dataTables_wrapper
.
dataTables_paginate
.
paginate_button
{
font-weight
:
var
(
--font-weight-medium
);
color
:
var
(
--color-emphasized
)
!important
;
border-radius
:
var
(
--border-radius-base
);
}
.
dataTables_wrapper
.
dataTables_paginate
.
paginate_button
.
current
,
.
dataTables_wrapper
.
dataTables_paginate
.
paginate_button
.
current
:
hover
{
color
:
var
(
--color-emphasized
)
!important
;
background
:
var
(
--background-color-progressive-subtle
);
border-color
:
transparent
;
}
.
dataTables_wrapper
.
dataTables_paginate
.
paginate_button
.
disabled
,
.
dataTables_wrapper
.
dataTables_paginate
.
paginate_button
.
disabled
:
hover
,
.
dataTables_wrapper
.
dataTables_paginate
.
paginate_button
.
disabled
:
active
{
color
:
var
(
--color-subtle
)
!important
;
}
.
dataTables_wrapper
.
dataTables_paginate
.
paginate_button
:
hover
{
color
:
var
(
--color-emphasized
)
!important
;
background
:
var
(
--background-color-button-quiet--hover
);
border-color
:
transparent
;
}
.
dataTables_wrapper
.
dataTables_paginate
.
paginate_button
:
active
{
background
:
var
(
--background-color-button-quiet--active
);
box-shadow
:
none
;
}
.
dataTables_wrapper
.
dataTables_length
,
.
dataTables_wrapper
.
dataTables_filter
,
.
dataTables_wrapper
.
dataTables_info
,
.
dataTables_wrapper
.
dataTables_processing
,
.
dataTables_wrapper
.
dataTables_paginate
{
font-size
:
var
(
--font-size-small
);
color
:
var
(
--color-base
);
}
//
Expand
(+)
button
table
.
dataTable
.
dtr-inline
.
collapsed
>
tbody
>
tr
>
td
.
dtr-control
::
before
,
table
.
dataTable
.
dtr-inline
.
collapsed
>
tbody
>
tr
>
th
.
dtr-control
::
before
{
background-color
:
var
(
--color-success
);
border-color
:
transparent
;
}
//
Collapse
(
-
)
button
table
.
dataTable
.
dtr-inline
.
collapsed
>
tbody
>
tr
.
parent
>
td
.
dtr-control
::
before
,
table
.
dataTable
.
dtr-inline
.
collapsed
>
tbody
>
tr
.
parent
>
th
.
dtr-control
::
before
{
background-color
:
var
(
--color-destructive
);
}
table
.
dataTable
>
tbody
>
tr
.
child
ul
.
dtr-details
>
li
{
border-bottom-color
:
var
(
--border-color-base
);
}
/* Filter */
.
dataTables_wrapper
{
.dataTables_filter
{
margin-bottom
:
var
(
--space-sm
);
input
{
margin-left
:
var
(
--space-xxs
);
}
}
.
dataTables_length
select
,
.
dataTables_filter
input
{
padding
:
var
(
--space-xs
);
border
:
var
(
--border-width-base
)
solid
var
(
--border-color-interactive
);
border-radius
:
var
(
--border-radius-base
);
}
}
/* Scroller */
//
Add
rounded
corner
like
wikitable
.
dataTables_wrapper
.
dataTables_scroll
{
overflow
:
hidden
;
border-radius
:
var
(
--border-radius-medium
);
box-shadow
:
var
(
--box-shadow-border
);
}
div
.
dts
div
.
dataTables_scrollBody
{
background
:
transparent
;
}
div
.
dts
div
.
dataTables_scrollBody
table
{
background
:
transparent
;
border
:
0
;
}
.
dataTables_wrapper
.
no-footer
.
dataTables_scrollBody
{
border-bottom-color
:
var
(
--border-color-base
);
}
/* Search pane */
div
.
dtsp-topRow
,
div
.
dtsp-topRow
.
dtsp-bordered
,
div
.
dtsp-topRow
.
dtsp-bordered
:
hover
,
div
.
dtsp-panesContainer
div
.
dtsp-searchPanes
div
.
dtsp-searchPane
div
.
dataTables_wrapper
,
div
.
dtsp-panesContainer
div
.
dtsp-searchPanes
div
.
dtsp-searchPane
div
.
dataTables_wrapper
:
hover
{
//
Consistent
border
border
:
0
;
border-radius
:
var
(
--border-radius-medium
);
}
div
.
dtsp-columns-2
{
//
There
is
no
need
to
hardcode
it
min-width
:
auto
;
max-width
:
none
;
}
div
.
dtsp-panesContainer
{
margin-bottom
:
var
(
--space-sm
);
div.dtsp-titleRow
{
display
:
flex
;
flex-wrap
:
wrap
;
margin-bottom
:
var
(
--space-xxs
);
}
div
.
dtsp-title
{
flex-grow
:
1
;
padding
:
var
(
--space-xs
)
0
;
color
:
var
(
--color-subtle
);
text-align
:
start
;
.mixin-citizen-font-styles(
'overline'
)
;
}
div
.
dtsp-title
,
button
.
dtsp-clearAll
,
button
.
dtsp-collapseAll
,
button
.
dtsp-showAll
{
//
Use
flexbox
instead
float
:
none
;
}
button
.
dtsp-clearAll
,
button
.
dtsp-collapseAll
,
button
.
dtsp-showAll
{
padding
:
var
(
--space-xs
)
var
(
--space-sm
);
font-weight
:
var
(
--font-weight-medium
);
color
:
var
(
--color-emphasized
);
border
:
0
;
border-radius
:
var
(
--border-radius-base
);
&:hover
{
background-color
:
var
(
--background-color-button-quiet--hover
);
border-radius
:
var
(
--border-radius-base
);
}
&
:
active
{
background-color
:
var
(
--background-color-button-quiet--active
);
}
}
button
.
dtsp-disabledButton
{
display
:
none
;
color
:
var
(
--color-subtle
);
background-color
:
transparent
!important
;
}
div
.
dtsp-searchPanes
{
gap
:
var
(
--space-xs
);
div.dtsp-searchPane
{
height
:
fit-content
;
margin-top
:
0
!important
;
font-size
:
var
(
--font-size-small
);
border
:
var
(
--border-width-base
)
solid
var
(
--border-color-base
);
border-radius
:
var
(
--border-radius-medium
);
//
Hidden
pane
&:has(
.dtsp-hidden
)
{
.dtsp-topRow
{
background-color
:
transparent
;
&:hover
{
background-color
:
var
(
--background-color-button-quiet--hover
);
border-radius
:
var
(
--border-radius-medium
);
opacity
:
1
;
}
.
dtsp-disabledButton
{
//
Hide
buttons
since
they
have
no
purposes
//
Also
allows
the
label
to
be
longer
display
:
none
;
}
}
}
div
.
dtsp-topRow
{
min-height
:
auto
;
background-color
:
var
(
--color-surface-2
);
border-bottom-right-radius
:
0
;
border-bottom-left-radius
:
0
;
div.dtsp-searchCont
input.dtsp-search
{
padding-left
:
var
(
--space-sm
);
border-radius
:
var
(
--border-radius-base
);
}
}
input
.
dtsp-paneInputButton
{
&::placeholder
{
color
:
var
(
--color-subtle
);
}
}
button
.
dtsp-paneButton
{
opacity
:
var
(
--opacity-icon-base
);
filter
:
var
(
--filter-invert
);
&:hover
{
opacity
:
var
(
--opacity-icon-base--hover
);
}
&
:
active
{
opacity
:
var
(
--opacity-icon-base--selected
);
}
}
input
.
dtsp-paneInputButton
,
button
.
dtsp-paneButton
{
width
:
36
px
;
height
:
40
px
;
margin
:
0
;
border-radius
:
var
(
--border-radius-base
);
&:hover
{
background-color
:
var
(
--background-color-button-quiet--hover
);
}
}
button
.
dtsp-searchIcon
{
background-size
:
14
px
;
}
//
Text
buttons
button
.
clearButton
{
font-size
:
28
px
;
}
button
.
dtsp-collapseButton
span
.
dtsp-caret
{
top
:
4
px
;
font-size
:
24
px
;
}
button
.
clearButton
,
button
.
dtsp-collapseButton
span
.
dtsp-caret
{
font-weight
:
var
(
--font-weight-medium
);
vertical-align
:
middle
;
//
Force
to
be
black
to
work
with
filter
color
:
#000
;
}
button
.
dtsp-disabledButton
{
opacity
:
var
(
--opacity-base--disabled
)
!important
;
}
}
}
div
.
dataTables_wrapper
div
.
dataTables_scrollBody
{
background
:
transparent
!important
;
table
{
tr
>
th,
tr
>
td
{
padding
:
var
(
--space-xs
)
var
(
--space-sm
);
}
}
td
.
dtsp-nameColumn
{
&:hover
{
background-color
:
var
(
--background-color-button-quiet--hover
);
}
}
div
.
dtsp-nameCont
span
.
dtsp-pill
{
font-size
:
var
(
--font-size-small
);
color
:
var
(
--color-base
);
background
:
var
(
--color-surface-2
);
border
:
var
(
--border-width-base
)
solid
var
(
--border-color-base
);
}
}
}
File Metadata
Details
Attached
Mime Type
text/plain
Expires
Aug 19 2026, 17:21 (4 w, 6 d ago)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
1d/61/6efb2a0e98265bf0ab1299f7ffda
Default Alt Text
datatables.less (13 KB)
Attached To
Mode
rMWPROD MediaWiki Production
Attached
Detach File
Event Timeline
Log In to Comment