mirror of
				https://github.com/go-gitea/gitea.git
				synced 2025-11-04 12:53:43 +01:00 
			
		
		
		
	Fix tooltips and issue dependency styles (#13458)
- Convert all tooltips to JS-based ones, fixing overflow issues - Restyle issue dependencies/dependants - Move popup styles to base style - CSS Helper tweaks - Unify pseudo element selectors and lint for it Fixes: https://github.com/go-gitea/gitea/issues/13400
This commit is contained in:
		
							parent
							
								
									9155f13bf8
								
							
						
					
					
						commit
						21d496364a
					
				@ -11,5 +11,5 @@ rules:
 | 
			
		||||
  no-descending-specificity: null
 | 
			
		||||
  number-leading-zero: never
 | 
			
		||||
  rule-empty-line-before: null
 | 
			
		||||
  selector-pseudo-element-colon-notation: null
 | 
			
		||||
  selector-pseudo-element-colon-notation: double
 | 
			
		||||
  shorthand-property-no-redundant-values: true
 | 
			
		||||
 | 
			
		||||
@ -90,7 +90,7 @@
 | 
			
		||||
					</div>
 | 
			
		||||
				</div>
 | 
			
		||||
				<div class="inline field">
 | 
			
		||||
					<div class="ui checkbox" data-tooltip="{{.i18n.Tr "admin.users.allow_git_hook_tooltip"}}">
 | 
			
		||||
					<div class="ui checkbox poping up" data-content="{{.i18n.Tr "admin.users.allow_git_hook_tooltip"}}" data-variation="very wide">
 | 
			
		||||
						<label><strong>{{.i18n.Tr "admin.users.allow_git_hook"}}</strong></label>
 | 
			
		||||
						<input name="allow_git_hook" type="checkbox" {{if .User.CanEditGitHook}}checked{{end}} {{if DisableGitHooks}}disabled{{end}}>
 | 
			
		||||
					</div>
 | 
			
		||||
 | 
			
		||||
@ -17,7 +17,7 @@
 | 
			
		||||
					<input type="checkbox" name="all" id="all" value="true" {{.All}}>
 | 
			
		||||
					<label for="all">{{.i18n.Tr "repo.commits.search_all"}}   </label>
 | 
			
		||||
				</div>
 | 
			
		||||
				<button class="ui primary tiny button mr-0" data-panel="#add-deploy-key-panel" data-tooltip={{.i18n.Tr "repo.commits.search.tooltip"}}>{{.i18n.Tr "repo.commits.find"}}</button>
 | 
			
		||||
				<button class="ui primary tiny button mr-0 poping up" data-panel="#add-deploy-key-panel" data-content={{.i18n.Tr "repo.commits.search.tooltip"}}>{{.i18n.Tr "repo.commits.find"}}</button>
 | 
			
		||||
			</form>
 | 
			
		||||
		{{else if .IsDiffCompare}}
 | 
			
		||||
			<a href="{{$.CommitRepoLink}}/commit/{{.BeforeCommitID}}" class="ui green sha label">{{if not .BaseIsCommit}}{{if .BaseIsBranch}}{{svg "octicon-git-branch"}}{{else if .BaseIsTag}}{{svg "octicon-tag"}}{{end}}{{.BaseBranch}}{{else}}{{ShortSha .BaseBranch}}{{end}}</a>
 | 
			
		||||
 | 
			
		||||
@ -73,7 +73,7 @@
 | 
			
		||||
								<input class="hidden" name="git_content" type="checkbox" tabindex="0" {{if .git_content}}checked{{end}}>
 | 
			
		||||
								<label>{{.i18n.Tr "repo.template.git_content"}}</label>
 | 
			
		||||
							</div>
 | 
			
		||||
							<div class="ui checkbox" {{if not .SignedUser.CanEditGitHook}}data-tooltip="{{.i18n.Tr "repo.template.git_hooks_tooltip"}}"{{end}}>
 | 
			
		||||
							<div class="ui checkbox{{if not .SignedUser.CanEditGitHook}} poping up{{end}}"{{if not .SignedUser.CanEditGitHook}} data-content="{{.i18n.Tr "repo.template.git_hooks_tooltip"}}"{{end}}>
 | 
			
		||||
								<input class="hidden" name="git_hooks" type="checkbox" tabindex="0" {{if .git_hooks}}checked{{end}}>
 | 
			
		||||
								<label>{{.i18n.Tr "repo.template.git_hooks"}}</label>
 | 
			
		||||
							</div>
 | 
			
		||||
 | 
			
		||||
@ -434,32 +434,35 @@
 | 
			
		||||
				{{if (and (not .BlockedByDependencies) (not .BlockingDependencies))}}
 | 
			
		||||
					<span class="text"><strong>{{.i18n.Tr "repo.issues.dependency.title"}}</strong></span>
 | 
			
		||||
					<br>
 | 
			
		||||
					<p>{{if .Issue.IsPull}}
 | 
			
		||||
					<p>
 | 
			
		||||
						{{if .Issue.IsPull}}
 | 
			
		||||
							{{.i18n.Tr "repo.issues.dependency.pr_no_dependencies"}}
 | 
			
		||||
						{{else}}
 | 
			
		||||
							{{.i18n.Tr "repo.issues.dependency.issue_no_dependencies"}}
 | 
			
		||||
						{{end}}</p>
 | 
			
		||||
						{{end}}
 | 
			
		||||
					</p>
 | 
			
		||||
				{{end}}
 | 
			
		||||
 | 
			
		||||
				{{if .BlockingDependencies}}
 | 
			
		||||
					<span class="text" data-tooltip="{{if .Issue.IsPull}}
 | 
			
		||||
							{{.i18n.Tr "repo.issues.dependency.pr_close_blocks"}}
 | 
			
		||||
						{{else}}
 | 
			
		||||
							{{.i18n.Tr "repo.issues.dependency.issue_close_blocks"}}
 | 
			
		||||
						{{end}}" data-inverted="">
 | 
			
		||||
					<strong>{{.i18n.Tr "repo.issues.dependency.blocks_short"}}</strong>
 | 
			
		||||
					<span class="text poping up" data-content="{{if .Issue.IsPull}}{{.i18n.Tr "repo.issues.dependency.pr_close_blocks"}}{{else}}{{.i18n.Tr "repo.issues.dependency.issue_close_blocks"}}{{end}}">
 | 
			
		||||
						<strong>{{.i18n.Tr "repo.issues.dependency.blocks_short"}}</strong>
 | 
			
		||||
					</span>
 | 
			
		||||
					<div class="ui relaxed divided list">
 | 
			
		||||
						{{range .BlockingDependencies}}
 | 
			
		||||
							<div class="item{{if .Issue.IsClosed}} is-closed{{end}}">
 | 
			
		||||
								<span class="text grey right floated">#{{.Issue.Index}}</span>
 | 
			
		||||
								<a class="title" href="{{.Repository.Link}}/issues/{{.Issue.Index}}">{{.Issue.Title | RenderEmoji}}</a>
 | 
			
		||||
								<div class="text small">{{.Repository.OwnerName}}/{{.Repository.Name}}</div>
 | 
			
		||||
								<div class="ui transparent label right floated nopadding">
 | 
			
		||||
							<div class="item{{if .Issue.IsClosed}} is-closed{{end}} df ac sb">
 | 
			
		||||
								<div class="item-left df jc fc f1">
 | 
			
		||||
									<a class="title" href="{{.Repository.Link}}/issues/{{.Issue.Index}}">
 | 
			
		||||
										#{{.Issue.Index}} {{.Issue.Title | RenderEmoji}}
 | 
			
		||||
									</a>
 | 
			
		||||
									<div class="text small">
 | 
			
		||||
										{{.Repository.OwnerName}}/{{.Repository.Name}}
 | 
			
		||||
									</div>
 | 
			
		||||
								</div>
 | 
			
		||||
								<div class="item-right df ac">
 | 
			
		||||
									{{if and $.CanCreateIssueDependencies (not $.Repository.IsArchived)}}
 | 
			
		||||
										<a class="delete-dependency-button" onclick="window.deleteDependencyModal({{.Issue.ID}}, 'blocking');"
 | 
			
		||||
											data-tooltip="{{$.i18n.Tr "repo.issues.dependency.remove_info"}}" data-inverted="">
 | 
			
		||||
											<i class="delete icon text red nopadding nomargin"></i>
 | 
			
		||||
										<a class="delete-dependency-button poping up ci" onclick="window.deleteDependencyModal({{.Issue.ID}}, 'blocking');"
 | 
			
		||||
											data-content="{{$.i18n.Tr "repo.issues.dependency.remove_info"}}" data-inverted="">
 | 
			
		||||
											{{svg "octicon-trashcan" 16}}
 | 
			
		||||
										</a>
 | 
			
		||||
									{{end}}
 | 
			
		||||
								</div>
 | 
			
		||||
@ -469,24 +472,25 @@
 | 
			
		||||
				{{end}}
 | 
			
		||||
 | 
			
		||||
				{{if .BlockedByDependencies}}
 | 
			
		||||
					<span class="text" data-tooltip="{{if .Issue.IsPull}}
 | 
			
		||||
						{{.i18n.Tr "repo.issues.dependency.pr_closing_blockedby"}}
 | 
			
		||||
					{{else}}
 | 
			
		||||
						{{.i18n.Tr "repo.issues.dependency.issue_closing_blockedby"}}
 | 
			
		||||
					{{end}}" data-inverted="">
 | 
			
		||||
					<strong>{{.i18n.Tr "repo.issues.dependency.blocked_by_short"}}</strong>
 | 
			
		||||
					<span class="text poping up" data-content="{{if .Issue.IsPull}}{{.i18n.Tr "repo.issues.dependency.pr_closing_blockedby"}}{{else}}{{.i18n.Tr "repo.issues.dependency.issue_closing_blockedby"}}{{end}}">
 | 
			
		||||
						<strong>{{.i18n.Tr "repo.issues.dependency.blocked_by_short"}}</strong>
 | 
			
		||||
					</span>
 | 
			
		||||
					<div class="ui relaxed divided list">
 | 
			
		||||
						{{range .BlockedByDependencies}}
 | 
			
		||||
							<div class="item{{if .Issue.IsClosed}} is-closed{{end}}">
 | 
			
		||||
								<span class="text grey right floated">#{{.Issue.Index}}</span>
 | 
			
		||||
								<a class="title" href="{{.Repository.Link}}/issues/{{.Issue.Index}}">{{.Issue.Title | RenderEmoji}}</a>
 | 
			
		||||
								<div class="text small">{{.Repository.OwnerName}}/{{.Repository.Name}}</div>
 | 
			
		||||
								<div class="ui transparent label right floated nopadding">
 | 
			
		||||
							<div class="item{{if .Issue.IsClosed}} is-closed{{end}} df ac sb">
 | 
			
		||||
								<div class="item-left df jc fc f1">
 | 
			
		||||
									<a class="title" href="{{.Repository.Link}}/issues/{{.Issue.Index}}">
 | 
			
		||||
										#{{.Issue.Index}} {{.Issue.Title | RenderEmoji}}
 | 
			
		||||
									</a>
 | 
			
		||||
									<div class="text small">
 | 
			
		||||
										{{.Repository.OwnerName}}/{{.Repository.Name}}
 | 
			
		||||
									</div>
 | 
			
		||||
								</div>
 | 
			
		||||
								<div class="item-right df ac">
 | 
			
		||||
									{{if and $.CanCreateIssueDependencies (not $.Repository.IsArchived)}}
 | 
			
		||||
										<a class="delete-dependency-button" onclick="window.deleteDependencyModal({{.Issue.ID}}, 'blockedBy');"
 | 
			
		||||
											data-tooltip="{{$.i18n.Tr "repo.issues.dependency.remove_info"}}" data-inverted="">
 | 
			
		||||
											<i class="delete icon text red nopadding nomargin"></i>
 | 
			
		||||
										<a class="delete-dependency-button poping up ci" onclick="window.deleteDependencyModal({{.Issue.ID}}, 'blockedBy');"
 | 
			
		||||
											data-content="{{$.i18n.Tr "repo.issues.dependency.remove_info"}}" data-inverted="">
 | 
			
		||||
											{{svg "octicon-trashcan" 16}}
 | 
			
		||||
										</a>
 | 
			
		||||
									{{end}}
 | 
			
		||||
								</div>
 | 
			
		||||
 | 
			
		||||
@ -152,7 +152,9 @@
 | 
			
		||||
										{{if .Attachments}}
 | 
			
		||||
											{{range .Attachments}}
 | 
			
		||||
												<li>
 | 
			
		||||
													<span class="ui text right" data-tooltip="{{$.i18n.Tr "repo.release.download_count" (.DownloadCount | PrettyNumber)}}" data-position="bottom right">{{svg "octicon-info"}}</span>
 | 
			
		||||
													<span class="ui text right poping up" data-content="{{$.i18n.Tr "repo.release.download_count" (.DownloadCount | PrettyNumber)}}">
 | 
			
		||||
														{{svg "octicon-info"}}
 | 
			
		||||
													</span>
 | 
			
		||||
													<a target="_blank" rel="noopener noreferrer" href="{{.DownloadURL}}">
 | 
			
		||||
														<strong><span class="ui image" title='{{.Name}}'>{{svg "octicon-package" 16 "mr-2"}}</span>{{.Name}}</strong>
 | 
			
		||||
														<span class="ui text grey right">{{.Size | FileSize}}</span>
 | 
			
		||||
 | 
			
		||||
@ -22,7 +22,7 @@
 | 
			
		||||
						</div>
 | 
			
		||||
					{{end}}
 | 
			
		||||
					{{if .LFSLock}}
 | 
			
		||||
						<div class="file-info-entry ui" data-tooltip="{{.LFSLockHint}}" data-inverted="">
 | 
			
		||||
						<div class="file-info-entry ui poping up" data-content="{{.LFSLockHint}}">
 | 
			
		||||
							{{svg "octicon-lock" 16 "mr-2"}}
 | 
			
		||||
							<a href="{{AppSubUrl}}/{{.LFSLock.Owner.Name}}">{{.LFSLockOwner}}</a>
 | 
			
		||||
						</div>
 | 
			
		||||
 | 
			
		||||
@ -362,10 +362,6 @@ a:hover,
 | 
			
		||||
    background-color: transparent;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  &.nopadding {
 | 
			
		||||
    padding: 0;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  &.menu,
 | 
			
		||||
  &.vertical.menu,
 | 
			
		||||
  &.segment {
 | 
			
		||||
@ -506,14 +502,6 @@ a:hover,
 | 
			
		||||
    &.middle {
 | 
			
		||||
      vertical-align: middle;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    &.nopadding {
 | 
			
		||||
      padding: 0;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    &.nomargin {
 | 
			
		||||
      margin: 0;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  .message {
 | 
			
		||||
@ -952,7 +940,7 @@ footer {
 | 
			
		||||
    background: rgba(0, 0, 0, .2);
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  .ui.menu.new-menu:after {
 | 
			
		||||
  .ui.menu.new-menu::after {
 | 
			
		||||
    position: absolute;
 | 
			
		||||
    margin-top: -15px;
 | 
			
		||||
    display: block;
 | 
			
		||||
@ -1049,12 +1037,12 @@ i.icon.centerlock {
 | 
			
		||||
 | 
			
		||||
  span {
 | 
			
		||||
    &.bottom-line {
 | 
			
		||||
      &:after {
 | 
			
		||||
      &::after {
 | 
			
		||||
        border-bottom: 1px solid #eaecef;
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    &:after {
 | 
			
		||||
    &::after {
 | 
			
		||||
      content: attr(data-line-number);
 | 
			
		||||
      line-height: 20px !important;
 | 
			
		||||
      padding: 0 10px;
 | 
			
		||||
@ -1271,6 +1259,37 @@ i.icon.centerlock {
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ui.popup {
 | 
			
		||||
  background-color: var(--color-body);
 | 
			
		||||
  color: var(--color-secondary-dark-6);
 | 
			
		||||
  border-color: var(--color-secondary);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ui.popup::before {
 | 
			
		||||
  box-shadow: 1px 1px 0 0 var(--color-secondary);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ui.bottom.popup::before,
 | 
			
		||||
.ui.top.popup::before,
 | 
			
		||||
.ui.right.center.popup::before,
 | 
			
		||||
.ui.left.center.popup::before {
 | 
			
		||||
  background-color: var(--color-body);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ui.bottom.left.popup::before,
 | 
			
		||||
.ui.bottom.right.popup::before,
 | 
			
		||||
.ui.bottom.center.popup::before {
 | 
			
		||||
  box-shadow: -1px -1px 0 0 var(--color-secondary);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ui.left.center.popup::before {
 | 
			
		||||
  box-shadow: 1px -1px 0 0 var(--color-secondary);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ui.right.center.popup::before {
 | 
			
		||||
  box-shadow: -1px 1px 0 0 var(--color-secondary);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ui.popup .ui.label {
 | 
			
		||||
  margin-bottom: .4em;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@ -403,10 +403,10 @@
 | 
			
		||||
    border: 0;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  pre code:before,
 | 
			
		||||
  pre code:after,
 | 
			
		||||
  pre tt:before,
 | 
			
		||||
  pre tt:after {
 | 
			
		||||
  pre code::before,
 | 
			
		||||
  pre code::after,
 | 
			
		||||
  pre tt::before,
 | 
			
		||||
  pre tt::after {
 | 
			
		||||
    content: normal;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -113,24 +113,31 @@
 | 
			
		||||
 | 
			
		||||
      .item {
 | 
			
		||||
        padding: 0;
 | 
			
		||||
        white-space: nowrap;
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
      .title {
 | 
			
		||||
        max-width: 200px;
 | 
			
		||||
        overflow: hidden;
 | 
			
		||||
        text-overflow: ellipsis;
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
      @media (max-width: 1200px) {
 | 
			
		||||
        .title {
 | 
			
		||||
          max-width: 150px;
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
      @media (max-width: 1000px) {
 | 
			
		||||
        .title {
 | 
			
		||||
          max-width: 100px;
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
      .label.color {
 | 
			
		||||
        padding: 0 8px;
 | 
			
		||||
        margin-right: 5px;
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
      a {
 | 
			
		||||
        margin: 2px 0;
 | 
			
		||||
 | 
			
		||||
        .text {
 | 
			
		||||
          color: #444444;
 | 
			
		||||
 | 
			
		||||
          &:hover {
 | 
			
		||||
            color: #000000;
 | 
			
		||||
          }
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    #deadlineForm input {
 | 
			
		||||
@ -520,7 +527,7 @@
 | 
			
		||||
        border-radius: 3px;
 | 
			
		||||
        #avatar-arrow;
 | 
			
		||||
 | 
			
		||||
        &:after {
 | 
			
		||||
        &::after {
 | 
			
		||||
          border-right-color: #ffffff;
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
@ -590,7 +597,7 @@
 | 
			
		||||
        margin-left: 4em;
 | 
			
		||||
        #avatar-arrow;
 | 
			
		||||
 | 
			
		||||
        &:after {
 | 
			
		||||
        &::after {
 | 
			
		||||
          border-right-color: #ffffff;
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
@ -771,7 +778,7 @@
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .comment-list {
 | 
			
		||||
      &:not(.prevent-before-timeline):before {
 | 
			
		||||
      &:not(.prevent-before-timeline)::before {
 | 
			
		||||
        display: block;
 | 
			
		||||
        content: "";
 | 
			
		||||
        position: absolute;
 | 
			
		||||
@ -791,7 +798,7 @@
 | 
			
		||||
        margin-left: 40px;
 | 
			
		||||
        padding-left: 16px;
 | 
			
		||||
 | 
			
		||||
        &:before { //ciara
 | 
			
		||||
        &::before { //ciara
 | 
			
		||||
          display: block;
 | 
			
		||||
          content: "";
 | 
			
		||||
          position: absolute;
 | 
			
		||||
@ -1068,7 +1075,7 @@
 | 
			
		||||
              max-width: 150px;
 | 
			
		||||
              background-color: #ffffff;
 | 
			
		||||
 | 
			
		||||
              &:before {
 | 
			
		||||
              &::before {
 | 
			
		||||
                content: ' ';
 | 
			
		||||
                display: inline-block;
 | 
			
		||||
                height: 100%;
 | 
			
		||||
@ -1222,7 +1229,7 @@
 | 
			
		||||
      .form {
 | 
			
		||||
        #avatar-arrow;
 | 
			
		||||
 | 
			
		||||
        &:after {
 | 
			
		||||
        &::after {
 | 
			
		||||
          border-right-color: #ffffff;
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
@ -1362,7 +1369,7 @@
 | 
			
		||||
      .content {
 | 
			
		||||
        #avatar-arrow;
 | 
			
		||||
 | 
			
		||||
        &:after {
 | 
			
		||||
        &::after {
 | 
			
		||||
          border-right-color: #ffffff;
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
@ -1596,7 +1603,7 @@
 | 
			
		||||
      padding-right: 2px;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    > div:after {
 | 
			
		||||
    > div::after {
 | 
			
		||||
      clear: both;
 | 
			
		||||
      content: "";
 | 
			
		||||
      display: block;
 | 
			
		||||
@ -2799,7 +2806,7 @@
 | 
			
		||||
  box-shadow: 0 0 0 3px var(--color-primary-alpha-30) !important;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.comment:target .header:before {
 | 
			
		||||
.comment:target .header::before {
 | 
			
		||||
  border-right-color: var(--color-primary) !important;
 | 
			
		||||
  filter: drop-shadow(-3px 0 0 var(--color-primary-alpha-30)) !important;
 | 
			
		||||
}
 | 
			
		||||
@ -2917,8 +2924,8 @@
 | 
			
		||||
 | 
			
		||||
#avatar-arrow {
 | 
			
		||||
 | 
			
		||||
  &:before,
 | 
			
		||||
  &:after {
 | 
			
		||||
  &::before,
 | 
			
		||||
  &::after {
 | 
			
		||||
    right: 100%;
 | 
			
		||||
    top: 20px;
 | 
			
		||||
    border: solid transparent;
 | 
			
		||||
@ -2929,13 +2936,13 @@
 | 
			
		||||
    pointer-events: none;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  &:before {
 | 
			
		||||
  &::before {
 | 
			
		||||
    border-right-color: var(--color-secondary);
 | 
			
		||||
    border-width: 9px;
 | 
			
		||||
    margin-top: -9px;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  &:after {
 | 
			
		||||
  &::after {
 | 
			
		||||
    border-right-color: var(--color-box-header);
 | 
			
		||||
    border-width: 8px;
 | 
			
		||||
    margin-top: -8px;
 | 
			
		||||
@ -3323,7 +3330,7 @@ td.blob-excerpt {
 | 
			
		||||
  background: none !important;
 | 
			
		||||
 | 
			
		||||
  @media only screen and (max-width: 1200px) {
 | 
			
		||||
    &:after {
 | 
			
		||||
    &::after {
 | 
			
		||||
      background: none !important;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
@ -96,7 +96,7 @@
 | 
			
		||||
      padding-top: 6px;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    &:after {
 | 
			
		||||
    &::after {
 | 
			
		||||
      clear: both;
 | 
			
		||||
      content: "";
 | 
			
		||||
      display: block;
 | 
			
		||||
 | 
			
		||||
@ -12,7 +12,7 @@
 | 
			
		||||
  overflow: hidden !important;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.is-loading:after {
 | 
			
		||||
.is-loading::after {
 | 
			
		||||
  content: "";
 | 
			
		||||
  position: absolute;
 | 
			
		||||
  display: block;
 | 
			
		||||
 | 
			
		||||
@ -4,9 +4,19 @@
 | 
			
		||||
.js { justify-content: flex-start !important; }
 | 
			
		||||
.je { justify-content: flex-end !important; }
 | 
			
		||||
.sb { justify-content: space-between !important; }
 | 
			
		||||
.mono { font-family: var(--fonts-monospace); font-size: .9em; /* compensate for monospace fonts being usually slighty larger */ }
 | 
			
		||||
.fc { flex-direction: column !important; }
 | 
			
		||||
.f1 { flex: 1 !important; }
 | 
			
		||||
.rounded { border-radius: var(--border-radius) !important; }
 | 
			
		||||
.word-break { word-wrap: break-word; word-break: break-all; }
 | 
			
		||||
 | 
			
		||||
.mono {
 | 
			
		||||
  font-family: var(--fonts-monospace) !important;
 | 
			
		||||
  font-size: .9em !important; /* compensate for monospace fonts being usually slighty larger */
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.word-break {
 | 
			
		||||
  word-wrap: break-word !important;
 | 
			
		||||
  word-break: break-all !important;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.m-0 { margin: 0 !important; }
 | 
			
		||||
.m-1 { margin: .125rem !important; }
 | 
			
		||||
 | 
			
		||||
@ -4,8 +4,8 @@ html {
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
*,
 | 
			
		||||
*:before,
 | 
			
		||||
*:after {
 | 
			
		||||
*::before,
 | 
			
		||||
*::after {
 | 
			
		||||
  box-sizing: inherit;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -1105,28 +1105,28 @@ a.ui.basic.green.label:hover {
 | 
			
		||||
    border-color: var(--color-secondary);
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  .header:after {
 | 
			
		||||
  .header::after {
 | 
			
		||||
    border-right-color: var(--color-secondary);
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  .merge-section.no-header:after {
 | 
			
		||||
  .merge-section.no-header::after {
 | 
			
		||||
    border-right-color: var(--color-secondary);
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  .header:before {
 | 
			
		||||
  .header::before {
 | 
			
		||||
    border-right-color: var(--color-secondary);
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  .merge-section.no-header:before {
 | 
			
		||||
  .merge-section.no-header::before {
 | 
			
		||||
    border-right-color: #505667;
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.repository.new.issue .comment.form .content:after {
 | 
			
		||||
.repository.new.issue .comment.form .content::after {
 | 
			
		||||
  border-right-color: #353945;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.repository.new.issue .comment.form .content:before {
 | 
			
		||||
.repository.new.issue .comment.form .content::before {
 | 
			
		||||
  border-right-color: #353945;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@ -1151,11 +1151,11 @@ a.ui.basic.green.label:hover {
 | 
			
		||||
  border-right-color: #505667;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.repository .comment.form .content .form:after {
 | 
			
		||||
.repository .comment.form .content .form::after {
 | 
			
		||||
  border-right-color: #353945;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.repository .comment.form .content .form:before {
 | 
			
		||||
.repository .comment.form .content .form::before {
 | 
			
		||||
  border-right-color: var(--color-secondary);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@ -1354,7 +1354,7 @@ td.blob-hunk {
 | 
			
		||||
  border-color: transparent !important;
 | 
			
		||||
 | 
			
		||||
  @media only screen and (max-width: 1200px) {
 | 
			
		||||
    &:after {
 | 
			
		||||
    &::after {
 | 
			
		||||
      background: linear-gradient(to right, transparent 0%, #2a2e3a 100%);
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
@ -1430,60 +1430,60 @@ td.blob-hunk {
 | 
			
		||||
  color: #dbdbdb !important;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ui.checkbox .box:before,
 | 
			
		||||
.ui.checkbox label:before {
 | 
			
		||||
.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 {
 | 
			
		||||
.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 {
 | 
			
		||||
.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 {
 | 
			
		||||
.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 {
 | 
			
		||||
.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 {
 | 
			
		||||
.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 {
 | 
			
		||||
.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 ~ .box::after,
 | 
			
		||||
.ui.checkbox input:focus ~ label,
 | 
			
		||||
.ui.checkbox input:focus ~ label:after {
 | 
			
		||||
.ui.checkbox input:focus ~ label::after {
 | 
			
		||||
  color: #9a9a9a;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@ -1572,7 +1572,7 @@ td.blob-hunk {
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.bottom-line,
 | 
			
		||||
.bottom-line:after {
 | 
			
		||||
.bottom-line::after {
 | 
			
		||||
  border-color: #4e525e !important;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@ -1966,30 +1966,6 @@ a.ui.labels .label:hover {
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ui.loading.segment:before {
 | 
			
		||||
  background: #353945;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ui.popup {
 | 
			
		||||
  background-color: #383c4a;
 | 
			
		||||
  color: var(--color-secondary-dark-6);
 | 
			
		||||
  border-color: var(--color-secondary);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ui.popup:before {
 | 
			
		||||
  box-shadow: 1px 1px 0 0 var(--color-secondary);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ui.popup.top:before,
 | 
			
		||||
.ui.popup.bottom:before {
 | 
			
		||||
  background-color: #383c4a;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ui.bottom.left.popup:before,
 | 
			
		||||
.ui.bottom.right.popup:before {
 | 
			
		||||
  box-shadow: -1px -1px 0 0 var(--color-secondary);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.markdown:not(code) h1 {
 | 
			
		||||
  border-bottom-color: #888;
 | 
			
		||||
}
 | 
			
		||||
@ -2095,7 +2071,7 @@ img[src$="/img/matrix.svg"] {
 | 
			
		||||
  filter: invert(84%) hue-rotate(180deg);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.is-loading:after {
 | 
			
		||||
.is-loading::after {
 | 
			
		||||
  border-color: #4a4c58 #4a4c58 #d7d7da #d7d7da;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user