* 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>tags/v1.15.0-dev
@@ -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"> |
@@ -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; |
@@ -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; |
@@ -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; |
@@ -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; } |
@@ -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; | |||
} |