New upstream version 1.66.0+dfsg1

[rustc.git] / src / librustdoc / html / static / css / settings.css

diff --git a/src/librustdoc/html/static/css/settings.css b/src/librustdoc/html/static/css/settings.css
index fb8990b30e2edc3803b3c839de85fd2f5f964a9f..83939f63b4e852e672dfc5837b25ac32ac604c81 100644 (file)
--- a/src/librustdoc/html/static/css/settings.css
+++ b/src/librustdoc/html/static/css/settings.css
@@ -1,76 +1,68 @@
 .setting-line {
-       padding: 5px;
+       margin: 0.6em 0 0.6em 0.3em;
        position: relative;
 }
 
-.setting-line > div {
-       display: inline-block;
-       vertical-align: top;
-       font-size: 17px;
-       padding-top: 2px;
+.setting-line .choices {
+       display: flex;
+       flex-wrap: wrap;
 }
 
-.setting-line > .title {
-       font-size: 19px;
-       width: 100%;
-       max-width: none;
-       border-bottom: 1px solid;
+.setting-line .radio-line input {
+       margin-right: 0.3em;
+       height: 1.2rem;
+       width: 1.2rem;
+       color: inherit;
+       border: 1px solid currentColor;
+       outline: none;
+       -webkit-appearance: none;
+       cursor: pointer;
+       border-radius: 50%;
 }
-
-.toggle {
-       position: relative;
-       display: inline-block;
-       width: 45px;
-       height: 27px;
-       margin-right: 20px;
+.setting-line .radio-line input + span {
+       padding-bottom: 1px;
 }
 
-.toggle input {
-       opacity: 0;
-       position: absolute;
+.radio-line .setting-name {
+       width: 100%;
 }
 
-.select-wrapper {
-       float: right;
-       position: relative;
-       height: 27px;
-       min-width: 25%;
+.radio-line .choice {
+       margin-top: 0.1em;
+       margin-bottom: 0.1em;
+       min-width: 3.8em;
+       padding: 0.3em;
+       display: flex;
+       align-items: center;
+       cursor: pointer;
+}
+.radio-line .choice + .choice {
+       margin-left: 0.5em;
 }
 
-.select-wrapper select {
-       appearance: none;
-       -moz-appearance: none;
-       -webkit-appearance: none;
-       background: none;
-       border: 2px solid #ccc;
-       padding-right: 28px;
+.toggle {
+       position: relative;
        width: 100%;
+       margin-right: 20px;
+       display: flex;
+       align-items: center;
+       cursor: pointer;
 }
 
-.select-wrapper img {
-       pointer-events: none;
+.toggle input {
+       opacity: 0;
        position: absolute;
-       right: 0;
-       bottom: 0;
-       background: #ccc;
-       height: 100%;
-       width: 28px;
-       padding: 0px 4px;
-}
-
-.select-wrapper select option {
-       color: initial;
 }
 
 .slider {
-       position: absolute;
+       position: relative;
+       width: 45px;
+       min-width: 45px;
+       display: block;
+       height: 28px;
+       margin-right: 20px;
        cursor: pointer;
-       top: 0;
-       left: 0;
-       right: 0;
-       bottom: 0;
        background-color: #ccc;
-       -webkit-transition: .3s;
        transition: .3s;
 }
 
@@ -81,22 +73,10 @@
        width: 19px;
        left: 4px;
        bottom: 4px;
-       background-color: white;
-       -webkit-transition: .3s;
        transition: .3s;
 }
 
-input:checked + .slider {
-       background-color: #2196F3;
-}
-
-input:focus + .slider {
-       box-shadow: 0 0 0 2px #0a84ff, 0 0 0 6px rgba(10, 132, 255, 0.3);
-}
-
 input:checked + .slider:before {
-       -webkit-transform: translateX(19px);
-       -ms-transform: translateX(19px);
        transform: translateX(19px);
 }
 
@@ -105,3 +85,26 @@ input:checked + .slider:before {
        width: 100%;
        display: block;
 }
+
+#settings .setting-line {
+       margin: 1.2em 0.6em;
+}
+
+.setting-line .radio-line input:checked {
+       box-shadow: inset 0 0 0 3px var(--main-background-color);
+       background-color: var(--settings-input-color);
+}
+.setting-line .radio-line input:focus {
+       box-shadow: 0 0 1px 1px var(--settings-input-color);
+}
+/* In here we combine both `:focus` and `:checked` properties. */
+.setting-line .radio-line input:checked:focus {
+       box-shadow: inset 0 0 0 3px var(--main-background-color),
+               0 0 2px 2px var(--settings-input-color);
+}
+.setting-line .radio-line input:hover {
+       border-color: var(--settings-input-color) !important;
+}
+input:checked + .slider {
+       background-color: var(--settings-input-color);
+}