diff --git a/epicyon-links.css b/epicyon-links.css new file mode 100644 index 000000000..1434a4df7 --- /dev/null +++ b/epicyon-links.css @@ -0,0 +1,1905 @@ +@charset "UTF-8"; + +:root { + --main-bg-color: #282c37; + --link-bg-color: #282c37; + --dropdown-fg-color: #dddddd; + --dropdown-bg-color: #111; + --dropdown-bg-color-hover: #333; + --dropdown-fg-color-hover: #dddddd; + --main-bg-color-reply: #212c37; + --main-bg-color-dm: #222; + --main-bg-color-report: #221c27; + --main-header-color-roles: #282237; + --main-fg-color: #dddddd; + --main-link-color: #999; + --main-link-color-hover: #bbb; + --main-visited-color: #888; + --border-color: #505050; + --border-width: 2px; + --font-size-header: 18px; + --font-size-header-mobile: 32px; + --font-color-header: #ccc; + --font-size-button-mobile: 34px; + --font-size: 30px; + --font-size2: 24px; + --font-size3: 38px; + --font-size4: 22px; + --font-size5: 20px; + --font-size-likes: 20px; + --font-size-likes-mobile: 32px; + --font-size-pgp-key: 16px; + --font-size-pgp-key2: 8px; + --font-size-tox: 16px; + --font-size-tox2: 8px; + --time-color: #aaa; + --time-vertical-align: 4px; + --button-text: #FFFFFF; + --button-background: #999; + --button-background-hover: #777; + --button-selected: #666; + --button-highlighted: green; + --button-fg-highlighted: #FFFFFF; + --button-selected-highlighted: darkgreen; + --button-approve: darkgreen; + --button-deny: darkred; + --button-height: 10px; + --button-height-padding-mobile: 20px; + --button-height-padding: 10px; + --image-corners: 10%, + --gallery-border: #ccc; + --gallery-hover: #777; + --gallery-text-color: #ccc; + --gallery-font-size: 22px; + --gallery-font-size-mobile: 35px; + --button-corner-radius: 15px; + --timeline-border-radius: 30px; + --icons-side: right; + --title-color: #999; + --focus-color: white; + --quote-right-margin: 0.1em; + --quote-font-weight: normal; + --quote-font-size: 120%; + --line-spacing: 130%; + --column-left-width: 10vw; + --column-center-width: 80vw; + --column-right-width: 10vw; +} + +@font-face { + font-family: 'Bedstead'; + font-style: italic; + font-weight: normal; + font-display: block; + src: url('./fonts/bedstead.otf') format('opentype'); +} +@font-face { + font-family: 'Bedstead'; + font-style: normal; + font-weight: normal; + font-display: block; + src: url('./fonts/bedstead.otf') format('opentype'); +} + +body, html { + background-color: var(--main-bg-color); + color: var(--main-fg-color); + + height: 100%; + font-family: Arial, Helvetica, sans-serif; + min-width: 950px; + font-size: var(--font-size); + line-height: var(--line-spacing); +} + +blockquote { + border-left: 10px; + margin: 1.5em 10px; + padding: 0.5em 10px; + font-weight: var(--quote-font-weight); + font-style: italic; + font-size: var(--quote-font-size); + quotes: "\201C""\201D""\2018""\2019"; +} +blockquote:before { + content: open-quote; + font-size: 2em; + line-height: 0.1em; + margin-right: 0.25em; + vertical-align: -0.4em; +} +blockquote:after { + content: close-quote; + font-size: 2em; + line-height: 0.1em; + margin-left: var(--quote-right-margin); + vertical-align: -0.4em; +} +blockquote p { + display: inline; +} + +.editLinksIcon { + width: 50px; +} + +.imageAnchor:focus img{ + border: 2px solid var(--focus-color); +} + +h1 { + color: var(--title-color); +} + +a, u { + color: var(--main-fg-color); +} + +.editLinksBtn { + border-radius: var(--button-corner-radius); + background-color: var(--button-background); + border: none; + color: var(--button-text); + text-align: center; + font-size: var(--font-size-header); + font-family: Arial, Helvetica, sans-serif; + padding: var(--button-height-padding); + width: 90%; + max-width: 200px; + min-width: 10ch; + transition: all 0.5s; + cursor: pointer; + margin: 5px; +} + +a:visited{ + color: var(--main-visited-color); + background: var(--link-bg-color); + font-weight: bold; +} + +a:link { + color: var(--main-link-color); + background: var(--link-bg-color); + font-weight: bold; +} + +a:link:hover { + color: var(--main-link-color-hover); +} + +a:visited:hover { + color: var(--main-link-color-hover); +} + +.buttonevent:hover { + filter: brightness(150%); +} + +a:focus { + border: 2px solid var(--focus-color); +} + +.timeline-banner { + background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.5)), url("banner.png"); + height: 15%; + background-repeat: no-repeat; + background-size: 100vw; + position: relative; +} + +.hero-image { + background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.5)), url("image.png"); + height: 50%; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + position: relative; +} + +.rssfeed img { + width: 5%; + float: right; +} + +.about { + font-size: var(--font-size5); + font-family: Arial, Helvetica, sans-serif; + float: right; +} + +.blogreplies { + color: var(--button-highlighted); + font-size: var(--font-size2); + font-family: Arial, Helvetica, sans-serif; + float: right; +} + +.buttonprev { + float: left; + width: 10%; + -ms-transform: translateY(30%); + transform: translateY(30%); +} + +.buttonnext { + float: right; + width: 10%; + -ms-transform: translateY(30%) scaleX(-1); + transform: translateY(30%) scaleX(-1); +} + +.hero-image img { + width: 50%; +} + +.new-post-text { + font-size: var(--font-size2); + font-family: Arial, Helvetica, sans-serif; + padding: 4px 0; +} + +.new-post-subtext { + font-size: var(--font-size-header); + font-family: Arial, Helvetica, sans-serif; + padding: 4px 0; +} + +.highlight { + width: 2%; +} + +.roles { + text-align: center; + left: 35%; + background-color: var(--main-header-color-roles); +} + +.roles-inner { + padding: 10px 25px; + background-color: var(--main-bg-color); +} + +.hero-text img.emoji { + width: 50px; + padding: 0 0; + margin: 0 0; + float: none; +} + +.hero-text button { + border: none; + outline: 0; + display: inline-block; + padding: 10px 25px; + color: black; + background-color: #ddd; + text-align: center; + cursor: pointer; + font-family: Arial, Helvetica, sans-serif; +} + +.hero-text button:hover { + background-color: var(--button-background); + color: var(--button-text); +} + +.timelineIcon { + width: 10%; +} + +.container img.timelineicon:hover { + filter: brightness(150%); +} + +.buttonunfollow:hover { + background-color: var(--button-background-hover); +} + +.followRequestHandle { + padding: 0px 20px; +} + +.button span { + font-family: Arial, Helvetica, sans-serif; + cursor: pointer; + display: inline-block; + position: relative; + transition: 0.5s; +} + +.button span:after { + font-family: Arial, Helvetica, sans-serif; + content: '\00bb'; + position: absolute; + opacity: 0; + top: 0; + right: -20px; + transition: 0.5s; +} + +.button:hover { + background-color: var(--button-background-hover); +} + +.donateButton:hover { + background-color: var(--button-background-hover); +} + +.buttonselected span { + font-family: Arial, Helvetica, sans-serif; + cursor: pointer; + display: inline-block; + position: relative; + transition: 0.5s; +} + +.buttonselected span:after { + font-family: Arial, Helvetica, sans-serif; + content: '\00bb'; + position: absolute; + opacity: 0; + top: 0; + right: -20px; + transition: 0.5s; +} + +.buttonselected:hover { + background-color: var(--button-background-hover); +} + +.container { + border: var(--border-width) solid var(--border-color); + background-color: var(--main-bg-color); + border-radius: var(--timeline-border-radius); + padding: 20px; + margin: 10px; +} + +.media { + width: 80%; + border-radius: 5px; + padding: 10px; + margin: 10px 0; +} + +.message { + margin-left: 7%; + width: 90%; +} + +.message:focus{ + border: 2px solid var(--focus-color); +} + +.message:focus img{ + border: 2px solid var(--focus-color); +} + +.gitpatch { + width: 90%; + font-family: 'monospace'; +} + +.container::after { + content: ""; + clear: both; + display: table; +} + +.searchEmoji { + vertical-align: middle; + float: none; + width: 80px; + margin: 0px 10px; + padding: 0px 0px; + border-radius: 0px; +} + +.container img.emoji { + float: none; + width: 50px; + margin-left: 0px; + margin-right: 0px; + padding-right: 0px; + border-radius: 0px; + vertical-align: middle; +} + +.hero-text img.emojiprofile { + float: none; + width: 50px; + margin-left: 0px; + margin-right: 0px; + padding-right: 0px; + border-radius: 0px; + vertical-align: middle; +} + +.containericons { + padding: 0px 0px; + margin: 0px 0px; +} + +.replyingto { + color: var(--main-fg-color); +} + +.imText { + font-size: var(--font-size4); + font-family: Arial, Helvetica, sans-serif; + color: var(--main-link-color); + background: var(--link-bg-color); +} + +.container img.announceOrReply { + float: none; + width: 30px; + margin: 0 0; + padding: 0 0; + border-radius: 0; + vertical-align: middle; +} + +.container img.DMicon { + float: none; + width: 40px; + margin: 0 0; + padding: 0 0; + border-radius: 0; + vertical-align: middle; +} + +.darker { + background-color: var(--main-bg-color-reply); +} + +.dm { + background-color: var(--main-bg-color-dm); +} + +.report { + border-color: #255; + background-color: var(--main-bg-color-report); +} + +.container img.attachment { + max-width: 120%; + margin-left: 5%; + width: 120%; + padding-bottom: 3%; +} +.container img.right { + float: var(--icons-side); + margin-left: 0px; + margin-right:0; + padding: 0 0; + margin: 0 0; +} +.containericons img.right { + float: var(--icons-side); + margin-left: 20px; + margin-right: 0; +} + +.containericons img:hover { + filter: brightness(150%); +} + +.post-title { + margin-top: 0px; + color: #444; +} + +.share-title { + margin-top: 0px; + color: var(--main-fg-color); +} + +.skill-title { + margin-left: 25%; + text-align: left; + font-size: var(--font-size2); + font-family: Arial, Helvetica, sans-serif; + font-weight: bold; + color: var(--button-selected); + line-height: 40px; +} + +#myProgress { + float: left; + width: 70%; + background-color: #f1f1f1; +} + +#myBar { + float: left; + width: 10%; + height: 30px; + background-color: var(--button-background); + font-family: Arial, Helvetica, sans-serif; +} + +input[type=number] { + width: 10%; + padding: 12px; + border: 1px solid #ccc; + border-radius: var(--button-corner-radius); + box-sizing: border-box; + margin-top: 6px; + margin-bottom: 16px; + resize: vertical; + font-size: var(--font-size-header); + font-family: Arial, Helvetica, sans-serif; +} + +.labels { + font-size: var(--font-size); + font-family: Arial, Helvetica, sans-serif; +} + +.transparent { + color: rgba(0, 0, 0, 0.0); + font-size: 0px; + font-family: Arial, Helvetica, sans-serif; + line-height: 0; +} + +.labelsright { + float: right; + font-size: var(--font-size); + font-family: Arial, Helvetica, sans-serif; +} + +input[type=date] { + background-color: var(--main-bg-color-reply); + color: var(--main-fg-color); + font-size: var(--font-size); + font-family: Arial, Helvetica, sans-serif; + border: none; +} + +input[type=time] { + background-color: var(--main-bg-color-reply); + color: var(--main-fg-color); + font-size: var(--font-size); + font-family: Arial, Helvetica, sans-serif; + border: none; +} + +input[type=submit] { + background-color: var(--button-background); + color: var(--button-text); + margin: 10px 10px; + padding: 12px 10px; + border: none; + border-radius: var(--button-corner-radius); + cursor: pointer; + font-size: var(--font-size-header); + font-family: Arial, Helvetica, sans-serif; + width: 120px; +} + +.loginButton { + background-color: #2965; + color: #000; + float: none; + margin: 0px 10px; + padding: 12px 40px; + border: none; + border-radius: var(--button-corner-radius); + cursor: pointer; + font-size: var(--font-size2); + font-family: Arial, Helvetica, sans-serif; + opacity: 0.7; +} + +input[type=submit]:hover { + background-color: var(--button-background); +} + +.vertical-center { + max-width: 90%; + min-width: 600px; + margin: 0 auto; + padding: 5% 0px; +} + +/* The container
- needed to position the dropdown content */ +.dropdown { + margin: 10px auto; + padding: 0px 14px; + position: relative; + display: inline-block; +} + +.dropdown img { + opacity: 1.0; + width: 32px; + height: 32px; + padding: 0px 16px; + -ms-transform: translateY(-10%); + transform: translateY(-10%); +} + +.timeline-avatar { + margin: 10px auto; + padding: 0px 0px; +} + +.timeline-avatar:hover { + filter: brightness(120%); +} + +.timeline-avatar-reply { + padding: 0px 0px; + width: 80%; +} + +.search-result-text { + font-size: var(--font-size); + font-family: Arial, Helvetica, sans-serif; +} + +.search-result img { + width: 7%; + padding: 0px 30px; +} + +/* Dropdown Content (Hidden by Default) */ +.dropdown-content { + display: none; + position: absolute; + background-color: var(--dropdown-bg-color); + min-width: 600px; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + z-index: 1; +} + +/* Links inside the dropdown */ +.dropdown-content a { + background-color: var(--dropdown-bg-color); + color: var(--dropdown-fg-color); + padding: 12px 16px; + text-decoration: none; + display: block; +} + +.dropdown-content img { + width: 32px; + height: 32px; + padding: 0px 0px; +} + +/* Change color of dropdown links on hover */ +.dropdown-content a:hover { + color: var(--dropdown-fg-color-hover); + background-color: var(--dropdown-bg-color-hover); +} + +/* Show the dropdown menu on hover */ +.show {display: block;} + +.slider { + -webkit-appearance: none; + width: 57%; + height: 25px; + background: #d3d3d3; + outline: none; + opacity: 0.7; + -webkit-transition: .2s; + transition: opacity .2s; + float: right; + margin: 5px 0; + padding: 12px 0; +} + +.slider:hover { + opacity: 1; +} + +.slider::-moz-range-thumb { + width: 25px; + height: 25px; + background: var(--main-bg-color); + cursor: pointer; +} + +.dropbtn { + margin: 3%; + padding: 0px 14px; + position: relative; + display: inline-block; + border: none; + cursor: pointer; +} + +.dropbtn img { + opacity: 1.0; + width: 3%; + height: 3%; + min-width: 40px; + -ms-transform: translateY(10%); + transform: translateY(10%); +} + +div.gallery:hover { + border: 1px solid var(--gallery-hover); +} + +div.gallery img { + width: 100%; + height: auto; +} + +.invisible { + color: transparent; + font-size: 0; + font-family: Arial, Helvetica, sans-serif; +} + +.gallerytext { + text-decoration: none; +} + +li { list-style:none;} +.msgscope-collapse { position: relative; } +.nav { width: 150px; } +/***********BUTTON CODE ******************************************************/ + +a, button, input:focus, input[type='button'], input[type='reset'], input[type='submit'], textarea:focus, .button { + -webkit-transition: all 0.1s ease-in-out; + -moz-transition: all 0.1s ease-in-out; + -ms-transition: all 0.1s ease-in-out; + -o-transition: all 0.1s ease-in-out; + transition: all 0.1s ease-in-out; + text-decoration: none; +} +.button-msgScope { + display: flex; + flex-direction: row; + justify-content: center; + width: 100%; + min-height: 100%; +} +.button-msgScope button, .button-msgScope div.lined-thin { + align-self: center; + background: transparent; + padding: 1rem 1rem; + margin: 0 1rem; + transition: all .5s ease; + color: var(--dropdown-fg-color); + font-size: 2rem; + letter-spacing: 1px; + outline: none; +} +.btn { + margin: -3px 0 0 0; +} + +aside .toggle-msgScope input[type='checkbox'] { + float: right; +} + +.toggle-msgScope { + position: relative; + overflow: hidden; + transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94); + line-height: 2rem; + font-size: 2.5rem; +} +.toggle-msgScope div[class*='toggle-inside'] { + overflow: hidden; + box-sizing: border-box; + display: none; +} +aside .toggle-msgScope input[type='checkbox'] { + float:right; +} +aside .toggle-inside li { + padding-left: 20px; + width: 100%; + margin-left: -15px; + overflow: hidden; +} +.nav li:hover { + color: var(--dropdown-fg-color-hover); + background-color: var(--dropdown-bg-color-hover); +} +.nav .toggle-msgScope { + overflow: visible; +} +#msgscope label div { + -webkit-transition: all 0.1s ease-in-out; + -moz-transition: all 0.1s ease-in-out; + -ms-transition: all 0.1s ease-in-out; + -o-transition: all 0.1s ease-in-out; + transition: all 0.1s ease-in-out; + margin: 0 auto; + font-size: 1.5rem; + text-decoration: none; + display: inline-block; + font-weight: bold; + background-color: var(--dropdown-bg-color); + color: var(--dropdown-fg-color); + display: inline-block; + margin-bottom: 0; + text-align: center; + vertical-align: middle; + cursor: pointer; + background-image: none; + white-space: nowrap; + font-size: 0px; + line-height: 1.42857143; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + margin-top: 10px; +} +[id*='toggle'] .container, [class*='toggle'] .container { + transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94); +} +[id*='toggle'] { + visibility: hidden; + appearance:none; + cursor:pointer; + left:-100%; + top:-100%; +} +[id*='toggle'] + label { + cursor:pointer; + text-align: left; + -webkit-font-smoothing: antialiased; + cursor: pointer; + transition:all 500ms ease; +} +[id*='toggle'toggle'toggle'] + label div { + transition:all 500ms ease; +} +[id*='toggle'toggle'toggle'] + label div:after { + content:'\002b'; /* open */ + text-align: left; + float: left; +} +[id*='toggle'toggle'toggle']:checked + label div:after { + content:'\2212'; /* close */ + text-align: left; + float: left; +} +#msgscope label div { + -webkit-transition: all 0.1s ease-in-out; + -moz-transition: all 0.1s ease-in-out; + -ms-transition: all 0.1s ease-in-out; + -o-transition: all 0.1s ease-in-out; + transition: all 0.1s ease-in-out; + width: 170px; + margin: 0 auto; + text-decoration: none; + display: inline-block; + font-weight: bold; + display: inline-block; + margin-bottom: 0; + text-align: left; + vertical-align: middle; + cursor: pointer; + background-image: none; + white-space: nowrap; + font-size: 0px; + line-height: 1.42857143; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +[id*='toggle'] .container, [class*='toggle'] .container { + transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94); +} +[id*='toggle'] { + visibility: hidden; + appearance:none; + cursor:pointer; + left:-100%; + top:-100%; +} +[id*='toggle'] + label { + cursor:pointer; + text-align: left; + -webkit-font-smoothing: antialiased; + cursor: pointer; + transition:all 500ms ease; +} +[id*='toggle'] + label div { + transition:all 500ms ease; +} +[id*='toggle'] + label div:after { + content:'\002b'; /* open */ + text-align: left; + float: left; +} +[id*='toggle']:checked + label div:after { + content:'\2212'; /* close */ + text-align: left; + float: left; +} + +.nav [id*='toggle'] + label div:after { + content:' '; /* open */ +} +.nav [id*='toggle']:checked + label div:after { + content:' '; /* close */ +} + +[id*='toggle']:checked ~ .container { + display: none; +} + +[id*='toggle']:checked ~ .toggle-inside { + display: block; +} +.toggle-msgScope div[class*='toggle-inside'] { + overflow: hidden; + box-sizing: border-box; + display: none; +} + +@media screen and (min-width: 400px) { + body, html { + background-color: var(--main-bg-color); + color: var(--main-fg-color); + + height: 100%; + font-family: Arial, Helvetica, sans-serif; + min-width: 950px; + font-size: var(--font-size); + line-height: var(--line-spacing); + } + .timeline { + border: 0; + width: 100vw; + } + .column-left { + width: var(--column-left-width); + } + .col-left { + float: left; + width: var(--column-left-width); + } + .col-center { + width: var(--column-center-width); + } + .column-right { + width: var(--column-right-width); + } + .col-right { + float: right; + width: var(--column-right-width); + } + .column-center { + display: inline-block; + width: var(--column-center-width); + } + .likesCount { + font-size: var(--font-size-likes); + font-family: Arial, Helvetica, sans-serif; + float: right; + padding: 10px 0; + transform: translateX(-10px); + font-weight: bold; + } + .container p.administeredby { + font-size: var(--font-size-header); + font-family: Arial, Helvetica, sans-serif; + } + .toxaddr { + font-size: var(--font-size-tox); + font-family: Arial, Helvetica, sans-serif; + } + .ssbaddr { + font-size: var(--font-size-pgp-key); + font-family: Arial, Helvetica, sans-serif; + } + .pgp { + font-size: var(--font-size-pgp-key); + color: var(--main-link-color); + background: var(--link-bg-color); + font-family: 'monospace'; + } + body, html { + font-size: var(--font-size4); + font-family: Arial, Helvetica, sans-serif; + } + .galleryContainer { + display: grid; + grid-template-columns: 50% 50%; + grid-column-gap: 5px; + background-color: var(--main-bg-color); + } + div.gallerytext { + color: var(--gallery-text-color); + font-size: var(--gallery-font-size); + font-family: Arial, Helvetica, sans-serif; + } + div.gallery { + margin: 5px; + border: 1px solid var(--gallery-border); + float: left; + width: 100%; + object-fit: scale-down; + } + div.imagedesc { + padding: 22px; + text-align: center; + } + .container img { + float: left; + max-width: 400px; + width: 5%; + padding: 0px 7px; + margin-right: 20px; + border-radius: var(--image-corners); + } + .container img.emojisearch { + width: 15%; + float: right; + } + .container img.emojicalendar { + float: left; + max-width: 400px; + width: 8%; + -ms-transform: translateY(-25%); + transform: translateY(-25%); + } + .container img.timelineicon { + float: var(--icons-side); + margin-left: 0px; + margin-right:0; + padding: 0 0; + margin: 0 0; + width: 50px; + } + .container img.emojiheader { + float: none; + width: 25px; + margin-left: 0px; + margin-right: 0px; + padding-right: 0px; + border-radius: 0px; + vertical-align: middle; + } + .containericons img { + float: var(--icons-side); + max-width: 200px; + width: 3%; + margin: 0px 1%; + border-radius: 0%; + } + div.mediaicons img { + float: right; + max-width: 200px; + width: 6%; + margin: 0px 1%; + border-radius: 0%; + } + div.mediaavatar img { + float: left; + max-width: 200px; + width: 5%; + margin: 0px 1%; + border-radius: 0%; + } + .timeline-avatar img { + opacity: 1.0; + width: 8%; + height: 8%; + padding: 0px 0px; + -ms-transform: translateY(-10%); + transform: translateY(-10%); + } + .buttonevent { + border-radius: var(--button-corner-radius); + background-color: var(--button-highlighted); + border: none; + color: var(--button-fg-highlighted); + text-align: center; + font-size: var(--font-size-header); + font-family: Arial, Helvetica, sans-serif; + padding: var(--button-height-padding); + transition: all 0.5s; + cursor: pointer; + margin: 5px; + } + .button { + border-radius: var(--button-corner-radius); + background-color: var(--button-background); + border: none; + color: var(--button-text); + text-align: center; + font-size: var(--font-size-header); + font-family: Arial, Helvetica, sans-serif; + padding: var(--button-height-padding); + width: 10%; + max-width: 200px; + min-width: 10ch; + transition: all 0.5s; + cursor: pointer; + margin: 5px; + } + .buttonhighlighted { + border-radius: var(--button-corner-radius); + background-color: var(--button-highlighted); + border: none; + color: var(--button-fg-highlighted); + text-align: center; + font-size: var(--font-size-header); + font-family: Arial, Helvetica, sans-serif; + padding: var(--button-height-padding); + width: 10%; + max-width: 100px; + min-width: 10ch; + transition: all 0.5s; + cursor: pointer; + margin: 5px; + } + .buttonselected { + border-radius: var(--button-corner-radius); + background-color: var(--button-selected); + border: none; + color: var(--button-text); + text-align: center; + font-size: var(--font-size-header); + font-family: Arial, Helvetica, sans-serif; + padding: var(--button-height-padding); + width: 10%; + max-width: 100px; + min-width: 10ch; + transition: all 0.5s; + cursor: pointer; + margin: 5px; + } + .buttonselectedhighlighted { + border-radius: var(--button-corner-radius); + background-color: var(--button-selected-highlighted); + border: none; + color: var(--button-text); + text-align: center; + font-size: var(--font-size-header); + font-family: Arial, Helvetica, sans-serif; + padding: var(--button-height-padding); + width: 10%; + max-width: 100px; + min-width: 10ch; + transition: all 0.5s; + cursor: pointer; + margin: 5px; + } + .followApprove { + border-radius: var(--button-corner-radius); + background-color: var(--button-approve); + border: none; + color: #FFFFFF; + text-align: center; + font-size: var(--font-size-header); + font-family: Arial, Helvetica, sans-serif; + padding: var(--button-height-padding); + width: 20%; + max-width: 200px; + min-width: 80px; + cursor: pointer; + margin: 0 5px; + float: right; + } + .followDeny { + border-radius: var(--button-corner-radius); + background-color: var(--button-deny); + border: none; + color: #FFFFFF; + text-align: center; + font-size: var(--font-size-header); + font-family: Arial, Helvetica, sans-serif; + padding: var(--button-height-padding); + width: 20%; + max-width: 200px; + min-width: 80px; + cursor: pointer; + margin: 0 5px; + float: right; + } + .pageicon { + width: 4%; + } + .time-right { + float: var(--icons-side); + color: var(--time-color); + margin: var(--time-vertical-align) 20px; + } + input[type=text], select, textarea { + width: 100%; + padding: 12px; + border: 1px solid #ccc; + border-radius: var(--button-corner-radius); + box-sizing: border-box; + margin-top: 6px; + margin-bottom: 16px; + resize: vertical; + font-size: var(--font-size2); + font-family: Arial, Helvetica, sans-serif; + background-color: var(--main-bg-color-reply); + color: var(--main-fg-color); + } + input[type=button], input[type=submit] { + background-color: var(--button-background); + color: var(--button-text); + padding: var(--button-height-padding); + display: inline-block; + margin: 15px; + border: none; + border-radius: var(--button-corner-radius); + cursor: pointer; + font-size: var(--font-size); + font-family: Arial, Helvetica, sans-serif; + width: 20%; + } + .question { + font-size: var(--font-size); + font-family: Arial, Helvetica, sans-serif; + } + .questionresult { + font-size: var(--font-size); + font-family: Arial, Helvetica, sans-serif; + } + input[type=radio] { + font-size: var(--font-size); + font-family: Arial, Helvetica, sans-serif; + width: 32px; + vertical-align: middle; + margin-right: 20px; + } + input.vote[type=submit] { + background-color: var(--button-background); + color: var(--button-text); + float: left; + padding: var(--button-height-padding); + margin: 15px; + border: none; + border-radius: var(--button-corner-radius); + cursor: pointer; + font-size: var(--font-size); + font-family: Arial, Helvetica, sans-serif; + width: 20%; + } + input[type=file] { + background-color: var(--button-background); + color: var(--button-text); + padding: 20px; + margin: 0px; + border: none; + border-radius: var(--button-corner-radius); + cursor: pointer; + font-size: var(--font-size); + font-family: Arial, Helvetica, sans-serif; + width: 96%; + } + .cancelbtn { + background-color: var(--button-background); + color: var(--button-text); + padding: var(--button-height-padding); + margin: 15px; + border: none; + display: inline-block; + border-radius: var(--button-corner-radius); + cursor: pointer; + font-size: var(--font-size); + font-family: Arial, Helvetica, sans-serif; + width: 20%; + } + .scope-desc { + font-size: var(--font-size3); + font-family: Arial, Helvetica, sans-serif; + } + .buttonunfollow { + border-radius: var(--button-corner-radius); + background-color: var(--button-background); + border: none; + color: var(--button-text); + text-align: center; + font-size: var(--font-size-header); + font-family: Arial, Helvetica, sans-serif; + padding: var(--button-height-padding); + width: 20%; + max-width: 200px; + min-width: 100px; + transition: all 0.5s; + cursor: pointer; + margin: 5px; + float: right; + } + .license { + float: right; + margin: 0% 1%; + width: 10%; + } + .donateButton { + background-color: var(--button-background); + color: var(--button-text); + float: none; + margin: 0px 10px; + padding: 12px 40px; + border: none; + border-radius: var(--button-corner-radius); + cursor: pointer; + font-size: var(--font-size2); + font-family: Arial, Helvetica, sans-serif; + opacity: 0.7; + } + .hero-text { + text-align: center; + position: absolute; + top: 50%; + left: 50%; + width: 70%; + transform: translate(-50%, -50%); + color: var(--font-color-header); + font-size: var(--font-size-header); + font-family: Arial, Helvetica, sans-serif; + } + .hero-text img.qrcode { + border-radius: 1%; + width: 5%; + min-width: 20px; + } + .hero-text img.title { + border-radius: 1%; + width: 15%; + } + #msgscope label img { + width: 46px; + height: 46px; + padding: 0px 0px; + } + .toggle-msgScope img { + width: 32px; + height: 32px; + padding: 0px 0px; + } + .dropdown-menutoggle { + -webkit-margin-start: 0px; + -webkit-margin-end: 0px; + -webkit-padding-start: 40px; + border-top-left-radius: 0; + border-top-right-radius: 0; + position: absolute; + top: 100%; + left: 21px; + width: 300%; + min-width: 100%; + z-index: 1000; + display: block; + float: left; + padding: 0 17px !important; + margin: 2px 0 0 !important; + font-size: var(--font-size2); + text-align: left; + list-style: none; + color: var(--dropdown-fg-color); + background-color: var(--dropdown-bg-color); + -webkit-background-clip: padding-box; + background-clip: padding-box; + } + input[type=checkbox] + { + -ms-transform: scale(2); + -moz-transform: scale(2); + -webkit-transform: scale(2); + -o-transform: scale(2); + transform: scale(2); + padding: 10px; + margin: 20px 30px; + } + input[type=radio] + { + -ms-transform: scale(2); + -moz-transform: scale(2); + -webkit-transform: scale(2); + -o-transform: scale(2); + transform: scale(2); + padding: 10px; + margin: 20px 30px; + } + input[type=number] + { + -ms-transform: scale(2); + -moz-transform: scale(2); + -webkit-transform: scale(2); + -o-transform: scale(2); + transform: scale(2); + padding: 10px; + margin: 20px 60px; + } +} + +@media screen and (min-width: 2200px) { + .galleryContainer { + display: grid; + grid-template-columns: 33% 33% 33%; + grid-column-gap: 5px; + background-color: var(--main-bg-color); + } +} + +@media screen and (max-width: 1000px) { + body, html { + background-color: var(--main-bg-color); + color: var(--main-fg-color); + + height: 100%; + font-family: Arial, Helvetica, sans-serif; + min-width: 950px; + margin-left: 0; + font-size: var(--font-size); + line-height: var(--line-spacing); + } + .timeline { + border: 0; + width: 100vw; + } + .column-left { + width: 0%; + } + .col-left { + float: left; + width: 0%; + display: none; + } + .col-center { + width: 100vw; + } + .col-right { + float: right; + width: 0%; + display: none; + } + .column-right { + width: 0%; + } + .column-center { + display: inline-block; + width: 100%; + } + .likesCount { + font-size: var(--font-size-likes-mobile); + font-family: Arial, Helvetica, sans-serif; + float: right; + padding: 32px 0; + transform: translateX(-20px); + font-weight: bold; + } + .container p.administeredby { + font-size: var(--font-size-tox2); + font-family: Arial, Helvetica, sans-serif; + } + .toxaddr { + font-size: var(--font-size-tox2); + font-family: Arial, Helvetica, sans-serif; + } + .ssbaddr { + font-size: var(--font-size-pgp-key2); + font-family: Arial, Helvetica, sans-serif; + } + .pgp { + font-size: var(--font-size-pgp-key2); + color: var(--main-link-color); + background: var(--link-bg-color); + font-family: 'monospace'; + } + body, html { + font-size: var(--font-size3); + font-family: Arial, Helvetica, sans-serif; + } + div.gallerytext { + color: var(--gallery-text-color); + font-size: var(--gallery-font-size-mobile); + font-family: Arial, Helvetica, sans-serif; + } + .galleryContainer { + display: grid; + grid-template-columns: auto; + background-color: var(--main-bg-color); + } + div.gallery { + margin: 5px; + border: 1px solid var(--gallery-border); + float: left; + width: 100%; + } + div.imagedesc { + padding: 35px; + text-align: center; + } + .container img { + float: left; + max-width: 400px; + width: 15%; + padding: 0px 7px; + margin-right: 20px; + border-radius: var(--image-corners); + } + .container img.emojisearch { + width: 25%; + float: right; + } + .container img.emojicalendar { + float: left; + max-width: 400px; + width: 12%; + -ms-transform: translateY(-25%); + transform: translateY(-25%); + } + .container img.timelineicon { + float: var(--icons-side); + margin-left: 0px; + margin-right:0; + padding: 0 0; + margin: 0 0; + width: 100px; + } + .container img.emojiheader { + float: none; + width: 45px; + margin-left: 0px; + margin-right: 0px; + padding-right: 0px; + border-radius: 0px; + vertical-align: middle; + } + div.mediaavatar img { + float: left; + max-width: 200px; + width: 8%; + margin: 0px 1%; + border-radius: 0%; + } + div.mediaicons img { + float: right; + max-width: 200px; + width: 10%; + margin: 0px 1%; + border-radius: 0%; + } + .containericons img { + float: var(--icons-side); + max-width: 200px; + width: 7%; + margin: 1% 3%; + border-radius: 0%; + } + .timeline-avatar img { + opacity: 1.0; + width: 15%; + height: 15%; + padding: 0px 0px; + -ms-transform: translateY(-10%); + transform: translateY(-10%); + } + .buttonevent { + border-radius: var(--button-corner-radius); + background-color: var(--button-highlighted); + border: none; + color: var(--button-fg-highlighted); + text-align: center; + font-size: var(--font-size-button-mobile); + font-family: Arial, Helvetica, sans-serif; + padding: var(--button-height-padding-mobile); + transition: all 0.5s; + cursor: pointer; + margin: 15px; + } + .button { + border-radius: var(--button-corner-radius); + background-color: var(--button-background); + border: none; + color: var(--button-text); + text-align: center; + font-size: var(--font-size-button-mobile); + font-family: Arial, Helvetica, sans-serif; + padding: var(--button-height-padding-mobile); + width: 20%; + max-width: 400px; + min-width: 10ch; + transition: all 0.5s; + cursor: pointer; + margin: 15px; + } + .buttonhighlighted { + border-radius: var(--button-corner-radius); + background-color: var(--button-highlighted); + border: none; + color: var(--button-fg-highlighted); + text-align: center; + font-size: var(--font-size-button-mobile); + font-family: Arial, Helvetica, sans-serif; + padding: var(--button-height-padding-mobile); + width: 20%; + max-width: 400px; + min-width: 10ch; + transition: all 0.5s; + cursor: pointer; + margin: 15px; + } + .buttonselected { + border-radius: var(--button-corner-radius); + background-color: var(--button-selected); + border: none; + color: var(--button-text); + text-align: center; + font-size: var(--font-size-button-mobile); + font-family: Arial, Helvetica, sans-serif; + padding: var(--button-height-padding-mobile); + width: 20%; + max-width: 400px; + min-width: 10ch; + transition: all 0.5s; + cursor: pointer; + margin: 15px; + } + .buttonselectedhighlighted { + border-radius: var(--button-corner-radius); + background-color: var(--button-selected-highlighted); + border: none; + color: var(--button-text); + text-align: center; + font-size: var(--font-size-button-mobile); + font-family: Arial, Helvetica, sans-serif; + padding: var(--button-height-padding-mobile); + width: 20%; + max-width: 400px; + min-width: 10ch; + transition: all 0.5s; + cursor: pointer; + margin: 15px; + } + .followApprove { + border-radius: var(--button-corner-radius); + background-color: var(--button-approve); + border: none; + color: #FFFFFF; + text-align: center; + font-size: var(--font-size3); + font-family: Arial, Helvetica, sans-serif; + padding: var(--button-height-padding-mobile); + width: 20%; + max-width: 400px; + min-width: 80px; + cursor: pointer; + margin: 0 15px; + float: right; + } + .followDeny { + border-radius: var(--button-corner-radius); + background-color: var(--button-deny); + border: none; + color: #FFFFFF; + text-align: center; + font-size: var(--font-size3); + font-family: Arial, Helvetica, sans-serif; + padding: var(--button-height-padding-mobile); + width: 20%; + max-width: 400px; + min-width: 80px; + cursor: pointer; + margin: 0 15px; + float: right; + } + .pageicon { + width: 14%; + } + .time-right { + float: var(--icons-side); + color: var(--time-color); + margin: 25px 20px; + } + input[type=text], select, textarea { + width: 100%; + padding: 12px; + border: 1px solid #ccc; + border-radius: var(--button-corner-radius); + box-sizing: border-box; + margin-top: 6px; + margin-bottom: 16px; + resize: vertical; + font-size: var(--font-size3); + font-family: Arial, Helvetica, sans-serif; + background-color: var(--main-bg-color-reply); + color: var(--main-fg-color); + } + input[type=button], input[type=submit] { + background-color: var(--button-background); + color: var(--button-text); + display: inline-block; + padding: var(--button-height-padding-mobile); + margin: 15px; + border: none; + border-radius: var(--button-corner-radius); + cursor: pointer; + font-size: var(--font-size3); + font-family: Arial, Helvetica, sans-serif; + width: 20%; + } + .question { + font-size: var(--font-size3); + font-family: Arial, Helvetica, sans-serif; + } + .questionresult { + font-size: var(--font-size3); + font-family: Arial, Helvetica, sans-serif; + } + input[type=radio] { + font-size: var(--font-size3); + font-family: Arial, Helvetica, sans-serif; + height: 90px; + vertical-align: middle; + margin-right: 20px; + } + input.vote[type=submit] { + background-color: var(--button-background); + color: var(--button-text); + float: left; + padding: var(--button-height-padding-mobile); + margin: 15px; + border: none; + border-radius: var(--button-corner-radius); + cursor: pointer; + font-size: var(--font-size3); + font-family: Arial, Helvetica, sans-serif; + width: 20%; + } + input[type=file] { + background-color: var(--button-background); + color: var(--button-text); + padding: 20px; + margin: 0px; + border: none; + border-radius: var(--button-corner-radius); + cursor: pointer; + font-size: var(--font-size3); + font-family: Arial, Helvetica, sans-serif; + width: 95.4%; + } + .cancelbtn { + background-color: var(--button-background); + color: var(--button-text); + display: inline-block; + padding: var(--button-height-padding-mobile); + margin: 15px; + border: none; + border-radius: var(--button-corner-radius); + cursor: pointer; + font-size: var(--font-size3); + font-family: Arial, Helvetica, sans-serif; + width: 20%; + } + .scope-desc { + font-size: var(--font-size3); + font-family: Arial, Helvetica, sans-serif; + } + .buttonunfollow { + border-radius: var(--button-corner-radius); + background-color: var(--button-background); + border: none; + color: var(--button-text); + text-align: center; + font-size: var(--font-size-button-mobile); + font-family: Arial, Helvetica, sans-serif; + padding: var(--button-height-padding-mobile); + width: 20%; + max-width: 200px; + min-width: 100px; + transition: all 0.5s; + cursor: pointer; + margin: 5px; + float: right; + } + .license { + float: right; + margin: 0% 1%; + width: 20%; + } + .donateButton { + background-color: var(--button-background); + color: var(--button-text); + float: none; + margin: 0px 10px; + padding: 12px 40px; + border: none; + border-radius: var(--button-corner-radius); + cursor: pointer; + font-size: var(--font-size3); + font-family: Arial, Helvetica, sans-serif; + opacity: 0.7; + } + .hero-text { + text-align: center; + position: absolute; + top: 50%; + left: 50%; + width: 70%; + transform: translate(-50%, -50%); + color: var(--font-color-header); + font-size: var(--font-size-header-mobile); + font-family: Arial, Helvetica, sans-serif; + } + .hero-text img.qrcode { + border-radius: 1%; + width: 15%; + min-width: 20px; + } + .hero-text img.title { + border-radius: 1%; + width: 25%; + } + #msgscope label img { + width: 64px; + height: 64px; + padding: 0px 0px; + } + .toggle-msgScope img { + width: 64px; + height: 64px; + margin: -15px 0px; + padding: 0px 20px; + } + .dropdown-menutoggle { + -webkit-margin-start: 0px; + -webkit-margin-end: 0px; + -webkit-padding-start: 40px; + border-top-left-radius: 0; + border-top-right-radius: 0; + position: absolute; + top: 100%; + left: 21px; + width: 460%; + min-width: 100%; + z-index: 1000; + display: block; + float: left; + padding: 0 17px !important; + margin: 2px 0 0 !important; + font-size: var(--font-size3); + text-align: left; + list-style: none; + color: var(--dropdown-fg-color); + background-color: var(--dropdown-bg-color); + -webkit-background-clip: padding-box; + background-clip: padding-box; + } + input[type=checkbox] + { + -ms-transform: scale(4); + -moz-transform: scale(4); + -webkit-transform: scale(4); + -o-transform: scale(4); + transform: scale(4); + padding: 20px; + margin: 30px 40px; + } + input[type=radio] + { + -ms-transform: scale(2); + -moz-transform: scale(2); + -webkit-transform: scale(2); + -o-transform: scale(2); + transform: scale(2); + padding: 20px; + margin: 30px 40px; + } + input[type=number] + { + -ms-transform: scale(2); + -moz-transform: scale(2); + -webkit-transform: scale(2); + -o-transform: scale(2); + transform: scale(2); + padding: 10px; + margin: 40px 80px; + } +} diff --git a/theme.py b/theme.py index 1c092e630..bde827682 100644 --- a/theme.py +++ b/theme.py @@ -15,7 +15,7 @@ from shutil import copyfile def getThemeFiles() -> []: return ('epicyon.css', 'login.css', 'follow.css', 'suspended.css', 'calendar.css', 'blog.css', - 'options.css', 'search.css') + 'options.css', 'search.css', 'links.css') def getThemesList() -> []: diff --git a/webinterface.py b/webinterface.py index 22bc225fd..1a8c51524 100644 --- a/webinterface.py +++ b/webinterface.py @@ -5157,7 +5157,7 @@ def getLeftColumnContent(baseDir: str, nickname: str, domainFull: str, httpPrefix + '://' + domainFull + \ '/users/' + nickname + '/editlinks' + '">' + \ '\n' + \ + iconsDir + '/edit.png" class="editLinksIcon" />\n' + \ ' \n' linksFilename = baseDir + '/accounts/links.txt'