.issueDetails > .content { display: flex; padding: 0 30px 60px; } /*===================================================*/ /* LEFT */ /*===================================================*/ .issueDetails > .content > .left { width: 65%; padding-right: 50px; } .issueDetails > .content > .left > .styledTextArea { margin: 18px 0 0 -8px; height: 44px; width: 100%; } .issueDetails > .content > .left > .styledTextArea > textarea { padding: 7px 7px 8px; line-height: 1.28; resize: none; transition: background 0.1s; font-size: 24px; font-family: var(--font-medium); font-weight: normal; } .issueDetails > .content > .left > .styledTextArea > textarea:not(:focus) { background: #fff; border: 1px solid transparent; box-shadow: 0 0 0 1px transparent; } .issueDetails > .content > .left > .styledTextArea > textarea:hover:not(:focus) { background: var(--backgroundLight); } .issueDetails > .content > .left > .comments { padding-top: 40px; } .issueDetails > .content > .left > .comments > .title { font-family: var(--font-medium); font-weight: normal; font-size: 15px } .issueDetails > .content > .left > .comments > .create { position: relative; margin-top: 25px; font-size: 15px } .issueDetails > .content > .left > .comments > .create > .userAvatar { position: absolute; top: 0; left: 0; } .issueDetails > .content > .left > .comments > .create > .right { padding-left: 44px; } .issueDetails > .content > .left > .comments > .create > .right > .fakeTextArea { padding: 12px 16px; border-radius: 4px; border: 1px solid var(--borderLightest); color: var(--textLight); cursor: pointer; user-select: none; } .issueDetails > .content > .left > .comments > .create > .right > .fakeTextArea:hover { border: 1px solid var(--borderLight); } .issueDetails > .content > .left > .comments > .create > .right > .proTip { display: flex; align-items: center; padding-top: 8px; color: var(--textMedium); font-size: 13px; } .issueDetails > .content > .left > .comments > .create > .right > .proTip > .strong { padding-right: 4px; } .issueDetails > .content > .left > .comments > .create > .right > .proTip > .tipLetter { position: relative; top: 1px; display: inline-block; margin: 0 4px; padding: 0 4px; border-radius: 2px; color: var(--textDarkest); background: var(--backgroundMedium); font-family: var(--font-bold); font-weight: normal; font-size: 12px } .issueDetails > .content > .left > .comments > .create > .right > .actions { display: flex; padding-top: 10px; } .issueDetails > .content > .left > .comments > .create > .right > .actions > .styledButton { margin-right: 6px; } /*===================================================*/ /* RIGHT */ /*===================================================*/ .issueDetails > .content > .right { width: 35%; padding-top: 5px; } .issueDetails > .content > .right > .styledField > .trackingLink { padding: 4px 4px 2px 0; border-radius: 4px; transition: background 0.1s; cursor: pointer; user-select: none; } .issueDetails > .content > .right > .styledField > .trackingLink:hover { background: var(--backgroundLight); } .issueDetails > .content > .right > .styledField > .trackingLink > .trackingWidget { display: flex; justify-content: space-between; align-items: center; } .issueDetails > .content > .right > .styledField > .trackingLink > .trackingWidget > .watchIcon { color: var(--textMedium); } .issueDetails > .content > .right > .styledField > .trackingLink > .trackingWidget > .right { width: 90%; } .issueDetails > .content > .right > .styledField > .trackingLink > .trackingWidget > .right > .barCounter { height: 5px; border-radius: 4px; background: var(--backgroundMedium); } .issueDetails > .content > .right > .styledField > .trackingLink > .trackingWidget > .right > .barCounter > .bar { height: 5px; border-radius: 4px; background: var(--primary); transition: all 0.1s; } /*===================================================*/ /* TOP ACTIONS */ /*===================================================*/ .issueDetails > .topActions { display: flex; justify-content: space-between; padding: 21px 18px 0; } .issueDetails > .topActions > .topActionsRight { display: flex; align-items: center; } .issueDetails > .topActions > .topActionsRight > * { margin-left: 4px; } .issueDetails > .topActions .styledSelect > .valueContainer > .value { text-transform: uppercase; letter-spacing: 0.5px; color: var(--textMedium); font-size: 13px } .issueDetails > .sectionTitle { margin: 24px 0 5px; text-transform: uppercase; color: var(--textMedium); font-size: 12.5px; font-family: "CircularStdBold", serif; font-weight: normal }