diff --git a/css/accform.css b/css/accform.css new file mode 100755 index 0000000..a11d400 --- /dev/null +++ b/css/accform.css @@ -0,0 +1,56 @@ +.logincontainer { + max-width: 300px; + margin: 32px; + text-align: center; +} + +.logincontainer hr { + border: 1px inset rgba(0,0,0,0.5); +} + +.logincontainer .assets, +.logincontainer .accinput { + flex-grow: 1; + padding: 8px; +} + +.options .option { display: flex; } + +.options .option .name { + font-family: var(--spfont1); + font-size: 12px; + flex-shrink: 0; flex-grow: 1; + text-align: right; + padding: 2px; +} +.options .option input, +.options .option select, +.options .option textarea, { + flex-grow: 0; +} + +.logincontainer h2 { + font-family: var(--spfont1); +} + +.logincontainer .error { + color: var(--error); +} + +.logincontainer .buttonbar { + display: flex; +} + +img.bg-icon-overlay { + position: absolute; + bottom: 0; right: 0; + width: 50vh; height: 50vh; + /* width: 100vh; height: 100vh; */ + opacity: 0.25; + z-index: -100; +} + +ul.errors { + text-align: left; + color: red; +} \ No newline at end of file diff --git a/css/blog.css b/css/blog.css new file mode 100644 index 0000000..83c0f3f --- /dev/null +++ b/css/blog.css @@ -0,0 +1,109 @@ +body.blog-index .article { + background-color: var(--menu-bg, #d0d0d0); + border: var(--menu-border, 1px solid #a4a4a4); + margin: 4px; + padding: 8px; +} + +body.blog-index .article p { + margin: 2px; +} + +body.blog-index .article i, .article .userlink { + font-family: var(--spfont1, Pixio); +} + +body.blog-index .article i { color: var(--subtitle, #525252); } + +.body > img { + max-width: calc(100% - 64px); +} + +.subject { + margin: 4px 0px; + } + +#commentFrame { + width: calc(100% - 8px); + border: none; +} + +.comment { + background-color: var(--menu-bg, #d0d0d0); + border: var(--menu-border, 1px solid #bdbdbd); + margin: 4px; + padding: 8px; +} + +.comment p { + margin: 2px; +} + +.comment i { + color: var(--subtitle, #525252); +} + +.userlink, .userlink a { + color: var(--main-text, #000000); + text-decoration: none; +} + +.userlink, .date i, .comment i, #comments { + font-family: var(--spfont1, Pixio); +} + +textarea { + width: calc(100% - 8px); +} + +.header-title h1, .header-title .author { + margin: 2px; +} + +.header-title .author .userlink { + margin: 0px; +} + +.header-title i { + color: var(--subtitle, #525252); +} + + +.comment { + background-color: var(--menu-bg, #d0d0d0); + border: var(--menu-border, 1px solid #bdbdbd); + margin: 4px; + padding: 8px; +} + +.comment p { + margin: 2px; +} + +.comment a[title="Delete"], +.userlink, +.comment i{ + font-family: var(--spfont1, Pixio); +} + +.comment i { + color: var(--subtitle, #525252); +} + +.userlink, .userlink a { + color: var(--main-text, #000000); + text-decoration: none; +} + +textarea { + width: calc(100% - 8px); +} + +#header { + font-size: 24px; + vertical-align: top; +} + +body#comments > .header-title { + top: -10px; +} diff --git a/css/buttons.css b/css/buttons.css new file mode 100644 index 0000000..b4a3c20 --- /dev/null +++ b/css/buttons.css @@ -0,0 +1,16 @@ +div.button { + display: block; + padding: 4px; + background: #D4D4D4; + border: 2px outset #B8B8B8; +} + +div.button:hover { + background: #99D4AB; + border: 2px outset #77C68F; +} + +div.button:active { + background: #9E9E9E; + border: 2px inset #707070; +} \ No newline at end of file diff --git a/css/creations.css b/css/creations.css new file mode 100755 index 0000000..0d4e816 --- /dev/null +++ b/css/creations.css @@ -0,0 +1,67 @@ +body.creation-page { } + +body.creation-page .creation-container { + max-width: 800px; + margin: 0 auto; +} + +body.creation-page .creation-container .title { + background: var(--menu-bg); + border: var(--menu-border); + border-bottom: none; + text-align: left; + font-weight: bold; + font-family: var(--spfont1); + font-size: 24px; +} + +body.creation-page .creation-container .title td { padding: 8px; } + +body.creation-page .creation-container .gallery-cell { + background: var(--menu-bg); + border-left: var(--menu-border); + border-right: var(--menu-border); + padding: 8px; +} + +body.creation-page .creation-container .gallery { + height: 50vh; +} + +body.creation-page .creation-container .gallery .gallery-pager { + width: 24px; + text-align: center; + font-size: 20px; + font-family: var(--spfont1); + color: var(--main-text); + text-decoration: none; + cursor: pointer; +} + +body.creation-page .creation-container .filmstrip-cell { + background: var(--menu-bg); + border: var(--menu-border); + border-top: none; + padding: 8px; +} + +body.creation-page .creation-container .info-cell { + width: 224px; + vertical-align: top; +} + +body.creation-page .creation-container .info-panel { + background: var(--menu-bg); + border: var(--menu-border); + padding: 8px; +} + +body.creation-page .creation-container .info-panel hr, +body.creation-page .creation-container .box[name='desc'] hr { + border: var(--menu-border); + color: var(--menu-bg); +} + +body.creation-page .creation-container .tabbed-cell { + vertical-align: top; +} \ No newline at end of file diff --git a/css/fonts.css b/css/fonts.css index fba13b5..510ee2f 100755 --- a/css/fonts.css +++ b/css/fonts.css @@ -1,15 +1,3 @@ -:root { - --spfont1: Pixio; - --spfont2: TypeWriter; - --spfont3: Pixelated; - --spfont4: Joystix; - --spfont5: VCR_OSD_MONO; - --spfont6: BitPap; - --spfont7: Comicoro; - --spfont8: DOSVGA-LessPerfect; - --spfont9: DOSVGA-MorePerfect; -} - @font-face { font-family: TypeWriter; src: url(//assets.worlio.com/fonts/type_writer/type_writer.woff), diff --git a/css/radio.css b/css/radio.css new file mode 100644 index 0000000..5d8df5a --- /dev/null +++ b/css/radio.css @@ -0,0 +1,342 @@ +@import url('//assets.worlio.com/style/css/theme.css'); + +@font-face { + font-family:Pixio; + src:url(//assets.worlio.com/fonts/Pixio/Pixio.woff2), + url(//assets.worlio.com/fonts/Pixio/Pixio.woff), + url(//assets.worlio.com/fonts/Pixio/Pixio.ttf) format("truetype"); +} + +@font-face { + font-family:nk57; + src:url(../fonts/nk57/nk57-monospace-cd-rg.ttf) format("truetype"), + url(../fonts/nk57/nk57-monospace-cd-bd.ttf) format("truetype"), + url(../fonts/nk57/nk57-monospace-cd-it.ttf) format("truetype"), + url(../fonts/nk57/nk57-monospace-cd-lt.ttf) format("truetype"); +} + +:root { + --primary: #0079b5; + --primary-border: #009ae6; + + --secondary: #f3dca9; + --secondary-border: #f2e5c8; + + --button: #DFDFDF; + --button-active: gray; + + --monitor: #0F0F0F; + --monitor-text: #F0F0F0; + --monitor-border: gray; + + --link-color: unset; +} + +*:link, *:visited { + color: var(--link-color); +} + +html { + height: 100%; +} + +body { + background: var(--background-image) var(--main-background); + background-repeat: repeat; + height: 100%; + margin: 0; +} + +body, button, fakebutton, input { font-family: Pixio; } + +.container, .player-container { + background: var(--primary); + border: 2px outset var(--primary-border); + padding: 4px; +} +.container { + min-width: 320px; + min-height: 280px; + display: flex; + gap: 4px; + margin: auto; + max-width: 976px; +} +.player-container { + position: relative; + border-bottom: none; + width: 320px; + height: 78px; + margin-bottom: -2px; + z-index: 1; +} +.footer { + min-width: 320px; + max-width: 976px; + text-align: right; + margin: auto; +} + +player, visualizer { + display: flex; + flex-direction: column; + background: var(--secondary); + border: 2px outset var(--secondary-border); + flex-shrink: 0; + padding: 4px; +} + +.banner { + display: flex; +} + +player { + width: 308px; height: 68px; +} + +visualizer { + margin-bottom: 4px; +} + +.vis-container { + width: 320px; + max-width: 320px; +} + +button, fakebutton, slider { + border: 2px outset var(--button); + background: var(--button); +} + +slider input { + background: lightgray; + -webkit-appearance: none; + appearance: none; + height: 50%; + margin: auto 4px; + width: 96px; +} + +slider input::-webkit-slider-thumb, +slider input::-moz-range-thumb { + background: gray; + -webkit-appearance: none; + appearance: none; + width: 8px; + height: 100%; + border: none; + border-radius: 0; +} + +select { + border: none; + background: none; +} + +button:active, +button.active, +fakebutton:active, +fakebutton.active { + border: 2px inset var(--button-active); + background: var(--button-active); +} + +fakebutton { display: flex; } +fakebutton img { margin: 2px; } + +controls { + display: flex; +} + +controls input { flex-grow: 1; } + +tablist { + display: flex; + flex-shrink: 0; +} + +metadata, canvas { + color: var(--monitor-text); + background: black; + border: 2px inset var(--secondary-border); +} + +metadata { + padding: 4px; + display: flex; + flex-direction: column; +} +metadata station { font-weight: bold; } + +panel { + display: flex; + flex-direction: column; + flex: 1; +} + +stations { + display: flex; + flex-direction: column; + overflow-y: auto; + border: 2px inset var(--primary-border); + margin: 2px; + flex-grow: 1; +} + +favorites, history, stats { + background: var(--monitor); + color: var(--monitor-text); + border: 2px inset var(--monitor-border); + flex-grow: 1; + display: flex; + flex-direction: column; + padding: 4px; + overflow-y: scroll; + min-height: 0; +} + +tabbox { + display: none; + flex-direction: column; + flex-grow: 1; +} +tabbox.active { display: flex; } + +station { + display: flex; + flex-direction: column; + cursor: pointer; + user-select: none; + padding: 4px; + margin: 2px; + border: 2px inset var(--button-active); + background: var(--button-active); +} + +station.active { + background: var(--button); + border: 2px outset var(--button); + color: black; +} + +station station-name { font-weight: bold; } +station track-meta { + font-size: 12px; +} + +history track-container { + display: flex; + flex-direction: column; + padding: 2px; +} + +history track-container track-station { font-weight: bold; } + +history track-container:nth-of-type(1) { + background-color: var(--monitor-text); + color: var(--monitor); +} + +canvas.vis, canvas.metadata { border-bottom: none; } + +.button-row { display: flex; } + +.fav-button img { + filter: contrast(0%); +} + +.fav-button.fav img { + filter: none; +} + +favorites .station-header, +history .station-header { + text-align: center; + margin: 4px 0; + text-decoration: underline; + margin-top: 12px; +} + +favorites .track, +history .track { + display: flex; + border-bottom: 1px dashed var(--monitor-text); + margin: 2px 0; +} + +favorites .track button, +history .track button { + background: none; + border: none; + cursor: pointer; + flex-shrink: 0; + flex-grow: 0; + margin: 2px; +} + +favorites .track a, +history .track a { + flex-grow: 1; +} + +@media only screen and (orientation: portrait) { + .container, .footer { + flex-direction: column; + width: 320px; + } + + .banner { flex-direction: column-reverse; } + .banner img, .player-container { + margin: auto; + } + .banner > img { flex-shrink: 0; } + .player-container { margin-bottom: -2px; } + + panel { + max-height: 480px; + } + + favorites, history { + height: 240px; + } + + body.old panel#favorites, body.old panel#history { display: none; } +} + +@media only screen and (orientation: landscape) { + .container, .footer { + width: calc(100% - 64px); + } + body:not(.old) .container { height: calc(100% - 212px); } + + .banner { + margin: auto; + min-width: 320px; + width: calc(100% - 52px); + max-width: 988px; + } + .banner > img { margin-top: 2px; } + + .player-container { + margin-top: 48px; + } + + /* OLD */ + body.old .container, body.old .footer { + flex-direction: column; + width: 320px; + } + + body.old .banner { flex-direction: column-reverse; } + body.old .banner img, body.old .player-container { + margin: auto; + } + body.old .banner > img { flex-shrink: 0; } + body.old .player-container { margin-bottom: -2px; } + + body.old panel { + max-height: 480px; + } + + body.old panel#favorites, body.old panel#history { display: none; } +} \ No newline at end of file diff --git a/css/settings.css b/css/settings.css new file mode 100644 index 0000000..205189d --- /dev/null +++ b/css/settings.css @@ -0,0 +1,116 @@ +iframe { +width: 100%; +border: none; +min-height: 128px; +} + +.box[name="profile"] img.avatar { + float: left; + margin: 2px; +} + +.tabbed-container .box { +padding: 8px; +} + +.tablist .tab { +cursor: pointer; +} + +.box .option .title.small { +font-size: 12px; +} + +.option { +margin: 8px 0px; +} + +.option.disabled > *:not(.title) { +opacity: 0.2; +} + +.option .title { +font-family: var(--spfont1); +font-weight: bold; +} + +.option .inputtext:not(.shown) { +display: none; +} + +.box hr { +border: var(--menu-border); +} + +.box .buttonbar { +border-top: var(--menu-border); +padding: 4px; +display: flex; +} + +.box .buttonbar .grower { +flex-grow: 1; +} + +.box[name="sessions"] .session { +background: var(--mail-content-bg, #dbdbdb); +border: var(--mail-content-border, 1px outset #a8a8a8); +padding: 4px; +margin: 8px 0px; +} + +.box[name="sessions"] .session .title { +background: var(--mail-subject-bg, #b7b7b7); +border: var(--mail-subject-border, 1px outset #8a8a8a); +display: flex; +padding: 4px; +margin: -8px; +margin-bottom: 4px; +font-family: var(--spfont1); +} + +.box[name="sessions"] .session .title img { +height: 16px; +} + +.box[name="sessions"] .session .title b { +flex-grow: 1; +} + +.box[name="sessions"] .session .title .button { +margin: 0px !important; +} + +.box .pager { display: flex; } + +.box .userlist .user-box { + display: flex; + margin: 4px 0px; +} +.box .userlist .user-box:hover { background: #0001; } + +.box .userlist .user-box hr { + margin: 4px; +} + +.guestbooklist .gbmsgbox { + border: var(--menu-border); + background: var(--menu-bg); + margin: 4px; + padding: 2px; +} + +.guestbooklist .gbmsgbox .name { + display: flex; +} +@media only screen and (orientation: landscape) { +.tabbed-container.primary > .box .tabbed-container.secondary { + margin: -44px -4px -8px -4px; +} + +.tabbed-container.primary > .box .tabbed-container.secondary .box { + border-left: none; + border-right: none; + border-bottom: none; +} +} \ No newline at end of file diff --git a/css/theme.css b/css/theme.css index 887b79d..46d9d80 100755 --- a/css/theme.css +++ b/css/theme.css @@ -8,11 +8,15 @@ --acc-nav-separator: 2px solid #000000; --context-menu: #d0d0d0; - --context-menu-border: 1px outset #a4a4a4; + --context-menu-border: 2px outset #a4a4a4; --context-menu-hover: #bfbfbf; - --menu-border: 1px outset #c8b793; - --menu-bg: #dbd1bb; + /* DEPRECATED: Use --x-container-y */ + --menu-border: 2px outset #c4dbff; + --menu-bg: #a5cff9; + + --primary-container-background: #a5cff9; + --primary-container-border: 2px outset #c4dbff; --header-bg: #ffffff; --header-text: #000000; @@ -32,12 +36,13 @@ --staff: #d500d1; - --tab-inactive: #aeafb9; - --tab-selected: #bfcfdd; + --tab-border: 2px outset #000; + --tab-inactive: #b9b3ae; + --tab-selected: #ddd0bf; --tab-gradient: #dedede; --popup-title-bg: #b3b3b3; - --popup-title-border: 1px outset #868686; + --popup-title-border: 2px outset #868686; --dialog-bg: #fbebcc; --dialog-button-hover: #f9f7dd; @@ -57,11 +62,11 @@ --success: #95ce8d; --mail-subject-bg: #b7b7b7; - --mail-subject-border: 1px outset #8a8a8a; + --mail-subject-border: 2px outset #8a8a8a; --mail-sub-bg: #cecece; - --mail-sub-border: 1px outset #a8a8a8; + --mail-sub-border: 2px outset #a8a8a8; --mail-content-bg: #dbdbdb; - --mail-content-border: 1px outset #959595; + --mail-content-border: 2px outset #959595; --mail-buttonbar: #cacaca; --forum-header: #f3dca9; @@ -121,12 +126,6 @@ --navbar-bg: url('//assets.worlio.com/style/navbar-bg'); --navbar-gradient: url('//assets.worlio.com/style/navbar-gradient'); - --rankflag0: #777; - --rankflag1: #4c3525; - --rankflag2: #3d464b; - --rankflag3: #5c4d0f; - --rankflag4: #5988a5; - --rankflag5: #319b3a; - --rankflag6: #d35ed0; - --rankflag7: #171717; + --primary-font: Pixio; + --secondary-font: TypeWriter; } \ No newline at end of file diff --git a/error/401.png b/error/401.png new file mode 100644 index 0000000..5b2587f Binary files /dev/null and b/error/401.png differ diff --git a/error/401.svg b/error/401.svg deleted file mode 100755 index 0c0ca7c..0000000 --- a/error/401.svg +++ /dev/null @@ -1,335 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - image/svg+xml - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/error/403.png b/error/403.png new file mode 100644 index 0000000..4ba118c Binary files /dev/null and b/error/403.png differ diff --git a/error/403.svg b/error/403.svg deleted file mode 100755 index d752823..0000000 --- a/error/403.svg +++ /dev/null @@ -1,351 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - image/svg+xml - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/error/404.png b/error/404.png new file mode 100644 index 0000000..37d6151 Binary files /dev/null and b/error/404.png differ diff --git a/error/404.svg b/error/404.svg deleted file mode 100755 index ed24c48..0000000 --- a/error/404.svg +++ /dev/null @@ -1,284 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - image/svg+xml - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/error/451.svg b/error/451.svg deleted file mode 100755 index e09a2cc..0000000 --- a/error/451.svg +++ /dev/null @@ -1,488 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - image/svg+xml - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/error/500.png b/error/500.png new file mode 100644 index 0000000..29f6838 Binary files /dev/null and b/error/500.png differ diff --git a/error/500.svg b/error/500.svg deleted file mode 100755 index 06b1936..0000000 --- a/error/500.svg +++ /dev/null @@ -1,341 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - image/svg+xml - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/style.css b/style.css index f3318ef..86e771e 100644 --- a/style.css +++ b/style.css @@ -1,13 +1,3 @@ -/* - * | | | - * | | | {} - * | | ___ .__ | ___ __ ___ . . - * | /\ | / \ | \ | || / \ / \ / \ |\ /| - * | / \ | || || | | || || || || || || | \/ | - * |/ \| \___/ | | || \___/ () \__/ \___/ | | - * GLOBAL SITE STYLESHEET - * 07/20/2022 - */ @import url('//assets.worlio.com/style/css/theme.css'); .pixel, nav, nav.top, .button, .centerdiv, .heading { @@ -31,7 +21,7 @@ nav.top::-webkit-scrollbar { body.home .home-container {} body.home .home-container img.logo { max-height: 256px; max-width: 100%; } body.home .home-container .slogan { - font-family: var(--spfont1); + font-family: var(--primary-font); font-weight: bold; font-size: 24px; text-align: center; @@ -60,7 +50,7 @@ body.home .home-container .blog-contents { } body.home .home-container .blog-contents .title { border-bottom: 1px solid black; - font-family: var(--spfont1); + font-family: var(--primary-font); font-weight: bold; font-size: 16px; padding: 2px; @@ -75,9 +65,9 @@ body.home .home-container .blog-contents .blog-item i { text-align: right; } nav.top { display: flex; - background-image: var(--navbar-top, url('//assets.worlio.com/style/navbar-top')); + background-image: var(--navbar-top); background-position: 0px 100%; - background-color: var(--acc-nav, #f3dca9); + background-color: var(--acc-nav); background-repeat: repeat-x; background-size: auto 64px; position: fixed; @@ -87,11 +77,16 @@ nav.top { white-space: nowrap; } +nav.top .navbutton-bar { + padding-left: 4px; + overflow-x: scroll; +} + nav.top div.slideout { position: relative; height: 32px; z-index: 3; - margin: 2px 4px; + margin: 2px; transition-duration: 0.05s; flex-shrink: 0; } @@ -104,35 +99,17 @@ nav.top div.slideout.active { width: 264px; } -nav.top div.slideout .upbutton { - width: 32px; - height: 16px; - margin: 0 auto; - background: var(--navbar-bg), rgb(196, 187, 166); - border: 1px outset black; - display: none; - opacity: 0; - transition-duration: 0.05s; -} - -nav.top div.slideout.active .upbutton { - display: block; - opacity: 1; -} - nav.top div.slideout .upbutton img { margin: 4px 8px; } -nav.top div.slideout.account .dropdown { margin: -2px -4px; } - nav.top div.slideout .dropdown { - font-family: var(--spfont1, Pixio); + font-family: var(--primary-font); background: var(--navbar-bg), linear-gradient(0deg, rgba(162,147,112,1) 0%, rgba(243,220,169,1) 8px); background-position: 0 0, 0px 100%; - background-color: var(--acc-nav, #f3dca9); + background-color: var(--acc-nav); background-repeat: repeat, repeat-x; background-size: auto auto, auto 64px; - border-right: var(--acc-nav-separator, 2px solid #000000); - border-bottom: var(--acc-nav-separator, 2px solid #000000); + border: var(--acc-nav-separator); + border-top: none; overflow: hidden; width: 100%; height: 32px; @@ -142,18 +119,40 @@ nav.top div.slideout .dropdown { white-space: nowrap; transition-duration: 0.05s; } +nav.top div.slideout.account .dropdown { + margin: -2px -4px; +} nav.top div.slideout:not(.active):hover .dropdown { background: var(--navbar-bg), linear-gradient(0deg, rgba(243,220,169,1) 0%, rgba(210,190,143,1) 8px); } -nav.top div.slideout.account.active .dropdown { height: 112px; } +nav.top div.slideout .dropdown .clicker { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +nav.top div.slideout.account .upane { + display: flex; +} + +nav.top div.slideout.account .upane .avatar { + flex-shrink: 0; + background: var(--menu-bg); + border: var(--menu-border); +} + +nav.top div.slideout.account .upane .ninfo { + flex-grow: 1; +} + +nav.top div.slideout.account.active .dropdown { height: 212px; } nav.top.guest div.slideout.account.active .dropdown { height: 112px; } nav.top div.slideout.mail.active .dropdown, nav.top div.slideout.alerts.active .dropdown { height: 352px; } - - nav.top div.slideout .dropdown .right { pointer-events: none; display: none; @@ -185,7 +184,7 @@ nav.top div.slideout.mail .dropdown .mail { nav.top div.slideout.alerts .dropdown .alerts .alert, nav.top div.slideout.mail .dropdown .mail .message { margin: 4px; - font-family: var(--spfont1); + font-family: var(--primary-font); background-color: var(--menu-bg); border: var(--menu-border); padding: 4px; @@ -231,38 +230,25 @@ nav.top div.slideout.mail .counter.new,nav.top div.slideout.alerts .counter.new nav.top div.slideout.account .username { display: block; - width: 132px; height: 38px; margin: -1px; } -nav.top div.slideout .dropdown .username .counters { - display: flex; +nav.top div.slideout.account .dropdown .mycon { + margin-right: 4px; } -nav.top div.slideout .dropdown .username .counter { - flex-grow: 1; +nav.top div.slideout.account .dropdown .username .currency { height: 16px; } - -nav.top div.slideout .dropdown .username .counter a { - color: var(--inactive, #6e6e6e); - vertical-align: top; - font-size: 14px; -} - -nav.top div.slideout .dropdown .username .counter img { +nav.top div.slideout.account .dropdown .username .currency img { height: 100%; margin: 0px 1px; padding: 0px 2px; + vertical-align: center; } - -nav.top div.slideout .dropdown .username .counter.alert a { - color: var(--alert, #ce0000); -} - -nav.top div.slideout .dropdown .username .counter.currency a { - color: var(--currency, #89541A); +nav.top div.slideout.account .dropdown .username .currency a { + color: var(--currency); } nav.top div.slideout .dropdown .username .userlink { @@ -302,7 +288,7 @@ nav.top p { } nav.top.alert { - background-color: var(--dialog-bg, #fbebcc); + background-color: var(--dialog-bg); height: unset; min-height: 28px; max-height: 64px; @@ -328,7 +314,7 @@ nav.top.alert p { } nav { - background-color: var(--main-nav, dodgerblue); + background-color: var(--main-nav); position: fixed; top: 0px; left: 0px; @@ -348,7 +334,7 @@ nav .logo { } .button, nav { - font-family: var(--spfont1, Pixio); + font-family: var(--primary-font); } .button { @@ -415,7 +401,7 @@ nav .logo { .longbutton.txt a { display: inline-block !important; width: 100%; height: 100%; - font-family: var(--spfont1, Pixio); + font-family: var(--primary-font); text-decoration: none; text-align: center; color: var(--main-text, #000000); @@ -428,7 +414,7 @@ nav .logo { } .longbutton > a, .smallbutton > a { - color: var(--main-text, #000000); + color: var(--main-text); text-decoration: none; display: flex !important; align-items: center; @@ -464,12 +450,12 @@ body { .header > .gap { flex-grow: 1;} .header > .title { - border: var(--menu-border, 1px solid #bdbdbd); + border: var(--menu-border); border-top: none; flex-shrink: 0; flex-grow: 0; - background-color: var(--menu-bg, #d0d0d0); + background-color: var(--menu-bg); padding: 8px; - font-family: var(--spfont1, Pixio); + font-family: var(--primary-font); font-weight: bold; margin: -8px 4px 8px 4px; } @@ -511,7 +497,7 @@ body { nav { width: 60px; padding: 0px 2px; - background-image: var(--navbar-left, url('//assets.worlio.com/style/navbar-left')); + background-image: var(--navbar-left); background-repeat: repeat-y; background-size: 100%; height: 100%; @@ -564,7 +550,7 @@ body { } .popbutton > a { - color: var(--main-text, #000000); + color: var(--main-text); text-decoration: none; display: flex; align-items: center; @@ -628,7 +614,7 @@ body { } nav { - background-image: var(--navbar-top, url('//assets.worlio.com/style/navbar-top')); + background-image: var(--navbar-top); background-repeat: repeat-x; background-size: 64px; width: 100%; @@ -642,8 +628,8 @@ body { } nav.top { - overflow-y: unset; overflow-x: unset; + overflow-y: unset; } nav hr { @@ -728,11 +714,15 @@ body { .forum .thread .post .bottombar .buttons { flex-direction: row; } + + nav.top div.slideout.account { width: 32px; } + nav.top div.slideout.account:not(.active) .dropdown .username *:not(.mycon) { display: none; } + nav.top div.slideout.account:not(.active) .dropdown .username .mycon { margin: 2px; } } body { - background-color: var(--main-background, #d3d3d3); - background-image: var(--background-image, url('//assets.worlio.com/style/background')); + background-color: var(--main-background); + background-image: var(--background-image); color: var(--main-text, #000000); } @@ -776,7 +766,7 @@ table { overflow-x: auto; white-space: nowrap; border: none; - font-family: var(--spfont1, Pixio); + font-family: var(--primary-font); } .heading.main { @@ -786,8 +776,8 @@ table { } .heading { - background-color: var(--header-bg, #ffffff);; - background-image: var(--navbar-top, url('//assets.worlio.com/style/navbar-top')); + background-color: var(--header-bg); + background-image: var(--navbar-top); } .heading.sub, @@ -802,8 +792,8 @@ table { .heading.section { background-size: 32px; - background-image: var(--nav-db, url('//assets.worlio.com/style/navbar-db'));; - background-color: var(--header-bg, #ffffff);; + background-image: var(--nav-db); + background-color: var(--header-bg); font-size: 1.5em; } @@ -844,7 +834,7 @@ table { .heading hr { margin: 0px 8px; border: none; - border-left: var(--header-line, 2px solid #000000); + border-left: var(--header-line); width: 0px; display: inline-block; height: 75%; @@ -865,7 +855,7 @@ hr.arrow.up { background-position: 0 100%; } hr.arrow.down { background-position: 100% 100%; } c, code, .codeblock:not(.title) { - background-color: var(--code-bg, #ffffff63); + background: var(--code-bg); color: var(--code-text, #000000); display: inline-block; max-width: calc(100% - 4px); @@ -1002,27 +992,27 @@ input[type="time"], input[type="url"], input[type="week"], textarea { - background-color: var(--input-bg, #ffffff); - color: var(--input-text, #000); + background-color: var(--input-bg); + color: var(--input-text); } input[type="file"] { - color: var(--input-text, #000); + color: var(--input-text); } .styled-table > tbody > tr { - border-bottom: 1px dashed var(--border-line, #000000); + border-bottom: 1px dashed var(--border-line); } .styled-table > tbody > tr th { background-color: rgba(255,255,255,0.4); - border-bottom: 1px solid var(--border-header, #ffffff); + border-bottom: 1px solid var(--border-header); } -.styled-table > tbody > tr td { border: 1px dotted var(--border-line, #000000); } +.styled-table > tbody > tr td { border: 1px dotted var(--border-line); } -.status.success, .output .success {color: var(--status-success, #458e1c);} -.status.error, .output .error {color: var(--status-error, #ff0000);} +.status.success, .output .success {color: var(--status-success);} +.status.error, .output .error {color: var(--status-error);} heading .button { display: inline-block !important; @@ -1030,11 +1020,11 @@ heading .button { .file-table { width: calc(100% - 8px); - border: 1px dotted var(--border-line, #000000); + border: 1px dotted var(--border-line); } .file-table tr { - border-bottom: 1px dotted var(--border-line, #000000); + border-bottom: 1px dotted var(--border-line); } .userlink { @@ -1043,7 +1033,7 @@ heading .button { } .userlink a { - color: var(--main-text, #000000); + color: var(--main-text); text-decoration: none; } @@ -1053,8 +1043,8 @@ heading .button { } .message-container { - background-color: var(--main-background, #d3d3d3); - border: var(--menu-border, 1px solid #bdbdbd); + background-color: var(--main-background); + border: var(--menu-border); display: block; padding: 4px; margin-right: 8px; @@ -1071,8 +1061,8 @@ heading .button { } .message-container .body { - background-color: var(--menu-bg, #d0d0d0); - border: var(--menu-border, 1px solid #bdbdbd); + background-color: var(--menu-bg); + border: var(--menu-border); padding: 8px; margin: 4px; } @@ -1093,13 +1083,13 @@ heading .button { .formbutton button { background: none; - color: var(--main-text, #000000); + color: var(--main-text); text-decoration: none; display: flex; align-items: center; width: 100%; height: 100%; - font-family: var(--spfont1, Pixio); + font-family: var(--primary-font); border: none; box-sizing: content-box; padding: 0px; @@ -1134,11 +1124,11 @@ textarea { } .dropdown .menu { - background-image: var(--background-image, url('//assets.worlio.com/style/background')); + background-image: var(--background-image); display: none; position: relative; - background-color: var(--menu-bg, #d0d0d0); - border: var(--menu-border, 1px solid #bdbdbd); + background-color: var(--menu-bg); + border: var(--menu-border); padding: 4px; right: 152px; width: 140px; @@ -1188,15 +1178,12 @@ table { } .form-container { - background-color: var(--menu-bg, #d0d0d0); - border: var(--menu-border, 1px solid #bdbdbd); + background-color: var(--menu-bg); + border: var(--menu-border); padding: 8px; margin: 4px; } -.tabbed-container { -} - .tabbed-container .tablist .tab, .tabbed-container .tablist .faketab { cursor: pointer; @@ -1206,7 +1193,7 @@ table { .mailbox a:link, .mailbox a:visited, .tablist a, .tablist a:link, .tablist a:visited { - color: var(--main-text, #000000); + color: var(--main-text); text-decoration: none; } @@ -1217,7 +1204,7 @@ table { .tabbed-container .tablist { position: relative; - bottom: -1px; + bottom: -2px; display: flex; flex-direction: row; flex-shrink: 0; @@ -1227,15 +1214,15 @@ table { .tabbed-container .tablist .tab, .tabbed-container .tablist .faketab { - background-color: var(--tab-inactive, #bdbdbd); - border: var(--menu-border, 1px solid #bdbdbd); + background-color: var(--tab-inactive); + border: var(--tab-border); display: inline-block; padding: 8px; position: relative; margin: 0px 2px; bottom: -1px; text-align: center; - font-family: var(--spfont1, Pixio); + font-family: var(--primary-font); } .tabbed-container .tablist .tab *:not(.userlink) img, @@ -1246,17 +1233,17 @@ table { .tabbed-container .tablist .tab.selected, .tabbed-container .tablist .faketab.selected { background: var(--tab-selected, #d3d3d3); - background: -moz-linear-gradient(0deg, var(--tab-selected, #d3d3d3) 50%, var(--tab-gradient, #dedede) 100%); - background: -webkit-linear-gradient(0deg, var(--tab-selected, #d3d3d3) 50%, var(--tab-gradient, #dedede) 100%); - background: linear-gradient(0deg, var(--tab-selected, #d3d3d3) 50%, var(--tab-gradient, #dedede) 100%); + background: -moz-linear-gradient(0deg, var(--tab-selected) 50%, var(--tab-gradient) 100%); + background: -webkit-linear-gradient(0deg, var(--tab-selected) 50%, var(--tab-gradient) 100%); + background: linear-gradient(0deg, var(--tab-selected) 50%, var(--tab-gradient) 100%); bottom: -2px; /*border-bottom: none;*/ } .tabbed-container .box, .tabbed-container .dropdown { - background-color: var(--tab-selected, #d3d3d3); - border: var(--menu-border, 1px solid #bdbdbd); + background-color: var(--tab-selected); + border: var(--tab-border); padding: 4px; display: block; flex: auto; @@ -1270,8 +1257,8 @@ table { .mailbox .message, .userbox .member { - background-color: var(--menu-bg, #d0d0d0); - border: var(--menu-border, 1px solid #bdbdbd); + background-color: var(--menu-bg); + border: var(--menu-border); margin: 4px; padding: 8px; } @@ -1296,7 +1283,7 @@ table { .overlay .box, .overlay .attachment { - background: var(--main-background, #d3d3d3); + background: var(--main-background); border: 2px inset gray; padding: 8px; @@ -1319,7 +1306,7 @@ table { cursor: pointer; border: 1px solid transparent; height: 30px; - font-family: var(--spfont1); + font-family: var(--primary-font); } .overlay .popup.box .embedder .embed-item img { @@ -1329,8 +1316,8 @@ table { } .overlay .popup.box .embedder .embed-item:hover { - border: var(--menu-border, 1px solid #bdbdbd); - background: var(--menu-bg, #d0d0d0); + border: var(--menu-border); + background: var(--menu-bg); } .overlay .popup.box .embedder .embed-item.selected { @@ -1341,7 +1328,7 @@ table { .dragbox { position: absolute; z-index: 10; - background: var(--main-background, #d3d3d3); + background: var(--main-background); border: var(--menu-border); padding: 8px; box-shadow: #0005 5px 5px 4px; @@ -1363,7 +1350,7 @@ table { padding: 4px; background: var(--popup-title-bg); border-bottom: var(--popup-title-border); - font-family: var(--spfont1, Pixio); + font-family: var(--primary-font); } .overlay .popup .titlebar .title, @@ -1446,10 +1433,10 @@ table { .tabbed-container.vertical > .tablist .tab.selected, .tabbed-container.vertical > .tablist .faketab.selected { background: var(--tab-selected, #d3d3d3); - background: -moz-linear-gradient(-90deg, var(--tab-selected, #d3d3d3) 25%, var(--tab-gradient, #dedede) 100%); - background: -webkit-linear-gradient(-90deg, var(--tab-selected, #d3d3d3) 25%, var(--tab-gradient, #dedede) 100%); - background: linear-gradient(-90deg, var(--tab-selected, #d3d3d3) 25%, var(--tab-gradient, #dedede) 100%); - border: var(--menu-border, 1px solid #bdbdbd); + background: -moz-linear-gradient(-90deg, var(--tab-selected) 25%, var(--tab-gradient) 100%); + background: -webkit-linear-gradient(-90deg, var(--tab-selected) 25%, var(--tab-gradient) 100%); + background: linear-gradient(-90deg, var(--tab-selected) 25%, var(--tab-gradient) 100%); + border: var(--tab-border); } .forum .thread .threadsub { @@ -1489,7 +1476,7 @@ table { } /* FORUM */ -table.board { font-family: var(--spfont1, Pixio); } +table.board { font-family: var(--primary-font); } table.board th { text-align: left; @@ -1497,7 +1484,7 @@ table.board th { background-color: var(--forum-header, #f3dca9); } -body.forum_board table.board tr:nth-child(0) { border: var(--forum-header-border, 1px solid #a89b7f); } +body.forum_board table.board tr:nth-child(0) { border: var(--forum-header-border); } body.forum_board table.board tr:not(.subboard) td:nth-child(4), body.forum_board table.board tr:not(.subboard) th:nth-child(3) { text-align: right; } @@ -1507,14 +1494,14 @@ body.forum table.board td:nth-child(3) * { vertical-align: middle; } body.forum table.board th { cursor: pointer; user-select: none; - border: var(--forum-header-border, 1px solid #a89b7f); + border: var(--forum-header-border); } table.board tr { text-align: left; padding: 4px; - background-color: var(--forum-content, #d9d4c9); - border: var(--forum-content-border, 1px solid #a29c8d); + background-color: var(--forum-content); + border: var(--forum-content-border); } body.forum_board table.board th { @@ -1530,7 +1517,7 @@ body.forum table.board.collapsed td { display: none; } body.forum_board table.board col:nth-child(4), body.forum_watched table.board td:nth-child(4), body.forum_watched table.board col:nth-child(4) { display: none; } - table.board td:nth-child(3) { border-right: var(--forum-content-border, 1px solid #a29c8d); } + table.board td:nth-child(3) { border-right: var(--forum-content-border); } } table.board .status { @@ -1541,7 +1528,7 @@ table.board .status { } .forum .category { - font-family: var(--spfont1, Pixio); + font-family: var(--primary-font); } .forum > .category, @@ -1562,9 +1549,9 @@ table.board .status { .forum .category name, .forum .thread name { display: flex; - background-color: var(--forum-header, #f3dca9); - border: var(--forum-header-border, 1px solid #a89b7f); - font-family: var(--spfont1, Pixio); + background-color: var(--forum-header); + border: var(--forum-header-border); + font-family: var(--primary-font); padding: 4px; } @@ -1584,7 +1571,7 @@ table.board .status { .forum .category name .info i, .forum .thread name .info i { font-size: 12px; - color: var(--subtitle, #525252); + color: var(--subtitle); } .forum .board name .buttons, @@ -1608,8 +1595,8 @@ table.board .status { .forum .category .board { display: flex; - background-color: var(--forum-content, #d9d4c9); - border: var(--forum-content-border, 1px solid #a29c8d); + background-color: var(--forum-content); + border: var(--forum-content-border); padding: 8px; margin-left: 8px; margin-bottom: -1px; @@ -1631,13 +1618,13 @@ table.board .status { .forum .board .thread { display: flex; - background-color: var(--forum-content, #d9d4c9); - border: var(--forum-content-border, 1px solid #a29c8d); + background-color: var(--forum-content); + border: var(--forum-content-border); border-top: none; margin-left: 8px; margin-right: 8px; padding: 8px; - font-family: var(--spfont1, Pixio); + font-family: var(--primary-font); } .forum .board .thread .userlink { @@ -1649,7 +1636,7 @@ table.board .status { } .forum .board .thread .details1 .post-count { - color: var(--subtitle, #525252); + color: var(--subtitle); } .forum .board .thread .details2 { @@ -1664,14 +1651,14 @@ table.board .status { } .forum .board .thread .time { - color: var(--subtitle, #525252); + color: var(--subtitle); } .forum .thread .post .post-content, .forum .thread .reply, .forum .errors { - background-color: var(--post, #d9d9d9); - border: var(--post-border, 1px solid #bfb9a9); + background-color: var(--post); + border: var(--post-border); padding: 4px; } @@ -1690,7 +1677,7 @@ table.board .status { .forum .thread .reply .title, .forum .errors .title { display: flex; - font-family: var(--spfont1, Pixio); + font-family: var(--primary-font); padding: 4px; margin: -8px; margin-bottom: 8px; @@ -1705,8 +1692,8 @@ table.board .status { } .forum .thread .post .authorbar { - background-color: var(--post-author, #b4b6b7); - border: var(--post-author-border, 1px solid #84775a); + background-color: var(--post-author); + border: var(--post-author-border); display: flex; min-height: 64px; padding: 2px; @@ -1718,10 +1705,8 @@ table.board .status { flex-direction: column; } -/*.forum .thread .post .authorbar .userlink { text-align: center: }*/ - .forum .thread .post .authorbar .user-stat { - font-family: var(--spfont1); + font-family: var(--primary-font); color: var(--subtitle); display: flex; } @@ -1745,7 +1730,7 @@ table.board .status { display: flex; padding: 2px; margin: 0px 16px; - font-family: var(--spfont1, Pixio); + font-family: var(--primary-font); z-index: 5; } @@ -1766,7 +1751,7 @@ table.board .status { background-color: var(--post-bottombar, #d2d2d2); padding: 4px; display: flex; - font-family: var(--spfont1, Pixio); + font-family: var(--primary-font); margin: -4px; margin-bottom: 4px; } @@ -1796,7 +1781,7 @@ table.board .status { background-color: var(--post-bottombar, #d2d2d2); display: flex; margin: -4px; margin-top: 8px; - font-family: var(--spfont1, Pixio); + font-family: var(--primary-font); } .forum .thread .post .buttonbar a { @@ -1804,7 +1789,7 @@ table.board .status { } .forum .thread .options .option .name { - font-family: var(--spfont1, Pixio); + font-family: var(--primary-font); } .forum .thread name .thricon { @@ -1847,7 +1832,7 @@ div.page-buttons .button#last-page div a { display: block; } -.userlink { font-family: var(--spfont1, Pixio); } +.userlink { font-family: var(--primary-font); } .posteditor .editor-buttons .button a > input, .posteditor .editor-buttons .button a > select { @@ -1855,7 +1840,7 @@ div.page-buttons .button#last-page div a { border: none; height: 100%; width: 100%; - font-family: var(--spfont1, Pixio); + font-family: var(--primary-font); } .posteditor .editbox { @@ -1894,7 +1879,7 @@ div.emotebox .emote-container:hover { } .mailcontainer .subject { - font-family: var(--spfont1, Pixio); + font-family: var(--primary-font); margin: 2px 2px 0px 2px; background: var(--mail-subject-bg, #b7b7b7); border: var(--mail-subject-border, 1px solid #8a8a8a); @@ -1931,7 +1916,7 @@ div.emotebox .emote-container:hover { .mailcontainer .buttonbar .date { flex-grow: 1; - font-family: var(--spfont1, Pixio); + font-family: var(--primary-font); padding: 4px; color: var(--subtitle, #525252); } @@ -2013,15 +1998,15 @@ body.forum .sidebar .box .content { border-top: 0; } -body.forum .sidebar .box .content .subject {font-family: var(--spfont1);} +body.forum .sidebar .box .content .subject {font-family: var(--primary-font);} body.forum .sidebar .box name { background: var(--post-author); border: var(--post-author-border); - font-family: var(--spfont1); + font-family: var(--primary-font); font-weight: bold; padding: 4px; } -body.forum .sidebar .box .thread .info {font-family: var(--spfont1);} +body.forum .sidebar .box .thread .info {font-family: var(--primary-font);} body.forum .sidebar .box .thread .info .loc {font-size: 12px;} body.forum .sidebar .box .thread .info .timestamp {color: var(--subtitle);} @@ -2072,7 +2057,7 @@ body.dashboard .dash-container .mainbox { } body.dashboard .profile-tag { - font-family: var(--spfont1); + font-family: var(--primary-font); display: flex; } @@ -2097,7 +2082,7 @@ body.dashboard .dash-title { display: inline-block; padding: 8px; font-weight: bold; - font-family: var(--spfont1); + font-family: var(--primary-font); margin-bottom: -1px; } @@ -2124,7 +2109,7 @@ body.dashboard .dash-container .sidebar .userlink.invisible { } body.dashboard .stats { - font-family: var(--spfont1); + font-family: var(--primary-font); font-size: 20px; } @@ -2151,7 +2136,7 @@ body.dashboard .stats .unread { color: var(--alert); } .dash-container .primary .mainbox .alert .info { text-align: right; color: var(--subtitle); - font-family: var(--spfont1); + font-family: var(--primary-font); } .dash-container .blogpost { @@ -2160,13 +2145,13 @@ body.dashboard .stats .unread { color: var(--alert); } .dash-container .blogpost .info { color: var(--subtitle); - font-family: var(--spfont1); + font-family: var(--primary-font); } .dash-container .sidebar .container div.filespace meter { flex-grow: 1; margin: 0px 4px;} .dash-container .sidebar .container div.filespace b { margin-right: 4px;} .dash-container .sidebar .container div.filespace { display: flex; } -.dash-container .sidebar .container div.filespace a { font-family: var(--spfont1); margin: 0px 2px; } +.dash-container .sidebar .container div.filespace a { font-family: var(--primary-font); margin: 0px 2px; } /* USER PROFILE PAGE */ body.user-profile .user-infobox { @@ -2208,9 +2193,9 @@ body.user-profile .tabbed-container { body.user-profile .tabbed-container .tablist {white-space: nowrap;} body.user-profile .tabbed-container .box[name='stats'] .stat.role-stat, -body.user-profile .tabbed-container .box[name='stats'] .stat.plan-stat { font-family: var(--spfont1); } +body.user-profile .tabbed-container .box[name='stats'] .stat.plan-stat { font-family: var(--primary-font); } body.user-profile .tabbed-container .stat b { - font-family: var(--spfont1); + font-family: var(--primary-font); font-size: 12px; } @@ -2227,7 +2212,7 @@ a.thumbnail-box { width: 150px; height: 150px; color: var(--main-text); - font-family: var(--spfont1); + font-family: var(--primary-font); text-decoration: none; margin: 2px; } @@ -2248,7 +2233,7 @@ button.user-input { width: 180px; height: 24px; text-align: left; - font-family: var(--spfont1); + font-family: var(--primary-font); font-size: 14px; vertical-align: middle; cursor: pointer;