tweak about:version css

Author: Alex313031

src/components/version_ui/resources/about_version.css

@@ -0,0 +1,137 @@
+/* Copyright 2024 The Chromium Authors and Alex313031
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file. */
+
+html {
+  --google-grey-200-rgb: 232, 234, 237;
+  --google-grey-200: rgb(var(--google-grey-200-rgb));
+  --google-grey-900-rgb: 32, 33, 36;
+  --google-grey-900: rgb(var(--google-grey-900-rgb));
+  --primary-color: var(--google-grey-900);
+  --active-background-color: rgba(var(--google-grey-900-rgb), .16);
+  --hover-background-color: rgba(var(--google-grey-900-rgb), .1);
+  --background-color: white;
+  background: var(--background-color);
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    --primary-color: var(--google-grey-200);
+    --active-background-color: rgba(var(--google-grey-200-rgb), .16);
+    --hover-background-color: rgba(var(--google-grey-200-rgb), .1);
+    --background-color: var(--google-grey-900);
+    background: var(--background-color);
+  }
+}
+
+body {
+  color: var(--primary-color);
+  font-size: 100%;
+  margin: 0;
+}
+
+#outer {
+  margin-inline-end: auto;
+  margin-inline-start: auto;
+  margin-top: 10px;
+  min-width: 800px;
+  width: 60%;
+}
+
+#inner {
+  padding-top: 10px;
+  word-break: break-word;
+}
+
+.label {
+  font-size: 0.9em;
+  font-weight: bold;
+  padding-inline-end: 5px;
+  text-align: end;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.label::after {
+  content: ':';
+}
+
+#logo {
+  float: right;
+  margin-inline-start: 40px;
+  text-align: end;
+  width: 256px;
+}
+
+#company {
+  font-size: 0.7em;
+  text-align: end;
+}
+
+#copyright {
+  font-size: 0.7em;
+  text-align: end;
+}
+
+#useragent {
+  font-family: monospace;
+}
+
+.version {
+  font-family: monospace;
+  max-width: 430px;
+  padding-inline-start: 5px;
+  vertical-align: bottom;
+}
+
+.version-wide {
+  font-family: monospace;
+  max-width: auto;
+  padding-inline-start: 5px;
+  vertical-align: bottom;
+}
+
+#copy-to-clipboard,
+#copy-os-content-to-clipboard {
+  background-color: var(--background-color);
+  border: none;
+  border-radius: 2px;
+  cursor: pointer;
+}
+
+#copy-to-clipboard-icon {
+  -webkit-mask-image: url(chrome://resources/images/icon_copy_content.svg);
+  -webkit-mask-size: cover;
+  background: none;
+  background-color: var(--primary-color);
+  display: inline-block;
+  height: 1em;
+  padding: 0;
+  position: relative;
+  top: .2em;
+  width: 1em;
+}
+
+@media (forced-colors: active) {
+  #copy-to-clipboard-icon {
+    background-color: ButtonText;
+  }
+}
+
+#copy-to-clipboard:hover,
+#copy-os-content-to-clipboard:hover {
+  background-color: var(--hover-background-color);
+}
+
+#copy-to-clipboard:active,
+#copy-os-content-to-clipboard:active {
+  background-color: var(--active-background-color);
+}
+
+#messages {
+  clip: rect(0 0 0 0);
+  height: 1px;
+  overflow: hidden;
+  position: fixed;
+  width: 1px;
+}