File

style-hg.css @ 10:ee33ee14040a draft

use `<h3>` for `breadcrumb`.
author Trần H. Trung <xmpp:trần.h.trung@trung.fun>
date Sun, 30 Jul 2023 01:28:17 +0700
parent 0:2f78b9100113
child 11:168c2affd4ab
line wrap: on
line source

body {
  margin: 0;
  padding: 0;
  background: var(--color_background);
  color: var(--color_foreground);
  font-family: sans-serif;
}

.container {
  padding-left: 115px;
}

/*
.main {
    top: 20rem;
}

#.main {
  width: 98%;
}
*/

.overflow {
  width: 100%;
  overflow: auto;
}

/*.main>main { margin-left: 5rem !important; }*/

.menu {
  margin-left: auto;
  /*margin-right: 5rem;*/
  margin-bottom: auto;
  text-align: right;
  padding: 2rem;
  background: transparent;
  transition: background 0.5s ease-in-out;
  position: sticky;
  top: 17.4rem;
  flex-shrink: 12;
}
.menu:hover { background: var(--color_background_main); }
.dd-hover.menu { position: sticky; }

@media (min-width: 960px) { body>.logo { display: none; } }
@media not (min-width: 960px) {
    .menu { padding: 0.5rem; }
    .menu>.logo { display: none; }
    .menu>.dd-content { display: block !important; width: 0.25rem; }
    body>.logo { display: block; }
    main { margin-left: 1rem !important; }
}

.menu ul {
  list-style: none;
  padding: 0;
  margin: 10px 0 0 0;
  border-right: 2px solid #999;
}

.menu li {
  margin-bottom: 3px;
  padding: 2px 4px;
  background: var(--color_background);
  color: var(--color_foreground);
  font-weight: normal;
}

.menu li.active {
  font-weight: bold;
}

.menu img {
  border: 0;
}

div.atom-logo {
  margin-top: 10px;
}

.atom-logo img, .rss-logo img {
  width: 14px;
  height: 14px;
  border: 0;
}
img.atom-logo { filter: invert(100%); -webkit-filter: invert(100%); }

.menu a { color: var(--color_foreground); display: block; }

.search { text-align: center; }

form.search div#hint {
  display: block;
  position: relative;
  margin: auto;
  width: 72%;
  padding: 1.4rem;
  background: var(--color_background_border);
  text-align: center;
  border: 1px solid var(--color_heading_main);
  border-radius: 5px;
  z-index: 15;
}

a { text-decoration:none; }
.age { white-space:nowrap; }
.date { white-space:nowrap; }
.indexlinks { white-space:nowrap; }
.parity0,
.stripes4 > :nth-child(4n+1),
.stripes2 > :nth-child(2n+1) { background-color: var(--color_odd); }
.parity1,
.stripes4 > :nth-child(4n+3),
.stripes2 > :nth-child(2n+2) { background-color: var(--color_even); }
.plusline { color: green; }
.minusline { color: #dc143c; } /* crimson */
.atline { color: var(--color_heading_sub); }

.diffstat-table {
  margin-top: 1em;
}
.diffstat-file {
  white-space: nowrap;
  font-size: 90%;
}
.diffstat-total {
  white-space: nowrap;
  font-size: 90%;
}
.diffstat-graph {
  width: 100%;
}
.diffstat-add {
  background-color: green;
  float: left;
}
.diffstat-remove {
  background-color: red;
  float: left;
}

.navigate {
  text-align: right;
  margin: 1em 0;
}

.phase {
  color: #999;
  font-size: 70%;
  border-bottom: 1px dotted #999;
  font-weight: normal;
  margin-left: .5em;
  vertical-align: baseline;
}

.obsolete {
  color: #999;
  font-size: 70%;
  border-bottom: 1px dashed #999;
  font-weight: normal;
  margin-left: .5em;
  vertical-align: baseline;
}

.instability {
  color: var(--color_foreground);
  font-size: 70%;
  border-bottom: 1px solid #000;
  font-weight: normal;
  margin-left: .5em;
  vertical-align: baseline;
}

.tag {
  color: #999;
  font-size: 70%;
  font-weight: normal;
  margin-left: .5em;
  vertical-align: baseline;
}

.branchhead {
  color: var(--color_foreground);
  font-size: 80%;
  font-weight: normal;
  margin-left: .5em;
  vertical-align: baseline;
}

ul#graphnodes .branchhead {
  font-size: 75%;
}

.branchname {
  color: var(--color_foreground);
  font-size: 60%;
  font-weight: normal;
  margin-left: .5em;
  vertical-align: baseline;
}

/* Common */
pre { font-family: 'FreeMono'; font-weight: bold; }
/*
pre { margin: 0; }

h2 { font-size: 120%; border-bottom: 1px solid #999; }
h2 a { color: var(--color_foreground); }
h3 {
  margin-top: +.7em;
  font-size: 100%;
}
*/

/* log and tags tables */
.bigtable {
  border-bottom: 1px solid #999;
  border-collapse: collapse;
  font-size: 90%;
  width: 100%;
  font-weight: normal;
  text-align: left;
}

.bigtable td {
  padding: 1px 4px;
  vertical-align: top;
}

.bigtable th {
  padding: 1px 4px;
  border-bottom: 1px solid #999;
}
.bigtable tr { border: none; }
tr { background-color: var(--color_background_border); }
.bigtable .age { width: 7em; }
.bigtable .author { width: 15em; }
.bigtable .description { }
.bigtable .description .base { font-size: 70%; float: right; line-height: 1.66; }
.bigtable .node { width: 5em; font-family: monospace;}
.bigtable .permissions { width: 8em; text-align: left;}
.bigtable .size { width: 5em; text-align: right; }
.bigtable .annotate { text-align: right; }
.bigtable td.annotate { font-size: smaller; }
.bigtable td.source { font-size: inherit; }
tr.thisrev a { color:#999999; text-decoration: none; }
tr.thisrev td.source { color:#009900; }
td.annotate {
  white-space: nowrap;
}
div.annotate-info {
  z-index: 5;
  display: none;
  position: absolute;
  background-color: var(--color_background);
  border: 1px solid #999;
  text-align: left;
  color: var(--color_foreground);
  padding: 5px;
}
div.annotate-info a { color: var(--color_heading_main); }
td.annotate:hover div.annotate-info { display: inline; }

#diffopts-form {
  font-size: smaller;
  color: var(--color_foreground);
  padding-bottom: 10px;
  display: none;
}

.source, .sourcefirst {
  font-family: monospace;
  white-space: pre;
  padding: 1px 4px;
  font-size: 90%;
}
.sourcefirst {
    border-bottom: 1px solid #999;
    font-weight: bold;
 }
.source a { color: #999; font-size: smaller; font-family: monospace;}

.sourcelines {
  position: relative;
  counter-reset: lineno;
}

.wrap > span {
    white-space: pre-wrap;
}

.linewraptoggle {
    float: right;
}

.diffblocks { 
    counter-reset: lineno;
}
.diffblocks > div {
    font-family: 'FreeMono' !important;
    counter-increment: lineno;
    border: 1px solid #888;
    border-radius: 0.3125rem;
    margin-top: 0.5rem;
}

.sourcelines > span {
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
  padding: 1px 0px 1px 5em;
  counter-increment: lineno;
}

.sourcelines > span:before {
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  display: inline-block;
  margin-left: -6em;
  width: 4em;
  font-size: smaller;
  /*color: #999;*/
  text-align: right;
  content: counters(lineno, ".");
  float: left;
}

.sourcelines > span:after {
  content: '';
  display: inline-block;
}

.sourcelines > span:target, tr:target td {
  background-color: #bfdfff;
}

/* Followlines */
tbody.sourcelines > tr.followlines-selected,
pre.sourcelines > span.followlines-selected {
  background-color: #99C7E9;
}

div#followlines {
  background-color: var(--color_background);
  border: 1px solid #999;
  padding: 5px;
  position: fixed;
}

div.followlines-cancel {
  text-align: right;
}

div.followlines-cancel > button {
  line-height: 80%;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background-color: inherit;
  font-weight: bold;
}

div.followlines-cancel > button:hover {
  color: var(--color_background);
  background-color: #cc241d;
}

div.followlines-link {
  margin: 2px;
  margin-top: 4px;
  font-family: sans-serif;
}

.btn-followlines {
  position: absolute;
  display: none;
  cursor: pointer;
  box-sizing: content-box;
  font-size: 12px;
  width: 13px;
  height: 13px;
  border-radius: 3px;
  margin: 0px;
  margin-top: -2px;
  padding: 0px;
  background-color: #E5FDE5;
  border: 1px solid #9BC19B;
  font-family: monospace;
  text-align: center;
  line-height: 5px;
}

span.followlines-select .btn-followlines {
  margin-left: -1.5em;
}

.btn-followlines:hover {
  transform: scale(1.2, 1.2);
}

.btn-followlines .followlines-plus {
  color: #98971a;
}

.btn-followlines .followlines-minus {
  color: #cc241d;
}

.btn-followlines-end {
  background-color: #ffdcdc;
}

.sourcelines tr:hover .btn-followlines,
.sourcelines span.followlines-select:hover > .btn-followlines {
  display: inline;
}

.btn-followlines-hidden,
.sourcelines tr:hover .btn-followlines-hidden {
  display: none;
}

.sourcelines > a {
    display: inline-block;
    position: absolute;
    left: 0px;
    width: 4em;
    height: 1em;
}

.fileline { font-family: monospace; }
.fileline img { border: 0; }

.tagEntry .closed { color: var(--color_heading_sub); }

/* Changeset entry */
#changesetEntry {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 1em;
}

#changesetEntry th {
  padding: 1px 4px;
  width: 4em;
  text-align: right;
  font-weight: normal;
  vertical-align: top;
}

div.description {
  border-left: 2px solid #999;
  margin: 1em 0 1em 0;
  padding: .3em;
  white-space: pre;
  font-family: monospace;
}

/* Graph */
div#wrapper {
	position: relative;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	margin: 0;
	padding: 0;
}

canvas {
	position: absolute;
	z-index: 5;
	top: -0.7em;
	margin: 0;
}

ul#graphnodes {
	list-style: none inside none;
	padding: 0;
	margin: 0;
}

ul#graphnodes li {
	height: 39px;
	overflow: visible;
}

ul#graphnodes li .fg {
	position: absolute;
	z-index: 10;
}

ul#graphnodes li .info {
	font-size: 70%;
}

/* Comparison */
.legend {
    padding: 1.5% 0 1.5% 0;
}

.legendinfo {
    border: 1px solid #999;
    font-size: 80%;
    text-align: center;
    padding: 0.5%;
}

.equal { background-color: var(--color_background_main); }

.delete {
    background-color: var(--color_alert);
    color: var(--color_background);
    font-weight: bold;
}

.insert {
    background-color: var(--color_links);
    color: var(--color_background);
    font-weight: bold;
}

.replace {
    background-color: var(--color_heading_main);
    color: var(--color_background);
    font-weight: bold;
}

.header {
    text-align: center;
}

.block {
    border-top: 1px solid #999;
}

.breadcrumb { color: gray; }

.scroll-loading {
  -webkit-animation: change_color 1s linear 0s infinite alternate;
  -moz-animation: change_color 1s linear 0s infinite alternate;
  -o-animation: change_color 1s linear 0s infinite alternate;
  animation: change_color 1s linear 0s infinite alternate;
}

@-webkit-keyframes change_color {
  from { background-color: #A0CEFF; } to {  }
}
@-moz-keyframes change_color {
  from { background-color: #A0CEFF; } to {  }
}
@-o-keyframes change_color {
  from { background-color: #A0CEFF; } to {  }
}
@keyframes change_color {
  from { background-color: #A0CEFF; } to {  }
}

.scroll-loading-error {
    background-color: #FFCCCC !important;
}

/* Fix main css */
img { 
    filter: none;
}
.main>main {
    width: auto !important;
    max-width: 100% !important;
    margin-top: 2rem !important;
}