third_party
/
gitea
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Form styling adjustments (#13501)

Browse Source 
* Form styling adjustments

- Move all form-related styling to _forms.less
- Defined new form-related variables
- Fix spinner on frontpage repo search
- Add new rounded-* helpers and fix repo search radius

* misc arc green tweaks

Co-authored-by: zeripath <art27@cantab.net>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
Co-authored-by: Lauris BH <lauris@nix.lv>
tokarchuk/v1.17
silverwind 4 years ago committed by GitHub
parent 4117a443c2
commit c2e05d9f9a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 157 additions and 207 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 4
      templates/user/dashboard/repolist.tmpl
  2. 29
      web_src/less/_base.less
  3. 16
      web_src/less/_dashboard.less
  4. 126
      web_src/less/_form.less
  5. 7
      web_src/less/helpers.less
  6. 182
      web_src/less/themes/theme-arc-green.less

4
templates/user/dashboard/repolist.tmpl
Unescape View File

@ -91,7 +91,7 @@
</a>
</div>
</div>
<div class="ui attached table segment">
<div v-if="repos.length" class="ui attached table segment rounded-bottom">
<ul class="repo-owner-name-list">
<li v-for="repo in repos" :class="{'private': repo.private || repo.internal}">
<a :href="suburl + '/' + repo.full_name">
@ -139,7 +139,7 @@
</a>
</div>
</h4>
<div class="ui attached table segment">
<div v-if="organizations.length" class="ui attached table segment rounded-bottom">
<ul class="repo-owner-name-list">
<li v-for="org in organizations">
<a :href="suburl + '/' + org.name">

29
web_src/less/_base.less
Unescape View File

@ -62,6 +62,10 @@
--color-box-header: #f7f7f7;
--color-box-body: #ffffff;
--color-timeline: #ececec;
--color-input-text: #212121;
--color-input-background: #ffffff;
--color-input-border: #dedede;
--color-input-border-hover: #cecece;
}
:root:lang(ja) {
@ -186,23 +190,6 @@ a:hover,
border-right-color: var(--color-primary);
}
.ui.form input:not([type]):focus,
.ui.form textarea:focus,
.ui.form input[type="date"]:focus,
.ui.form input[type="datetime-local"]:focus,
.ui.form input[type="email"]:focus,
.ui.form input[type="file"]:focus,
.ui.form input[type="number"]:focus,
.ui.form input[type="password"]:focus,
.ui.form input[type="search"]:focus,
.ui.form input[type="tel"]:focus,
.ui.form input[type="text"]:focus,
.ui.form input[type="time"]:focus,
.ui.form input[type="url"]:focus,
.ui.selection.dropdown:focus {
border-color: var(--color-primary);
}
.ui.selection.active.dropdown,
.ui.selection.active.dropdown:hover,
.ui.selection.active.dropdown .menu,
@ -214,6 +201,10 @@ a:hover,
margin: 0 -1.25px;
}
.ui.attached.table {
border-color: var(--color-secondary);
}
.dont-break-out {
overflow-wrap: break-word;
word-wrap: break-word;
@ -326,6 +317,10 @@ a:hover,
height: auto;
}
.ui.loading.loading.input > i.icon svg {
visibility: hidden;
}
.ui {
&.left:not(.action) {
float: left;

16
web_src/less/_dashboard.less
Unescape View File

@ -65,10 +65,8 @@
}
}
/* Accomodate for Semantic's 1px hacks on .attached elements */
.dashboard-repos {
margin: 0 1px;
margin: 0 1px; /* Accomodate for Semantic's 1px hacks on .attached elements */
}
.dashboard-navbar {
@ -144,18 +142,6 @@
}
.list {
.header {
.ui.label {
margin-top: -4px;
padding: 4px 5px;
font-weight: normal;
}
.plus.icon {
margin-top: 5px;
}
}
ul {
list-style: none;
margin: 0;

126
web_src/less/_form.less
Unescape View File

@ -1,3 +1,129 @@
input,
textarea,
.ui.input > input,
.ui.form input:not([type]),
.ui.form textarea,
.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.selection.dropdown,
.ui.checkbox label::before,
.ui.checkbox input:checked ~ label::before,
.ui.checkbox input:not([type=radio]):indeterminate ~ label::before {
background: var(--color-input-background);
border-color: var(--color-input-border);
color: var(--color-input-text);
}
input:hover,
textarea:hover,
.ui.input input:hover,
.ui.form input:not([type]):hover,
.ui.form textarea:hover,
.ui.form input[type="date"]:hover,
.ui.form input[type="datetime-local"]:hover,
.ui.form input[type="email"]:hover,
.ui.form input[type="file"]:hover,
.ui.form input[type="number"]:hover,
.ui.form input[type="password"]:hover,
.ui.form input[type="search"]:hover,
.ui.form input[type="tel"]:hover,
.ui.form input[type="text"]:hover,
.ui.form input[type="time"]:hover,
.ui.form input[type="url"]:hover,
.ui.selection.dropdown:hover,
.ui.checkbox label:hover::before,
.ui.checkbox label:active::before,
.ui.radio.checkbox label::after,
.ui.radio.checkbox input:focus ~ label::before,
.ui.radio.checkbox input:checked ~ label::before {
background: var(--color-input-background);
border-color: var(--color-input-border-hover);
color: var(--color-input-text);
}
input:focus,
textarea:focus,
.ui.input input:focus,
.ui.form input:not([type]):focus,
.ui.form textarea:focus,
.ui.form input[type="date"]:focus,
.ui.form input[type="datetime-local"]:focus,
.ui.form input[type="email"]:focus,
.ui.form input[type="file"]:focus,
.ui.form input[type="number"]:focus,
.ui.form input[type="password"]:focus,
.ui.form input[type="search"]:focus,
.ui.form input[type="tel"]:focus,
.ui.form input[type="text"]:focus,
.ui.form input[type="time"]:focus,
.ui.form input[type="url"]:focus,
.ui.selection.dropdown:focus,
.ui.checkbox input:focus ~ label::before,
.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label::before,
.ui.checkbox input:checked:focus ~ label::before,
.ui.radio.checkbox input:focus:checked ~ label::before {
background: var(--color-input-background);
border-color: var(--color-primary);
color: var(--color-input-text);
}
.ui.form .field > label,
.ui.form .inline.fields > label,
.ui.form .inline.fields .field > label,
.ui.form .inline.fields .field > p,
.ui.form .inline.field > label,
.ui.form .inline.field > p,
.ui.checkbox label,
.ui.checkbox + label,
.ui.checkbox label:hover,
.ui.checkbox + label:hover,
.ui.checkbox input:focus ~ label,
.ui.checkbox input:active ~ label {
color: var(--color-text);
}
.ui.input,
.ui.checkbox input:focus ~ label::after,
.ui.checkbox input:checked ~ label::after,
.ui.checkbox label:active::after,
.ui.checkbox input:not([type=radio]):indeterminate ~ label::after,
.ui.checkbox input:not([type=radio]):indeterminate:focus ~ label::after,
.ui.checkbox input:checked:focus ~ label::after,
.ui.disabled.checkbox label,
.ui.checkbox input[disabled] ~ label {
color: var(--color-input-text);
}
.ui.radio.checkbox input:focus ~ label::after,
.ui.radio.checkbox input:checked ~ label::after,
.ui.radio.checkbox input:focus:checked ~ label::after {
background: var(--color-input-text);
}
.ui.toggle.checkbox label::before {
background: var(--color-input-background);
}
.ui.toggle.checkbox label,
.ui.toggle.checkbox input:checked ~ label,
.ui.toggle.checkbox input:focus:checked ~ label {
color: var(--color-text) !important;
}
.ui.toggle.checkbox input:checked ~ label::before,
.ui.toggle.checkbox input:focus:checked ~ label::before {
background: var(--color-primary) !important;
}
.form {
.help {
color: #999999;

7
web_src/less/helpers.less
Unescape View File

@ -6,7 +6,6 @@
.sb { justify-content: space-between !important; }
.fc { flex-direction: column !important; }
.f1 { flex: 1 !important; }
.rounded { border-radius: var(--border-radius) !important; }
.mono {
font-family: var(--fonts-monospace) !important;
@ -18,6 +17,12 @@
word-break: break-all !important;
}
.rounded { border-radius: var(--border-radius) !important; }
.rounded-top { border-radius: var(--border-radius) var(--border-radius) 0 0 !important; }
.rounded-bottom { border-radius: 0 0 var(--border-radius) var(--border-radius) !important; }
.rounded-left { border-radius: var(--border-radius) 0 0 var(--border-radius) !important; }
.rounded-right { border-radius: 0 var(--border-radius) var(--border-radius) 0 !important; }
.m-0 { margin: 0 !important; }
.m-1 { margin: .125rem !important; }
.m-2 { margin: .25rem !important; }

182
web_src/less/themes/theme-arc-green.less
Unescape View File

@ -53,8 +53,12 @@
--color-body: #383c4a;
--color-box-header: #454a57;
--color-box-body: #353945;
--color-text: #9aa0af;
--color-text: #b6bac5;
--color-timeline: #454a57;
--color-input-text: #dcdcdc;
--color-input-background: #2e323e;
--color-input-border: #454a57;
--color-input-border-hover: #505667;
}
/* Background */
@ -565,10 +569,6 @@ body {
color: #fff;
}
.ui.attached.table {
border: 1px solid #304251;
}
.feeds .list ul li.private {
background: #353945;
}
@ -647,19 +647,6 @@ footer {
background: #4b5162;
}
.ui.input input {
background: var(--color-secondary);
border: 1px solid var(--color-secondary);
color: #dbdbdb;
}
.ui.input input:focus,
.ui.input.focus input {
background: var(--color-secondary);
border: 1px solid #6a737d;
color: #dbdbdb;
}
.ui.accordion .title:not(.ui) {
color: #dbdbdb;
}
@ -722,11 +709,6 @@ a.ui.basic.green.label:hover {
opacity: 1;
}
.ui.disabled.checkbox label,
.ui.checkbox input[disabled] ~ label {
color: var(--color-secondary-dark-6);
}
.ui.pagination.menu .active.item {
color: #dbdbdb;
background-color: #87ab63;
@ -750,59 +732,12 @@ a.ui.basic.green.label:hover {
background: #505667;
}
.ui.form input:not([type]),
.ui.form textarea,
.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.selection.dropdown {
color: var(--color-secondary-dark-6);
background: #2e323e;
}
.ui.form input:not([type]):hover,
.ui.form textarea:hover,
.ui.form input[type="date"]:hover,
.ui.form input[type="datetime-local"]:hover,
.ui.form input[type="email"]:hover,
.ui.form input[type="file"]:hover,
.ui.form input[type="number"]:hover,
.ui.form input[type="password"]:hover,
.ui.form input[type="search"]:hover,
.ui.form input[type="tel"]:hover,
.ui.form input[type="text"]:hover,
.ui.form input[type="time"]:hover,
.ui.form input[type="url"]:hover,
.ui.selection.dropdown:hover {
background: #2e323e;
border: 1px solid #505667;
color: #dbdbdb;
.form .help {
color: #7f8699;
}
.ui.form input:not([type]):focus,
.ui.form textarea:focus,
.ui.form input[type="date"]:focus,
.ui.form input[type="datetime-local"]:focus,
.ui.form input[type="email"]:focus,
.ui.form input[type="file"]:focus,
.ui.form input[type="number"]:focus,
.ui.form input[type="password"]:focus,
.ui.form input[type="search"]:focus,
.ui.form input[type="tel"]:focus,
.ui.form input[type="text"]:focus,
.ui.form input[type="time"]:focus,
.ui.form input[type="url"]:focus,
.ui.selection.dropdown:focus {
background: #2e323e;
color: #dbdbdb;
.ui .text.light.grey {
color: #7f8699 !important;
}
.ui.form .fields.error .field textarea,
@ -856,10 +791,6 @@ a.ui.basic.green.label:hover {
color: #f9cbcb;
}
.ui.action.input:not([class*="left action"]) input:focus {
border-right-color: #6a737d !important;
}
.ui.green.button,
.ui.green.buttons .button {
background-color: #87ab63;
@ -879,7 +810,7 @@ a.ui.basic.green.label:hover {
.ui.basic.button,
.ui.basic.buttons .button {
color: var(--color-secondary-dark-6);
background: rgba(0, 0, 0, .06);
background: rgba(0, 0, 0, .1);
box-shadow: none;
}
@ -1035,10 +966,6 @@ a.ui.basic.green.label:hover {
color: #636363;
}
.ui.input {
color: #dbdbdb;
}
.overflow.menu .items .item {
color: #9d9d9d;
}
@ -1327,20 +1254,6 @@ td.blob-hunk {
background: #2c303a;
}
.ui.checkbox label,
.ui.checkbox + label,
.ui.form .field > label {
color: var(--color-secondary-dark-6);
}
.ui.form .inline.field > label,
.ui.form .inline.field > p,
.ui.form .inline.fields .field > label,
.ui.form .inline.fields .field > p,
.ui.form .inline.fields > label {
color: var(--color-secondary-dark-6);
}
.user.settings .email.list .item:not(:first-child) {
border-top: 1px solid #3f4451;
}
@ -1425,81 +1338,6 @@ td.blob-hunk {
background-color: #984646;
}
.ui.checkbox label:hover,
.ui.checkbox + label:hover {
color: #dbdbdb !important;
}
.ui.checkbox .box::before,
.ui.checkbox label::before {
background: #2e323e;
border: 1px solid var(--color-secondary);
}
.ui.checkbox .box:hover::before,
.ui.checkbox label:hover::before,
.ui.checkbox .box:active::before,
.ui.checkbox label:active::before {
background: #2e323e;
border-color: #6a737d;
}
.ui.checkbox input:focus ~ .box::before,
.ui.checkbox input:focus ~ label::before,
.ui.checkbox input:checked:focus ~ .box::before,
.ui.checkbox input:checked:focus ~ label::before {
background: #2e323e;
border-color: #6a737d;
}
.ui.checkbox input:checked ~ .box::after,
.ui.checkbox input:checked ~ label::after {
color: #dbdbdb;
}
.ui.checkbox input:checked ~ .box::before,
.ui.checkbox input:checked ~ label::before {
background: #2e323e;
opacity: 1;
color: #dbdbdb;
border-color: #505667;
}
.ui.checkbox input:checked:focus ~ .box::before,
.ui.checkbox input:checked:focus ~ label::before,
.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ .box::before,
.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label::before {
background: #2e323e;
border-color: #6a737d;
}
.ui.checkbox input:checked:focus ~ .box::after,
.ui.checkbox input:checked:focus ~ label::after,
.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ .box::after,
.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label::after {
background: #2e323e;
color: #dbdbdb;
}
.ui.checkbox input:focus ~ .box::after,
.ui.checkbox input:focus ~ label,
.ui.checkbox input:focus ~ label::after {
color: #9a9a9a;
}
.ui.radio.checkbox label::after,
.ui.radio.checkbox input:checked ~ label::after,
.ui.radio.checkbox input:focus ~ label::after,
.ui.radio.checkbox input:focus:checked ~ label::after {
background: #dbdbdb;
}
.ui.radio.checkbox input:checked ~ label::before,
.ui.radio.checkbox input:focus ~ label::before,
.ui.radio.checkbox input:focus:checked ~ label::before {
background: none;
}
.ui.selection.dropdown .menu > .item {
border-top: 1px solid #313c47;
}

Write Preview
Loading…
Cancel
Save