forgejo/web_src/less/_base.less
mrsdizzie 88823f3e29
Fix line selection on blame view ()
Blame and regular code view have diverge slightly so line highlighting wasn't working properly anymore. Make work again in lieu of a larger refactor of blame HTML to move it outside of source and into templates to match code view.

Fixes 

Co-authored-by: techknowlogick <techknowlogick@gitea.io>
2020-09-15 16:43:05 -04:00

1270 lines
21 KiB
Text

@font-face {
font-family: 'Yu Gothic';
src: local('Yu Gothic Medium');
font-weight: 400;
}
@font-face {
font-family: 'Yu Gothic';
src: local('Yu Gothic Bold');
font-weight: 700;
}
@font-face {
font-family: 'Noto Color Emoji';
src:
local('Noto Color Emoji'),
local('Noto-Color-Emoji'),
url('../fonts/noto-color-emoji/NotoColorEmoji.ttf') format('truetype');
}
@default-fonts: -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla";
@monospaced-fonts: 'SF Mono', Consolas, Menlo, 'Liberation Mono', Monaco, 'Lucida Console';
.override-fonts(@fonts) {
textarea {
font-family: @fonts;
}
.markdown:not(code) {
font-family: @fonts;
}
/* We're going to just override the semantic fonts here */
h1,
h2,
h3,
h4,
h5 {
font-family: @fonts;
}
.ui.accordion .title:not(.ui),
.ui.button,
.ui.card > .content > .header.ui.card > .content > .header,
.ui.category.search > .results .category > .name,
.ui.form input:not([type]),
.ui.form input[type="date"],
.ui.form input[type="datetime-local"],
.ui.form input[type="email"],
.ui.form input[type="file"],
.ui.form input[type="number"],
.ui.form input[type="password"],
.ui.form input[type="search"],
.ui.form input[type="tel"],
.ui.form input[type="text"],
.ui.form input[type="time"],
.ui.form input[type="url"],
.ui.header,
.ui.items > .item > .content > .header,
.ui.list .list > .item .header,
.ui.list > .item .header,
.ui.menu,
.ui.message .header,
.ui.modal > .header,
.ui.popup > .header,
.ui.search > .results .result .title,
.ui.search > .results > .message .header,
body,
.ui.input > input,
.ui.input input,
.ui.statistics .statistic > .value,
.ui.statistic > .value,
.ui.statistics .statistic > .label,
.ui.statistic > .label,
.ui.steps .step .title,
.ui.text.container,
.ui.language > .menu > .item& {
font-family: @fonts;
}
}
.override-fonts(@default-fonts, sans-serif;);
body {
background-color: #ffffff;
overflow-y: auto;
display: flex;
flex-direction: column;
}
@ja-fonts: 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Source Han Sans JP', 'Noto Sans CJK JP', 'Droid Sans Japanese', 'Meiryo', 'MS PGothic';
:lang(ja) {
.override-fonts(@default-fonts, @ja-fonts, sans-serif;);
}
@zh-CN-fonts: 'PingFang SC', 'Hiragino Sans GB', 'Source Han Sans CN', 'Source Han Sans SC', 'Noto Sans CJK SC', 'Microsoft YaHei', 'Heiti SC', SimHei;
:lang(zh-CN) {
.override-fonts(@default-fonts, @zh-CN-fonts, sans-serif;);
}
@zh-TW-fonts: 'PingFang TC', 'Hiragino Sans TC', 'Source Han Sans TW', 'Source Han Sans TC', 'Noto Sans CJK TC', 'Microsoft JhengHei', 'Heiti TC', PMingLiU;
:lang(zh-TW) {
.override-fonts(@default-fonts, @zh-TW-fonts, sans-serif;);
}
@zh-HK-fonts: 'PingFang HK', 'Hiragino Sans TC', 'Source Han Sans HK', 'Source Han Sans TC', 'Noto Sans CJK TC', 'Microsoft JhengHei', 'Heiti TC', PMingLiU_HKSCS, PMingLiU;
:lang(zh-HK) {
.override-fonts(@default-fonts, @zh-HK-fonts, sans-serif;);
}
@ko-fonts: 'Apple SD Gothic Neo', 'NanumBarunGothic', 'Malgun Gothic', 'Gulim', 'Dotum', 'Nanum Gothic', 'Source Han Sans KR', 'Noto Sans CJK KR';
:lang(ko) {
.override-fonts(@default-fonts, @ko-fonts, sans-serif;);
}
img {
border-radius: 3px;
}
table {
border-collapse: collapse;
}
a {
cursor: pointer;
}
.rounded {
border-radius: .28571429rem !important;
}
.wrap {
word-wrap: break-word;
word-break: break-all;
}
pre,
code,
.mono {
font: 12px @monospaced-fonts, monospace;
&.raw {
padding: 7px 12px;
margin: 10px 0;
background-color: #f8f8f8;
border: 1px solid #dddddd;
border-radius: 3px;
font-size: 13px;
line-height: 1.5;
overflow: auto;
}
&.wrap {
white-space: pre-wrap;
word-break: break-all;
overflow-wrap: break-word;
word-wrap: break-word;
}
}
.dont-break-out {
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-all;
hyphens: auto;
}
.full.height {
flex-grow: 1;
padding-bottom: 80px;
}
.following.bar {
z-index: 900;
left: 0;
margin: 0 !important;
&.light {
background-color: white;
border-bottom: 1px solid #dddddd;
box-shadow: 0 2px 3px rgba(0, 0, 0, .04);
}
.column .menu {
margin-top: 0;
}
.top.menu a.item.brand {
padding-left: 0;
}
.brand .ui.mini.image {
width: 30px;
}
.top.menu a.item:hover,
.top.menu .dropdown.item:hover,
.top.menu .dropdown.item.active {
background-color: transparent;
}
.top.menu a.item:hover {
color: rgba(0, 0, 0, .45);
}
.top.menu .menu {
z-index: 900;
}
.fitted .svg {
margin-right: 0;
}
.svg {
margin-right: .75em;
}
.searchbox {
background-color: #f4f4f4 !important;
&:focus {
background-color: #e9e9e9 !important;
}
}
.text .svg {
width: 16px;
text-align: center;
}
#navbar {
width: 100vw;
min-height: 52px;
padding: 0 .5rem;
}
#navbar .brand {
margin: 0;
}
@media only screen and (max-width: 767px) {
#navbar:not(.shown) > *:not(:first-child) {
display: none;
}
}
}
.right.stackable.menu {
// responsive fix: this makes sure that the right menu when the page
// is on mobile view will have elements stacked on top of each other.
// no, stackable won't work on right menus.
margin-left: auto;
display: flex;
align-items: inherit;
flex-direction: inherit;
}
.ui {
&.left:not(.action) {
float: left;
}
&.right:not(.action) {
float: right;
}
&.button,
&.menu .item {
user-select: auto;
}
&.container {
&.fluid {
&.padded {
padding: 0 10px;
}
}
}
&.form {
.ui.button {
font-weight: normal;
}
}
&.floating.label {
z-index: 10;
}
&.transparent.label {
background-color: transparent;
}
&.nopadding {
padding: 0;
}
&.menu,
&.vertical.menu,
&.segment {
box-shadow: none;
}
/* Overide semantic selector '.ui.menu:not(.vertical) .item > .button' */
/* This fixes the commit graph button on the commits page */
.menu:not(.vertical) .item > .button.compact {
padding: .58928571em 1.125em;
}
.menu:not(.vertical) .item > .button.small {
font-size: .92857143rem;
}
&.menu .ui.dropdown.item .menu .item {
width: 100%;
}
&.dropdown .menu > .item > .floating.label {
z-index: 11;
}
&.dropdown .menu .menu > .item > .floating.label {
z-index: 21;
}
&.dropdown .menu > .header {
font-size: .8em;
}
.text {
&.red {
color: #d95c5c !important;
a {
color: #d95c5c !important;
&:hover {
color: #e67777 !important;
}
}
}
&.blue {
color: #428bca !important;
a {
color: #1155cc !important;
&:hover {
color: #428bca !important;
}
}
}
&.black {
color: #444444;
&:hover {
color: #000000;
}
}
&.grey {
color: #767676 !important;
a {
color: #444444 !important;
&:hover {
color: #000000 !important;
}
}
}
&.light.grey {
color: #888888 !important;
}
&.green {
color: #6cc644 !important;
}
&.purple {
color: #6e5494 !important;
}
&.yellow {
color: #fbbd08 !important;
}
&.orange {
color: #f2711c !important;
}
&.gold {
color: #a1882b !important;
}
&.left {
text-align: left !important;
}
&.right {
text-align: right !important;
}
&.small {
font-size: .75em;
}
&.normal {
font-weight: normal;
}
&.bold {
font-weight: bold;
}
&.italic {
font-style: italic;
}
&.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
}
&.thin {
font-weight: normal;
}
&.middle {
vertical-align: middle;
}
&.nopadding {
padding: 0;
}
&.nomargin {
margin: 0;
}
}
.message {
text-align: center;
}
.message > ul {
margin-left: auto;
margin-right: auto;
display: table;
text-align: left;
}
&.bottom.attached.message {
font-weight: bold;
text-align: left;
color: black;
.pull-right {
color: black;
}
& > span,
.pull-right > span {
color: #21ba45;
}
}
.header > i + .content {
padding-left: .75rem;
vertical-align: middle;
}
.warning {
&.header {
background-color: #f9edbe !important;
border-color: #efc16b;
}
&.segment {
border-color: #efc16b;
}
}
.info {
&.segment {
border: 1px solid #c5d5dd;
&.top {
background-color: #e6f1f6 !important;
h3,
h4 {
margin-top: 0;
}
h3:last-child {
margin-top: 4px;
}
> :last-child {
margin-bottom: 0;
}
}
}
}
.normal.header {
font-weight: normal;
}
.avatar.image,
.avatar.image img,
.avatar.image svg,
.avatar.images .image,
.avatar.images img,
.avatar.images svg {
border-radius: 3px;
}
.form {
.fake {
display: none !important;
}
.sub.field {
margin-left: 25px;
}
}
.sha.label {
font-family: @monospaced-fonts, monospace;
font-size: 13px;
padding: 6px 10px 4px;
font-weight: normal;
margin: 0 6px;
}
.button.truncate {
display: inline-block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: top;
white-space: nowrap;
margin-right: 6px;
}
&.status.buttons {
.svg {
margin-right: 4px;
}
}
&.inline.delete-button {
padding: 8px 15px;
font-weight: normal;
}
.background {
&.red {
background-color: #d95c5c !important;
}
&.blue {
background-color: #428bca !important;
}
&.black {
background-color: #444444;
}
&.grey {
background-color: #767676 !important;
}
&.light.grey {
background-color: #888888 !important;
}
&.green {
background-color: #6cc644 !important;
}
&.purple {
background-color: #6e5494 !important;
}
&.yellow {
background-color: #fbbf09 !important;
}
&.orange {
background-color: #f2711c !important;
}
&.gold {
background-color: #a1882b !important;
}
}
.migrate {
color: #888888 !important;
opacity: .5;
a {
color: #444444 !important;
&:hover {
color: #000000 !important;
}
}
}
.border {
border: 1px solid;
&.red {
border-color: #d95c5c !important;
}
&.blue {
border-color: #428bca !important;
}
&.black {
border-color: #444444;
}
&.grey {
border-color: #767676 !important;
}
&.light.grey {
border-color: #888888 !important;
}
&.green {
border-color: #6cc644 !important;
}
&.purple {
border-color: #6e5494 !important;
}
&.yellow {
border-color: #fbbd08 !important;
}
&.orange {
border-color: #f2711c !important;
}
&.gold {
border-color: #a1882b !important;
}
}
.branch-tag-choice {
line-height: 20px;
}
&.pagination.menu {
@media only screen and (max-width: 767px) {
.item:not(.active):not(.navigation),
.item.navigation span.navigation_label {
display: none;
}
}
&.narrow .item {
padding-left: 8px;
padding-right: 8px;
min-width: 1em;
text-align: center;
.icon {
margin-right: 0;
}
}
}
}
.file-comment {
font: 12px @monospaced-fonts, monospace;
color: rgba(0, 0, 0, .87);
}
.ui.floating.dropdown {
.overflow.menu {
.scrolling.menu.items {
border-radius: 0 !important;
box-shadow: none !important;
border-bottom: 1px solid rgba(34, 36, 38, .15);
}
}
}
.user-menu > .item {
width: 100%;
border-radius: 0 !important;
}
.scrolling.menu {
.item.selected {
font-weight: 700 !important;
}
}
footer {
background-color: white;
border-top: 1px solid #d6d6d6;
width: 100%;
flex-basis: 40px;
color: #888888;
.container {
width: 100vw !important;
padding: 0 .5rem;
max-width: calc(100vw - 1rem) !important;
.fa {
width: 16px;
text-align: center;
color: #428bca;
}
.links > * {
border-left: 1px solid #d6d6d6;
padding-left: 8px;
margin-left: 5px;
&:first-child {
border-left: 0;
}
}
}
.ui.language .menu {
max-height: 500px;
overflow-y: auto;
margin-bottom: 7px;
}
.ui {
&.left,
&.right {
line-height: 40px;
}
}
}
.hide {
display: none;
&.show-outdated {
display: none !important;
}
&.hide-outdated {
display: none !important;
}
}
.center {
text-align: center;
}
.generate-img(16);
.generate-img(@n, @i: 1) when (@i =< @n) {
.img-@{i} {
width: (2px * @i) !important;
height: (2px * @i) !important;
}
.generate-img(@n, (@i + 1));
}
// Conditional display
@media only screen and (min-width: 768px) {
.mobile-only,
.ui.button.mobile-only {
display: none;
}
// has the same behaviour of sr-only, hiding the content for
// non-screenreaders, but is shown on mobile devices.
.sr-mobile-only {
.sr-only();
}
}
@media only screen and (max-width: 767px) {
.not-mobile {
display: none;
}
}
// Accessibility
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
position: static;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip: auto;
}
@media only screen and (max-width: 991px) and (min-width: 768px) {
.ui.container {
width: 95%;
}
}
.ui.menu.new-menu {
justify-content: center !important;
padding-top: 15px !important;
margin-top: -15px !important;
margin-bottom: 15px !important;
background: #fafafa;
border-width: 1px !important;
}
@media only screen and (max-width: 1200px) {
.ui.menu.new-menu {
overflow-x: auto !important;
justify-content: left !important;
padding-bottom: 2px;
}
.ui.menu.new-menu::-webkit-scrollbar {
height: 8px;
display: none;
}
.ui.menu.new-menu:hover::-webkit-scrollbar {
display: block;
}
.ui.menu.new-menu::-webkit-scrollbar-track {
background: rgba(0, 0, 0, .01);
}
.ui.menu.new-menu::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, .2);
}
.ui.menu.new-menu:after {
position: absolute;
margin-top: -15px;
display: block;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 100%);
content: ' ';
right: 0;
height: 53px;
z-index: 1000;
width: 60px;
clear: none;
visibility: visible;
}
.ui.menu.new-menu a.item:last-child {
padding-right: 30px !important;
}
}
[v-cloak] {
display: none !important;
}
.repos-search {
padding-bottom: 0 !important;
}
.repos-filter {
margin-top: 0 !important;
border-bottom-width: 0 !important;
margin-bottom: 2px !important;
}
#user-heatmap {
width: 107%; // Fixes newest contributions not showing
text-align: center;
svg:not(:root) {
overflow: inherit;
padding: 0 !important;
}
@media only screen and (max-width: 1200px) {
& {
display: none;
}
}
.total-contributions {
text-align: left;
font-weight: 500;
margin-top: 0;
}
}
.heatmap-color-0 {
background-color: #f4f4f4;
}
.heatmap-color-1 {
background-color: #d8efbf;
}
.heatmap-color-2 {
background-color: #9fdb81;
}
.heatmap-color-3 {
background-color: #66c74b;
}
.heatmap-color-4 {
background-color: #609926;
}
.heatmap-color-5 {
background-color: #025900;
}
.activity-bar-graph {
background-color: #6cc644;
color: #000000;
}
.activity-bar-graph-alt {
color: #000000;
}
.archived-icon {
color: lighten(#000000, 70%) !important;
}
.oauth2-authorize-application-box {
margin-top: 3em !important;
}
/* multiple radio or checkboxes as inline element */
.inline-grouped-list {
display: inline-block;
vertical-align: top;
> .ui {
display: block;
margin-top: 5px;
margin-bottom: 10px;
&:first-child {
margin-top: 1px;
}
}
}
i.icons .icon:first-child {
margin-right: 0;
}
i.icon.centerlock {
top: 1em;
}
.ui.label {
padding: .3em .5em;
}
.ui.label > .detail .icons {
margin-right: .25em;
}
.ui.label > .detail .icons .icon {
margin-right: 0;
}
.lines-num {
padding-left: 10px;
padding-right: 10px;
text-align: right !important;
color: rgba(27, 31, 35, .3);
width: 1%;
user-select: none;
span {
&.bottom-line {
&:after {
border-bottom: 1px solid #eaecef;
}
}
&:after {
content: attr(data-line-number);
line-height: 20px !important;
padding: 0 10px;
cursor: pointer;
display: block;
}
}
}
.lines-type-marker {
vertical-align: top;
}
.lines-num,
.lines-code {
padding-top: 0;
padding-bottom: 0;
vertical-align: top;
pre,
ol {
background-color: inherit;
margin: 0;
padding: 0 !important;
li {
display: block;
width: calc(100% - 1ch);
padding-left: 1ch;
}
}
}
.lines-code code {
white-space: pre;
}
.blame .lines-num {
padding: 0 !important;
background-color: #f5f5f5;
}
.blame .lines-code {
padding: 0 !important;
}
.lines-commit {
vertical-align: top;
color: #999999;
padding: 0 !important;
background: #f5f5f5;
width: 1%;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
.blame-info {
width: 350px;
max-width: 350px;
display: block;
user-select: none;
padding: 0 0 0 10px;
.blame-data {
display: flex;
font-family: @default-fonts, sans-serif;
.blame-message {
flex-grow: 2;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
line-height: 20px;
}
.blame-time,
.blame-avatar {
flex-shrink: 0;
}
}
}
.ui.avatar.image {
height: 18px;
width: 18px;
}
}
.lines-code,
.lines-commit {
.bottom-line {
border-bottom: 1px solid #eaecef;
}
}
.code-view {
overflow: auto;
overflow-x: auto;
overflow-y: hidden;
&.has-context-menu {
overflow: visible;
overflow-x: visible;
overflow-y: visible;
}
*:not(.fa):not(.svg):not(.icon) {
font-size: 12px;
font-family: @monospaced-fonts, monospace;
line-height: 20px;
}
table {
width: 100%;
}
.active {
background: #fffbdd !important;
}
}
.octicon-tiny {
font-size: .85714286rem;
}
.ui.basic.blue.button,
.ui.basic.blue.buttons .button {
box-shadow: inset 0 0 0 1px #1678c2 !important;
color: #1678c2 !important;
}
.ui.label > img {
width: auto !important;
vertical-align: middle;
height: 2.1666em !important;
}
.svg {
span.green & {
color: #21ba45;
}
span.red & {
color: #db2828;
}
span.purple & {
color: #a333c8;
}
}
.ui.popup .ui.label {
margin-bottom: .4em;
}
.color-icon {
margin-right: .5em;
margin-left: .5em;
display: inline-block;
border: 0 solid rgba(0, 0, 0, .2);
border-radius: 100%;
height: 14px;
width: 14px;
position: relative;
top: 2px;
}
.ui.label > .color-icon {
margin-left: 0;
}
.invisible {
visibility: hidden;
}
/* https://github.com/go-gitea/gitea/issues/10210 */
.ui.attached.segment ~ .ui.top.attached.header {
margin-top: 1rem;
}
table th[data-sortt-asc],
table th[data-sortt-desc] {
&:hover {
background: rgba(0, 0, 0, .1) !important;
cursor: pointer !important;
}
.svg {
margin-left: .25rem;
}
}
/* limit width of all direct dropdown menu children */
/* https://github.com/go-gitea/gitea/pull/10835 */
.dropdown:not(.selection) > .menu:not(.review-box) > *:not(.header) {
max-width: 300px;
overflow-x: hidden;
text-overflow: ellipsis;
}
.dropdown:not(.selection) > .menu.review-box > * {
@media only screen and (max-height: 700px) {
.CodeMirror,
.CodeMirror-scroll {
min-height: 100px;
}
}
}
.text-label {
display: inline-flex !important;
align-items: center !important;
}
.text-label .color-icon {
position: static !important;
}
.emoji,
.reaction {
font-size: 1.25em;
line-height: 1;
font-style: normal !important;
font-weight: normal !important;
vertical-align: -.075em;
}
.emoji img,
.reaction img {
border-width: 0 !important;
margin: 0 !important;
width: 1em !important;
height: 1em !important;
vertical-align: -.15em;
}
/* https://github.com/go-gitea/gitea/pull/11486 */
.ui.sub.header {
text-transform: none;
}
.ui.tabular.menu {
.item {
padding: 11px 12px;
color: rgba(0, 0, 0, .5);
}
.item:hover {
color: rgba(0, 0, 0, .8);
}
.item.active {
color: rgba(0, 0, 0, .9);
margin-top: 1px; /* offset fomantic's margin-bottom: -1px */
}
}
.ui.secondary.pointing.menu .item {
padding: 12px;
}
.ui.header > .ui.label.compact {
margin-top: inherit;
}