diff options
Diffstat (limited to 'config/qutebrowser/startpage/css')
| -rwxr-xr-x | config/qutebrowser/startpage/css/main.css | 204 |
1 files changed, 204 insertions, 0 deletions
diff --git a/config/qutebrowser/startpage/css/main.css b/config/qutebrowser/startpage/css/main.css new file mode 100755 index 0000000..aa46c6b --- /dev/null +++ b/config/qutebrowser/startpage/css/main.css @@ -0,0 +1,204 @@ +@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); +.roboto { + font-family: "Roboto", sans-serif; } + +@font-face { + font-family: "JetBrains Mono"; + src: url("../fonts/woff/JetBrainsMono-Regular.woff") format("woff"), url("../fonts/woff2/JetBrainsMono-Regular.woff2") format("woff2"); } + +.jetbrains-mono, body { + font-family: "JetBrains Mono"; } + +body { + height: 97.5vh; + display: flex; + align-items: center; + justify-content: center; + background: #212121; + color: #fff; } + @media screen and (max-height: 501px) { + body { + display: block; + height: 100vh; } } +.main { + width: 100%; + text-align: center; } + .main #date h2 { + padding-top: 15px; + display: inline-block; + vertical-align: top; } + .main #date-text, + .main #weather-text { + color: #d9d9d9; } + .main #message-text { + font-size: 23px; } + .main #search-bar { + width: 50%; + margin: 0 auto 50px auto; + height: 45px; + padding-top: 35px; + position: relative; + display: inline-block; } + .main #search-bar #search-bar-input { + height: 50px; + width: 100%; + background: #2e2e2e; + box-shadow: none; + border: none; + text-align: center; + border-radius: 6px; + outline: none; + padding: 7px 14px; + font-size: 18px; + color: #fff; + box-sizing: border-box; } + .main #search-bar #search-bar-input:focus { + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } + .main #search-bar .autocomplete-items-container { + position: absolute; + top: 100%; + left: 0; + right: 0; + z-index: 99; + border-radius: 6px; + background: #2e2e2e; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } + .main #search-bar .autocomplete-items-container .autocomplete-item { + width: 100%; + background: #2e2e2e; + box-shadow: none; + border: none; + text-align: center; + outline: none; + padding: 7px 14px; + font-size: 18px; + color: #fff; + box-sizing: border-box; + z-index: -1; + cursor: pointer; } + .main #search-bar .autocomplete-items-container .autocomplete-item:hover { + background: #3b3b3b; } + .main #search-bar .autocomplete-items-container .autocomplete-active { + background: #353535; } + @media only screen and (max-width: 791px) { + .main #search-bar { + width: 65%; } } + .main #other-content { + margin: 40px auto; + padding: 10px 0; } + .main #other-content .sqr { + vertical-align: top; + display: inline-block; + margin-left: 5px; + margin-right: 5px; + width: 170px; + background: #2e2e2e; + padding: 15px 15px; + border-radius: 6px; + min-height: 150px; + margin-top: 10px; } + .main #other-content .sqr h4 { + font-size: 18px; + margin: 15px; } + .main #other-content .sqr h4 a { + color: inherit; + font-size: inherit; } + .main #other-content .sqr:hover { + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } + .main #other-content .sqr a { + color: #9e9e9e; + font-size: 16px; + transition: 0.1s ease-in; + display: block; + text-decoration: none; + line-height: 22px; } + .main #other-content .sqr a:hover { + color: #fff; + text-decoration: none; + transition: 0.1s ease-in; } + .main #other-content .media h4, + .main #other-content .media a:hover { + color: #4dd0e1; } + .main #other-content .work h4, + .main #other-content .work a:hover { + color: #f06292; } + .main #other-content .social h4, + .main #other-content .social a:hover { + color: #fff176; } + .main #other-content .others h4, + .main #other-content .others a:hover { + color: #81c784; } + .main #other-content .funky h4, + .main #other-content .funky a:hover { + color: #4db6ac; } + .main #other-content .purple h4, + .main #other-content .purple a:hover { + color: #9575cd; } + .main #other-content .upvoty h4, + .main #other-content .upvoty a:hover { + color: #ff8a65; } + .main #other-content .indigo h4, + .main #other-content .indigo a:hover { + color: #7986cb; } + .main #other-content .foxxy h4, + .main #other-content .foxxy a:hover { + color: #a1887f; } + +.settings-modal { + display: none; + position: fixed; + z-index: 3; + width: 80vw; + height: 80vh; + overflow: auto; + background: #fff; + color: #212121; + padding: 15px; } + .settings-modal .modal-content { + width: 100%; + height: 100%; } + .settings-modal .close { + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; } + .settings-modal .close:hover, .settings-modal .close:focus { + color: black; + text-decoration: none; + cursor: pointer; } + .settings-modal .release { + color: #6b7280; } + .settings-modal .update--available { + visibility: hidden; + color: #6b7280; } + .settings-modal .backup-import { + display: flex; + align-items: center; } + .settings-modal .backup-import .btn { + box-shadow: none; + border: none; + text-align: center; + border-radius: 5px; + padding: 4px 16px; + cursor: pointer; + font-size: medium; + color: white; + background-color: #37474F; } + .settings-modal .backup-import .import-btn { + margin-left: 10px; } + +#settings-cog { + width: 23px; + height: 23px; + position: absolute; + bottom: 25px; + right: 25px; + transition: 2s ease-in; + display: none; } + #settings-cog:hover .cog { + fill: white; + stroke: white; + transition: 2s ease-in; } |