diff --git a/static/style/style.css b/static/style/style.css index 1e730f29..94289869 100644 --- a/static/style/style.css +++ b/static/style/style.css @@ -40,24 +40,14 @@ } #issues-container { max-width: 640px; - /* margin: 0 auto; */ - /* padding: 0 0 56px; */ - /* overflow: scroll; */ scrollbar-width: none; -ms-overflow-style: none; - /* padding: calc(25vh - 56px) 0; */ padding: 56px 0; - /* display: inline-block; */ - /* flex-grow: 2; */ - /* display: flex; */ - /* flex-direction: column; */ - /* align-items: flex-end; */ transition: 0.25s all cubic-bezier(0, 1, 1, 1); } #issues-container.preview-active { transform: translateX(-50%); } - &::-webkit-scrollbar { display: none; } @@ -67,7 +57,6 @@ #issues-container:hover .issue-element-inner { opacity: 0.5; } - #issues-container * { -webkit-user-select: none; -moz-user-select: none; @@ -92,10 +81,8 @@ border-radius: 4px; cursor: pointer; margin: 8px; - /* background-color: #000; */ filter: blur(4px); display: block; - /* width: 100%; */ } #issues-container > div.active { transition: 125ms all ease-in-out; @@ -104,7 +91,6 @@ } #issues-container > div:hover { opacity: 1; - /* background-color: #80808010; */ transition: background-color 0s; } #issues-container > div:hover .info { @@ -126,13 +112,11 @@ #issues-container p { text-align: right; } - p { margin: 0; line-height: 1; color: #bfbfbf; font-size: 12px; - letter-spacing: 0.5px; text-rendering: geometricPrecision; top: 0; @@ -143,7 +127,6 @@ line-height: 1; color: #bfbfbf; font-size: 12px; - letter-spacing: 0.5px; text-rendering: geometricPrecision; top: 0; @@ -155,7 +138,6 @@ display: flex; padding: 12px 0; align-items: center; - /* background-color: #00000080; */ } p.organization-name { opacity: 0.5; @@ -196,10 +178,6 @@ } #filters label { cursor: pointer; - /* background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20height%3D%2216%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2216%22%3E%3Cpath%20fill%3D%22%23ffffff80%22%20d%3D%22M120-240v-80h240v80H120Zm0-200v-80h480v80H120Zm0-200v-80h720v80H120Z%22/%3E%3C/svg%3E"); */ - /* background-repeat: no-repeat; */ - /* background-position: 4px 4px; */ - /* text-align: right; */ } #filters label:hover { background-color: #80808040; @@ -210,7 +188,6 @@ input[type="radio"]:checked + label { background-color: #80808080 !important; } - input[type="radio"] + label > .icon > svg { fill: #ffffff80; } @@ -226,7 +203,6 @@ input[type="radio"]:checked + label > .active.icon > svg { display: unset; } - .labels { display: flex; margin-left: auto; @@ -236,8 +212,6 @@ margin: 0; } body { - /* text-align: center; */ - /* background-image: var(--grid-background-image); */ display: flex; align-items: center; align-content: center; @@ -247,7 +221,6 @@ opacity: 0.66; transition: 125ms opacity ease-in-out; align-items: center; - /* margin: 0 0 0 12px; */ } #issues-container > .issue-element-wrapper { opacity: 0.5; @@ -323,7 +296,6 @@ height: 40px; padding: 4px 0; } - #toolbar[data-authenticated="true"] > #github-login-button { display: none; } @@ -334,7 +306,6 @@ user-select: none; opacity: 0; transition: 0.5s opacity ease-in-out; - /* background-image: var(--grid-background-image); */ } #toolbar.ready { opacity: 1; @@ -360,7 +331,6 @@ right: 0; background-color: #0ff; } - @media screen and (max-width: 896px) { .full { display: none !important; @@ -369,7 +339,6 @@ display: block; } #issues-container .labels { - /* margin-left: 48px; */ margin-top: 4px; } #branding { @@ -385,24 +354,16 @@ #toolbar > button { padding: 12px 16px; } - } @media screen and (max-width: 1280px) { - body { - /* background-color: red; */ - } .preview.active { - /* position: fixed; */ - /* right: 0; */ transform: translateX(0) !important; - /* width: 75vw; */ } #issues-container.preview-active { transform: translateX(0) !important; } #issues-container.preview-active .issue-element-inner { opacity: 0.5; - /* transition: 0.33s all cubic-bezier(0, 1, 1, 1); */ filter: blur(4px); } } @@ -422,11 +383,9 @@ width: 24px; opacity: 0; } - #issues-container img[src] { opacity: 1; } - background, background #grid { width: 100%; @@ -435,11 +394,6 @@ top: 0; left: 0; } - /* html, - background { - background-color: #000410; - } */ - background #grid { -webkit-mask-image: radial-gradient(#00000020 0, #00000080 100%); mask-image: radial-gradient(#00000020 0, #00000080 100%); @@ -466,45 +420,23 @@ max-width: 100%; } .preview pre { - /* width: calc(100% - 48px); */ - /* overflow: scroll; */ - /* margin: 0; */ - /* overflow: hidden; */ - /* white-space: unset; */ - /* position: relative; */ - /* width: 50%; */ - /* display: inline-block; */ - /* background: red; */ - /* overflow: hidden; */ - /* margin: 0; */ - /* white-space: unset; */ position: relative; - /* margin: 48px auto; */ display: inline-block; width: 100%; overflow: scroll; height: 48px; } .preview pre code { - /* width: 100%; */ - /* white-space: initial; */ - /* max-width: 100vw; */ - /* overflow: hidden; */ - /* display: inline-block; */ - /* display: block; */ - /* white-space: inherit; */ position: absolute; font-family: monospace; } - .preview ul, - .preview ol { + .preview ol, + .preview ul { padding-left: 12px; margin-left: 4px; } - .preview h1 { margin: 8px; - /* text-align: center; */ font-size: 24px; margin-right: 16px; } @@ -512,39 +444,25 @@ word-break: break-all; } .preview-body-inner { - /* width: calc(100% - 48px); */ max-width: 640px; overflow: scroll; max-height: calc(100vh - 170px); pointer-events: all; margin-top: 8px; } - .preview { - /* overflow: hidden; */ text-align: left; position: fixed; - /* bottom: 0; */ - /* left: 0; */ - /* width: calc(100vw - 32px); */ transition: 0.25s all cubic-bezier(0, 1, 1, 1); - /* display: inline-block; */ - /* background: #000; */ - /* padding: 16px; */ max-width: 640px; border: 1px solid #80808020; border-radius: 4px; opacity: 0; - /* position: fixed; */ top: 64px; - /* display: flex; */ flex-direction: row; - /* flex-grow: 4; */ display: flex; - transform: translateX(0%); + transform: translateX(0); flex-wrap: wrap; - /* max-height: calc(100vh - 71px); */ - /* background: red; */ } .preview { pointer-events: none; @@ -568,17 +486,10 @@ } .preview-header { display: flex; - /* align-items: center; */ - /* justify-content: space-between; */ - /* margin-bottom: 8px; */ - /* position: fixed; */ justify-content: space-between; align-items: center; margin: auto 8px; - /* border-bottom: 1px solid #404040; */ } - -.preview-header {} .preview-header > a { word-wrap: initial; } @@ -590,33 +501,23 @@ margin: 16px; overflow: scroll; width: calc(100% - 32px); - /* margin-top: 48px; */ - /* height: calc( 100% - 512px); */ overflow: hidden; - /* background: red; */ margin-bottom: 0; margin-top: 8px; border-top: 1px solid #202020; } .preview-content { - /* padding: 16px; */ width: 100%; - /* position: relative; */ } .preview button.close-preview { - /* height: 100%; */ - /* display: block; */ - /* position: absolute; */ right: 0; top: 0; margin: 8px; - /* height: 48px; */ } .preview li { margin-bottom: 8px; letter-spacing: 0; font-size: 16px; line-height: 1.25; - /* width: calc(100% - 24px); */ } }