Cope with non-ASCII $site_name
[gitweb] / static / gitweb.css
index 78bed54b1d93f4ecff3418e9a4605ba0a56559bf..5560823953ef439a7cb2265a1c19b841b994ecf5 100644 (file)
@@ -8,8 +8,28 @@ body {
        margin: 0;
        background-color: #ffffff;
        color: #000000;
+       /*display: flex;
+       flex-direction: column;*/
+}
+
+.cards {
        display: flex;
        flex-direction: column;
+       gap: 1rem;
+       margin: 1rem;
+}
+
+.cards > article {
+       border: 1px solid #ddd;
+}
+
+.cards > article > .header > .title {
+       --card-title-pad-left: 0.5rem;
+       padding: 0.25rem 0.5rem;
+}
+
+.cards > article > table {
+       padding: 0;
 }
 
 a {
@@ -76,18 +96,23 @@ div.page_nav a:visited {
        color: #0000cc;
 }
 
+.page_nav .current {
+       font-weight: bold;
+}
+
 div.page_path {
-       padding: 8px;
+       padding: 0.5rem 1rem;
        font-weight: bold;
-       border: solid #d9d8d1;
+       border: solid #ddd;
        border-width: 0px 0px 1px;
 }
 
-footer {
+.page_footer {
        margin-top: auto;
+       margin-top: 2rem;
        display: flex;
-       padding: 4px 8px;
-       background-color: #d9d8d1;
+       padding: 0.5rem 1rem;
+       background-color: #ddd;
        justify-content: flex-end;
 }
 
@@ -99,22 +124,22 @@ div.page_footer_text {
 }
 
 div#generating_info {
-       margin: 4px;
+       margin: 0.5rem 1rem;
        font-size: smaller;
        text-align: center;
        color: #505050;
 }
 
 div.page_body {
-       padding: 8px;
+       padding: 0.5rem 1rem;
        font-family: monospace;
 }
 
 div.title, a.title {
        display: block;
-       padding: 6px 8px;
+       padding: 0.5rem 1rem;
        font-weight: bold;
-       background-color: #edece6;
+       background-color: #ddd;
        text-decoration: none;
        color: #000000;
 }
@@ -124,39 +149,46 @@ div.readme {
 }
 
 a.title:hover {
-       background-color: #d9d8d1;
+       background-color: #ccc;
 }
 
 div.title_text {
-       padding: 6px 0px;
-       border: solid #d9d8d1;
+       padding: 0;
+       border: solid #ccc;
        border-width: 0px 0px 1px;
-       font-family: monospace;
+}
+
+:root {
+       /* FIXME: not good, too tied to the font, restructure */
+       --log-sidebar-width: 10rem;
 }
 
 div.log_body {
-       padding: 8px 8px 8px 150px;
+       padding: 8px 8px 8px var(--log-sidebar-width);
 }
 
-span.age {
-       position: relative;
-       float: left;
-       width: 142px;
+time {
        font-style: italic;
 }
 
+time.age {
+       float: left;
+       /* From .cards > article > .header > .title padding-left; eww, TODO tidy all this up */
+       width: calc(var(--log-sidebar-width) - var(--card-title-pad-left));
+}
+
 span.signoff {
        color: #888888;
 }
 
 div.log_link {
-       padding: 0px 8px;
-       font-size: 70%;
+       padding: 0 0.5rem;
+       font-size: 80%;
        font-family: sans-serif;
        font-style: normal;
        position: relative;
        float: left;
-       width: 136px;
+       width: calc(var(--log-sidebar-width) - 0.5rem - 0.5rem);
 }
 
 div.list_head {
@@ -210,12 +242,15 @@ a.text:hover {
 }
 
 table {
-       padding: 8px 4px;
+       padding: 0.5rem 1rem;
        border-spacing: 0;
 }
+table.tree {
+       padding: 0;
+}
 
 table.diff_tree {
-       font-family: monospace;
+       font-family: monospace,m;
 }
 
 table.combined.diff_tree th {
@@ -246,31 +281,25 @@ table.blame {
 
 table.blame td {
        padding: 0px 5px;
-       font-size: 100%;
        vertical-align: top;
 }
 
 th {
        padding: 2px 5px;
-       font-size: 100%;
        text-align: left;
 }
 
-/* do not change row style on hover for 'blame' view */
-tr.light,
-table.blame .light:hover {
-       background-color: #ffffff;
+th:first-child {
+       padding-left: 0;
 }
 
-tr.dark,
-table.blame .dark:hover {
-       background-color: #f6f6f0;
+/* do not change row style on hover for 'blame' view */
+tr.light {
+       background-color: #ffffff;
 }
 
-/* currently both use the same, but it can change */
-tr.light:hover,
-tr.dark:hover {
-       background-color: #edece6;
+tr.dark {
+       background-color: #f6f6f6;
 }
 
 /* boundary commits in 'blame' view */
@@ -286,15 +315,13 @@ tr.color2 { background-color: #f6f6ff; }
 tr.color3 { background-color: #fff6f6; }
 
 td {
-       padding: 2px 5px;
-       font-size: 100%;
-       vertical-align: top;
+       padding: 0.25rem 0.5rem;
 }
 
 td.link, td.selflink {
        padding: 2px 5px;
        font-family: sans-serif;
-       font-size: 70%;
+       font-size: 80%;
 }
 
 td.selflink {
@@ -302,7 +329,7 @@ td.selflink {
 }
 
 td.sha1 {
-       font-family: monospace;
+       font-family: monospace,m;
 }
 
 .error {
@@ -374,13 +401,12 @@ table.blame td.age0 {
 }
 
 td.pre, div.pre, div.diff {
-       font-family: monospace;
-       font-size: 12px;
+       font-family: monospace,m;
        white-space: pre;
 }
 
 td.mode {
-       font-family: monospace;
+       font-family: monospace,m;
 }
 
 /* progress of blame_interactive */
@@ -396,7 +422,7 @@ div#progress_info {
 
 /* format of (optional) objects size in 'tree' view */
 td.size {
-       font-family: monospace;
+       font-family: monospace,m;
        text-align: right;
 }
 
@@ -408,13 +434,8 @@ div.diff.extended_header {
 
 div.diff.header {
        font-weight: bold;
-
-       background-color: #edece6;
-
-       margin-top: 4px;
-       padding: 4px 0px 2px 0px;
-       border: solid #d9d8d1;
-       border-width: 1px 0px 1px 0px;
+       background-color: #eee;
+       box-shadow: inset 0 1px #0003;
 }
 
 div.diff.header a.path {
@@ -424,16 +445,17 @@ div.diff.header a.path {
 div.diff.extended_header,
 div.diff.extended_header a.path,
 div.diff.extended_header a.hash {
-       color: #777777;
+       color: #333;
 }
 
 div.diff.extended_header .info {
-       color: #b0b0b0;
+       opacity: 0.5;
 }
 
-div.diff.extended_header {
-       background-color: #f6f5ee;
-       padding: 2px 0px 2px 0px;
+div.diff.extended_header,
+div.diff.from_file,
+div.diff.to_file {
+       background-color: #eee;
 }
 
 div.diff a.list,
@@ -450,28 +472,28 @@ div.diff a.hash:hover {
 
 div.diff.to_file a.path,
 div.diff.to_file {
-       color: #007000;
+       color: #060;
 }
 
 div.diff.add {
-       color: #008800;
+       background-color: #dfd;
 }
 
-div.diff.add span.marked {
-       background-color: #aaffaa;
+div.diff.add mark {
+       background-color: #afa;
 }
 
 div.diff.from_file a.path,
 div.diff.from_file {
-       color: #aa0000;
+       color: #900;
 }
 
 div.diff.rem {
-       color: #cc0000;
+       background-color: #fdd;
 }
 
-div.diff.rem span.marked {
-       background-color: #ffaaaa;
+div.diff.rem mark {
+       background-color: #faa;
 }
 
 div.diff.chunk_header a,
@@ -480,9 +502,6 @@ div.diff.chunk_header {
 }
 
 div.diff.chunk_header {
-       border: dotted #ffe0ff;
-       border-width: 1px 0px 0px 0px;
-       margin-top: 2px;
 }
 
 div.diff.chunk_header span.chunk_info {
@@ -491,6 +510,7 @@ div.diff.chunk_header span.chunk_info {
 
 div.diff.chunk_header span.section {
        color: #aa22aa;
+       font-style: italic;
 }
 
 div.diff.incomplete {
@@ -569,7 +589,7 @@ a.rss_logo {
        background-color: #ff6600;
        font-weight: bold;
        font-family: sans-serif;
-       font-size: 70%;
+       font-size: 80%;
        text-align: center;
        text-decoration: none;
 }
@@ -588,7 +608,7 @@ a.rss_logo.generic:hover {
 
 span.refs span {
        padding: 0px 4px;
-       font-size: 70%;
+       font-size: 80%;
        font-weight: normal;
        border: 1px solid;
        background-color: #ffaaff;
@@ -623,14 +643,6 @@ span.refs span.head {
        border-color: #ccffcc #00cc33 #00cc33 #ccffcc;
 }
 
-span.atnight {
-       color: #cc0000;
-}
-
-span.match {
-       color: #e00000;
-}
-
 div.binary {
        font-style: italic;
 }
@@ -661,15 +673,9 @@ div.remote {
        /* float: right; */
        position: absolute;
        top: 0px; right: 0px;
-       border:  1px solid green;
-       margin:  1px 1px 1px 1px;
-       padding-bottom: 2px;
-       width:     12px;
-       height:    10px;
-       font-size:  9px;
+       border: none;
        font-weight: bold;
-       text-align: center;
-       background-color: #fff0f0;
+       background-color: transparent;
        cursor: pointer;
 }