summaryrefslogtreecommitdiffstats
path: root/public/less
diff options
context:
space:
mode:
Diffstat (limited to 'public/less')
-rw-r--r--public/less/_base.less58
-rw-r--r--public/less/_dashboard.less35
-rw-r--r--public/less/_explore.less11
-rw-r--r--public/less/_form.less82
-rw-r--r--public/less/_home.less74
-rw-r--r--public/less/_repository.less72
6 files changed, 206 insertions, 126 deletions
diff --git a/public/less/_base.less b/public/less/_base.less
index bb5fcbc73d..c17bdcb24c 100644
--- a/public/less/_base.less
+++ b/public/less/_base.less
@@ -1,7 +1,7 @@
@footer-margin: 40px;
body {
- font-family: "Helvetica Neue", "Microsoft YaHei", Arial, Helvetica, sans-serif !important;
+ font-family: "Lato", "Microsoft YaHei", Arial, Helvetica, sans-serif !important;
background-color: #fff;
overflow-y: scroll;
-webkit-font-smoothing: antialiased;
@@ -61,6 +61,7 @@ pre, code {
z-index: 900;
left: 0;
width: 100%;
+ margin: 0;
&.light {
background-color: white;
border-bottom: 1px solid #DDDDDD;
@@ -86,18 +87,11 @@ pre, code {
.top.menu .menu {
z-index: 900;
}
- .icon,
.octicon {
- margin-right: 5px !important;
- }
- .head.link.item {
- padding-right: 0 !important;
- }
- .avatar > .ui.image {
- margin-right: 0;
- }
- .avatar .octicon-triangle-down {
- margin-top: 6.5px;
+ &.fitted {
+ margin-right: 0;
+ }
+ margin-right: .75em;
}
.searchbox {
background-color: rgb(244, 244, 244) !important;
@@ -109,17 +103,26 @@ pre, code {
width: 16px;
text-align: center;
}
- .right.menu {
- .menu {
- left: auto;
- right: 0;
- }
- .dropdown .menu {
- margin-top: 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;
+ display: -ms-flexbox;
+ -ms-flex-align: inherit;
+ align-items: inherit;
+ -ms-flex-direction: inherit;
+ flex-direction: inherit;
+}
+
.ui {
&.left {
float: left;
@@ -443,6 +446,23 @@ footer {
.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;
diff --git a/public/less/_dashboard.less b/public/less/_dashboard.less
index c76363983f..85787ce2be 100644
--- a/public/less/_dashboard.less
+++ b/public/less/_dashboard.less
@@ -29,26 +29,23 @@
}
}
- // Sort
- .jump.item {
- margin: 1px;
- padding-right: 0;
- }
- .menu {
- max-height: 300px;
- overflow-x: auto;
- right: 0!important;
- left: auto!important;
- }
- }
- .ui.right .head.menu {
- margin-top: -5px;
- .item.active {
- color: #d9453d;
- }
- }
+ // Sort
+ .jump.item {
+ margin: 1px;
+ padding-right: 0;
+ }
+ .menu {
+ max-height: 300px;
+ overflow-x: auto;
+ right: 0!important;
+ left: auto!important;
+ }
+ }
+ .right.stackable.menu > .item.active {
+ color: #d9453d;
+ }
}
-
+
/* Accomodate for Semantic's 1px hacks on .attached elements */
.dashboard-repos {
margin: 0 1px;
diff --git a/public/less/_explore.less b/public/less/_explore.less
index ce942ab78d..61cdf8dbf8 100644
--- a/public/less/_explore.less
+++ b/public/less/_explore.less
@@ -10,11 +10,12 @@
background-color: #FAFAFA !important;
border-width: 1px !important;
- .octicon {
- width: 16px;
- text-align: center;
- }
- }
+ .octicon {
+ width: 16px;
+ text-align: center;
+ margin-right: 5px;
+ }
+ }
}
.ui.repository.list {
diff --git a/public/less/_form.less b/public/less/_form.less
index 040e4aff13..a352e1ebb5 100644
--- a/public/less/_form.less
+++ b/public/less/_form.less
@@ -19,31 +19,41 @@
@create-page-form-input-padding: 250px !important;
#create-page-form {
- form {
- margin: auto;
- width: 800px!important;
- .ui.message {
- text-align: center;
- }
- .header {
- padding-left: @create-page-form-input-padding+30px;
- }
- .inline.field > label {
- text-align: right;
- width: @create-page-form-input-padding;
- word-wrap: break-word;
- }
- .help {
- margin-left: @create-page-form-input-padding+15px;
- }
- .optional .title {
- margin-left: @create-page-form-input-padding;
- }
- input,
- textarea {
- width: 50%!important;
- }
- }
+ form {
+ margin: auto;
+ .ui.message {
+ text-align: center;
+ }
+ @media only screen and (min-width: 768px) {
+ width: 800px!important;
+ .header {
+ padding-left: @create-page-form-input-padding+30px;
+ }
+ .inline.field > label {
+ text-align: right;
+ width: @create-page-form-input-padding;
+ word-wrap: break-word;
+ }
+ .help {
+ margin-left: @create-page-form-input-padding+15px;
+ }
+ .optional .title {
+ margin-left: @create-page-form-input-padding;
+ }
+ input,
+ textarea {
+ width: 50%!important;
+ }
+ }
+ @media only screen and (max-width: 767px) {
+ .optional .title {
+ margin-left: 15px;
+ }
+ .inline.field > label {
+ display: block;
+ }
+ }
+ }
}
.signin {
@@ -113,16 +123,18 @@
}
}
- &.new.repo {
- .ui.form {
- .selection.dropdown:not(.owner) {
- width: 50%!important;
- }
- #auto-init {
- margin-left: @create-page-form-input-padding+15px;
- }
- }
- }
+ &.new.repo {
+ .ui.form {
+ .selection.dropdown:not(.owner) {
+ width: 50%!important;
+ }
+ @media only screen and (min-width: 768px) {
+ #auto-init {
+ margin-left: @create-page-form-input-padding+15px;
+ }
+ }
+ }
+ }
}
.new.webhook {
diff --git a/public/less/_home.less b/public/less/_home.less
index 28487fedad..c90e8ec414 100644
--- a/public/less/_home.less
+++ b/public/less/_home.less
@@ -1,36 +1,46 @@
.home {
- padding-bottom: @footer-margin * 2;
- .logo {
- max-width: 220px;
- }
- .hero {
- h1, h2 {
- font-family: 'PT Sans Narrow', sans-serif, 'Microsoft YaHei';
- }
- h1 {
- font-size: 5.5em;
- }
- h2 {
- font-size: 3em;
- }
- .octicon {
- color: #5aa509;
- font-size: 40px;
- width: 50px;
- }
- &.header {
- font-size: 20px;
- }
- }
- p.large {
- font-size: 16px
- }
- .stackable {
- padding-top: 30px;
- }
- a {
- color: #5aa509;
- }
+ padding-bottom: @footer-margin * 2;
+ .logo {
+ max-width: 220px;
+ }
+ .hero {
+ h1, h2 {
+ font-family: 'PT Sans Narrow', sans-serif, 'Microsoft YaHei';
+ }
+ @media only screen and (max-width: 767px) {
+ h1 {
+ font-size: 3.5em;
+ }
+ h2 {
+ font-size: 2em;
+ }
+ }
+ @media only screen and (min-width: 768px) {
+ h1 {
+ font-size: 5.5em;
+ }
+ h2 {
+ font-size: 3em;
+ }
+ }
+ .octicon {
+ color: #5aa509;
+ font-size: 40px;
+ width: 50px;
+ }
+ &.header {
+ font-size: 20px;
+ }
+ }
+ p.large {
+ font-size: 16px
+ }
+ .stackable {
+ padding-top: 30px;
+ }
+ a {
+ color: #5aa509;
+ }
}
.signup {
diff --git a/public/less/_repository.less b/public/less/_repository.less
index f2ee37544c..a69bc44d65 100644
--- a/public/less/_repository.less
+++ b/public/less/_repository.less
@@ -4,11 +4,9 @@
padding-top: 15px;
padding-bottom: @footer-margin * 2;
- .head {
- .column {
- padding-top: 5px !important;
- padding-bottom: 5px !important;
- }
+ .header-grid {
+ padding-top: 5px;
+ padding-bottom: 5px;
.ui.compact.menu {
margin-left: 1rem;
}
@@ -34,6 +32,10 @@
margin-top: -1px;
font-size: 15px;
}
+ .button {
+ margin-top: 2px;
+ margin-bottom: 2px;
+ }
}
.tabs {
@@ -55,6 +57,20 @@
.owner.dropdown {
min-width: 40% !important;
}
+ #file-buttons {
+ /* The reason for the !important is that Semantic itself has
+ margin-left: 0 !important on right items on mobile, which is mostly
+ to make sure elements which on menus would otherwise be on the right
+ align correctly with other elements when stacked.
+ Unfortunately, this brings some weird alignment on this particular
+ element, so we need to override it. */
+ margin-left: auto !important;
+ font-weight: normal;
+ .ui.button {
+ padding: 8px 10px;
+ font-weight: normal;
+ }
+ }
.metas {
.menu {
@@ -133,7 +149,6 @@
}
#clone-panel {
- margin-left: 5px;
width: 350px;
input {
@@ -235,9 +250,10 @@
.header {
.icon {
font-size: 1em;
- margin-top: -2px;
}
.file-actions {
+ margin-top: 0;
+ margin-bottom: -5px;
padding-left: 20px;
.btn-octicon {
display: inline-block;
@@ -814,12 +830,10 @@
&.commits {
.header {
- .ui.right {
- .search {
- input {
- font-weight: normal;
- padding: 5px 10px;
- }
+ .search {
+ input {
+ font-weight: normal;
+ padding: 5px 10px;
}
}
}
@@ -830,7 +844,9 @@
padding-left: 15px;
}
.sha {
- text-align: center;
+ &td {
+ text-align: center;
+ }
width: 140px;
}
}
@@ -898,6 +914,9 @@
background-color: #dad8ff;
}
}
+ .ui.right {
+ margin-bottom: 15px;
+ }
}
.diff-box .header {
display: flex;
@@ -1039,6 +1058,7 @@
max-width: 100%;
padding: 5px 5px 0 5px;
}
+ clear: right;
}
}
.code-view {
@@ -1241,6 +1261,13 @@
}
}
}
+
+ @media only screen and (max-width: 767px) {
+ .dividing.header .stackable.grid .button {
+ margin-top: 2px;
+ margin-bottom: 2px;
+ }
+ }
}
&.settings {
@@ -1437,8 +1464,8 @@
}
}
-.issue-actions {
- display: none;
+#issue-actions {
+ display: none;
}
.issue.list {
@@ -1651,3 +1678,16 @@ tbody.commit-list {
.commit-body {
white-space: pre-wrap;
}
+
+@media only screen and (max-width: 767px) {
+ .ui.stackable.menu {
+ &.mobile--margin-between-items > .item {
+ margin-top: 5px;
+ margin-bottom: 5px;
+ }
+ &.mobile--no-negative-margins {
+ margin-left: 0;
+ margin-right: 0;
+ }
+ }
+}
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-28 09:56:05 +0000