Basics - Display Fix en

Installations 66 Likes 6

"Basics - Display Fix" changes many margins for a more comfortable rendering, fixes some existing features and therefore increases the user experience.

Below are the main changes that this plugin makes:

Changes many margins and padding applied to base theme containers ;
Add a pointer cursor on the checkboxes ;
Change the shape of entity images from round to rounded squares ;
Remove boosted icons from premium features ;
Right sidebar on entity page:
- Adds a background of the default color of your current theme ;
- Changes its display so that its entries are all automatically lined and separated by a thin border.
Reduce the default campaign name size in the main sidebar ;
Remove the last update date under the campaign name in the main sidebar ;
Remove the entry header displayed by default and not editable on the entities page.

Note

This plugin is currently still in beta version and therefore, despite my special attention, may contain display bugs, especially on mobile version. Thank you for your understanding. The use of this plugin could cause some display issues with certains themes which already modify the display. It's advisable to modify the order of the plugins in such a way as to add it to the end of the order list, so that it takes priority.

Contact

For any feedback, suggestions, ideas or encountered issues, you can email me at [email protected] using the following subject: Kanka - [Plugin Name] - Your topic

Latest version 0.2 beta View content

Released 9 months ago

The footer is now displayed correctly following the latest Kanka update. Thanks to Salvatos for keeping me informed.

Plugin CSS for 0.2 beta


/***********************/
/* INTEGRATED PLUGINS */

/** Plugin: No Fluff by felixnightshade (https: //marketplace.kanka.io/profiles/17967) **/

/* Removes "Boosted" text and boosted rocket */
strong.text-maroon,
strong.text-maroon~p.help-block,
strong.text-maroon~br {
    display: var(--boosted-text-nofluff, none);
}

.fas.fa-rocket,
.label.label-default.bg-maroon.pull-right {
    display: var(--boosted-rocket-nofluff, none);
}

/**********************************/
/********** GLOBAL PAGES *********/
/********************************/

/* Alert Notifications */
.alert-success,
.bg-green,
.callout.callout-success,
.label-success,
.modal-success .modal-body {
    margin-top: 20px;
}

/* WRAPS AND WEBSITE CONTENT */
section.content-header {
    padding: 0px;
}

section.content {
    padding-top: 0px;
}

.content-header ol.breadcrumb {
    padding: 15px 25px 10px 25px;
}

.content-header h1 {
    padding: 0 0 15px 15px;
}

.campaign-header {
    margin-bottom: 15px;
}

/* Content Wrapper Fix */
.content-wrapper {
    min-height: calc(100vh - 50px) !important;
}

.btn-block+.btn-block {
    margin-top: 10px;
}

.help-block {
    margin-top: 15px;
    margin-left: 2px;
}

.box-footer .help-block {
    display: inline-block;
    margin-left: 15px;
    margin-top: 0;
}

.form-group .help-block {
    margin-top: 5px;
}

/* Adding the pointer cursor on the checkboxes */
input[type=checkbox]:hover {
    cursor: pointer;
}

/*****************/
/* MAIN SIDEBAR */

/* Reduce the default campaign-name size */
section.sidebar-campaign .campaign-name {
    font-size: 16px;
}

/* Fixed the Custom Links tab in .active mode */
li.active.sidebar-quick-links {
    background: none !important;
    box-shadow: none !important;
}

li.active.sidebar-quick-links>a {
    background: rgba(0, 0, 0, .24) !important;
    box-shadow: inset 1px 2px 6px rgb(0 0 0 / 16%) !important;
}

/* Removal of last update date */
.campaign-updated {
    display: none;
}

/**********/
/* FORMS */

.nav-tabs-custom>.tab-content {
    padding: 20px;
}

.form-group .form-control {
    border-radius: 4px;
    padding: 6px 10px;
}

.selection .select2-selection {
    /* old /* height: 33px */
    min-height: 33px;
    padding: 6px 10px;
    margin-top: 0;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0;
    line-height: 2.4;
    margin-top: -6px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered .select2-selection__placeholder {
    color: var(--input-text-color);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    right: 25px !important;
    top: 0;
}

.form-group label {
    margin-left: 2px;
}

.form-group label input[type="checkbox"] {
    position: relative;
    top: 2px;
    margin-right: 3px;
}

#main-content>section.content>div>form>div.panel-body>div.required:nth-child(2),
#main-content>section.content>div>form>div.panel-body>div:nth-child(2)>p.help-block {
    margin-bottom: 0;
}

textarea#tooltip::placeholder,
.form-group input::placeholder {
    opacity: 0.65;
}

.form-group label input[name="is_dead"] {
    position: relative;
    top: 1px;
    margin-right: 5px;
}

.form-group input.image[type="file"] {
    padding-left: 6px;
}

.entity-modification-history div.help-block,
#entity-attributes-all .entity-attributes .help-block {
    margin-top: 0;
}

#form-organisations div:first-child {
    margin-bottom: 15px;
}

.panel .panel-body,
.panel-body .form-group:last-child,
.tab-content div.tab-pane.active div:not(.form-group):last-child,
.tab-content div.tab-pane.active div:last-child .help-block {
    margin-bottom: 0;
    padding-bottom: 0;
}

/***************************************/
/* ARTICLES, ENTITY, BOXES AND TABLES */

/** Headers **/

.entity-header-image>div {
    border-radius: 5px !important;
}

.entity-grid .entity-header {
    grid-template-columns: 225px auto;
}

.entity-grid .entity-header .entity-banner {
    min-height: 245px;
}

.entity-grid .entity-header .entity-header-image {
    padding: 20px 0 0 25px !important;
}

.entity-grid .entity-header.with-entity-banner .entity-header-image {
    padding: 20px 0 25px 25px !important;
}

.entity-grid .entity-header .entity-header-text {
    padding: 25px 25px 0 20px !important;
}

.entity-grid .entity-header.with-entity-banner .entity-header-text {
    padding: 25px 25px 25px 20px !important;
}

/** Content **/

/* Internal margin of article content increased */
.box-body {
    padding: 10px 20px;
}

.box-gallery .box-body {
    padding: 10px
}

.entity-notes .box-body {
    padding: 8px 20px;
}

.entity-grid .entity-submenu {
    padding-left: 25px;
}

.entity-grid .entity-sidebar {
    padding-right: 25px;
}

/* Formatting bulleted/number lists */
.entity-note-body li,
.entity-grid .entity-content>ul>li {
    margin-bottom: 10px;
}

.entity-note-body>ul>li>ul>li:nth-child(1) {
    margin-top: 8px;
}

/* Adding a margin at the bottom of the campaign title */
#campaign-dashboard .campaign-head {
    margin-bottom: 12px;
}

/*********************************************/

/* Fixed the display of labels corresponding to numbers */
.entity-submenu>.hidden-xs>.box-solid>div>ul>li>a>span:not(.bg-maroon) {
    padding: 0.5em 0.6em 0.3em;
}

.hidden-xs.hidden-sm ul>li>a>span.bg-maroon {
    padding: .5em .6em .3em;
}

/* Do not display the "Entry"title of the first entry */
.box-entity-entry .box-header.with-border[id=""],
.box-entity-entry .box-header.with-border:not([id]) {
    display: none;
}

.entity-story-block .box-entity-entry:first-child,
.entity-main-block .box-entity-entry:first-child {
    margin: 0;
}

/* When the Input entity has content, add a margin below 20px */
.box-entity-entry>.entity-content {
    margin-bottom: 20px;
    padding-top: 15px;
}

/* New grid proportions */
.entity-grid {
    grid-template-columns: 250px minmax(auto, calc(100% - 300px)) 250px;
}

/* Correction of margins due to character traits */
#character-appearance-body p:nth-child(1),
#character-appearance-body p:nth-child(2) {
    margin-top: 8px;
}

/* Checkbox formatting on tables */
.table-striped>thead>tr>th:nth-child(1),
.table-striped>tbody>tr>td:nth-child(1) {
    text-align: center;
}

.table-striped>thead>tr>th:nth-child(1)>input,
.table-striped>tbody>tr>td:nth-child(1)>input {
    cursor: pointer;
    height: 15px;
    width: 15px;
    opacity: 0.75;
}

/* Footer */
footer.main-footer {
    padding-bottom: 0px !important;
}

/* New border-radius on entity image */
a.entity-image {
    border-radius: 10%;
}

/** Permissions Category **/
#crud_permissions .row {
    margin-right: 15px;
    margin-left: 15px;
}

#crud_permissions .row:not(:last-child) {
    padding-bottom: 15px;
}

#crud_permissions .row hr {
    display: block;
    height: 20px;
    margin: 0 -15px 5px -15px;
}

/****************/
/* ADMIN PANEL */

.element-live-reorder .element:last-child {
    margin-bottom: 0;
}

#datagrid-parent .table tr th:first-child,
#datagrid-parent .table tr td:first-child {
    padding-left: 20px;
}

/* Campaign Title adjustement */
section.sidebar-campaign .campaign-block {
    padding: 120px 24px 0;
}

/**********/
/* BOXES */

.box-header .box-title i {
    margin-right: 5px;
}

.box-header {
    padding: 14px 10px 10px 20px;
}

.box,
.box-body,
.box.box-solid,
.sidebar-section-box {
    border-radius: 5px;
}

.box-entity-story-reorder .box-body,
.box-entity-story-reorder .box-footer,
.box-profile {
    padding: 20px;
}

.box-footer {
    line-height: 0px;
}

.box .box-header i.pull-right {
    margin-right: 10px;
}

.box .box-header i.fa-filter {
    margin-right: 5px;
}

/* Fixing Footer Box Buttons Display */
.datagrid-bulk-actions .btn-group,
.datagrid-bulk-actions #datagrids-bulk-actions-delete {
    margin-right: 5px
}

/***********/
/* TABLES */

.table {
    margin-bottom: 0;
}

/*********/
/* BODY */

/* Calendars */

.calendar-toolbar .calendar-current .btn {
    margin-left: 25px;
}

.month-alias {
    float: none;
    margin-bottom: 0;
    font-size: 2rem;
}

/* Conversations */

.box-conversation .box-comments .box-comment {
    margin: 0 0 20px 0;
    padding: 10px;
}

.box-conversation .box-comments .box-comment:first-child {
    margin-top: 10px;
}

.box-conversation .box-comments strong.user {
    display: inline-block;
    margin-bottom: 5px;
}

.box-conversation .box-comments .box-comment .comment-text {
    padding-left: 10px;
    border-left: 2px solid #afafb940;
}

.box-conversation .box-footer {
    padding: 20px 0;
}

/******************/
/* RIGHT SIDEBAR */

/* Only used for adding a default background */
:root {
    --sidebar-section-background: var(--box-background);
    --sidebar-section-padding: 10px 15px 0px 15px;
}

/* Redefinition of the sidebar fonts */
.sidebar-section-box .sidebar-section-title {
    border-bottom: none;
}

.sidebar-section-box {
    margin-bottom: 20px;
}

.list-group .list-group-item strong:first-child {
    display: inline-block;
    width: 100%;
    margin-bottom: 3px;
}

.list-group .list-group-item span {
    float: left !important;
}

.sidebar-section-box .sidebar-elements .element .title {
    font-size: 14px;
    font-weight: bold;
    text-transform: none;
}

.sidebar-elements .element div.title {
    margin-bottom: 3px;
}

.sidebar-elements .element {
    margin-bottom: 5px !important;
}

/* Adding a separator between the different elements */
.sidebar-elements .element:not(:last-child) {
    border-bottom: 1px solid;
    border-color: var(--list-group-item-border);
    padding-bottom: 10px;
}

/**********************/
/* RESPONSIVE DESIGN */

@media (max-width: 767px) {
    .entity-grid .entity-header {
        grid-template-columns: 120px minmax(auto, calc(100% - 120px));
    }

    .entity-grid .entity-header .entity-header-text {
        padding: 20px 25px 0 20px !important;
        align-self: start;
    }

    .entity-grid .entity-header .entity-banner {
        min-height: 150px;
    }

    .entity-grid .entity-submenu {
        padding: 0 15px;
    }

    .entity-note-body ul {
        padding-left: 20px;
    }

    .help-block {
        float: none;
        margin-top: 15px !important;
        margin-left: 0 !important;
    }
    .nav-tabs-custom .form-group {
            margin-bottom: 10px;
    }    
}

/*****************************

Author : MisterHims
Created for : Kanka v1.27.0
Plugin Version : 0.1 beta

CREDITS :
felixnightshade - No Fluff - https://github.com/Xbozon/rpg-styled-ui - For the plugin
Davsama - For the idea and more