216 lines
3.3 KiB
SCSS
216 lines
3.3 KiB
SCSS
/**
|
|
* Custom styling for the snippets table
|
|
*/
|
|
|
|
@use 'sass:map';
|
|
@use 'sass:color';
|
|
@use 'common/theme';
|
|
@use 'common/badges';
|
|
@use 'common/switch';
|
|
@use 'common/direction';
|
|
@use 'common/select';
|
|
@use 'manage/cloud';
|
|
|
|
.column-name,
|
|
.column-type {
|
|
.dashicons {
|
|
font-size: 16px;
|
|
inline-size: 16px;
|
|
block-size: 16px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.dashicons-clock {
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.active-snippet .column-name > .snippet-name {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.active-snippet {
|
|
td, th {
|
|
background-color: rgba(#78c8e6, 0.06);
|
|
}
|
|
|
|
th.check-column {
|
|
border-inline-start: 2px solid #2ea2cc;
|
|
}
|
|
}
|
|
|
|
.column-priority input {
|
|
appearance: none;
|
|
background: none;
|
|
border: none;
|
|
box-shadow: none;
|
|
inline-size: 4em;
|
|
color: #666;
|
|
text-align: center;
|
|
|
|
&:hover, &:focus, &:active {
|
|
color: #000;
|
|
background-color: #f5f5f5;
|
|
background-color: rgb(0 0 0 / 10%);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
&:disabled {
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
.clear-filters {
|
|
vertical-align: baseline !important;
|
|
}
|
|
|
|
.snippets {
|
|
td.column-id {
|
|
text-align: center;
|
|
}
|
|
|
|
tr {
|
|
background: #fff;
|
|
}
|
|
|
|
ol, ul {
|
|
margin-block: 0 1.5em;
|
|
margin-inline: 1.5em 0;
|
|
}
|
|
|
|
ul {
|
|
list-style: disc;
|
|
}
|
|
|
|
th.sortable a, th.sorted a {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.row-actions {
|
|
color: #ddd;
|
|
position: relative;
|
|
inset-inline-start: 0;
|
|
}
|
|
|
|
.column-activate {
|
|
padding-inline-end: 0 !important;
|
|
}
|
|
|
|
.clear-filters {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
tfoot th.check-column {
|
|
padding-block: 13px 0;
|
|
padding-inline: 3px 0;
|
|
}
|
|
|
|
thead th.check-column,
|
|
tfoot th.check-column,
|
|
.inactive-snippet th.check-column {
|
|
padding-inline-start: 5px;
|
|
}
|
|
|
|
.active-snippet, .inactive-snippet {
|
|
td, th {
|
|
padding-block: 10px;
|
|
padding-inline: 9px;
|
|
border: none;
|
|
box-shadow: inset 0 -1px 0 rgb(0 0 0 / 10%);
|
|
}
|
|
}
|
|
|
|
tr.active-snippet + tr.inactive-snippet th,
|
|
tr.active-snippet + tr.inactive-snippet td {
|
|
border-block-start: 1px solid rgb(0 0 0 / 3%);
|
|
box-shadow: inset 0 1px 0 rgb(0 0 0 / 2%), inset 0 -1px 0 #e1e1e1;
|
|
}
|
|
|
|
&, #all-snippets-table, #search-snippets-table {
|
|
a.delete:hover {
|
|
border-block-end: 1px solid #f00;
|
|
color: #f00;
|
|
}
|
|
}
|
|
|
|
#wpbody-content & .column-name {
|
|
white-space: nowrap; /* prevents wrapping of snippet title */
|
|
}
|
|
}
|
|
|
|
td.column-description {
|
|
max-inline-size: 700px;
|
|
|
|
pre {
|
|
white-space: unset;
|
|
}
|
|
}
|
|
|
|
.inactive-snippet {
|
|
@include theme.link-colors(#579);
|
|
}
|
|
|
|
@media (width <= 782px) {
|
|
p.search-box {
|
|
float: inline-start;
|
|
position: initial;
|
|
margin-block: 1em 0;
|
|
margin-inline: 0;
|
|
block-size: auto;
|
|
}
|
|
}
|
|
|
|
.wp-list-table .is-expanded td.column-activate.activate {
|
|
/* fix for mobile layout */
|
|
display: table-cell !important;
|
|
}
|
|
|
|
.nav-tab-wrapper + .subsubsub, p.search-box {
|
|
margin-block: 10px 0;
|
|
margin-inline: 0;
|
|
}
|
|
|
|
.snippet-type-description {
|
|
border-block-end: 1px solid #ccc;
|
|
margin: 0;
|
|
padding-block: 1em;
|
|
padding-inline: 0;
|
|
}
|
|
|
|
.code-snippets-notice a.notice-dismiss {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.refresh-button-container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
margin-block: 15px -39px;
|
|
gap: 7px;
|
|
}
|
|
|
|
#refresh-button {
|
|
inline-size: 30px;
|
|
padding: 0;
|
|
font-size: 20px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.wrap h2.nav-tab-wrapper {
|
|
.nav-tab {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
}
|
|
|
|
@media (width <= 1190px) {
|
|
.nav-tab {
|
|
.snippet-label {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|