Authorhubbitus
LicenseCC BY - Creative Commons Attribution
Categoryjira
Created
Updated
Size40 kB
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Compact most things of Jira version after 6.1 up to 8.1
More description and screenshots you may found at https://github.com/Hubbitus/jira-compact.user.css
I use Jira in my day job. It very good famous and extensible bug tracker. But even I use wide monitor additionally to notebook their design seems to me very sprawling.
That style was born several month when I tried there and there reduce elements and spaces between, move description right, highlight title and key fields like status…
100 words have worth less than example looks (for simplicity and easy distinguishing I will show screenshots of original Jira in Firefox and in Chromium with that style applied)
Changelog:
2021-07-26 Decrease board column gaps
2020-10-29 In structure highlight grouping rows
2020-10-20 Add Structure plgugin table compact styling
2020-09-15 Fix buttons height. Exclude font "Droid Sans" because it looks ugly.
2020-09-11 For fresh JIRA fixes:
Compact left issues list in filter.
Fix project administration pabe headers
Issue "details" heder move right to details itself.
2020-04-09 Kanban board task min-height set to 35px
2020-03-13 Add kanban board style compatibility with old Jira 6
2020-03-06 Fix Kanban board avatar placement for very short tasks summary (with little height of card)
2020-03-04 Compact issue tables Status and Epic columns, fix list artifacts in top-right corner menu (like "Help", "Administration")
2020-03-02 Compact Kanban board
2020-02-14 Compact tables in dashboard widgets
2019-11-15 Fix issues list in Epic: Fix width of status and percentage column.
2019-11-05 Add styling of "Two dimensional filter statistic" gadget
2019-05-08 Styling dashboards left list and widgets spacing. Do not indent
in dashboards. Support Jira 8.1.
2019-03-11 Fix epic linked tasks table glitch
2019-02-03 Fix status labels break on epic issues list
2018-12-22 Show linked issues full list always with scrolling in blocks
2018-11-01 Do not wrap assignee in epic tasks list
2018-01-26 Change applying regexp for all domains starting from "jira."
2018-01-19 Firefox compatibility fix for gadgets
Drop line-height: 1.4em; for p::first-letter
For gadgets table align header by center and all cells by middle vertically.
2018-10-18 Allow break long task statuses by full words like "Selected for development"
2017-06-14 Add support of custom text-fields in issue
2017-03-04 Fix main task description edit with issue
2017-02-27 Decrease labels padding for dashboards, smaller issue-list action button, fix issues sub-list line doubling due to the icons
2017-02-17 Fix scrolling and tune some other styles like icons in issues search left navigation list
2017-02-17 Compact also Epic issues list in issue
2017-02-17 Fix height of buttons and menus on issue like "edit", "comment", "assign"…
2017-02-09 Issues sub-list correct percentage column style
2017-02-01 Fix linked issues sub-list always full
2017-01-24 Compact dates in dashboards widgets
2017-01-16 Fix row ordering arrows in one line in sub-tasks list. Compact (v) sign on completed sub-tasks
2016-07-26 Show linked issues full list
2016-07-21 Compact style also pie-chart on dashboard
2016-07-12 Fix issue with time spent/remaining bars in sub-tasks
2016-07-12 In sub-tasks task list arrows for reordering place in one line to decrease height
2016-07-11 Allow wrap labels in td
2016-07-04 Update to fresh Jira styling of dashboards.
2016-06-02 Format editable fields and icons
2016-05-31 Fix sub-tasks list and editing area.
2016-04-15 Fix line height (introduced by previous font size change). Add terms (code, kbd, tt) highlight.
2016-04-14 Change main font to slightly large (x-small -> small) to normal distinguish bold. Fix editable for Jira version 6.4.11
/* ==UserStyle==
@name Jira compact theme. For jira versions 6.1 - 8.19.1+
@namespace hubbitus.info
@version 2.5
@description Compact most things of JIRA for more rationale use it. For example to see tens (most) issues on a kanban board instead 2-3 by default. Mostly usefull for the big displays (and not for the mobile devices!).
@author Pavel Alexeev <Pahan@Hubbitus.info>
==/UserStyle== */
@-moz-document regexp("^https?://jira[-\\d\\w]*\\..*"), regexp("^https?://((?!scriptrunner\\.adaptavist\\.com).)*/jira/.*") {
[lang|="en"], body { /* Drop "Droid Sans" which looks ugly */
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Fira Sans,Helvetica Neue,sans-serif;
}
body {
line-height: 1;
}
img {
border-radius: 5px 5px;
}
dl {
padding: 0;
}
ul, ol {
padding: 0 0 0 2em;
}
/** Top menu header **/
.aui-dropdown2 .aui-icon-container {
padding-left: 25px;
}
.aui-dropdown2 .aui-icon-container > img {
left: 6px;
top: 1px;
}
.aui-dropdown2 .aui-icon-container .icon {
height: 15px;
width: 15px;
}
nav.aui-header {
height: 33px;
}
#quicksearch-menu {
margin-top: -8px;
}
/** /Top menu header **/
/********************************************
***** Search and Issues
********************************************/
/* Reset most paddings and margin */
p, .issue-body-content .module>.mod-content, .issue-body-content .item-details dl>dd, .property-list>li, .property-list>li, .issuePanelWrapper, .tabwrap>.tabs.horizontal>li, .editable-field, .links-list .link-content, .issue-header .issue-header-content>.aui-page-header, .people-details>dl, .people-details>dl:first-child, .people-details>dl:first-child+dl, .issue-body-content .module + .module {
padding: 0 !important;
margin: 0 !important;
font-size: small;
line-height: 0.95em;
}
p {
text-indent: 1em;
}
/*
p:first-letter {
color: green;
/ *
text-decoration: underline;
Unfortunately it does not work in Chromium (http://stackoverflow.com/questions/27210066/underline-single-letter-in-an-input-placeholder, test http://jsfiddle.net/mqchen/cQCSp/3/), use background workaround
* /
border-bottom: 1px solid darkgreen;
border-radius: 0.2em;
text-transform: uppercase; / * quirqs * /
}
*/
blockquote {
padding: 0 2px;
margin: 0 19px;
background-color: aliceblue;
border: 2px solid var(--aui-border);
border-left: 5px solid var(--aui-border);
}
blockquote::before {
content: "❞";
font-size: 19pt;
float: left;
line-height: 0.8;
}
pre {
margin: 0 1px !important;
padding: 0 !important;
}
/* Highlight terms */
code, kbd, tt {
font-family: monospace;
background-color: #F3F3F3;
border-radius: 4px;
padding: 0 3px;
}
/* Filter name header */
.saved-search-selector {
padding: 0;
}
/* Issue status labels */
.aui-lozenge {
padding: 1px 2px;
}
.jira-editor-container {
width: 100%;
}
/***************************************/
/*** Compact left search list sidebar **/
/***************************************/
.list-panel {
padding: 0 !important;
}
.details-layout .split-view .list-results-panel {
padding-left: 2px;
}
.issue-list .issue-link-key {
display: inline !important;
font-size: 80%;
font-weight: bold;
}
.issue-list .issue-link-key:after {
content: ": ";
}
.issue-list .issue-link-summary {
white-space: normal !important;
display: inline !important;
font-size: 70%;
}
.issue-list {
overflow: inherit !important;
}
.issue-list li {
padding: 0 !important;
line-height: 70%;
}
.issue-list > li img {
vertical-align: baseline !important; /* Affect line height! */
}
.list-panel {
padding: 0;
}
.split-view .list-results-panel {
padding: 0;
}
.splitview-issue-link br {
display: none;
}
.details-layout .split-view .list-results-panel .list-panel .issue-list>li img { /* Issue type icon */
height: 11px;
width: 11px;
}
.issue-list > li .splitview-issue-link > div > div.issue-content-container {
margin-left: 1px;
}
/********************************************/
/*** end/ Compact left search list sidebar **/
/********************************************/
/*** Compact message representation at right **/
.detail-panel .module {
padding: 0 !important;
margin: 0 !important;
}
header.aui-page-header {
padding: 0;
}
.issue-header .command-bar .toolbar-group {
margin-bottom: 0;
}
/*** Buttons **/
.toolbar-item+.toolbar-item .toolbar-trigger, .toolbar-item+.toolbar-item a.aui-dd-trigger,
.aui-toolbar .toolbar-group .toolbar-trigger, .aui-toolbar .aui-dd-parent a.aui-dd-trigger {
padding: 0 3px !important;
}
div.command-bar {
padding: 0 !important;
}
.issue-main-column {
padding-right: 0.3em;
border: 1px dashed lightgray;
}
/*** Details move to right **/
/* There are #peoplemodule, #datesmodule */
#viewissuesidebar {
padding: 0 0.3em!important;
position: relative;
top: 10em;
line-height: 0.9em;
}
/* Description block at right and do not wider than content, but not edit form */
#description-val {
/* float: right; // It do smaller with on small test content, but it also break editor */
/* color: brown; */
width: 100%;
}
/*
#details-module - That is all details of Issue including: "Custom description", "Test Case", "Epic link" +
#issuedetails include only base common fields like: Type, Priority, Status…
*/
/* .issue-main-column #details-module { */
.issue-main-column #issuedetails {
padding-left: 0.3em !important;
position: absolute;
right: 4px;
width: 35%;
max-height: 10.1em;
overflow: auto;
}
/* Dashboard right sidebar task view */
.ghx-detail-view.gh-editable-detail-view .ghx-detail-section.module .mod-content .property-list .wrap .name {
margin-left: 0;
width: auto;
}
#DETAILS > div {
margin: 1px !important;
border: 1px dotted grey;
border-radius: 6px;
box-shadow: 1px 3px 2px #1a9cb0;
}
.ghx-detail-view.gh-editable-detail-view .ghx-detail-issue .module.toggle-wrap .toggle-title {
background-color: transparent;
}
/* /Dashboard right sidebar task view */
/* Hide "Custom description" label */
#rowForcustomfield_10800 div strong {
display: none;
}
.mod-content .type-textarea {
float: right;
font-size: 90%;
margin-right: 10px !important;
}
/* search in action */
.property-list .wrap {
padding: 0 !important;
}
.property-list .wrap strong.name {
margin-left: 0;
font-weight: bold;
padding: 0 5px 0 0;
}
.property-list .item .name {
width: auto;
min-width: 9em;
}
.property-list .item .value {
display: run-in;
}
.links-list dd .delete-link {
top: 0 !important;
}
/** Edit field */
.editable-field form.aui {
margin: 0;
}
/*** end "Details move to right" **/
/***************************************/
/*** Issue itself **/
/***************************************/
#summary-val.editable-field {
font-size: 16pt;
color: green;
width: 100%;
text-shadow: 1px 1px 3px #116ebf;
}
.twixi-block .twixi, .toggle-wrap .twixi, .twixi-block .icon-twixi, .toggle-wrap .icon-twixi, .twixi-block .twixi-opened, .toggle-wrap .twixi-opened, .twixi-block .twixi-closed, .toggle-wrap .twixi-closed {
left: 8px;
}
.property-list .item .value, .status-view {
padding: 0;
}
.aui-toolbar2 .aui-button {
margin-top: 1px;
}
/* Show linked issues full list always with scrolling in blocks */
.collapsed-link, .collapsed-links-list {
display: inherit;
}
.mod-content dl.links-list {
overflow-y: auto;
max-height: 9em;
}
#show-more-links {
display: none;
}
.links-list dd:hover .delete-link a, .links-list dd .delete-link a:focus {
top: 0 !important;
right: 1px; /* Fix to do not appear horisontal scrolling*/
}
/* /Show linked issues full list always */
/** Editable fields, task right status **/
.aui-avatar-small, .aui-avatar-small .aui-avatar-inner, .aui-avatar-small .aui-avatar-inner img {
width: 16px;
height: 16px;
overflow: clip;
}
.editable-field .overlay-icon, .aui-iconfont-edit {
width: 16px;
}
.editable-field {
display: flex;
min-height: 16px;
}
.editable-field .overlay-icon.aui-iconfont-edit:before {
left: -1px;
top: 8px;
}
.editable-field .overlay-icon.aui-iconfont-edit {
right: -13px;
border: 1px ridge #ccc;
border-radius: 3px;
top: -1px;
}
.issue-body-content .item-details dl>dt {
padding: 0;
}
/** Editable fields **/
/* Special highlight custom field "Block reason" */
strong[title='Block reason'], strong[title='Block reason'] + div{
border: 1px solid magenta;
background-color: #ff00006b;
}
strong[title='Block reason'] + div{
background-color: #ff000024;
}
/* /Special highlight custom field "Block reason" */
#status-val, #resolution-val, #fixfor-val, #customfield_10040-val {
background-color: gold;
}
.aui-tabs {
font-size: inherit !important;
}
#view-subtasks td.stsummary {
width: auto; /* was 100% - it give strange issue for heigh increase */
}
/* Buttons and menus on issue like "edit", "comment", "assign"… */
.aui-toolbar .toolbar-group .toolbar-trigger, .aui-toolbar .aui-dd-parent a.aui-dd-trigger {
height: 17px;
}
/** Sub-tasks task list **/
#issuetable>tbody>tr>td {
vertical-align: middle;
display: table-cell;
}
#issuetable>tbody>tr>td {
border-right: 1px solid #EAEAEA; /* Add td borders */
}
/* Base 16px is too small for status. Issues list in Epic */
#issuetable .status {
width: inherit;
}
.command-bar .aui-button, .command-bar .aui-button:visited, .command-bar a.aui-button {
height: 1em;
line-height: 1em;
padding: 0 10px;
}
.ops-menus .aui-toolbar2-inner .icon {
vertical-align: top;
}
.aui-icon-large::before, .aui-icon-small::before {
top: 38%;
}
.aui-button.aui-button-compact {
font-size: 8px;
padding: 0 2px;
height: 16px;
}
.issue_actions .aui-icon-small {
width: 14px;
margin-left: -2px;
}
.subtask-reorder .aui-i...