@import url('./asker-editor.css');
@import url('./asker-list.css');

body
{
	max-width:1200px;
	margin: auto;
}

.row div
{
	display:inline-block;
	margin-left: 8px;
}

.row img
{
	width:24px;
	margin-bottom: -6px; 
}

#action_buttons img
{
	width: 32px;
	cursor: pointer;
	border-radius: 5px;
}

#action_buttons
{
	padding: 6px;
}

.ask_new
{
	color: Gray;	
}

.song_filter
{
	margin: 2px 0px;
	padding:8px;
	background-color: #700;
	color:White;
	display:inline-block;
	cursor: pointer;
	opacity:0.5;
	font-size: larger;
	min-width: 24px;
	text-align:center;
}

.song_filter[checked]{
    opacity:0.7;
}

.song_filter:hover {
    opacity:1;
}

/*  Create and edit panels with buttons    */

#btnCreateItem,#btnCreateBoard
{
	background-color: blue;
}

#btnChangelog
{
	background-color: rgb(113, 16, 151);
}

#btnEditBoard
{
	background-color: #578319;
}

#btnProjects
{
	background-color: rgba(180, 134, 36, 0.795);
}

/* ------------------------------------ */

.header_button
{
	cursor: pointer;
    color: Black;
    display: inline-block;
	height: 42px;
	margin: 2px;
	padding: 0px 4px 0px 4px;
}

.header_button:hover {
	color: Black;
}

.header_button:active {
	color: white;
	background-color: black;
}

.header_button img
{
	width: 32px;
	height: 32px;
}

.header_button > *
{
	vertical-align: middle;
}

#projects > *
{
	vertical-align: middle;
}

#description>label,#description>img
{
	vertical-align: middle;
}

#description .version
{
	background-color: #cccccc;
	border:1px solid #000000;
	margin: 4px;
	padding-left: 2px;
	padding-right: 2px;
	cursor: pointer;
}

#description .reproduced
{
	background-color: rgb(255, 166, 166);
}

#description .meta
{
	background-color: #eeeeee;
	border:1px solid #000000;
	margin: 4px;
	padding-left: 4px;
	padding-right: 4px;	
}

#description .icon
{
	width: 24px;
	padding: 2px 2px;
}

#description
{
	margin: 2px;
}

#description #title{
	cursor: pointer;
}

.context_menu img
{
	width:32px;
	vertical-align: middle;
}

.context_menu label
{
	cursor: pointer;
}

.context_menu div:hover{
	background-color: gray !important;
}


#status
{
	background-color: var(--element-color, initial);
}


.task_content
{
	position: relative;
}

.task_content label
{
	vertical-align: middle;
	position: relative;
	top: -2px;
}

.task_content img
{
	vertical-align: middle;
	cursor: pointer;
}

.task_content .checkable_img
{
	opacity: 0.15;
}

.task_content img:hover
{
	background-color: gray;
}

.task_content #delete
{ 
	top: 0px; 
	visibility: hidden; 
}

.mobile .task_content #delete
{
	visibility: visible !important;
}

.task_content:hover
{
	background-color: #00000022;
}
.task_content:hover #delete
{
	visibility: visible;
}

#tasks-list, #changelog-list { display: flex; }

.task_item.selected
{
	background-color: rgb(88, 134, 138) !important;
}

.task_item.active{
	background-color: darkgray !important;
}

.board-item-editor
{
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	padding: 0px 8px;
	cursor: pointer;
	position: relative;
}

.board-item-editor:hover
{
	background-color: #cccccc;
}

.board-item-editor div:nth-child(2)
{
	font-size: smaller;
}

#board_fields button, #board_views button, #board_tags button {
	vertical-align: middle;
}

.board-item-editor-x {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 16px;
	height: 16px;
	line-height: 16px;
	display: flex;
	align-items: top;
	justify-content: center;
	border-radius: 25%;
	font-size: 20px;
	cursor: pointer;
	opacity: 0;
	text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, 1px 1px 0 #ffffff;
}

.board-item-editor:hover .board-item-editor-x {
	opacity: 0.5;
	color: #6b6b6b;
}

.board-item-editor .board-item-editor-x:hover
{
	opacity: 1;
	color: #000000;
}

#action_buttons img{
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.task_content
{
	cursor : pointer;
}

.context-menu
{
	max-height: 400px;
	overflow-y: auto;
}

.context-menu>div:hover
{
	background-color: rgb(119, 119, 119) !important;
	transition: background-color ease-in-out 0.15s
}

.loading-indicator {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.posting, .posting:hover{
	background-color: lightblue;
}

.posting
{
  --s: 56px; /* control the size */
  --g: 10px; /* control the gap */
  --c: #fff2c5; /* first color */
  
  --_l: #0000 calc(33% - .866*var(--g)),var(--c) calc(33.2% - .866*var(--g)) 33%,#0000 34%;
  background:
    repeating-linear-gradient(var(--c) 0 var(--g), #0000 0 50%)
     0 calc(.866*var(--s) - var(--g)/2),
    conic-gradient(from -150deg at var(--g) 50%,var(--c) 120deg,#0000 0),
    linear-gradient(-120deg,var(--_l)),linear-gradient( -60deg,var(--_l))
    #cbecff; /* second color */
  background-size: var(--s) calc(3.466*var(--s));
  animation: p infinite 2s linear;
}
@keyframes p {
  to {
    background-position-x: calc(-1*var(--s));
  }
}

.item-editor img[src$='.svg'] {
	width: 24px;
}

.editable-field
{
	height: 24px;
	display: inline-block;
	min-width: 256px;
	border:1px solid rgb(161, 161, 161);
}

.unsaved
{
	background-color: orange !important;
}

.hidden
{
	display: none;
}