Form styling adjustments (#13501)

* 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>
release/v1.15
silverwind 2020-11-12 16:59:33 +01:00 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

View File

@ -91,7 +91,7 @@
</a> </a>
</div> </div>
</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"> <ul class="repo-owner-name-list">
<li v-for="repo in repos" :class="{'private': repo.private || repo.internal}"> <li v-for="repo in repos" :class="{'private': repo.private || repo.internal}">
<a :href="suburl + '/' + repo.full_name"> <a :href="suburl + '/' + repo.full_name">
@ -139,7 +139,7 @@
</a> </a>
</div> </div>
</h4> </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"> <ul class="repo-owner-name-list">
<li v-for="org in organizations"> <li v-for="org in organizations">
<a :href="suburl + '/' + org.name"> <a :href="suburl + '/' + org.name">

View File

@ -62,6 +62,10 @@
--color-box-header: #f7f7f7; --color-box-header: #f7f7f7;
--color-box-body: #ffffff; --color-box-body: #ffffff;
--color-timeline: #ececec; --color-timeline: #ececec;
--color-input-text: #212121;
--color-input-background: #ffffff;
--color-input-border: #dedede;
--color-input-border-hover: #cecece;
} }
:root:lang(ja) { :root:lang(ja) {
@ -186,23 +190,6 @@ a:hover,
border-right-color: var(--color-primary); 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,
.ui.selection.active.dropdown:hover, .ui.selection.active.dropdown:hover,
.ui.selection.active.dropdown .menu, .ui.selection.active.dropdown .menu,
@ -214,6 +201,10 @@ a:hover,
margin: 0 -1.25px; margin: 0 -1.25px;
} }
.ui.attached.table {
border-color: var(--color-secondary);
}
.dont-break-out { .dont-break-out {
overflow-wrap: break-word; overflow-wrap: break-word;
word-wrap: break-word; word-wrap: break-word;
@ -326,6 +317,10 @@ a:hover,
height: auto; height: auto;
} }
.ui.loading.loading.input > i.icon svg {
visibility: hidden;
}
.ui { .ui {
&.left:not(.action) { &.left:not(.action) {
float: left; float: left;

View File

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

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 { .form {
.help { .help {
color: #999999; color: #999999;

View File

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

View File

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