aa4c59a48c
* Fix #172 Collapsed/expended icons for completed versions. * Fix #171 "Display" label in Gantt option. * Fix #170 radio buttons in projects options. * Fix #169 styles in the spent time tab. * Change lightness of shades 50 and 950. * Change loader styles.
796 lines
15 KiB
SCSS
796 lines
15 KiB
SCSS
//
|
|
// Issue page
|
|
// --------------------------------------------------
|
|
|
|
.issue {
|
|
@if not $clean-issues {
|
|
&.details {
|
|
padding: $issue-padding;
|
|
border: 1px solid $issue-border;
|
|
border-radius: $border-radius-base;
|
|
background-color: $issue-bg;
|
|
color: $issue-text;
|
|
}
|
|
}
|
|
|
|
&.details {
|
|
margin-bottom: $line-height-computed;
|
|
word-wrap: break-word;
|
|
|
|
@if $use-gravatars {
|
|
// For Redmine 3.4+
|
|
.gravatar-with-child {
|
|
position: relative;
|
|
|
|
> img.gravatar {
|
|
top: 0;
|
|
width: $issue-gravatar-size;
|
|
height: $issue-gravatar-size;
|
|
margin-right: 10px;
|
|
margin-bottom: $line-height-computed / 2;
|
|
float: left;
|
|
|
|
&:nth-child(2) {
|
|
position: absolute;
|
|
top: $issue-gravatar-size * .6;
|
|
left: $issue-gravatar-size * .6;
|
|
width: $issue-gravatar-size * .5;
|
|
height: $issue-gravatar-size * .5;
|
|
border: 2px solid rgba(255, 255, 255, .9);
|
|
border-radius: 20%;
|
|
}
|
|
}
|
|
}
|
|
|
|
> img.gravatar {
|
|
top: 0;
|
|
width: $issue-gravatar-size;
|
|
height: $issue-gravatar-size;
|
|
margin-right: 10px;
|
|
margin-bottom: $line-height-computed / 2;
|
|
float: left;
|
|
}
|
|
|
|
.assigned-to img.gravatar {
|
|
position: relative;
|
|
top: -3px;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
> .subject,
|
|
> .author {
|
|
padding-left: $issue-gravatar-size * 1.1 + 10px;
|
|
}
|
|
}
|
|
|
|
&.assigned-to-me {
|
|
.assigned-to .user {
|
|
font-weight: $font-weight-bold;
|
|
}
|
|
}
|
|
|
|
> .subject {
|
|
h3 {
|
|
margin-bottom: .3em;
|
|
color: $gray-950;
|
|
font-size: $issue-heading-size * 1em;
|
|
font-weight: $font-weight-bold;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
p {
|
|
margin-bottom: 5px;
|
|
font-size: $font-size-small;
|
|
}
|
|
}
|
|
|
|
> .author {
|
|
margin-bottom: $line-height-computed;
|
|
}
|
|
|
|
> hr,
|
|
.attribute > hr {
|
|
@if $clean-issues {
|
|
margin: $issue-padding 0;
|
|
} @else {
|
|
margin: $issue-padding (-$issue-padding);
|
|
}
|
|
border-top-color: $issue-border;
|
|
}
|
|
|
|
> .description {
|
|
> p {
|
|
margin-bottom: $issue-padding;
|
|
}
|
|
|
|
> .wiki {
|
|
@if $clean-issues {
|
|
margin: 0 0 $issue-padding;
|
|
} @else {
|
|
margin: 0 (-$issue-padding) (-$issue-padding);
|
|
padding: $padding-wiki;
|
|
border-top: 1px solid $issue-border;
|
|
background: $body-bg;
|
|
}
|
|
}
|
|
}
|
|
|
|
.next-prev-links {
|
|
margin: 0 0 $line-height-computed;
|
|
float: none;
|
|
color: $gray-600;
|
|
|
|
@media screen and (min-width: $screen-md-min) {
|
|
margin: 0;
|
|
float: right;
|
|
}
|
|
}
|
|
}
|
|
|
|
@if $color-status {
|
|
.attributes td.status,
|
|
.attributes .attribute.status .value {
|
|
display: inline-block;
|
|
width: auto;
|
|
min-width: 1em;
|
|
margin-top: $issue-attribute-padding-v;
|
|
padding: 1px $table-cell-padding;
|
|
border-radius: $border-radius-base;
|
|
background-color: $status-default-bg;
|
|
color: $status-default-color;
|
|
font-size: $font-size-small;
|
|
font-weight: $font-weight-bold;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
@each $status, $status-colors in $status-colors-map {
|
|
&.#{$status} {
|
|
.attributes td.status,
|
|
.attributes .attribute.status .value {
|
|
background-color: map-get($status-colors, background);
|
|
color: map-get($status-colors, color);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@if $priority-icon {
|
|
.attributes td.priority,
|
|
.attribute.priority .value {
|
|
@include priority-icon-base;
|
|
}
|
|
}
|
|
|
|
table.attributes {
|
|
width: 100%;
|
|
|
|
th,
|
|
td {
|
|
padding: $issue-attribute-padding-v $issue-attribute-padding-h $issue-attribute-padding-v 0;
|
|
text-align: left;
|
|
vertical-align: top;
|
|
}
|
|
|
|
> tbody > tr {
|
|
th {
|
|
color: $gray-700;
|
|
font-weight: $font-weight-normal;
|
|
}
|
|
|
|
td {
|
|
color: $gray-950;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: $screen-md-min) {
|
|
> tbody > tr {
|
|
> th {
|
|
width: $label-width;
|
|
}
|
|
|
|
> td {
|
|
min-width: $label-width;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.attributes {
|
|
@if $css-grid-layout {
|
|
display: grid;
|
|
grid-gap: 0 $padding-side;
|
|
grid-template-columns: auto;
|
|
|
|
@media screen and (min-width: $screen-lg-min) {
|
|
grid-template-columns: repeat(2, minmax(auto, max-content));
|
|
|
|
.attribute .value {
|
|
min-width: $label-width;
|
|
}
|
|
}
|
|
|
|
.splitcontent {
|
|
display: contents;
|
|
|
|
&::after {
|
|
content: none;
|
|
}
|
|
}
|
|
|
|
.splitcontentleft {
|
|
width: auto;
|
|
padding-right: 0;
|
|
padding-left: 0;
|
|
float: none;
|
|
}
|
|
} @else {
|
|
@media screen and (min-width: $screen-lg-min) {
|
|
.splitcontentleft {
|
|
width: auto;
|
|
}
|
|
|
|
.attribute .value {
|
|
min-width: $label-width;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.splitcontent {
|
|
.attribute {
|
|
padding-left: $label-width;
|
|
|
|
.label {
|
|
width: $label-width;
|
|
margin-left: -$label-width;
|
|
}
|
|
}
|
|
}
|
|
|
|
.attribute {
|
|
@extend %clearfix;
|
|
|
|
.label,
|
|
.value {
|
|
padding: $issue-attribute-padding-v $issue-attribute-padding-h $issue-attribute-padding-v 0;
|
|
}
|
|
|
|
.label {
|
|
box-sizing: border-box;
|
|
float: left;
|
|
color: $gray-700;
|
|
}
|
|
|
|
.value {
|
|
color: $gray-950;
|
|
|
|
&:empty::after {
|
|
content: "-";
|
|
}
|
|
|
|
*:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
table.progress {
|
|
width: 80px;
|
|
}
|
|
|
|
div.attachments {
|
|
margin: 0;
|
|
padding: 0;
|
|
border-top: 0;
|
|
}
|
|
|
|
div.description + div.attachments {
|
|
margin: $issue-padding (-$issue-padding) (-$issue-padding);
|
|
padding: $issue-padding;
|
|
border-top: 1px solid $issue-border;
|
|
}
|
|
|
|
// Restore margin below buttons in reverse chronological mode
|
|
+ div[style] + .contextual {
|
|
margin-bottom: $line-height-computed;
|
|
}
|
|
}
|
|
|
|
div.fileover {
|
|
background-color: $highlight-bg;
|
|
}
|
|
|
|
div.attachments:not(.box) {
|
|
padding: $line-height-computed 0;
|
|
border-top: 1px solid $issue-border;
|
|
|
|
@at-root .collapsible #{&} {
|
|
padding-top: 0;
|
|
border-top: 0;
|
|
}
|
|
|
|
p {
|
|
margin: 10px 0 0;
|
|
}
|
|
|
|
p:first-child,
|
|
.contextual + p {
|
|
margin-top: 0;
|
|
}
|
|
|
|
img {
|
|
position: relative;
|
|
top: -1px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.delete {
|
|
opacity: $icon-opacity;
|
|
|
|
&:hover {
|
|
opacity: $icon-hover-opacity;
|
|
}
|
|
}
|
|
|
|
span.author {
|
|
color: $gray-700;
|
|
font-size: $font-size-small;
|
|
}
|
|
}
|
|
|
|
div.thumbnails {
|
|
margin-top: $issue-padding;
|
|
|
|
div {
|
|
display: inline;
|
|
}
|
|
|
|
a {
|
|
display: inline-block;
|
|
margin-right: 2px;
|
|
border: 1px solid $gray-400;
|
|
border-radius: $border-radius-base;
|
|
background-color: $body-bg;
|
|
|
|
&:hover {
|
|
border-color: $gray-600;
|
|
}
|
|
}
|
|
|
|
img {
|
|
top: 0;
|
|
margin: 3px;
|
|
border-radius: $border-radius-base - 1;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
#issue_tree,
|
|
#relations {
|
|
> p {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.issues {
|
|
margin: ($line-height-computed / 2) 0 0;
|
|
|
|
tr {
|
|
background-color: transparent;
|
|
}
|
|
|
|
tr:last-child > td {
|
|
border-bottom: 0 none;
|
|
}
|
|
|
|
td.checkbox {
|
|
display: none;
|
|
}
|
|
|
|
td.done_ratio {
|
|
width: 80px;
|
|
}
|
|
|
|
td.buttons {
|
|
width: 3em;
|
|
vertical-align: middle;
|
|
|
|
a:not(:first-child) {
|
|
margin-left: 2px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#trackers_description {
|
|
display: none;
|
|
|
|
dt {
|
|
margin: 0 0 ($line-height-computed / 4);
|
|
}
|
|
|
|
dd {
|
|
margin-right: 0;
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
#new-relation-form {
|
|
text-align: right;
|
|
|
|
> p {
|
|
margin-bottom: 0;
|
|
|
|
> input {
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
#update > form {
|
|
margin-bottom: $line-height-computed;
|
|
padding-bottom: $line-height-computed;
|
|
border-bottom: 1px solid $issue-border;
|
|
}
|
|
|
|
#history {
|
|
> .tabs {
|
|
margin-bottom: $line-height-computed + 2px * 2;
|
|
}
|
|
|
|
&.hide-details {
|
|
.journal,
|
|
.details,
|
|
.first-of-notes::before {
|
|
display: none;
|
|
}
|
|
|
|
.has-notes {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
&.hide-notes {
|
|
.journal,
|
|
.wiki,
|
|
.first-of-details::before {
|
|
display: none;
|
|
}
|
|
|
|
.has-details {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.journal {
|
|
position: relative;
|
|
margin-bottom: $line-height-computed;
|
|
border: 1px solid $bubble-border;
|
|
border-radius: $panel-border-radius;
|
|
|
|
@if $use-gravatars {
|
|
margin-left: $bubble-gravatar-size + $bubble-gravatar-space;
|
|
}
|
|
|
|
&.changeset {
|
|
h4 + p {
|
|
margin-bottom: 0;
|
|
padding-bottom: $bubble-padding-vertical;
|
|
background-color: $bubble-bg;
|
|
font-size: $font-size-list;
|
|
|
|
> a:first-child {
|
|
font-family: $font-family-monospace;
|
|
font-weight: $font-weight-bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
> div {
|
|
&:target {
|
|
$border: $bubble-target-border;
|
|
$shadow: rgba($bubble-target-border, $bubble-target-shadow-alpha);
|
|
position: relative;
|
|
margin-top: -($responsive-header-height + 4px);
|
|
padding-top: ($responsive-header-height + 4px);
|
|
|
|
&::before {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
top: ($responsive-header-height + 4px);
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
border-radius: $panel-border-radius - 1px;
|
|
box-shadow: 0 0 0 1px $border, 0 0 0 4px $shadow;
|
|
}
|
|
|
|
@if $use-gravatars {
|
|
> h4::before {
|
|
border-right-color: $border;
|
|
filter: drop-shadow(-4px 0 0 $shadow);
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: $redmine-responsive-min) {
|
|
margin-top: -$line-height-computed;
|
|
padding-top: $line-height-computed;
|
|
|
|
&::before {
|
|
top: $line-height-computed;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// For Redmine 4.0+
|
|
> div > .contextual,
|
|
> .contextual {
|
|
position: relative;
|
|
z-index: 1;
|
|
margin: 0;
|
|
padding: $bubble-padding-vertical $bubble-padding-horizontal;
|
|
font-size: $font-size-list;
|
|
|
|
a {
|
|
opacity: $icon-opacity;
|
|
|
|
&:hover {
|
|
opacity: $icon-hover-opacity;
|
|
}
|
|
}
|
|
|
|
> a.journal-link {
|
|
padding-left: $issue-attribute-padding-h;
|
|
opacity: 1;
|
|
color: $gray-700;
|
|
|
|
&::before {
|
|
content: "";
|
|
}
|
|
}
|
|
}
|
|
|
|
> div > h4,
|
|
> h4 {
|
|
margin: 0;
|
|
padding: $bubble-padding-vertical $bubble-padding-horizontal;
|
|
border-radius: $panel-border-radius $panel-border-radius 0 0;
|
|
background-color: $bubble-bg;
|
|
color: $gray-700;
|
|
font-size: $font-size-list;
|
|
font-weight: $font-weight-normal;
|
|
|
|
a {
|
|
color: $gray-900;
|
|
|
|
&.user {
|
|
font-weight: $font-weight-bold;
|
|
}
|
|
}
|
|
|
|
.journal-link {
|
|
color: $gray-700;
|
|
}
|
|
}
|
|
|
|
@if $use-gravatars {
|
|
> div > h4,
|
|
> h4 {
|
|
position: relative;
|
|
|
|
&::before,
|
|
&::after {
|
|
content: " ";
|
|
display: block;
|
|
position: absolute;
|
|
top: 9px;
|
|
right: 100%;
|
|
left: -14px;
|
|
width: 0;
|
|
height: 0;
|
|
border-style: solid solid outset;
|
|
border-color: transparent;
|
|
pointer-events: none;
|
|
}
|
|
|
|
&::after {
|
|
margin-top: 1px;
|
|
margin-left: 2px;
|
|
border-width: 6px;
|
|
border-right-color: $bubble-bg;
|
|
}
|
|
|
|
&::before {
|
|
border-width: 7px;
|
|
border-right-color: $bubble-border;
|
|
}
|
|
|
|
> .gravatar {
|
|
top: 0;
|
|
margin-top: $line-height-computed - $bubble-gravatar-size;
|
|
margin-left: -($bubble-gravatar-size + $bubble-gravatar-space + $bubble-padding-horizontal + 1px);
|
|
float: left;
|
|
}
|
|
}
|
|
}
|
|
|
|
> p {
|
|
padding-right: $bubble-padding-horizontal;
|
|
padding-left: $bubble-padding-horizontal;
|
|
|
|
&:empty {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
form,
|
|
.wiki,
|
|
.details {
|
|
border-top: 1px solid $bubble-border;
|
|
}
|
|
|
|
.details {
|
|
margin: 0;
|
|
padding: $bubble-padding-vertical 0;
|
|
padding-left: $bubble-padding-horizontal + 20px;
|
|
font-size: $font-size-list;
|
|
|
|
img {
|
|
margin: 0 0 -3px 4px;
|
|
}
|
|
}
|
|
|
|
.thumbnails {
|
|
margin: 0;
|
|
padding: 0 $bubble-padding-horizontal $bubble-padding-vertical;
|
|
|
|
img {
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.wiki {
|
|
padding: $issue-padding;
|
|
}
|
|
|
|
form {
|
|
padding: $bubble-padding-vertical $bubble-padding-horizontal $bubble-padding-horizontal;
|
|
background-color: $bubble-bg;
|
|
|
|
> p {
|
|
margin-bottom: $issue-padding;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
> .wiki {
|
|
margin: 0 (-$issue-padding) (-$issue-padding);
|
|
padding: 0;
|
|
border: 0 none;
|
|
|
|
.preview {
|
|
padding: $issue-padding;
|
|
}
|
|
}
|
|
}
|
|
|
|
i {
|
|
&:first-of-type,
|
|
&:last-of-type {
|
|
padding: 2px 4px;
|
|
border-radius: $border-radius-small;
|
|
font-size: .9285em;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
del > i:first-of-type,
|
|
i:first-of-type {
|
|
background-color: $journal-old-value-bg;
|
|
color: $journal-old-value-color;
|
|
}
|
|
|
|
i:last-of-type {
|
|
background-color: $journal-new-value-bg;
|
|
color: $journal-new-value-color;
|
|
}
|
|
}
|
|
|
|
.private-notes {
|
|
border-left-color: $brand-warning;
|
|
|
|
> div > h4::before {
|
|
border-right-color: $brand-warning;
|
|
}
|
|
}
|
|
|
|
#activity dt,
|
|
.journal {
|
|
clear: left;
|
|
}
|
|
|
|
.journal-link {
|
|
float: right;
|
|
}
|
|
|
|
span.private {
|
|
padding: $tracker-inline-padding;
|
|
border-radius: $border-radius-small;
|
|
background: $brand-warning;
|
|
color: $brand-text;
|
|
font-size: $font-size-small;
|
|
font-weight: $font-weight-bold;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
#issue-changesets {
|
|
margin-bottom: $line-height-computed;
|
|
|
|
@media screen and (min-width: $screen-md-min) {
|
|
width: 45%;
|
|
float: right;
|
|
|
|
+ #history {
|
|
margin-right: 45%;
|
|
padding-right: $padding-side;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: $screen-lg-min) {
|
|
width: 33%;
|
|
|
|
+ #history {
|
|
margin-right: 33%;
|
|
}
|
|
}
|
|
|
|
div.changeset {
|
|
margin-top: $line-height-computed / 2 + 2px * 2;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
border: 1px solid $bubble-border;
|
|
border-radius: $panel-border-radius;
|
|
background-color: $bubble-bg;
|
|
font-size: $font-size-list;
|
|
|
|
&:first-of-type {
|
|
margin-top: 0;
|
|
}
|
|
|
|
> p {
|
|
@include clearfix;
|
|
margin: 0;
|
|
padding: $padding-base-vertical $padding-base-horizontal;
|
|
color: $gray-700;
|
|
|
|
> a:first-child {
|
|
font-family: $font-family-monospace;
|
|
font-weight: $font-weight-bold;
|
|
}
|
|
|
|
.author a {
|
|
color: $gray-900;
|
|
|
|
&.user {
|
|
font-weight: $font-weight-bold;
|
|
}
|
|
}
|
|
|
|
> br {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
> .wiki {
|
|
padding: $padding-base-vertical $padding-base-horizontal;
|
|
border-top: 1px solid $bubble-border;
|
|
background-color: $body-bg;
|
|
}
|
|
}
|
|
}
|