forked from Shiloh/githaven
51fb0463a3
* Fix truncated organization names Previous ellipsis implementation hid vertical overflow - image + descent line of letters. Organization visibility in select on dashboard was not always visible. This commit extracts classes which don't make collisions with other items on page.
361 lines
7.3 KiB
Plaintext
361 lines
7.3 KiB
Plaintext
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;
|
|
padding-top: .6em;
|
|
padding-bottom: .6em;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
@create-page-form-input-padding: 250px !important;
|
|
#create-page-form {
|
|
form {
|
|
margin: auto;
|
|
|
|
.ui.message {
|
|
text-align: center;
|
|
}
|
|
|
|
@media @mediaMdAndUp {
|
|
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 @mediaSm {
|
|
.optional .title {
|
|
margin-left: 15px;
|
|
}
|
|
|
|
.inline.field > label {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.signin {
|
|
.oauth2 {
|
|
div {
|
|
display: inline-block;
|
|
|
|
p {
|
|
margin: 10px 5px 0 0;
|
|
float: left;
|
|
}
|
|
}
|
|
|
|
a {
|
|
margin-right: 3px;
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
img {
|
|
width: 32px;
|
|
height: 32px;
|
|
|
|
&.openidConnect {
|
|
width: auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media @mediaMdAndUp {
|
|
.g-recaptcha,
|
|
.h-captcha {
|
|
margin: 0 auto !important;
|
|
width: 304px;
|
|
padding-left: 30px;
|
|
}
|
|
}
|
|
|
|
@media (max-height: 575px) {
|
|
#rc-imageselect,
|
|
.g-recaptcha,
|
|
.h-captcha {
|
|
transform: scale(.77);
|
|
transform-origin: 0 0;
|
|
}
|
|
}
|
|
|
|
.user.activate,
|
|
.user.forgot.password,
|
|
.user.reset.password,
|
|
.user.link-account,
|
|
.user.signin,
|
|
.user.signup {
|
|
@input-padding: 200px;
|
|
#create-page-form();
|
|
|
|
form {
|
|
width: 700px !important;
|
|
|
|
.header {
|
|
padding-left: 0 !important;
|
|
text-align: center;
|
|
}
|
|
|
|
.inline.field > label {
|
|
width: @input-padding;
|
|
}
|
|
|
|
.inline.field > label,
|
|
input {
|
|
@media @mediaSm {
|
|
width: 100% !important;
|
|
}
|
|
}
|
|
|
|
input[type=number] {
|
|
-moz-appearance: textfield;
|
|
}
|
|
|
|
input::-webkit-outer-spin-button,
|
|
input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.repository {
|
|
&.new.repo,
|
|
&.new.migrate,
|
|
&.new.fork {
|
|
#create-page-form();
|
|
|
|
form {
|
|
.dropdown .text {
|
|
margin-right: 0 !important;
|
|
}
|
|
|
|
.header {
|
|
padding-left: 0 !important;
|
|
text-align: center;
|
|
}
|
|
|
|
.selection.dropdown {
|
|
vertical-align: middle;
|
|
width: 50% !important;
|
|
}
|
|
|
|
@media @mediaSm {
|
|
label,
|
|
input,
|
|
.selection.dropdown {
|
|
width: 100% !important;
|
|
}
|
|
|
|
.field button,
|
|
.field a {
|
|
margin-bottom: 1em;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.new.repo {
|
|
.ui.form {
|
|
@media @mediaMdAndUp {
|
|
#auto-init {
|
|
margin-left: @create-page-form-input-padding+15px;
|
|
}
|
|
}
|
|
|
|
.selection.dropdown:not(.owner) {
|
|
width: 50% !important;
|
|
|
|
@media @mediaSm {
|
|
width: 100% !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.new.webhook {
|
|
form {
|
|
.help {
|
|
margin-left: 25px;
|
|
}
|
|
}
|
|
|
|
.events.fields {
|
|
.column {
|
|
padding-left: 40px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.githook {
|
|
textarea {
|
|
font-family: var(--fonts-monospace);
|
|
}
|
|
}
|
|
|
|
.new.org .ui.form {
|
|
@media @mediaSm {
|
|
.field button,
|
|
.field a {
|
|
margin-bottom: 1em;
|
|
width: 100%;
|
|
}
|
|
|
|
.field input {
|
|
width: 100% !important;
|
|
}
|
|
}
|
|
}
|