Skip to content

Instantly share code, notes, and snippets.

@chdenat
Last active July 6, 2021 17:54
Show Gist options
  • Save chdenat/f27ecd72c919f99a2ceed1d16025c4ec to your computer and use it in GitHub Desktop.
Save chdenat/f27ecd72c919f99a2ceed1d16025c4ec to your computer and use it in GitHub Desktop.
Some CSS used to overload admin page. Use *force-left* class in ACF to force a new line and *left-xx* class to make some spacing.
/***********************************************************************************************************************
* OVERLOAD ACF
**********************************************************************************************************************/
:root {
--acf-background: #0d99d5;
--acf-border-color: #007cba;
--acf-background-unselected: #d7d7d7;
--acf-color: #0d99d5;
--acf-color-hover: #007cba;
--acf-gray: #f4f4f4;
}
.acf-field {
border-bottom-color: transparent;
}
/**
* Use force-left to have next field on a new line
**/
.acf-field[data-width].force-left {
clear: left;
}
.acf-field.acf-accordion .acf-label.acf-accordion-title {
background: var(--acf-background-unselected);
border-color: var(--acf-border-color);
}
.acf-field.acf-accordion.-open .acf-label.acf-accordion-title {
background: var(--acf-background);
color: #fff;
}
.acf-fields > .acf-field, .acf-field[data-width] + .acf-field[data-width] {
border: none;
}
.acf-input .select-action-bar {
position: absolute;
top: -30px;
right: 0;
margin: 0;
cursor: pointer;
}
.acf-input .dashicons.update-button {
margin-top: 2px;
margin-left: 1rem;
}
.acf-input .dashicons.update-button.spin {
animation: dashicons-spin 1s infinite;
animation-timing-function: linear;
}
@keyframes dashicons-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/** tabs **/
.acf-fields > .acf-tab-wrap {
background: transparent;
}
.acf-fields > .acf-tab-wrap .acf-tab-group {
border-top: transparent
}
.acf-fields > .acf-tab-wrap .acf-tab-group li a {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
background-color: var(--acf-background-unselected);
}
.acf-fields > .acf-tab-wrap .acf-tab-group li.active a {
color: var(--acf-color);
}
.acf-fields > .acf-tab-wrap .acf-tab-group a:hover {
color: var(--acf-color-hover);
}
/** Table andrepeater */
.acf-table, .acf-table > thead > tr > th, .acf-table > tbody > tr > td {
border: 0 solid transparent;
}
.acf-table > thead > tr > th {
background-color: var(--acf-gray);
font-weight: 600;
}
.acf-repeater .acf-row-handle.remove {
background: var(--acf-gray);
}
.acf-repeater > table {
background: transparent;
}
.acf-table > thead > tr > th.acf-row-handle:first-child {
border-top-left-radius: 4px;
}
.acf-table > thead > tr > th.acf-row-handle:last-child {
border-top-right-radius: 4px;
}
/**
* Use left-xxx to align items
**/
/** Margin left */
.left-5 {
margin-left: 5% !important;
}
.left-10 {
margin-left: 10% !important;
}
.left-15 {
margin-left: 15% !important;
}
.left-20 {
margin-left: 20% !important;
}
.left-25 {
margin-left: 25% !important;
}
.left-30 {
margin-left: 30% !important;
}
.left-50 {
margin-left: 50% !important;
}
.left-60 {
margin-left: 60% !important;
}
.left-70 {
margin-left: 70% !important;
}
add_action( 'acf/input/admin_head', function () {
// Assume to be in <plugin>/css/acf-addon.css
wp_enqueue_style( 'acf-addon', plugins_url( '/css/acf-addon.css', __FILE__ ), [
'acf-input',
'acf-pro-input',
] );
} );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment