github.com/thanos-io/thanos@v0.32.5/website/static/main.css (about) 1 .color-yellow { 2 color: #ad9c26; 3 } 4 5 .bg-purple { 6 background-color: #6D41FF; 7 } 8 9 .color-purple { 10 color: #6D41FF; 11 } 12 13 .navbar-brand img { 14 height: 32px; 15 margin-right: 10px; 16 max-width: 100%; 17 } 18 19 .navbar-dark .navbar-nav .nav-link { 20 color: #fff; 21 } 22 23 .nav-link:hover { 24 color: rgba(255,255,255,.5) 25 } 26 27 .btn-outline-secondary { 28 color: #6D41FF; 29 border-color: #6D41FF; 30 } 31 32 .btn-outline-secondary:hover, .btn-outline-secondary:active { 33 color: #fff; 34 background-color: #6D41FF !important; 35 border-color: #6D41FF !important; 36 } 37 38 a { 39 color: #6D41FF; 40 } 41 42 pre { 43 padding: 1rem; 44 } 45 46 .list-group-item-docs { 47 color: #6D41FF; 48 padding: 0.5rem; 49 background-color: transparent; 50 } 51 52 .list-group-item-docs:hover { 53 color: #6D41FF; 54 } 55 56 .img-adopter { 57 padding: 15px; 58 background-color: #fff; 59 box-shadow: 0 2px 4px rgba(0,0,0,.1); 60 border: 1px solid #dee2e6; 61 margin: 15px 0 15px; 62 border-radius: .25rem; 63 display: flex; 64 align-items: center; 65 justify-content: center; 66 height: 100px; 67 } 68 69 .img-adopter a { 70 width: 100%; 71 height: 100%; 72 } 73 74 .img-adopter a img { 75 object-fit: contain; 76 width: 100%; 77 height: 100%; 78 } 79 80 .header-anchor { font-size: 100%; visibility: hidden;} 81 h1:hover a, h2:hover a, h3:hover a, h4:hover a { visibility: visible} 82 83 /* seaarchBox */ 84 .searchBox { 85 position: relative; 86 height: 100%; 87 display: flex; 88 align-items: center; 89 } 90 91 input[type="search"] { 92 height: 30px; 93 line-height: 30px; 94 box-sizing: border-box; 95 padding: 0 15px 0 30px; 96 border: 1px solid #e3e3e3; 97 color: #ffffff; 98 outline: none; 99 border-radius: 15px; 100 margin-right: 10px; 101 transition: border-color 0.2s ease; 102 background-color: transparent; 103 background-size: 15px; 104 vertical-align: middle !important; 105 } 106 107 .searchbtn { 108 position: absolute; 109 font-size: 15px; 110 color: #66757f; 111 background-color: transparent; 112 border:none; 113 left: 2%; 114 top: 4px; 115 outline: none; 116 padding: 4px; 117 } 118 119 input[type="search"]:focus { 120 border-color: #42b983; 121 background-color: #fff; 122 color: #273849; 123 } 124 125 input[type="search"]::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ 126 color: #fff; 127 } 128 129 /* SideMenu Collapse */ 130 .docs-menu{ 131 text-transform: capitalize; 132 } 133 134 .menuinput { 135 display: none; 136 } 137 138 .menulabel-docs { 139 cursor: pointer; 140 display: flex; 141 align-items: center; 142 } 143 144 .caret-expand { 145 width: 16px; 146 margin-left: 8px; 147 margin-bottom: 0.2rem; 148 transition: transform 0.2s ease-out; 149 } 150 151 .menuinput:checked + label .caret-expand { 152 transform: rotateX(180deg); 153 } 154 155 .sidemenu-docs .list-group { 156 transform: scaleY(0); 157 height: 0; 158 } 159 160 .menuinput:checked ~ .list-group { 161 transform: scaleY(1); 162 height: auto; 163 } 164 165 @media (max-width: 990px){ 166 .searchbtn { 167 top: 0px; 168 left: 1%; 169 } 170 171 /* navbar toggle icon */ 172 .fa-bars{ 173 display: inline-block; 174 height: 1em; 175 vertical-align: middle; 176 width: 1em; 177 } 178 } 179 180 @media (max-width: 580px) { 181 .list-inline-item { 182 margin-bottom: 1rem; 183 } 184 } 185 186 @media (max-width: 767px) { 187 .hero-logo-container { 188 flex-grow: 1; 189 max-width: 100%; 190 } 191 192 .footer-container { 193 flex-direction: column; 194 } 195 196 .about-section { 197 padding-top: 20px; 198 padding-bottom: 15px; 199 } 200 } 201 202 .blog-post img { 203 width: 100%; 204 }