// RedmineX Theme
// Copyright 2020 RedmineX
// For license, see https://www.redmine-x.com
// Created by Michael Staněk
// Created without vendor prefixes, "AutoPrefixed" by PrePros v5 (https://prepros.io)

// Media Queries to Copy / Paste:

// 380px
// @include media-breakpoint-up(xxs) {}

// 480px
// @include media-breakpoint-up(xs) {}

// 576px
// @include media-breakpoint-up(sm) {}

// 768px
// @include media-breakpoint-up(md) {}

// 899px
// @include media-breakpoint-up(redmine-mobile) {}

// 992px
// @include media-breakpoint-up(lg) {}

// 1200px
// @include media-breakpoint-up(xl) {}

// 1500px
// @include media-breakpoint-up(hd) {}

// 1900px
// @include media-breakpoint-up(2k) {}

/* ==========================================================================
   Issue
   ========================================================================== */

/*
 * Priorities, Issue list
 */

td.priority {
	color: $white;
	position: relative;
	z-index: 1;
	max-width: 200px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	
	&:before {
		@include translate;
		@include rounded;
		content: '';
		height: 50%;
		width: 90%;
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: -1;
		opacity: 0.875;
	}
}

/* Default Priority */
tr[class*="priority-"] {

    &>td:first-child {
        position: relative;

        &:before {
            @include translate-vertical;
            @include rounded;
            content: '';
            width: 5px;
            height: 70%;
            position: absolute;
            top: 50%;
            left: 0;
        }
    }

    td.priority {
        color: $text-color;

        :before {
            background: $gray-200;
        }
    }
}

tr.priority-1,
tr.priority-lowest,
tr.lowest {

    td.priority {
        color: $white;
    }

    td.priority:before,
    td:first-child:before {
        background: $brand-success;
    }
}

tr.priority-2,
tr.priority-default,
tr.default {

    td.priority {
        color: $text-color !important;
    }

    td.priority:before,
    td:first-child:before {
        background: $gray-200;
    }
}

tr.priority-3,
tr.priority-high3,
tr.high3 {

    td.priority {
        color: $white;
    }

    td.priority:before,
    td:first-child:before {
        background: $brand-warning;
    }
}

tr.priority-4,
tr.priority-high2,
tr.high2 {

    td.priority {
        color: $white;
    }

    td.priority:before,
    td:first-child:before {
        background: $brand-danger;
    }
}

tr.priority-5,
tr.priority-highest,
tr.highest {

    td.priority {
        color: $white;
    }

    td:first-child:before {
        background: $brand-immediate;
    }

    td.priority:before {
        background-image: linear-gradient(125deg, $brand-danger 27.78%, $brand-immediate 27.78%, $brand-immediate 50%, $brand-danger 50%, $brand-danger 77.78%, $brand-immediate 77.78%, $brand-immediate 100%);
        background-size: 43.95px 62.76px;
    }
}

/* Custom Priorities */
tr.priority-6 {

    td.priority {
        color: $white;
    }

    td.priority:before,
    td:first-child:before {
        background: $priority-6;
    }
}

tr.priority-7 {

    td.priority {
        color: $white;
    }

    td.priority:before,
    td:first-child:before {
        background: $priority-7;
    }
}

tr.priority-8 {

    td.priority {
        color: $white;
    }

    td.priority:before,
    td:first-child:before {
        background: $priority-8;
    }
}

tr.priority-9 {

    td.priority {
        color: $white;
    }

    td.priority:before,
    td:first-child:before {
        background: $priority-9;
    }
}

tr.priority-10 {

    td.priority {
        color: $white;
    }

    td.priority:before,
    td:first-child:before {
        background: $priority-10;
    }
}

tr.priority-11 {

    td.priority {
        color: $white;
    }

    td.priority:before,
    td:first-child:before {
        background: $priority-11;
    }
}

tr.priority-12 {

    td.priority {
        color: $white;
    }

    td.priority:before,
    td:first-child:before {
        background: $priority-12;
    }
}

tr.priority-13 {

    td.priority {
        color: $white;
    }

    td.priority:before,
    td:first-child:before {
        background: $priority-13;
    }
}

/*
 * Priorities, Issue Detail
 */

.issue.details {

    .priority .showValue {
        position: relative;

        &:before {
            @include translate-vertical;
            @include rounded;
            content: '';
            width: 5px;
            height: 70%;
            position: absolute;
            top: 50%;
            left: -10px;
        }
    }

    &.priority-1,
    &.priority-lowest,
    &.lowest {

        .priority .showValue:before {
            background: $brand-success;
        }
    }

    &.priority-2,
    &.priority-default,
    &.default {

        .priority .showValue:before {
            background: $gray-200;
        }
    }

    &.priority-3,
    &.priority-high3,
    &.high3 {

        .priority .showValue:before {
            background: $brand-warning;
        }
    }

    &.priority-4,
    &.priority-high2,
    &.high2 {

        .priority .showValue:before {
            background: $brand-danger;
        }
    }

    &.priority-5,
    &.priority-highest,
    &.highest {

        .priority .showValue:before {
            background: $brand-immediate;
        }
    }

    &.priority-6 {

        .priority .showValue:before {
            background: $priority-6;
        }
    }

    &.priority-7 {

        .priority .showValue:before {
            background: $priority-7;
        }
    }

    &.priority-8 {

        .priority .showValue:before {
            background: $priority-8;
        }
    }

    &.priority-9 {

        .priority .showValue:before {
            background: $priority-9;
        }
    }

    &.priority-10 {

        .priority .showValue:before {
            background: $priority-10;
        }
    }

    &.priority-11 {

        .priority .showValue:before {
            background: $priority-11;
        }
    }

    &.priority-12 {

        .priority .showValue:before {
            background: $priority-12;
        }
    }

    &.priority-13 {

        .priority .showValue:before {
            background: $priority-13;
        }
    }
}

.query-totals {
	margin: 0 !important;
	font-size: $font-size-sm2;
	
	.value {
		font-weight: 600;
	}
	
	&>span {
		margin-right: 0.5rem;
	}
}

.controller-issues.action-new,
.controller-wiki.action-show {

    .new_issue .tabs {
        margin-top: 1rem;

        li {
            list-style: none;
            display: inline-block;
            height: auto !important;
            margin-right: 0.5rem;
        }

        li a {
            color: $text-color;
        }

        li a.selected {
            color: $link-color;
        }

        .tab-elements {
            display: block;
            margin: 0.5rem 0 0 0;
        }

        .jstElements {
            padding: 0;
        }
    }
}

.new_issue {
	
	fieldset:not(#filters):not(#options):not(.collapsible).files {
		max-width: 1183px;
		
		@include media-breakpoint-down(sm) {
			padding-left: 0 !important;
		}
		
		@include media-breakpoint-up(xs) {
			padding-left: 120px !important;
		}
	
		@include media-breakpoint-up(lg) {
			padding-left: 170px !important;
		}
	}
}

a.issue.closed, 
a.issue.closed:link, 
a.issue.closed:visited {
	color: $text-color;
	text-decoration: line-through;
}

/*
 * New Issue + Update Issue
 */

.jstEditor textarea,
.jstBlock iframe,
.cke_contents {

    @include media-breakpoint-down(redmine-mobile) {
        height: 100px !important;
    }
}

#content .jstBlock {

    li:before {
        content: none !important;
    }
}


.controller-issues.action-new,
.edit_issue,
#update,
#issue_template-form {

    #watchers_form_container {
        margin-top: 1rem;
    }

    label[for=issue_project_id],
    label[for=issue_tracker_id],
    label[for=issue_subject],
    label[for=issue_status_id],
    label[for=issue_priority_id] {
        color: $brand-danger;
    }

    #all_attributes,
    #attributes,
    .tabular {

        .icon-add {
            display: block;
            padding: 0.25rem 0;
        }

        #issue_estimated_hours,
        #issue_done_ratio,
        #time_entry_hours,
        #time_begin,
        #time_end {
            max-width: 100px !important;
        }
    }

    #all_attributes {
		
		label[for*="issue_author_id"]+a {
			margin-top: 0.25rem;
			display: inline-block;
		}

        .tabular p>label {
            padding: 7px 0;
        }

        label[for*="issue_description"]+a {
            @include btn;
            @include btn-primary;
        }
    }


    #issue_start_date,
    #issue_due_date {
		width: calc(100% - 85px) !important;
		
		@include media-breakpoint-up(xl) {
			max-width: 255px !important;
		}
    }
	
	#time_begin, 
	#time_end {
		width: 60px !important;
	}

    input,
    select {

        &+.icon-add {
            @include btn;
			color: $link-color;
            width: auto;
            width: 2rem;
            height: auto;
            text-align: center;
            display: inline-block !important;
        }
    }

    #issue_fixed_version_id {
        display: inline-block;
    }
}

/*
 * New Issue
 */

#attachments_form {
    @include rounded;
    padding: 1rem;
    display: block;
    margin-top: -2rem;
}

#new-attachments {
	display: block !important;
	margin-bottom: 2rem;
}

span[id*="attachments_"] {
	
	.ui-progressbar {
		display: inline-block;
		height: $input-height-base;
    	vertical-align: bottom;
		min-width: 182px;
		text-align: center;
		background-size: 30px 30px;
		background-color: trasnparent !important;
	    background-image: linear-gradient(
	        135deg,
	        aliceblue 25%,
	        $white 25%,
	        $white 50%,
	        aliceblue 50%,
	        aliceblue 75%,
	        $white 75%,
	        $white
	    );
		animation: animate-stripes 0.6s linear infinite;
		width: calc(100% - 3rem);
		
		@include media-breakpoint-up(lg) {
			width: calc(50% - 3rem) !important;
		}
	}
}

@keyframes animate-stripes {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 60px 0;
    }
}

.controller-issues {

    .new_issue,
    &.action-new #content>h2,
    #update,
    #content>.edit_issue {
        max-width: 1400px;
        margin-left: auto;
        margin-right: auto;
    }
	
	.new_issue>.box.tabular {
		@include media-breakpoint-up(sm) {
			padding-top: 3rem;
		}
	}
}

/*
 * Update Issue, Edit Issue
 */

#update {
	margin-top: 2rem;
    margin-bottom: 6rem;

    &>h3 {
        font-size: 1.563em;
    }

    .filedroplistner fieldset {
        border: none !important;
    }

    .files>.contextual {

        &>.icon-edit {
            @include btn;
            @include btn-tetriary;
            margin-top: -2rem;
        }
    }
}

.edit_issue {

    fieldset {
        margin-bottom: 1rem;
    }

    fieldset:nth-child(4)>.contextual>a {
        @include btn;
        @include btn-tetriary;
        margin-top: -2rem;
    }

    #issue_is_private_wrap {
        vertical-align: top;

        &>* {
            display: inline-block;
        }

        label {
            width: auto !important;
        }
    }

    #time_entry_comments {
        max-width: 334px;
    }

    &>.box {
        padding: 0;

        @include media-breakpoint-up(redmine-mobile) {
            padding: 1.5rem;
        }
    }

    .filedroplistner fieldset:nth-child(4) {
        padding: 0;
    }
	
	#new-attachments {
		max-width: 1318px;
	}
}


/*
 * Issue Detail
 */

#content>.issue.details {
    @include rounded;
    padding: 1rem;
    width: 100%;
	position: relative;

    @include media-breakpoint-up(md) {
        padding: 1rem 2rem 2rem 2rem;
    }

    .subject+.author {
        display: none;
    }

    .subject {
        margin-bottom: 0;
		width: calc(100% - 60px);
		float: left;

        @include media-breakpoint-up(xl) {
			width: calc(100% - 500px);
        }
		
		p {
			margin-bottom: 0.125rem;
		}
    }
	
	.gravatar-with-child {
		float: left;
	}
	
	.next-prev-links.contextual {
		display: none;
		
		@include media-breakpoint-up(md) {
			display: block;
			font-size: $font-size-xs;
			margin: 0 0 0.5rem 0 !important;
			position: static;
			float: none;
		}
		
		.position a,
		&>a {
			padding: 0 0.25rem;
		}
	}
}

div.issue {

    .attributes .attribute {
        padding-left: 160px;
		clear: both;
		
		@include media-breakpoint-up(xs) {
			padding-left: 180px;
		}

        .label {
            width: 160px;
            margin-left: -160px;
            font-weight: bold;
            float: left;
            overflow: hidden;
            text-overflow: ellipsis;
			
			@include media-breakpoint-up(xs) {
				margin-left: -180px;
			}
        }

        .value {
            overflow: auto;
            text-overflow: ellipsis;
			min-width: 60px;
        }
    }

    &>.attributes>.splitcontent:first-of-type,
    &>.attributes #ticket_data+hr+.splitcontent {
        background: $attributes-bg;
        padding: 1rem 2rem;
        margin-left: -1rem;
        margin-right: -1rem;

        @include media-breakpoint-up(redmine-mobile) {
            padding: 2rem;
            margin-left: -2rem;
            margin-right: -2rem;
        }
		
		.attribute {
			padding-left: 130px;
		}
		
		.label {
			width: 140px;
			margin-left: -140px;
		}
		
		.splitcontentleft {
			padding-left: 10px;
		}
    }
	
	&>.attributes>.splitcontent+.splitcontent {
		margin-top: 1.5rem;
		
		.splitcontentleft,
		.splitcontentleft {
			float: left;
		}
	}
	
	div[class*="cf_"] {
		float: left;
		margin-right: 1rem;
	}
}

.attributes {
    display: block !important;
    width: auto !important;
    clear: both;

    p {
        margin: 0 0 0.25rem 0;
    }

    .value>span {
        display: inline-block;
    }

    .progress .value {

        table.progress {
            float: left;
            margin: 0.25rem 0.5rem 0.25rem 0;
			min-width: 45px;

            @include media-breakpoint-up(xxs) {
                width: 80px;
            }
        }

        .percent {
            display: flex;
            font-size: $font-size-sm2;
        }
    }
}

.controller-issues.action-show {

    img.gravatar {
        float: left;
		background: $white;
    }

    #content {
		
		&>.contextual {
			position: relative;
	        z-index: 99;
	        margin: 2rem 1rem;
	        display: flex;
	        margin-bottom: 0.5rem !important;
			padding: 0.5rem 0;
			
			@include media-breakpoint-up(md) {
				margin-bottom: -1rem !important;
			}
	
	        @include media-breakpoint-up(xl) {
	            margin-top: 2.75rem !important;
	        }
			
			@include media-breakpoint-up(md) {
				padding: 0;
			}
	
	        #issue-action-dropdown-trigger {
	            order: 3;
	        }
	
	        .icon-edit {
	            order: 2;
	        }
	
	        .icon-time-add {
	            order: 1;
	        }
	
	        .menu-children a {
	            text-align: right;
	        }
		}
		
		&>h2 {
			display: none;
			
			@include media-breakpoint-up(md) {
				display: inline-flex;
			}
		}
		
		&>.badge {
			display: none;
			
			@include media-breakpoint-up(md) {
				display: inline-block;
			}
		}
		
		&>h2 {
			font-size: $font-size-xs;
			margin-bottom: 0.25rem;
			padding: 0.25rem 0 0.25rem 0.5rem;
			z-index: 100;
		}
    }
	
	.other-attachments {
		display: none;
		
		&.open {
			display: table-row-group;
		}
	}
	
	.attachments-btn-box {
		column-span: all;
		text-align: center !important;
	}
	
	.attachments-btn {
		color: $link-color;
		background: none;
		border: none;
		
		&:after {
			@extend %fa-icon;
			@extend .fal;
			content: fa-content($fa-var-long-arrow-right);
			margin-left: 0.5rem;
		
		}
	}

    #hide-sidebar {
        z-index: 99;
    }

    #history {
        margin-top: 2rem;

        .tabs {
            margin-top: 0;
        }

        .tabs ul {
            border: none;
        }
    }

    .description {

        .contextual {
            float: right !important;
        }

        .contextual a {
            @include btn;
            @include btn-tetriary;
        }
	}
}

#issue-changesets {
	float: right;
}

.description,
#issue_tree,
#relations,
.issue,
#invoices,
.files {

    &>p>strong {
        color: $headings-color !important;
    }
}

/*
 * Attachments
 */


.controller-attachments .attachments-btn {
	display: none !important;
}

#existing-attachments {
	border: 1px solid $border-color-light;
	padding: 1rem 1rem 0 1rem;
	margin: 1rem 0;
	
	&>span {
		display: block;
	}
}

.existing-attachment input:not([type="checkbox"]):not([type="radio"]) {
	width: 200px;
	
	@include media-breakpoint-up(sm) {
		min-width: 334px;
	}
} 

.attachments {

    .icon-attachment:not(dt) {
        display: block;
        max-width: 90%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    table {

        td {
            white-space: nowrap;
        }

        td:nth-child(1):not(.attachments-btn-box) {
            display: flex;
            justify-content: flex-start;
            flex-wrap: nowrap;
			max-width: 1650px;
        }

        td:nth-child(1)>* {
            flex: 0 0 auto;
            margin-right: 0.5rem;
        }

        td:nth-child(2) {
            max-width: 380px;
        }
		
		tbody:last-child tr:hover {
			background: none !important;
		}
    }

    .contextual {
        margin-top: -2rem !important;
        margin-bottom: 0.5rem !important;
        float: right !important;
    }

    .icon-only.icon-edit {
        @include btn;
        @include btn-tetriary;
    }

    .thumbnails {
        margin-top: 1rem;

        &>div {
            display: inline-block;
            vertical-align: top;
        }

        img {
            @include rounded;
            border: 1px solid $border-color-light;
            max-width: 64px;
        }
    }

    span.author {
        display: none;

        @include media-breakpoint-up(redmine-mobile) {
            display: inline;
        }
    }
}

.thumbnails a {
    display: block;
}

.search_for_watchers {
    display: block;
    padding: 1px 0 1px 4px;
}

#watchers_inputs {
	display: block;
	margin-bottom: 0.5rem;
}

/*
 * Journal
 */

.journal-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: nowrap;

    a {
        border-radius: $border-radius;
        padding: 0.5rem 0.75rem;
        text-align: center;

        &:last-child {
            border-right: none;
        }

        &.icon-only {
            font-size: 0;

            &:before {
                font-size: $fa-font-size-base;
                margin: 0;
            }
        }
    }
}


#tab-content-time_entries {

    .contextual {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: nowrap;

        a {
            padding: 0.5rem;
            text-align: center;
            flex: 0 0 auto;
        }
    }
}

.journal {
    margin-bottom: 1rem;
    display: flow-root;

    * {
        word-break: break-word;
    }

    .contextual {
        display: flex;
        position: absolute;
        top: 0.5rem;
        right: 1rem;
        width: 100%;
    }

    [id^="note-"] {
        @include rounded;
        padding: 1rem;
        position: relative;
        font-size: $font-size-sm2;
    }

    [id*="_private_notes"] {
        margin-bottom: 1rem;
    }
	
	&.private-notes .wiki {
		border-left-color: $brand-danger;
		border-left-width: 2px;
	}

    .wiki {
        @include rounded;
        padding: 2rem;
        background: $white;
        font-size: $font-size-lg;
        color: $text-color;
        margin-left: 3rem;
		@include box-shadow-container;
		border: 1px solid lighten($border-color-light, 5%);
		
		&:hover {
			@include media-breakpoint-up(redmine-mobile) {
				@include box-shadow-container-hover;
			}
		}
    }

    h4 {
        padding: 0;
        width: calc(100% - 110px);
        font-size: $font-size-sm1;
    }

    h4, .details {
        color: lighten($text-color, 10%) !important;
    }

    .gravatar {
        margin-right: 8px;
        vertical-align: middle;
        width: 32px;
        height: 32px;
        float: left;
        top: -6px;
        margin-bottom: 6rem;

        @include media-breakpoint-up(xxs) {
            margin-bottom: 4rem;
        }

        @include media-breakpoint-up(xs) {
            margin-bottom: 2rem;
        }
    }
	
	.note-header .gravatar {
		margin-bottom: 0;
	}
	
	.lined-text .gravatar {
		margin-left: -24px !important;
		margin-right: 8px !important;
	}
	
	.note-header+ul.details {
		clear: both;
	}

    &>p {
        padding-left: 65px;
    }

    &.time_entry {
        padding: 1rem 1rem 2.5rem 1rem;
        position: relative;
    }

    .thumbnails {
        display: flex;
		padding-left: 3rem;
		clear: both;
    }

    .thumbnails img {
        width: 64px;
        margin: 0 0.5rem 0.5rem 0;
    }

    ul.details {
        margin-bottom: 0.5rem;
        margin-top: -0.25rem;
        padding-left: 65px !important;
		
		.icon-only {
			font-size: 0;
			color: transparent;
			
			&:before {
				font-size: $font-size-sm2;
				color: $text-color;
			}
			
			&:hover:before {
				color: $link-color;
			}
		}
		
		.icon-magnifier {
			margin-left: 0.5rem;
		}
		
		.icon-download {
			color: $link-color;
		}
    }
}


/*
 * Subtask & Related Tasks
 */

#issue_tree,
#relations,
#invoices {

    .buttons {

        a {
            display: inline;

            &:before {
                padding: 0.5rem;
            }
        }
    }

    .buttons,
    .done_ratio {
        min-width: 50px;
    }

    .contextual {
        margin-top: -0.5rem !important;
        float: right !important;
    }

    &>.contextual>a {
        @include btn;
        @include btn-tetriary;
    }

    .autoscroll>table>tbody>tr>td {
        white-space: nowrap;
        padding: 0.5rem !important;
    }

    .issue > td:not(.checkbox),
    .issue > td:not(.checkbox) {
        display: table-cell !important;
        float: none !important;
    }

    .issues {
        border-collapse: collapse !important;
    }

    .issue > td:not(.subject),
    .issue > td:not(.subject) {
        width: auto !important;
    }

    .issue > td.buttons,
    .issue > td.buttons {
        position: static !important;
    }

}

#relations,
#issue_tree,
#checklist {
    margin-top: 2rem;
}

.new_relation {

    input[type="submit"],
    input[type="submit"]+a {
        margin-top: 0.5rem;
    }
}

.issue-report-graph {
    @include rounded;
    background: $white;
    border: 1px solid $border-color-light;
    padding: 2rem;
    margin-top: 1rem;
}

/*
 * Sidebar
 */

.watchers {

    .delete.icon-only {
        font-size: 0;
        margin-left: 0.25rem;

        &:before {
            font-size: $fa-font-size-base;
        }
    }

    .gravatar {
        position: relative;
        top: 2px;
        margin-right: 0.25rem;
    }
}
