diff --git a/images/elements/extension-screenshot.png b/images/elements/extension-screenshot.png index 4f70d20f..8c29bbe1 100644 Binary files a/images/elements/extension-screenshot.png and b/images/elements/extension-screenshot.png differ diff --git a/pages/forum/forum.scarlet b/pages/forum/forum.scarlet index 48c77a22..4775f365 100644 --- a/pages/forum/forum.scarlet +++ b/pages/forum/forum.scarlet @@ -8,11 +8,18 @@ .forum-tag color text-color !important - :hover - color white !important + + :hover, &.active color white !important - background-color link-hover-color + background-color forum-tag-hover-color !important + + // color text-color !important + // :hover + // color white !important + // &.active + // color white !important + // background-color link-hover-color < 920px .forum-tag diff --git a/pages/profile/profile.scarlet b/pages/profile/profile.scarlet index b8784fd0..f67aac62 100644 --- a/pages/profile/profile.scarlet +++ b/pages/profile/profile.scarlet @@ -80,6 +80,10 @@ profile-boot-duration = 2s padding-left calc(content-padding * 2) max-width 900px +.website + a + color white + #nick margin-bottom 1rem diff --git a/reset.scarlet b/reset.scarlet deleted file mode 100644 index a93e2791..00000000 --- a/reset.scarlet +++ /dev/null @@ -1,46 +0,0 @@ -html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, main - outline 0 - border 0 - font-size 100% - font inherit - vertical-align baseline - background transparent - -html - box-sizing border-box - -textarea - resize vertical - -article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section - display block - -body - line-height 1 - -webkit-font-smoothing antialiased - -moz-osx-font-smoothing grayscale - -ol, ul - list-style none - -blockquote, q - quotes none - -blockquote:before, blockquote:after, q:before, q:after - content '' - content none - -table - border-collapse collapse - border-spacing 0 - -audio, canvas, img, video, input, select - vertical-align middle - -:focus - outline 0 - -* - margin 0 - padding 0 - box-sizing inherit \ No newline at end of file diff --git a/styles/base.scarlet b/styles/base.scarlet index 6dd9d375..bf3fea68 100644 --- a/styles/base.scarlet +++ b/styles/base.scarlet @@ -8,6 +8,7 @@ body overflow hidden height 100% color text-color + background-color bg-color a color link-color @@ -21,8 +22,8 @@ a :active transform translateY(3px) - &.active - color link-active-color + // &.active + // color link-active-color strong font-weight bold diff --git a/styles/include/config.scarlet b/styles/include/config.scarlet index e5cb98c5..729d11ea 100644 --- a/styles/include/config.scarlet +++ b/styles/include/config.scarlet @@ -1,19 +1,28 @@ // Colors text-color = rgb(60, 60, 60) -main-color = rgb(248, 165, 130) -link-color = rgb(225, 38, 15) +main-color = rgb(225, 38, 15) +link-color = main-color link-hover-color = rgb(242, 60, 30) -link-active-color = rgb(100, 149, 237) +link-active-color = link-hover-color post-highlight-color = rgba(248, 165, 130, 0.7) -bg-color = white +bg-color = rgb(246, 246, 246) // UI ui-border = 1px solid rgba(0, 0, 0, 0.1) ui-hover-border = 1px solid rgba(0, 0, 0, 0.15) -ui-background = linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.037) 100%) -ui-hover-background = linear-gradient(to bottom, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.027) 100%) +ui-background = rgb(254, 254, 254) +ui-hover-background = rgb(255, 255, 255) +// ui-background = linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.037) 100%) +// ui-hover-background = linear-gradient(to bottom, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.027) 100%) ui-disabled-color = rgb(224, 224, 224) +// Input +input-focus-border-color = rgb(248, 165, 130) + +// Button +button-hover-color = link-hover-color +forum-tag-hover-color = rgb(46, 85, 160) + // Forum forum-width = 830px @@ -21,9 +30,10 @@ forum-width = 830px avatar-size = 50px // Navigation -nav-color = rgb(60, 60, 60) -nav-link-color = rgb(160, 160, 160) -nav-link-hover-color = rgb(255, 255, 255) +nav-color = text-color +nav-link-color = rgba(255, 255, 255, 0.5) +nav-link-hover-color = white +nav-link-hover-slide-color = rgb(248, 165, 130) // nav-color = rgb(245, 245, 245) // nav-link-color = rgb(160, 160, 160) // nav-link-hover-color = rgb(80, 80, 80) @@ -40,7 +50,7 @@ outline-shadow-heavy = 0 0 6px rgba(0, 0, 0, 0.6) // Distances content-padding = 1.6rem content-padding-top = 1.6rem -hover-line-size = 2px +hover-line-size = 3px nav-height = 3.11rem // Timings diff --git a/styles/input.scarlet b/styles/input.scarlet index 8c272583..fbe4b065 100644 --- a/styles/input.scarlet +++ b/styles/input.scarlet @@ -1,7 +1,7 @@ mixin input-focus :focus color black - border 1px solid main-color + border 1px solid input-focus-border-color // TODO: Replace with alpha(main-color, 20%) function box-shadow 0 0 6px rgba(248, 165, 130, 0.2) @@ -17,12 +17,16 @@ input, textarea background white box-shadow none input-focus + + :active + transform translateY(3px) :disabled ui-disabled // We need this to have a selector with a higher priority than .widget-element:focus -input.widget-element +input.widget-element, +textarea.widget-element input-focus button, .button @@ -33,10 +37,11 @@ button, .button padding 0.75rem 1rem color link-color - :hover + :hover, + &.active cursor pointer color white - background-color link-hover-color + background-color button-hover-color :active transform translateY(3px) diff --git a/styles/navigation.scarlet b/styles/navigation.scarlet index af6c9e94..d22110d4 100644 --- a/styles/navigation.scarlet +++ b/styles/navigation.scarlet @@ -12,8 +12,8 @@ :after content "" display block - height 3px - background-color main-color + height hover-line-size + background-color nav-link-hover-slide-color transform scaleX(0) opacity 0 default-transition @@ -45,13 +45,16 @@ #search display none border-radius 0 - background text-color + background transparent border none - color white + color nav-link-hover-color font-size 1em min-width 0 + ::placeholder + color nav-link-color + :focus border none box-shadow none diff --git a/styles/table.scarlet b/styles/table.scarlet index dd94a43b..3ee0073b 100644 --- a/styles/table.scarlet +++ b/styles/table.scarlet @@ -20,4 +20,4 @@ th tbody tr :hover - background-color rgba(0, 0, 0, 0.03) \ No newline at end of file + background-color rgba(0, 0, 0, 0.015) \ No newline at end of file diff --git a/styles/widgets.scarlet b/styles/widgets.scarlet index 5dfb8485..f14acd84 100644 --- a/styles/widgets.scarlet +++ b/styles/widgets.scarlet @@ -12,7 +12,7 @@ .widget-element vertical-wrap ui-element - transition border transition-speed ease, background transition-speed ease, transform transition-speed ease + transition border transition-speed ease, background transition-speed ease, transform transition-speed ease, transform color ease margin-bottom 1rem padding 0.5rem 1rem width 100%