diff options
Diffstat (limited to 'web_src/less/_base.less')
-rw-r--r-- | web_src/less/_base.less | 1101 |
1 files changed, 1101 insertions, 0 deletions
diff --git a/web_src/less/_base.less b/web_src/less/_base.less new file mode 100644 index 0000000000..8bf49b1ef9 --- /dev/null +++ b/web_src/less/_base.less @@ -0,0 +1,1101 @@ +@font-face { + font-family: 'Lato'; + src: url('../vendor/assets/lato-fonts/lato-regular.eot'); + src: url('../vendor/assets/lato-fonts/lato-regular.eot?#iefix') format('embedded-opentype'), url('../vendor/assets/lato-fonts/lato-regular.woff2') format('woff2'), url('../vendor/assets/lato-fonts/lato-regular.woff') format('woff'), url('../vendor/assets/lato-fonts/lato-regular.ttf') format('truetype'); + font-weight: 400; + font-style: normal; +} + +@font-face { + font-family: 'Lato'; + src: url('../vendor/assets/lato-fonts/lato-italic.eot'); + src: url('../vendor/assets/lato-fonts/lato-italic.eot?#iefix') format('embedded-opentype'), url('../vendor/assets/lato-fonts/lato-italic.woff2') format('woff2'), url('../vendor/assets/lato-fonts/lato-italic.woff') format('woff'), url('../vendor/assets/lato-fonts/lato-italic.ttf') format('truetype'); + font-weight: 400; + font-style: italic; +} + +@font-face { + font-family: 'Lato'; + src: url('../vendor/assets/lato-fonts/lato-bold.eot'); + src: url('../vendor/assets/lato-fonts/lato-bold.eot?#iefix') format('embedded-opentype'), url('../vendor/assets/lato-fonts/lato-bold.woff2') format('woff2'), url('../vendor/assets/lato-fonts/lato-bold.woff') format('woff'), url('../vendor/assets/lato-fonts/lato-bold.ttf') format('truetype'); + font-weight: 700; + font-style: normal; +} + +@font-face { + font-family: 'Lato'; + src: url('../vendor/assets/lato-fonts/lato-bolditalic.eot'); + src: url('../vendor/assets/lato-fonts/lato-bolditalic.eot?#iefix') format('embedded-opentype'), url('../vendor/assets/lato-fonts/lato-bolditalic.woff2') format('woff2'), url('../vendor/assets/lato-fonts/lato-bolditalic.woff') format('woff'), url('../vendor/assets/lato-fonts/lato-bolditalic.ttf') format('truetype'); + font-weight: 700; + font-style: italic; +} + +@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; +} + +@default-fonts: -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, Helvetica, Arial; +@monospaced-fonts: 'SF Mono', Consolas, Menlo, 'Liberation Mono', Monaco, 'Lucida Console'; + +.override-fonts(@fonts) { + textarea { + font-family: @fonts, sans-serif; + } + + .markdown:not(code) { + font-family: @fonts, sans-serif; + } + + /* We're going to just override the semantic fonts here */ + h1, + h2, + h3, + h4, + h5 { + font-family: Lato, @fonts, sans-serif; + } + + .home .hero h1, + .home .hero h2 { + font-family: 'PT Sans Narrow', Lato, @fonts, sans-serif; + } + + .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: Lato, @fonts, sans-serif; + } +} + +.override-fonts(@default-fonts); + +body { + background-color: #ffffff; + overflow-y: auto; + -webkit-font-smoothing: antialiased; + 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;); +} + +@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;); +} + +@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;); +} + +@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;); +} + +@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;); +} + +img { + border-radius: 3px; +} + +table { + border-collapse: collapse; +} + +a { + cursor: pointer; +} + +.rounded { + border-radius: 0.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, 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, 0.45); + } + + .top.menu .menu { + z-index: 900; + } + + .octicon { + &.fitted { + margin-right: 0; + } + + margin-right: 0.75em; + } + + .searchbox { + background-color: #f4f4f4 !important; + + &:focus { + background-color: #e9e9e9 !important; + } + } + + .text .octicon { + width: 16px; + text-align: center; + } + + #navbar { + width: 100vw; + min-height: 52px; + padding: 0 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 { + float: left; + } + + &.right { + float: right; + } + + &.button, + &.menu .item { + user-select: auto; + } + + &.container { + &.fluid { + &.padded { + padding: 0 10px 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: 0.58928571em 1.125em; + } + + .menu:not(.vertical) .item > .button.small { + font-size: 0.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; + } + + .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; + } + + &.gold { + color: #a1882b !important; + } + + &.left { + text-align: left !important; + } + + &.right { + text-align: right !important; + } + + &.small { + font-size: 0.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; + } + + &.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: 0.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 { + 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 10px; + 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 { + .octicon { + 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; + } + + &.gold { + background-color: #a1882b !important; + } + } + + .migrate { + color: #888888 !important; + opacity: 0.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; + } + + &.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; + } + } + } +} + +.file-comment { + font: 12px @monospaced-fonts, monospace; + color: rgba(0, 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, 0.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 0.5rem; + + .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%; + } +} + +/* Overrides some styles of the Highlight.js plugin */ +.hljs { + background: inherit !important; + padding: 0 !important; +} + +.ui.menu.new-menu { + justify-content: center !important; + padding-top: 15px !important; + margin-top: -15px !important; + margin-bottom: 15px !important; + background-color: #fafafa !important; + 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: 5px; + } + + .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, 0.01); + } + + .ui.menu.new-menu::-webkit-scrollbar-thumb { + background: rgba(0, 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; +} + +.archived-icon { + color: lighten(#000000, 70%) !important; +} + +.oauth2-authorize-application-box { + margin-top: 3em !important; +} + +/* Tab color tweaks */ +.ui.tabular.menu .item { + color: rgba(0, 0, 0, 0.5); +} + +.ui.tabular.menu .item:hover { + color: rgba(0, 0, 0, 0.8); +} + +.ui.tabular.menu .item.active { + color: rgba(0, 0, 0, 0.9); +} + +/* 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: 1.5em; +} + +.ui.label > .detail .icons { + margin-right: 0.25em; +} + +.ui.label > .detail .icons .icon { + margin-right: 0; +} + +.lines-num { + vertical-align: top; + text-align: right !important; + color: #999999; + background: #f5f5f5; + width: 1%; + user-select: none; + + span { + &:before { + content: attr(data-line-number); + line-height: 20px !important; + padding: 0 10px; + cursor: pointer; + display: block; + } + } +} + +.lines-num, +.lines-code { + padding: 0 !important; + + pre, + ol, + .hljs { + background-color: white; + margin: 0; + padding: 0 !important; + + li { + display: block; + width: 100%; + + &:before { + content: ' '; + } + } + } +} + +.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; + + .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-num, +.lines-code, +.lines-commit { + .bottom-line { + border-bottom: 1px solid #eaecef; + } +} + +.code-view { + overflow: auto; + overflow-x: auto; + overflow-y: hidden; + + *:not(.fa):not(.octicon):not(.icon) { + font-size: 12px; + font-family: @monospaced-fonts, monospace; + line-height: 20px; + } + + table { + width: 100%; + } + + .active { + background: #fff866; + } +} |