aboutsummaryrefslogtreecommitdiff
path: root/src/main/assets/style.css
diff options
context:
space:
mode:
Diffstat (limited to 'src/main/assets/style.css')
-rw-r--r--src/main/assets/style.css400
1 files changed, 215 insertions, 185 deletions
diff --git a/src/main/assets/style.css b/src/main/assets/style.css
index 81c371a4..648a016c 100644
--- a/src/main/assets/style.css
+++ b/src/main/assets/style.css
@@ -1,3 +1,32 @@
+@custom-media --viewport-desktop (width >=62.5rem);
+@custom-media --viewport-mobile (width < 62.5rem);
+
+:root {
+ --main-width: 1000px;
+ --main-background-color: #fdfdfe;
+ --background-color: #f8f8f8;
+ --border-color: #eee;
+ --text-background-color: #fff;
+ --text-color: #222;
+ --link-color: #3c77aa;
+ --dimmed-link-color: #88958d;
+}
+@media (prefers-color-scheme: dark) {
+ :root {
+ --main-background-color: #222;
+ --background-color: #333;
+ --text-background-color: #383838;
+ --border-color: #4c4c4c;
+ --text-color: #ccc;
+ --link-color: #c38855;
+ --dimmed-link-color: #88958d;
+ }
+}
+
+* {
+ box-sizing: border-box;
+}
+
/* #region generic */
html,
@@ -19,10 +48,34 @@ textarea {
overflow: auto;
}
html,
+body {
+ width: 100%;
+ height: 100%;
+}
+
+body {
+ background: var(--main-background-color);
+ text-size-adjust: 100%;
+ word-wrap: break-word;
+ color: var(--text-color);
+ line-height: 1.4;
+ -webkit-overflow-scrolling: touch;
+}
+
+button,
input,
textarea {
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
- font-size: 12pt;
+ font-size: 1em;
+ background-color: var(--text-background-color);
+ color: var(--text-color);
+}
+
+html,
+input,
+textarea,
+button {
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+ -webkit-font-smoothing: subpixel-antialiased;
}
h1,
h2 {
@@ -32,7 +85,7 @@ ul {
list-style-type: none;
}
a {
- color: #069;
+ color: var(--link-color);
text-decoration: none;
}
img,
@@ -40,7 +93,7 @@ hr {
border: none;
}
hr {
- background: #CCC;
+ background: var(--border-color);
height: 1px;
margin: 10px 0;
}
@@ -67,49 +120,54 @@ pre::-moz-selection {
/* #region overall layout */
-html {
- background: #fdfdfe;
- color: #222;
+#app {
+ height: 100%;
+ width: 100%;
+ overflow: hidden;
}
#wrapper {
- margin: 0 auto;
- width: 1000px;
- margin-top: 52px;
+ display: grid;
+ grid-template-areas: "content" "footer";
+ grid-template-columns: 100%;
+ grid-template-rows: 1fr auto;
+ height: 100%;
+ width: 100%;
+ overflow: hidden;
}
#column {
- float: left;
- margin-left: 10px;
- overflow: hidden;
- padding-top: 10px;
- width: 240px;
+ grid-area: footer;
}
#content {
- float: right;
- margin: 12px 0 0 0;
- width: 728px;
+ grid-area: content;
+ margin-top: 0;
+ overflow: auto;
+}
+.content--top {
+ margin-top: 64px !important;
}
#minimal_content {
margin: 0 auto;
min-width: 310px;
width: auto;
}
+.desktop {
+ display: none;
+}
*::selection {
- background: #006699;
- color: #fff;
+ background: var(--link-color);
+ color: var(--main-background-color);
}
-body > header {
- background: #fff;
- border-bottom: 1px solid #eee;
+#header {
+ background: var(--text-background-color);
+ border-bottom: 1px solid var(--border-color);
+ transition: transform 0.2s;
+ z-index: 10;
+ overflow-x: hidden;
position: fixed;
- top: 0;
width: 100%;
- z-index: 10;
- transition-duration: 0.5s;
- transition-property: transform;
+ top: 0;
}
#header_wrapper {
- margin: 0 auto;
- width: 1000px;
display: flex;
justify-content: space-between;
align-items: center;
@@ -119,40 +177,11 @@ body > header {
transform: translateY(-100%);
}
#footer {
- background: #f8f8f8;
- clear: both;
color: #999;
font-size: 10pt;
- margin: 40px;
padding: 10px 0;
-}
-
-@media screen and (max-width: 850px) {
- body {
- text-size-adjust: 100%;
- }
- body,
- #wrapper,
- #topwrapper,
- #content,
- #footer {
- float: none;
- margin: 0 auto;
- min-width: 310px;
- width: auto;
- }
- #wrapper {
- margin-top: 50px;
- }
- body > header {
- margin-bottom: 15px;
- }
- #column {
- float: none;
- margin: 0 10px;
- padding-top: 0;
- width: auto;
- }
+ display: flex;
+ flex-direction: column;
}
/* #endregion */
@@ -178,8 +207,7 @@ body > header {
display: flex;
}
#global a {
- color: #88958d;
- display: inline-block;
+ color: var(--dimmed-link-color);
padding: 14px;
border-bottom: 2px solid transparent;
}
@@ -191,7 +219,7 @@ body > header {
border-bottom: 2px solid transparent;
}
#header_wrapper a.active {
- background: #f8f8f8;
+ background: var(--text-background-color);
border-bottom: 2px solid #ff339a;
pointer-events: none;
}
@@ -202,8 +230,8 @@ body > header {
cursor: pointer;
}
#search input {
- background: #FFF;
- border: 1px solid #ccc;
+ background: var(--main-background-color);
+ border: 1px solid var(--border-color);
outline: none !important;
padding: 4px;
-webkit-appearance: none;
@@ -216,11 +244,13 @@ body > header {
.toolbar {
display: flex;
- flex-direction: column;
+ flex-direction: row;
justify-content: space-around;
}
+#global a,
.toolbar a {
+ display: flex;
padding: 14px;
color: #88959d;
align-items: center;
@@ -228,7 +258,7 @@ body > header {
border-right: 2px solid transparent;
}
.toolbar > a:hover {
- background-color: #f8f8f8;
+ background-color: var(--background-color);
cursor: pointer;
border-right: 2px solid #ff339a;
}
@@ -243,22 +273,20 @@ body > header {
}
#column .tags {
- background: #fff;
- border: 1px solid #eee;
+ background: var(--main-background-color);
+ border: 1px solid var(--border-color);
line-height: 140%;
padding: 6px;
text-align: justify;
}
#column .inp {
- background: #fff;
- border: 1px solid #ddddd5;
+ background: var(--main-background-color);
+ border: 1px solid var(--border-color);
outline: none !important;
padding: 4px;
width: 222px;
}
#column .tags h4 {
- background: #eee;
- border: 1px solid #eee;
color: #88958d;
display: block;
text-align: center;
@@ -314,11 +342,12 @@ body > header {
/* #region article, message internals */
article {
- background: #fff;
- border: 1px solid #eee;
+ background: var(--text-background-color);
+ border: 1px solid var(--border-color);
line-height: 140%;
margin-bottom: 10px;
padding: 20px;
+ overflow: auto;
}
article time {
color: #88958d;
@@ -336,7 +365,7 @@ article .ir img {
}
article > nav.l,
.msg-cont > nav.l {
- border-top: 1px solid #eee;
+ border-top: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: space-around;
@@ -396,8 +425,8 @@ article .tags > a::before,
max-width: 48px;
}
.msg-cont {
- background: #FFF;
- border: 1px solid #eee;
+ background: var(--text-background-color);
+ border: 1px solid var(--border-color);
line-height: 140%;
margin-bottom: 12px;
padding: 20px;
@@ -463,17 +492,6 @@ article .tags > a::before,
.attach-photo-active {
color: green;
}
-.msg-comment input {
- align-self: flex-start;
- background: #EEE;
- border: 1px solid #CCC;
- color: #999;
- margin: 0 0 0 6px;
- position: sticky;
- top: 70px;
- vertical-align: top;
- width: 50px;
-}
.msg-recomms {
color: #AAA;
font-size: small;
@@ -486,7 +504,7 @@ article .tags > a::before,
margin: 0;
}
.title2 {
- background: #fff;
+ background: var(--text-background-color);
margin: 20px 0;
padding: 10px 20px;
width: 640px;
@@ -500,73 +518,6 @@ article .tags > a::before,
margin: 0;
}
-@media screen and (max-width: 850px) {
- #header_wrapper {
- width: auto;
- }
- #global {
- justify-content: space-around;
- flex-grow: 1;
- }
- #search {
- padding: 4px;
- }
- article {
- overflow: auto;
- }
- article p {
- margin: 10px 0 8px 0;
- }
- .msg,
- .msg-cont {
- min-width: 280px;
- width: auto;
- }
- .msg-cont {
- margin: 8px 0;
- }
- .msg-media {
- overflow: auto;
- }
- .title2 h2 {
- font-size: large;
- }
- .msg-comment {
- flex-direction: column;
- }
- .msg-comment input {
- align-self: flex-end;
- margin: 6px 0 0 0;
- width: 100px;
- }
-}
-
-@media screen and (max-width: 480px) {
- #search {
- display: none;
- }
- .msg-cont > nav.l,
- article > nav.l {
- font-size: 9pt;
- }
- .msg-txt {
- padding-top: 5px;
- }
- .title2 {
- font-size: 11pt;
- width: auto;
- }
- #content .title2 h2 {
- font-size: 11pt;
- }
- .title2-right {
- line-height: initial;
- }
- .icon-title {
- display: none;
- }
-}
-
/* #endregion */
/* #region user-generated texts */
@@ -687,7 +638,7 @@ blockquote {
/* #region popup dialog (lightbox) */
#dialogb {
- background: #222;
+ background: var(--text-color);
height: 100%;
left: 0;
opacity: 0.6;
@@ -741,7 +692,7 @@ blockquote {
padding-right: 6px;
}
.dialoglogin {
- background: #fff;
+ background: var(--text-background-color);
padding: 25px;
width: 300px;
}
@@ -765,24 +716,24 @@ blockquote {
}
.signinput,
.signsubmit {
- border: 1px solid #CCC;
+ border: 1px solid var(--border-color);
margin: 3px 0;
padding: 3px;
}
.signinput {
- width: 292px;
+ width: 100%;
}
.signsubmit {
width: 70px;
}
.dialogshare {
- background: #fff;
+ background: var(--text-background-color);
min-width: 300px;
overflow: auto;
padding: 20px;
}
.dialogl {
- background: #fff;
+ background: var(--text-background-color);
border: 1px solid #DDD;
margin: 3px 0 20px;
padding: 5px;
@@ -795,7 +746,7 @@ blockquote {
display: block;
}
.dialogtxt {
- background: #fff;
+ background: var(--text-background-color);
padding: 20px;
}
@@ -842,37 +793,17 @@ blockquote {
/* #region footer internals */
-#footer-social {
- float: left;
-}
#footer-social a {
border: 0;
display: inline-block;
}
-#footer-left {
- margin-left: 286px;
- margin-right: 350px;
-}
-#footer-right {
- float: right;
-}
-
-@media screen and (max-width: 850px) {
- #footer {
- margin: 0 10px;
- }
- #footer div {
- float: none;
- margin: 10px 0;
- }
-}
/* #endregion */
/* #region settings */
fieldset {
- border: 1px dotted #ccc;
+ border: 1px dotted var(--border-color);
margin-top: 25px;
}
@@ -937,3 +868,102 @@ article.nsfw .ir img:hover {
}
/* #endregion */
+
+article p {
+ margin: 10px 0 8px 0;
+}
+.msg,
+.msg-cont {
+ min-width: 280px;
+ width: auto;
+}
+.msg-cont {
+ margin: 8px 0;
+}
+.msg-media {
+ overflow: auto;
+}
+.title2 h2 {
+ font-size: large;
+}
+.msg-comment {
+ flex-direction: column;
+}
+.msg-comment input {
+ align-self: flex-end;
+ margin: 6px 0 0 0;
+ background: #EEE;
+ border: 1px solid #CCC;
+ color: #999;
+ position: sticky;
+ top: 70px;
+ vertical-align: top;
+ width: 50px;
+}
+
+@media (--viewport-mobile) {
+ #content {
+ margin-bottom: 12px;
+ }
+ #sidebar {
+ background: var(--text-background-color);
+ }
+}
+
+@media (--viewport-desktop) {
+ #app {
+ overflow: initial;
+ }
+ #wrapper {
+ grid-template-areas: ". footer content .";
+ grid-template-columns: auto 240px 760px auto;
+ overflow: initial;
+ }
+ #header_wrapper,
+ .footer_container {
+ margin: 0 auto;
+ width: var(--main-width);
+ }
+ .desktop {
+ display: block;
+ }
+ .mobile {
+ display: none;
+ }
+ #content {
+ margin-bottom: 12px;
+ overflow: initial;
+ }
+ .toolbar {
+ flex-direction: column;
+ justify-content: initial;
+ border-top: initial;
+ margin-top: 64px;
+ }
+ .toolbar a,
+ .l a {
+ border-right: 2px solid transparent;
+ }
+ #sidebar > a:hover {
+ border-top: initial;
+ border-right: 2px solid #ff339a;
+ }
+}
+::-webkit-scrollbar {
+ width: 12px;
+} /* this targets the default scrollbar (compulsory) */
+::-webkit-scrollbar-track {
+ background-color: var(--main-background-color);
+} /* the new scrollbar will have a flat appearance with the set background color */
+
+::-webkit-scrollbar-thumb {
+ background-color: #ff339a;
+} /* this will style the thumb, ignoring the track */
+
+::-webkit-scrollbar-button {
+ background-color: var(--border-color);
+} /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */
+
+::-webkit-scrollbar-corner {
+ background-color: black;
+}
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-22 09:01:40 +0000