fix media query edge case (#13546)

* fix media query edge case

was failing for 768px width before

* code review

* define responsive breakpoints as less variables

* add missing variables.less

* rename variables, drop screen constraints

* fix less import

* Apply suggestions from code review

Co-authored-by: silverwind <me@silverwind.io>

* code review

altough it doesnt matter, LESS lazy evals variables

Co-authored-by: zeripath <art27@cantab.net>
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>

1 files changed, 9 insertions, 9 deletions

diff --git a/web_src/less/_form.less b/web_src/less/_form.less
index 1f9a02b263..03f5c83bca 100644
--- a/web_src/less/_form.less
+++ b/web_src/less/_form.less
@@ -142,7 +142,7 @@ textarea:focus,
       text-align: center;
     }
 
-    @media only screen and (min-width: 768px) {
+    @media @mediaMdAndUp {
       width: 800px !important;
 
       .header {
@@ -169,7 +169,7 @@ textarea:focus,
       }
     }
 
-    @media only screen and (max-width: 767px) {
+    @media @mediaSm {
       .optional .title {
         margin-left: 15px;
       }
@@ -211,7 +211,7 @@ textarea:focus,
   }
 }
 
-@media only screen and (min-width: 768px) {
+@media @mediaMdAndUp {
   .g-recaptcha,
   .h-captcha {
     margin: 0 auto !important;
@@ -220,7 +220,7 @@ textarea:focus,
   }
 }
 
-@media screen and (max-height: 575px) {
+@media (max-height: 575px) {
   #rc-imageselect,
   .g-recaptcha,
   .h-captcha {
@@ -252,7 +252,7 @@ textarea:focus,
 
     .inline.field > label,
     input {
-      @media only screen and (max-width: 768px) {
+      @media @mediaSm {
         width: 100% !important;
       }
     }
@@ -290,7 +290,7 @@ textarea:focus,
         width: 50% !important;
       }
 
-      @media only screen and (max-width: 768px) {
+      @media @mediaSm {
         label,
         input,
         .selection.dropdown {
@@ -308,7 +308,7 @@ textarea:focus,
 
   &.new.repo {
     .ui.form {
-      @media only screen and (min-width: 768px) {
+      @media @mediaMdAndUp {
         #auto-init {
           margin-left: @create-page-form-input-padding+15px;
         }
@@ -317,7 +317,7 @@ textarea:focus,
       .selection.dropdown:not(.owner) {
         width: 50% !important;
 
-        @media only screen and (max-width: 768px) {
+        @media @mediaSm {
           width: 100% !important;
         }
       }
@@ -346,7 +346,7 @@ textarea:focus,
 }
 
 .new.org .ui.form {
-  @media only screen and (max-width: 768px) {
+  @media @mediaSm {
     .field button,
     .field a {
       margin-bottom: 1em;