String of beads

[rosecarmine]

LIVE PREVIEWLIVE PREVIEW

FEATURES

• default icon, navigation links, links list, custom text
• comment pages
• icon pages

INSTRUCTIONS

1. Go to the "Select style" page, search for "Tabula Rasa" and apply any theme.
2. Choose the "1 Column (modules at top and bottom; no sidebar)" page setup.
3. Go to the "Customize your theme" page and click on the "Presentation" tab. In the "Additional options" section select "icons" for:
   • Select whether entry management links are printed as text or using the available icons
   • Select whether comment management links are printed as text or using the available icons.
4. Click on the "Modules" tab. Set "Profile" to number 1, "Navigation" to number 2, "Custom text" to number 3, "Links list" to number 4. Uncheck the other modules.
5. Click on the "Custom CSS" tab and paste the code into the "Use embeded CSS" field. Uncheck "Use layout's stylesheet(s)".
   Ver. 1 /*------------------------------------- - layout - string of beads (tabula rasa) - https://myrtillenne.dreamwidth.org - icon font - material icons - https://material.io - background - Davidzydd - https://www.freepik.com -------------------------------------*/ /*--------------- options ---------------*/ :root { --text-size: 16px; --text-color: #0e3358; --line-height: 1.5; --background-color: #d1e1e4; --link-color: #008acc; --link-hover-color: #0e3358; --main-font: Open Sans, sans-serif; --title-font: Shadows Into Light Two, sans-serif; --title-color: #d1e1e4; --title-shadow-color: #0e3358; --entry-width: 1000px; --border-color: #0e3358; --sidebar-background-image: url(https://rosecarmine.dreamwidth.org/file/100758.jpg); --sidebar-background-color: #2d7aa4; --sidebar-width: 450px; --sidebar-icon-color: #d1e1e4; --sidebar-icon-hover-color: #eff4f5; --sidebar-link-color: #d1e1e4; --sidebar-link-background-color: #0e3358; --customtext-background-color: rgba(14, 51, 88, 0.7); --customtext-text-color: #d1e1e4; --customtext-link-color: #d1e1e4; --customtext-link-hover-color: #d1e1e4; --entry-background-color: #eff4f5; --blockquote-background-color: #2d7aa4; --blockquote-text-color: #eff4f5; --blockquote-link-color: #eff4f5; --blockquote-link-hover-color: #eff4f5; --shadow-color: rgba(0, 0, 0, 0.6); } /*--------------- fonts ---------------*/ @font-face { font-family: "Material Icons"; font-style: normal; font-weight: 400; src: url("https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2") format("woff2"); } /*--------------- general ---------------*/ H1, H2, H3 { margin: 0.25em 0; padding: 0.25em 0; } img { border: none; } hr { display: none; } body { font-family: var(--main-font); font-size: var(--text-size); padding: 0; margin: 0; line-height: var(--line-height); background-color: var(--background-color); color: var(--text-color); } html body { margin-left: 0; margin-right: 0; } a { color: var(--link-color); } a:hover { color: var(--link-hover-color); } a, a:link, a:visited, a:active { text-decoration: none; transition: all 0.4s ease; } q { font-style: italic; } .entry blockquote, .comment blockquote { background: var(--blockquote-background-color); color: var(--blockquote-text-color); padding: 1em; margin: 1em 0 50px; position: relative; border-radius: 10px; } .entry blockquote:before, .comment blockquote:before { content: ""; position: absolute; bottom: -30px; left: 25px; padding: 10px; border-radius: 50px; background: var(--blockquote-background-color); } .entry blockquote:after, .comment blockquote:after { content: ""; position: absolute; bottom: -40px; left: 45px; padding: 5px; border-radius: 50px; background: var(--blockquote-background-color); } blockquote a { color: var(--blockquote-link-color); border-bottom: 2px dotted var(--blockquote-text-color); } blockquote a:hover { color: var(--blockquote-link-hover-color); } /*--------------- header ---------------*/ #header { position: relative; float: left; width: 100%; text-align: center; font-family: var(--title-font); z-index: 2; text-shadow: 1px 1px 2px var(--title-shadow-color), -1px -1px 2px var(--title-shadow-color); } #header > .inner { padding: 2em 2em 20px; } @media (min-width: 800px) { #header > .inner { padding: 70px 70px 20px; } } @media (min-width: 1124px) { #header { top: 0; left: 0; position: fixed; width: var(--sidebar-width); } #header > .inner { display: flex; flex-direction: column; justify-content: flex-end; padding: 0 60px 0 50px; height: 200px; } } h1#title { font-size: 1.5em; margin: 0; color: var(--title-color); font-style: italic; } h1#title a { color: inherit; } h2#subtitle { font-size: 1em; margin: 0; color: var(--title-color); border-top: 2px dotted var(--border-color); } h2#pagetitle { display: none; } /*--------------- content ---------------*/ #canvas { margin-bottom: 20px; } @media (min-width: 1124px) { #content { border-left: var(--sidebar-width) solid transparent; max-width: var(--entry-width); } } #primary { margin: 40px 0 20px; } @media (min-width: 800px) { #canvas { margin-bottom: 70px; } #primary { margin: 90px 70px 20px; } } @media (min-width: 1124px) { #primary { margin: 70px; } #primary > .inner:first-child { padding-left: 50px; } } /*--------------- entries ---------------*/ .entry, .full .comment { box-shadow: 0 0 2px var(--shadow-color); margin: 20px 0; } .entry > .inner:first-child, .full .comment > .inner:first-child { background: var(--entry-background-color); padding: 2em; } @media (min-width: 800px) { .entry, .full .comment { background-image: var(--sidebar-background-image); background-color: var(--sidebar-background-color); padding-right: 60px; box-shadow: 0 0 2px var(--shadow-color); margin: 70px 0; } .entry > .inner:first-child, .full .comment > .inner:first-child { border-right: 20px solid var(--border-color); box-shadow: inset -8px 0 3px -6px var(--shadow-color); } } .entry .header, .comment .header { margin-bottom: 2em; } .entry .header .inner, .comment .header .inner { border-bottom: 2px dotted var(--border-color); padding-bottom: 1em; } .entry .entry-title { margin: 0; padding: 0 0 0.5em; font-family: var(--title-font); font-style: italic; font-weight: normal; font-size: 1.5em; line-height: 1; } .admin-post-icon, .sticky-entry-icon { display: none; } .header a, .metadata a, .footer a { color: var(--text-color); } .header a:hover, .metadata a:hover, .footer a:hover { color: var(--link-color); } .no-subject .entry .entry-title { background: none; border: none; padding: 0; } .restrictions img, .access-filter img { display: none; } .security-protected .access-filter:before { content: "lock"; font-family: Material Icons; font-size: 22px; vertical-align: middle; } .security-private .access-filter:before { content: "visibility_off"; font-family: Material Icons; font-size: 22px; vertical-align: middle; } .restrictions-NSFW .restrictions:before { content: "warning"; font-family: Material Icons; font-size: 22px; vertical-align: middle; } .restrictions-18 .restrictions:before { content: "18+"; font-size: 16px; font-family: arial, sans-serif; font-weight: bold; vertical-align: middle; } .has-userpic .userpic { float: right; shape-outside: circle(50%) padding-box; padding-left: 1em; } .has-userpic .userpic img { border: 5px solid var(--border-color); background: var(--border-color); display: block; max-width: 50px; max-height: 50px; width: auto; height: auto; border-radius: 50%; box-shadow: 0 0 2px var(--shadow-color); } @media (min-width: 800px) { .has-userpic .userpic { width: 120px; margin-right: calc(-70px - 2em); } .has-userpic .userpic img { max-width: 100px; max-height: 100px; width: auto; height: auto; border: 10px solid var(--border-color); box-shadow: -2px 0 2px var(--shadow-color); margin: 0 auto; } } .entry .poster { font-size: 0; } .entry .poster .ljuser { font-size: var(--text-size); padding-right: 0.25em; } .entry .poster:before { content: "Written by "; font-size: var(--text-size); } .entry .poster .ljuser:nth-child(2):before { content: "in "; } .poster.empty { display: none; } .poster .ljuser img { display: none; } .ljuser b { font-weight: normal; } .entry-content, .comment-content { margin: 2em 0; } @media (min-width: 800px) { .entry-content { text-align: justify; } } .entry-content ol, .comment-content ol, .entry-content ul, .comment-content ul { padding-left: 1em; } .entry-content li, .comment-content li { list-style-position: inside; } .entry-content img, .comment-content img { max-width: 100%; height: auto; } .cuttag-action { display: flex; align-items: center; line-height: 1; } .cuttag-action img { display: none; } .cuttag-action:before { content: "content_cut"; font-family: Material Icons; font-size: 22px; vertical-align: middle; margin-right: 5px; color: var(--text-color); } .cuttag-action:after { content: ""; height: 0; width: 100%; border-bottom: 1px dashed var(--border-color); } .cut-open, .cut-close { display:none; } .cut-text{ font-weight: normal; margin-left: 27px; display: block; } .metadata li { line-height: 1.2; margin-bottom: 0.5em; } .metadata ul { display: inline; list-style: none; margin: 0; padding: 0; } .metadata-label { display: none; } .metadata img { vertical-align: middle; } #metadata-music:before { content: "speaker"; font-family: Material Icons; font-size: 22px; vertical-align: middle; margin-right: 5px; } #metadata-mood:before { content: "sentiment_satisfied_alt"; font-family: Material Icons; font-size: 22px; vertical-align: middle; margin-right: 5px; } #metadata-location:before { content: "location_on"; font-family: Material Icons; font-size: 22px; vertical-align: middle; margin-right: 5px; } #metadata-xpost:before { content: "add_location"; font-family: Material Icons; font-size: 22px; vertical-align: middle; margin-right: 5px; } .entry .tag { margin-bottom: 0.5em; line-height: 1.2; } .tag-text { display: none; } .tag ul { display: inline; margin-left: 0; padding-left: 0; } .tag ul li { display: inline; } .tag:before { content: "loyalty"; font-family: Material Icons; font-size: 22px; vertical-align: middle; margin-right: 5px; } .tag-nav-trigger { vertical-align: middle; } ul.entry-management-links { margin: 0; padding: 0; float: left; } ul.entry-management-links li { display: inline; margin-right: 5px; } ul.entry-management-links li a img { display: none; } ul.entry-management-links.icon-links li a:before { font-family: Material Icons; font-size: 22px; line-height: 22px; } .icon-links .link_prev a:before { content: "arrow_back"; } .icon-links .edit_entry a:before { content: "edit"; } .icon-links .edit_tags a:before { content: "local_offer"; } .icon-links .mem_add a:before { content: "favorite"; } .icon-links .tell_friend a:before { content: "share"; } .icon-links .watch_comments a:before { content: "add_alert"; } .icon-links .link_next a:before { content: "arrow_forward"; } ul.entry-interaction-links li { display: inline; margin-left: 0.5em; } ul.entry-interaction-links { margin: 0; padding: 0; float: right; } .footer:after { content: ""; display: block; clear: both; } /*------------ comments ------------*/ .comment-pages { background: var(--entry-background-color); padding: 1em; text-align: center; box-shadow: 0 0 2px var(--shadow-color); margin: 10px 0; } .comment-posted { font-weight: bold; } .comment-wrapper { min-width: 15em; } .full .thread-depth { display: block; line-height: 1; margin-bottom: 1em; } .comment .comment-title { margin: 0; font-weight: normal; } .full .comment .comment-title { padding: 0 0 0.5em; font-family: var(--title-font); font-style: italic; font-weight: normal; font-size: 1.5em; line-height: 1; } .comment-date-text { display: none; } .no-subject .comment .comment-title { background: none; border: none; padding: 0; } .poster-ip { display: block; } .partial { background: var(--entry-background-color); box-shadow: 0 0 2px var(--shadow-color); padding: 1em; margin: 20px 0; } .multiform-checkbox { margin-right: 0.5em; float: left; } .multiform-checkbox input { vertical-align: top; } ul.comment-management-links { margin: 0; padding: 0; float: right; } ul.comment-management-links li { display: inline-block; margin-left: 5px; } ul.comment-management-links.icon-links li { width: 22px; overflow: hidden; } ul.comment-management-links li a img { display: none; } ul.comment-management-links.icon-links li a:before { font-family: Material Icons; font-size: 22px; line-height: 22px; } .icon-links .edit_comment a:before { content: "edit"; } .icon-links .delete_comment a:before { content: "delete_forever"; } .icon-links .screen_comment a:before { content: "visibility_off"; } .icon-links .unscreen_comment a:before { content: "visibility"; } .icon-links .freeze_thread a:before { content: "ac_unit"; } .icon-links .unfreeze_thread a:before { content: "wb_sunny"; } ul.comment-interaction-links li { display: inline; margin-right: 0.5em; } ul.comment-interaction-links { margin: 0; padding: 0; float: left; } .comment-pages.bottompages, #comments ul.entry-interaction-links, #comments ul.entry-management-links { display: none; } .bottomcomment { background: var(--entry-background-color); text-align: center; box-shadow: 0 0 2px var(--shadow-color); } #qrformdiv { right: 0 !important; min-width: 100% !important; padding: 0; } #qrform { padding-top: 2em; } #qrdiv input, #qrdiv select, #qrdiv textarea { border: 1px solid var(--border-color); background: var(--entry-background-color); color: var(--text-color); font-family: var(--main-font); font-size: var(--text-size); } #qrdiv input[type="button"], #qrdiv input[type="submit"] { background: transparent; border: 0; font-size: var(--text-size); font-family: var(--title-font); padding: 0.5em; color: var(--link-color); line-height: 1; } #postform { padding: 2em; background: var(--entry-background-color); box-shadow: 0 0 2px var(--shadow-color); } /*------------ archive, tags, icons containers------------*/ .month-wrapper, #archive-month, .tags-container, .icons-container { box-shadow: 0 0 2px rgba(0, 0, 0, 0.4); margin: 20px 0; } .month-wrapper .month > .inner:first-child, .tags-container > .inner:first-child, .icons-container > .inner:first-child, #archive-month > .inner:first-child { background: var(--entry-background-color); padding: 2em; } @media (min-width: 800px) { .month-wrapper, #archive-month, .tags-container, .icons-container { background: var(--sidebar-background-image); padding-right: 60px; margin: 70px 0; } .month-wrapper .month > .inner:first-child, .tags-container > .inner:first-child, .icons-container > .inner:first-child, #archive-month > .inner:first-child { border-right: 20px solid var(--border-color); box-shadow: inset -8px 0 3px -6px var(--shadow-color); } } .month .header, .tags-container .header, .icons-container .header { margin-bottom: 2em; border-bottom: 2px dotted var(--border-color); padding-bottom: 1em; } .month-wrapper h3, .tags-container h2, .icons-container h2 { padding: 0; font-family: var(--title-font); font-style: italic; font-weight: normal; font-size: 1.5em; line-height: 1; } .month .footer, #primary .manage-link { border-top: 2px dotted var(--border-color); margin-top: 2em; padding-top: 1em; } /*------------ archive------------*/ table.month { margin: 0 auto; border-spacing: 3px; text-align: center; } table.month td { width: 2em; height: 2em; } table.month th { padding: 3px; background: var(--blockquote-background-color); color: var(--blockquote-text-color); font-family: var(--title-font); font-weight: normal; width: 2em; border-radius: 4px; } table.month td p { margin: 0; padding: 3px; } table.month td.day-has-entries { position: relative; } .day.day-has-entries .label { border: 1px solid var(--border-color); display: block; border-radius: 50px; width: 2em; height: 2em; line-height: 2em; } table.month .day-has-entries p { left: 0; top: 0; position: absolute; z-index: 9; } table.month .day-has-entries p a { color: transparent; padding: 1em; } .month dl { margin: 0; } .month dl dt { border-bottom: 1px dotted var(--border-color); font-family: var(--title-font); font-size: 1em; padding-bottom: 1em; font-style: italic; } .month dl dt a { color: var(--text-color); } .month dl dt a:hover { color: var(--link-color); } .month dl .time { padding-right: 0.5em; } .month dl h3 { display: inline; font-size: 1em; } .page-month .month .entry-poster { margin-right: 0.5em; } .month dl .tag ul { margin-top: 0; } .month dd { margin: 1em 0 0; } .day-date { display: none; } .month caption { display: none; } #archive-year .navigation li a, #archive-year li.active { display: inline-block; height: 50px; width: 50px; background: var(--border-color); line-height: 50px; border-radius: 50px; text-align: center; color: var(--sidebar-icon-color); box-shadow: 0 0 2px var(--shadow-color); margin: 0 5px; } #archive-year .navigation li a:hover, #archive-year li.active { color: var(--sidebar-icon-hover-color); } #archive-year .navigation li a:hover { transform: rotate(360deg); } /*------------ tags ------------*/ ul.ljtaglist { list-style-position: inside; padding: 0; margin-left: 1em; } ul.ljtaglist:first-child, .tags_cloud ul { padding: 0; margin: 0; } /*------------ icons page ------------*/ .sorting-options ul { margin: 0 0 1em; padding: 0; } .sorting-options ul li { display: inline; } .icon { border-top: 2px dotted var(--border-color); border-bottom: 2px dotted var(--border-color); padding: 1em 0; margin: 1em 0; display: flex; } .icon-image { margin-right: 1em; } .icon-image img { display: block; } .default.label { font-size: 0; } .default.label:before { content: "star"; font-family: Material Icons; font-size: 22px; font-style: normal; vertical-align: top; line-height: 22px; } .icon-keywords ul { display: inline; margin: 0; padding: 0; } .icon-keywords ul li { display: inline; } .icon-pages p { margin: 0; } .keywords-label, .comment-text, .description-text { font-weight: bold; } /*------------ modules ------------*/ #secondary { background-image: var(--sidebar-background-image); background-color: var(--sidebar-background-color); border-bottom: 20px solid var(--border-color); box-shadow: 0 2px 2px var(--shadow-color); position: relative; } @media (min-width: 1124px) { #secondary { position: fixed; left: 0; top: 0; width: var(--sidebar-width); height: 100%; border-right: 20px solid var(--border-color); border-bottom: 0; box-shadow: 2px 0 2px var(--shadow-color); z-index: 1; } } .module-section-one { clear: left; } .module-section-one { padding: 0 2em 50px; } @media (min-width: 800px) { .module-section-one { padding: 0 70px 70px; } } @media (min-width: 1124px) { .module-section-one { padding: 200px 60px 0 50px; } .module-section-one .inner { display: flex; flex-direction: column; min-height: 0; height: calc(100vh - 200px); padding-bottom: 50px; box-sizing: border-box; } } .module-content ul { list-style: none; margin: 0; padding: 0; } .module .userpic img { display: block; border: 5px solid var(--border-color); border-radius: 50%; max-width: 70px; max-height: 70px; width: auto; height: auto; margin: 0 auto; } @media (min-width: 800px) { .module-userprofile { width: 120px; height: 120px; position: absolute; bottom: -70px; left: 70px; display: flex; align-items: center; } .module .userpic img { border: 10px solid var(--border-color); max-width: 100px; max-height: 100px; box-shadow: 0 2px 2px var(--shadow-color); background: var(--border-color); } } @media (min-width: 1124px) { .module-userprofile { top: 80px; right: -70px; left: auto; bottom: auto; } .module .userpic img { box-shadow: 2px 0 2px var(--shadow-color); } } .module-navlinks { position: absolute; left: 2em; bottom: -30px; text-align: center; } @media (min-width: 800px) { .module-navlinks { left: 190px; } } .module-navlinks li { float: left; width: 40px; height: 40px; overflow: hidden; border-radius: 50%; background: var(--border-color); box-shadow: 0 2px 2px var(--shadow-color); margin-left: 2px; } @media (min-width: 1124px) { .module-navlinks { width: 40px; top: 200px; right: -30px; left: auto; bottom: auto; } .module-navlinks li { float: none; box-shadow: 2px 0 2px rgba(0, 0, 0, 0.4); margin: 2px auto; } } .module-navlinks li a { color: var(--sidebar-icon-color); } .module-navlinks li a:hover { color: var(--sidebar-icon-hover-color); } .module-navlinks li a:before { display: block; font-family: Material Icons; font-size: 22px; vertical-align: middle; height: 40px; width: 40px; line-height: 40px; } .list-item-recent a:before { content: "home"; } .list-item-archive a:before { content: "date_range"; } .list-item-read a:before { content: "rss_feed"; } .list-item-tags a:before { content: "style"; } .list-item-network a:before { content: "language"; } .list-item-memories a:before { content: "star"; } .list-item-userinfo a:before { content: "info"; } .module-typelist { margin-top: 10px; padding-top: 10px; border-top: 2px dotted var(--border-color); } .module-typelist ul { display: flex; flex-wrap: wrap; margin: -2px; } .module-typelist li { flex-grow: 1; text-align: center; line-height: 1; } @media (min-width: 1124px) { .module-typelist li { min-width: 50%; } } .module-typelist li a { background: var(--sidebar-link-background-color); margin: 2px; font-style: italic; color: var(--sidebar-link-color); display: block; padding: 0.5em; } .module-typelist li a:first-letter { font-family: var(--title-font); } .module-typelist li a:hover { background: var(--customtext-background-color); color: var(--customtext-link-color); backdrop-filter: blur(1px); } .module-customtext { margin-top: 20px; background: var(--customtext-background-color); backdrop-filter: blur(1px); padding: 1em; color: var(--customtext-text-color); } .module-customtext .module-content { max-height: 10em; overflow: auto; } @media (min-width: 1124px) { .module-customtext { overflow: hidden; } .module-customtext .module-content { max-height: 100%; } } .module-customtext a { color: var(--customtext-link-color); border-bottom: 2px dotted var(--customtext-text-color); } .module-customtext a:hover { color: var(--customtext-link-hover-color); } .module-customtext .module-content::-webkit-scrollbar { width: 5px; height: 5px; } .module-customtext .module-content::-webkit-scrollbar-track { background: transparent; } .module-customtext .module-content::-webkit-scrollbar-thumb { background: var(--customtext-link-color); } .module-customtext .module-content::-webkit-scrollbar-corner { background: var(--customtext-link-color); } .module h2, .module-calendar, .journal-website-name, .journal-name, ul.userlite-interaction-links, .module-tags_list, .module-tags_multilevel, .module-tags_cloud, .module-cuttagcontrols, .module-pagesummary, .module-active, .module-credit, .module-syndicate, .module-subscriptionfilters, .module-search, .module-time, .module-powered, .module .manage-link { display: none; } /*--------------- navigation ---------------*/ .navigation .page-separator, .topnav { display: none; } .navigation ul { margin: 0; padding: 0; text-align: center; } .navigation li { display: inline; } #entries .navigation li { display: inline-block; width: 40px; height: 40px; overflow: hidden; background: var(--border-color); border-radius: 50%; box-shadow: 0 0 2px var(--shadow-color); margin: 0 10px; } #entries .navigation li a { color: var(--sidebar-icon-color); } #entries .navigation li a:hover { color: var(--sidebar-icon-hover-color); } #entries .navigation li a:before { display: block; font-family: Material Icons; font-size: 22px; height: 40px; width: 40px; line-height: 40px; } li.page-back a:before { content: "arrow_back"; } li.page-forward a:before { content: "arrow_forward"; } @media (min-width: 1124px) { #entries .navigation ul { position: fixed; left: var(--sidebar-width); margin-left: -50px; bottom: 65px; width: 120px; z-index: 3; } #entries .navigation li { display: block; margin: 2px auto; box-shadow: 2px 0 2px var(--shadow-color); } } li.page-separator { display: none !important; } .noentries { display: none; } /*------------ footer ------------*/ #footer { text-align: center; margin-bottom: 25px; } .page-top { width: 40px; height: 40px; background: var(--border-color); border-radius: 50%; box-shadow: 0 0 2px var(--shadow-color); overflow: hidden; margin: 0 auto; } @media (min-width: 1124px) { #footer { position: fixed; left: var(--sidebar-width); bottom: 0; margin-left: -50px; width: 120px; height: 40px; z-index: 3; } .page-top { box-shadow: 2px 0 2px var(--shadow-color); } } .page-top a { color: var(--sidebar-icon-color); } .page-top a:hover { color: var(--sidebar-icon-hover-color); } .page-top a:before { content: "arrow_upward"; display: block; font-family: Material Icons; font-size: 22px; height: 40px; width: 40px; line-height: 40px; } /*------------ contextual pop-up ------------*/ div.ContextualPopup { background: var(--entry-background-color); border: 0; font-family: var(--main-font); font-size: 1em; color: var(--text-color); padding: 1em; width: 180px; border-radius: 0; text-align: center; } div.ContextualPopup .Relation { font-weight: normal; font-size: 1em; margin: 0; padding: 1em 0; } div.ContextualPopup .Userpic { border: 0; float: none; margin: 0; } div.ContextualPopup .Userpic img { border: 5px solid var(--border-color); border-radius: 50%; } .ContextualPopup .Actions ul { list-style: none; margin: 0; padding: 1em 0 0; border-top: 2px dotted var(--border-color); } .ContextualPopup a { color: var(--link-color); } .ContextualPopup a:hover { color: var(--link-hover-color); } /*------------ control strip ------------*/ #lj_controlstrip { background: var(--entry-background-color); color: var(--text-color); justify-content: center; padding: 0.75em 0; border-bottom: 5px solid var(--border-color); z-index: 9; box-shadow: 0 2px 0 var(--shadow-color); transform: translateY(-100%); position: absolute; transition: transform 0.7s; z-index: 9; } #lj_controlstrip:before { content: ""; position: absolute; bottom: -65px; height: 60px; width: 40px; right: 10px; } #lj_controlstrip:after { font-family: "Material Icons"; content: "settings"; font-size: 22px; position: absolute; bottom: -65px; height: 40px; width: 40px; right: 10px; cursor: pointer; line-height: 40px; text-align: center; background: var(--border-color); color: var(--sidebar-icon-color); border-radius: 50%; background-clip: padding-box; box-shadow: 0 0 2px var(--shadow-color); } #lj_controlstrip:hover { transform: translateY(0); } @media (min-width: 1124px) { #lj_controlstrip { position: fixed; } #lj_controlstrip:before { left: var(--sidebar-width); right: auto; margin-left: -10px; } #lj_controlstrip:after { left: var(--sidebar-width); right: auto; margin-left: -10px; box-shadow: 2px 0 2px var(--shadow-color); } } #lj_controlstrip > div { font-family: var(--main-font); font-size: var(--text-size); line-height: 1.5; padding: 0.25em 0.5em; flex-grow: 0; } #lj_controlstrip a { font-family: var(--main-font); color: var(--link-color); } #lj_controlstrip a:hover { color: var(--link-hover-color); text-decoration: none; } #lj_controlstrip_actionlinks { text-align: center; } #lj_controlstrip_statustext { color: var(--text-color); font-weight: normal; font-size: var(--text-size); } #lj_controlstrip_search { text-align: right; } #lj_controlstrip input, #lj_controlstrip select { border: 1px solid var(--border-color); background: var(--entry-background-color) !important; font-size: var(--text-size) !important; color: var(--text-color) !important; font-family: var(--main-font) !important; } #lj_controlstrip input[type="submit"] { border: 0; background: transparent; font-size: var(--text-size); color: var(--text-color); font-family: var(--title-font) !important; padding: 0.25em; } #lj_controlstrip .ljuser b { font-weight: normal; } #lj_controlstrip .ljuser img { display: none; } #lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_actionlinks { border: 0; } #lj_controlstrip_userpic a img { border: 3px solid var(--border-color); border-radius: 50%; }Ver. 2 /*------------------------------------- - layout - string of beads (tabula rasa) - https://myrtillenne.dreamwidth.org - icon font - material icons - https://material.io - background - nenilkime - https://www.freepik.com -------------------------------------*/ /*--------------- options ---------------*/ :root { --text-size: 16px; --text-color: #213431; --line-height: 1.5; --background-color: #deefec; --link-color: #069aa2; --link-hover-color: #29413d; --main-font: Open Sans, sans-serif; --title-font: Shadows Into Light Two, sans-serif; --title-color: #fbfdfd; --title-shadow-color: #26575b; --entry-width: 1000px; --border-color: #26575b; --header-background-image: url(https://rosecarmine.dreamwidth.org/file/96950.jpg); --header-background-color: #abdad0; --header-icon-color: #fbfdfd; --header-icon-hover-color: #ffff99; --header-link-color: #213431; --header-link-background-color: #68b7b1; --customtext-background-color: #abdad0; --customtext-text-color: #213431; --customtext-link-color: #ffff99; --customtext-link-hover-color: #fbfdfd; --customtext-height: 10em; --entry-background-color: #fbfdfd; --blockquote-background-color: #abdad0; --blockquote-text-color: #213431; --blockquote-link-color: #ffff99; --blockquote-link-hover-color: #fbfdfd; --shadow-color: rgba(0, 0, 0, 0.5); } /*--------------- fonts ---------------*/ @font-face { font-family: "Material Icons"; font-style: normal; font-weight: 400; src: url("https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2") format("woff2"); } /*--------------- general ---------------*/ H1, H2, H3 { margin: 0.25em 0; padding: 0.25em 0; } img { border: none; } hr { display: none; } body { font-family: var(--main-font); font-size: var(--text-size); padding: 0; margin: 0; line-height: var(--line-height); background-color: var(--background-color); color: var(--text-color); } html body { margin-left: 0; margin-right: 0; } a { color: var(--link-color); } a:hover { color: var(--link-hover-color); } a, a:link, a:visited, a:active { text-decoration: none; transition: all 0.4s ease; } q { font-style: italic; } .entry blockquote, .comment blockquote { background: var(--blockquote-background-color); color: var(--blockquote-text-color); padding: 1em; margin: 1em 0 50px; position: relative; border-radius: 10px; } .entry blockquote:before, .comment blockquote:before { content: ""; position: absolute; bottom: -30px; left: 25px; padding: 10px; border-radius: 50px; background: var(--blockquote-background-color); } .entry blockquote:after, .comment blockquote:after { content: ""; position: absolute; bottom: -40px; left: 45px; padding: 5px; border-radius: 50px; background: var(--blockquote-background-color); } blockquote a { color: var(--blockquote-link-color); border-bottom: 2px dotted var(--blockquote-text-color); } blockquote a:hover { color: var(--blockquote-link-hover-color); } /*--------------- header ---------------*/ #header { position: relative; float: left; width: 100%; text-align: center; font-family: var(--title-font); z-index: 2; text-shadow: 1px 1px 2px var(--title-shadow-color), -1px -1px 2px var(--title-shadow-color); } #header > .inner { padding: 2em 2em 20px; margin: 0 auto; max-width: var(--entry-width); } @media (min-width: 800px) { #header > .inner { padding: 70px 70px 20px; } } h1#title { font-size: 1.5em; margin: 0; color: var(--title-color); font-style: italic; } h1#title a { color: inherit; } h2#subtitle { font-size: 1em; margin: 0; color: var(--title-color); border-top: 2px dotted var(--border-color); } h2#pagetitle { display: none; } /*--------------- content ---------------*/ #canvas { margin-bottom: 20px; } #primary { margin: 40px auto 20px; max-width: var(--entry-width); } @media (min-width: 800px) { #canvas { margin-bottom: 70px; } #primary { margin: 90px auto 20px; padding: 0 70px; } } /*--------------- entries ---------------*/ .entry, .full .comment { box-shadow: 0 0 2px var(--shadow-color); margin: 20px 0; } .entry > .inner:first-child, .full .comment > .inner:first-child { background: var(--entry-background-color); padding: 2em; } @media (min-width: 800px) { .entry, .full .comment { background-image: var(--header-background-image); background-color: var(--header-background-color); padding-right: 60px; box-shadow: 0 0 2px var(--shadow-color); margin: 70px 0; } .entry > .inner:first-child, .full .comment > .inner:first-child { border-right: 20px solid var(--border-color); box-shadow: inset -8px 0 3px -6px var(--shadow-color); } } .entry .header, .comment .header { margin-bottom: 2em; } .entry .header .inner, .comment .header .inner { border-bottom: 2px dotted var(--border-color); padding-bottom: 1em; } .entry .entry-title { margin: 0; padding: 0 0 0.5em; font-family: var(--title-font); font-style: italic; font-weight: normal; font-size: 1.5em; line-height: 1; } .admin-post-icon, .sticky-entry-icon { display: none; } .header a, .metadata a, .footer a { color: var(--text-color); } .header a:hover, .metadata a:hover, .footer a:hover { color: var(--link-color); } .no-subject .entry .entry-title { background: none; border: none; padding: 0; } .restrictions img, .access-filter img { display: none; } .security-protected .access-filter:before { content: "lock"; font-family: Material Icons; font-size: 22px; vertical-align: middle; } .security-private .access-filter:before { content: "visibility_off"; font-family: Material Icons; font-size: 22px; vertical-align: middle; } .restrictions-NSFW .restrictions:before { content: "warning"; font-family: Material Icons; font-size: 22px; vertical-align: middle; } .restrictions-18 .restrictions:before { content: "18+"; font-size: 16px; font-family: arial, sans-serif; font-weight: bold; vertical-align: middle; } .has-userpic .userpic { float: right; shape-outside: circle(50%) padding-box; padding-left: 1em; } .has-userpic .userpic img { border: 5px solid var(--border-color); background: var(--border-color); display: block; max-width: 50px; max-height: 50px; width: auto; height: auto; border-radius: 50%; box-shadow: 0 0 2px var(--shadow-color); } @media (min-width: 800px) { .has-userpic .userpic { width: 120px; margin-right: calc(-70px - 2em); } .has-userpic .userpic img { max-width: 100px; max-height: 100px; width: auto; height: auto; border: 10px solid var(--border-color); box-shadow: -2px 0 2px var(--shadow-color); margin: 0 auto; } } .entry .poster { font-size: 0; } .entry .poster .ljuser { font-size: var(--text-size); padding-right: 0.25em; } .entry .poster:before { content: "Written by "; font-size: var(--text-size); } .entry .poster .ljuser:nth-child(2):before { content: "in "; } .poster.empty { display: none; } .poster .ljuser img { display: none; } .ljuser b { font-weight: normal; } .entry-content, .comment-content { margin: 2em 0; } @media (min-width: 800px) { .entry-content { text-align: justify; } } .entry-content ol, .comment-content ol, .entry-content ul, .comment-content ul { padding-left: 1em; } .entry-content li, .comment-content li { list-style-position: inside; } .entry-content img, .comment-content img { max-width: 100%; height: auto; } .cuttag-action { display: flex; align-items: center; line-height: 1; } .cuttag-action img { display: none; } .cuttag-action:before { content: "content_cut"; font-family: Material Icons; font-size: 22px; vertical-align: middle; margin-right: 5px; color: var(--text-color); } .cuttag-action:after { content: ""; height: 0; width: 100%; border-bottom: 1px dashed var(--border-color); } .cut-open, .cut-close { display:none; } .cut-text{ font-weight: normal; margin-left: 27px; display: block; } .metadata li { line-height: 1.2; margin-bottom: 0.5em; } .metadata ul { display: inline; list-style: none; margin: 0; padding: 0; } .metadata-label { display: none; } .metadata img { vertical-align: middle; } #metadata-music:before { content: "speaker"; font-family: Material Icons; font-size: 22px; vertical-align: middle; margin-right: 5px; } #metadata-mood:before { content: "sentiment_satisfied_alt"; font-family: Material Icons; font-size: 22px; vertical-align: middle; margin-right: 5px; } #metadata-location:before { content: "location_on"; font-family: Material Icons; font-size: 22px; vertical-align: middle; margin-right: 5px; } #metadata-xpost:before { content: "add_location"; font-family: Material Icons; font-size: 22px; vertical-align: middle; margin-right: 5px; } .entry .tag { margin-bottom: 0.5em; line-height: 1.2; } .tag-text { display: none; } .tag ul { display: inline; margin-left: 0; padding-left: 0; } .tag ul li { display: inline; } .tag:before { content: "loyalty"; font-family: Material Icons; font-size: 22px; vertical-align: middle; margin-right: 5px; } .tag-nav-trigger { vertical-align: middle; } ul.entry-management-links { margin: 0; padding: 0; float: left; } ul.entry-management-links li { display: inline; margin-right: 5px; } ul.entry-management-links li a img { display: none; } ul.entry-management-links.icon-links li a:before { font-family: Material Icons; font-size: 22px; line-height: 22px; } .icon-links .link_prev a:before { content: "arrow_back"; } .icon-links .edit_entry a:before { content: "edit"; } .icon-links .edit_tags a:before { content: "local_offer"; } .icon-links .mem_add a:before { content: "favorite"; } .icon-links .tell_friend a:before { content: "share"; } .icon-links .watch_comments a:before { content: "add_alert"; } .icon-links .link_next a:before { content: "arrow_forward"; } ul.entry-interaction-links li { display: inline; margin-left: 0.5em; } ul.entry-interaction-links { margin: 0; padding: 0; float: right; } .footer:after { content: ""; display: block; clear: both; } /*------------ comments ------------*/ .comment-pages { background: var(--entry-background-color); padding: 1em; text-align: center; box-shadow: 0 0 2px var(--shadow-color); margin: 10px 0; } .comment-posted { font-weight: bold; } .comment-wrapper { min-width: 15em; } .full .thread-depth { display: block; line-height: 1; margin-bottom: 1em; } .comment .comment-title { margin: 0; font-weight: normal; } .full .comment .comment-title { padding: 0 0 0.5em; font-family: var(--title-font); font-style: italic; font-weight: normal; font-size: 1.5em; line-height: 1; } .comment-date-text { display: none; } .no-subject .comment .comment-title { background: none; border: none; padding: 0; } .poster-ip { display: block; } .partial { background: var(--entry-background-color); box-shadow: 0 0 2px var(--shadow-color); padding: 1em; margin: 20px 0; } .multiform-checkbox { margin-right: 0.5em; float: left; } .multiform-checkbox input { vertical-align: top; } ul.comment-management-links { margin: 0; padding: 0; float: right; } ul.comment-management-links li { display: inline-block; margin-left: 5px; } ul.comment-management-links.icon-links li { width: 22px; overflow: hidden; } ul.comment-management-links li a img { display: none; } ul.comment-management-links.icon-links li a:before { font-family: Material Icons; font-size: 22px; line-height: 22px; } .icon-links .edit_comment a:before { content: "edit"; } .icon-links .delete_comment a:before { content: "delete_forever"; } .icon-links .screen_comment a:before { content: "visibility_off"; } .icon-links .unscreen_comment a:before { content: "visibility"; } .icon-links .freeze_thread a:before { content: "ac_unit"; } .icon-links .unfreeze_thread a:before { content: "wb_sunny"; } ul.comment-interaction-links li { display: inline; margin-right: 0.5em; } ul.comment-interaction-links { margin: 0; padding: 0; float: left; } .comment-pages.bottompages, #comments ul.entry-interaction-links, #comments ul.entry-management-links { display: none; } .bottomcomment { background: var(--entry-background-color); text-align: center; box-shadow: 0 0 2px var(--shadow-color); } #qrformdiv { right: 0 !important; min-width: 100% !important; padding: 0; } #qrform { padding-top: 2em; } #qrdiv input, #qrdiv select, #qrdiv textarea { border: 1px solid var(--border-color); background: var(--entry-background-color); color: var(--text-color); font-family: var(--main-font); font-size: var(--text-size); } #qrdiv input[type="button"], #qrdiv input[type="submit"] { background: transparent; border: 0; font-size: var(--text-size); font-family: var(--title-font); padding: 0.5em; color: var(--link-color); line-height: 1; } #postform { padding: 2em; background: var(--entry-background-color); box-shadow: 0 0 2px var(--shadow-color); } /*------------ archive, tags, icons containers------------*/ .month-wrapper, #archive-month, .tags-container, .icons-container { box-shadow: 0 0 2px rgba(0, 0, 0, 0.4); margin: 20px 0; } .month-wrapper .month > .inner:first-child, .tags-container > .inner:first-child, .icons-container > .inner:first-child, #archive-month > .inner:first-child { background: var(--entry-background-color); padding: 2em; } @media (min-width: 800px) { .month-wrapper, #archive-month, .tags-container, .icons-container { background: var(--header-background-image); padding-right: 60px; margin: 70px 0; } .month-wrapper .month > .inner:first-child, .tags-container > .inner:first-child, .icons-container > .inner:first-child, #archive-month > .inner:first-child { border-right: 20px solid var(--border-color); box-shadow: inset -8px 0 3px -6px var(--shadow-color); } } .month .header, .tags-container .header, .icons-container .header { margin-bottom: 2em; border-bottom: 2px dotted var(--border-color); padding-bottom: 1em; } .month-wrapper h3, .tags-container h2, .icons-container h2 { padding: 0; font-family: var(--title-font); font-style: italic; font-weight: normal; font-size: 1.5em; line-height: 1; } .month .footer, #primary .manage-link { border-top: 2px dotted var(--border-color); margin-top: 2em; padding-top: 1em; } /*------------ archive------------*/ table.month { margin: 0 auto; border-spacing: 3px; text-align: center; } table.month td { width: 2em; height: 2em; } table.month th { padding: 3px; background: var(--blockquote-background-color); color: var(--blockquote-text-color); font-family: var(--title-font); font-weight: normal; width: 2em; border-radius: 4px; } table.month td p { margin: 0; padding: 3px; } table.month td.day-has-entries { position: relative; } .day.day-has-entries .label { border: 1px solid var(--border-color); display: block; border-radius: 50px; width: 2em; height: 2em; line-height: 2em; } table.month .day-has-entries p { left: 0; top: 0; position: absolute; z-index: 9; } table.month .day-has-entries p a { color: transparent; padding: 1em; } .month dl { margin: 0; } .month dl dt { border-bottom: 1px dotted var(--border-color); font-family: var(--title-font); font-size: 1em; padding-bottom: 1em; font-style: italic; } .month dl dt a { color: var(--text-color); } .month dl dt a:hover { color: var(--link-color); } .month dl .time { padding-right: 0.5em; } .month dl h3 { display: inline; font-size: 1em; } .page-month .month .entry-poster { margin-right: 0.5em; } .month dl .tag ul { margin-top: 0; } .month dd { margin: 1em 0 0; } .day-date { display: none; } .month caption { display: none; } #archive-year .navigation li a, #archive-year li.active { display: inline-block; height: 50px; width: 50px; background: var(--border-color); line-height: 50px; border-radius: 50px; text-align: center; color: var(--header-icon-color); box-shadow: 0 0 2px var(--shadow-color); margin: 0 5px; } #archive-year .navigation li a:hover, #archive-year li.active { color: var(--header-icon-hover-color); } #archive-year .navigation li a:hover { transform: rotate(360deg); } /*------------ tags ------------*/ ul.ljtaglist { list-style-position: inside; padding: 0; margin-left: 1em; } ul.ljtaglist:first-child, .tags_cloud ul { padding: 0; margin: 0; } /*------------ icons page ------------*/ .sorting-options ul { margin: 0 0 1em; padding: 0; } .sorting-options ul li { display: inline; } .icon { border-top: 2px dotted var(--border-color); border-bottom: 2px dotted var(--border-color); padding: 1em 0; margin: 1em 0; display: flex; } .icon-image { margin-right: 1em; } .icon-image img { display: block; } .default.label { font-size: 0; } .default.label:before { content: "star"; font-family: Material Icons; font-size: 22px; font-style: normal; vertical-align: top; line-height: 22px; } .icon-keywords ul { display: inline; margin: 0; padding: 0; } .icon-keywords ul li { display: inline; } .icon-pages p { margin: 0; } .keywords-label, .comment-text, .description-text { font-weight: bold; } /*------------ modules ------------*/ #secondary { background-image: var(--header-background-image); background-color: var(--header-background-color); border-bottom: 20px solid var(--border-color); box-shadow: 0 2px 2px var(--shadow-color); } .module-section-one { clear: left; margin: 0 auto; max-width: var(--entry-width); position: relative; } .module-section-one { padding: 0 2em 50px; } @media (min-width: 800px) { .module-section-one { padding: 0 70px 70px; } } .module-content ul { list-style: none; margin: 0; padding: 0; } .module .userpic img { display: block; border: 5px solid var(--border-color); border-radius: 50%; max-width: 70px; max-height: 70px; width: auto; height: auto; margin: 0 auto; } @media (min-width: 800px) { .module-userprofile { width: 120px; height: 120px; position: absolute; bottom: -70px; left: 70px; display: flex; align-items: center; } .module .userpic img { border: 10px solid var(--border-color); max-width: 100px; max-height: 100px; box-shadow: 0 2px 2px var(--shadow-color); background: var(--border-color); } } .module-navlinks { position: absolute; left: 2em; bottom: -30px; text-align: center; } @media (min-width: 800px) { .module-navlinks { left: 190px; } } .module-navlinks li { float: left; width: 40px; height: 40px; overflow: hidden; border-radius: 50%; background: var(--border-color); box-shadow: 0 2px 2px var(--shadow-color); margin-left: 2px; } .module-navlinks li a { color: var(--header-icon-color); } .module-navlinks li a:hover { color: var(--header-icon-hover-color); } .module-navlinks li a:before { display: block; font-family: Material Icons; font-size: 22px; vertical-align: middle; height: 40px; width: 40px; line-height: 40px; } .list-item-recent a:before { content: "home"; } .list-item-archive a:before { content: "date_range"; } .list-item-read a:before { content: "rss_feed"; } .list-item-tags a:before { content: "style"; } .list-item-network a:before { content: "language"; } .list-item-memories a:before { content: "star"; } .list-item-userinfo a:before { content: "info"; } .module-typelist { margin-top: 10px; padding-top: 10px; border-top: 2px dotted var(--border-color); } .module-typelist ul { display: flex; flex-wrap: wrap; margin: -2px; } .module-typelist li { flex-grow: 1; text-align: center; line-height: 1; } .module-typelist li a { background: var(--header-link-background-color); margin: 2px; font-style: italic; color: var(--header-link-color); display: block; padding: 0.5em; } .module-typelist li a:first-letter { font-family: var(--title-font); } .module-typelist li a:hover { background: var(--customtext-background-color); color: var(--customtext-link-color); backdrop-filter: blur(1px); } .module-customtext { margin-top: 20px; background: var(--customtext-background-color); backdrop-filter: blur(1px); padding: 1em; color: var(--customtext-text-color); } .module-customtext .module-content{ overflow: auto; max-height: var(--customtext-height); } .module-customtext a { color: var(--customtext-link-color); border-bottom: 2px dotted var(--customtext-text-color); } .module-customtext a:hover { color: var(--customtext-link-hover-color); } .module-customtext .module-content::-webkit-scrollbar { width: 5px; height: 5px; } .module-customtext .module-content::-webkit-scrollbar-track { background: transparent; } .module-customtext .module-content::-webkit-scrollbar-thumb { background: var(--customtext-link-color); } .module-customtext .module-content::-webkit-scrollbar-corner { background: var(--customtext-link-color); } @media (min-width: 800px) { .module-customtext { text-align: justify; } } .module h2, .module-calendar, .journal-website-name, .journal-name, ul.userlite-interaction-links, .module-tags_list, .module-tags_multilevel, .module-tags_cloud, .module-cuttagcontrols, .module-pagesummary, .module-active, .module-credit, .module-syndicate, .module-subscriptionfilters, .module-search, .module-time, .module-powered, .module .manage-link { display: none; } /*--------------- navigation ---------------*/ .navigation .page-separator, .topnav { display: none; } .navigation ul { margin: 0; padding: 0; text-align: center; } .navigation li { display: inline; } #entries .navigation li { display: inline-block; width: 40px; height: 40px; overflow: hidden; background: var(--border-color); border-radius: 50%; box-shadow: 0 0 2px var(--shadow-color); margin: 0 10px; } #entries .navigation li a { color: var(--header-icon-color); } #entries .navigation li a:hover { color: var(--header-icon-hover-color); } #entries .navigation li a:before { display: block; font-family: Material Icons; font-size: 22px; height: 40px; width: 40px; line-height: 40px; } li.page-back a:before { content: "arrow_back"; } li.page-forward a:before { content: "arrow_forward"; } li.page-separator { display: none !important; } .noentries { display: none; } /*------------ footer ------------*/ #footer { text-align: center; margin-bottom: 25px; } .page-top { width: 40px; height: 40px; background: var(--border-color); border-radius: 50%; box-shadow: 0 0 2px var(--shadow-color); overflow: hidden; margin: 0 auto; } .page-top a { color: var(--header-icon-color); } .page-top a:hover { color: var(--header-icon-hover-color); } .page-top a:before { content: "arrow_upward"; display: block; font-family: Material Icons; font-size: 22px; height: 40px; width: 40px; line-height: 40px; } /*------------ contextual pop-up ------------*/ div.ContextualPopup { background: var(--entry-background-color); border: 0; font-family: var(--main-font); font-size: 1em; color: var(--text-color); padding: 1em; width: 180px; border-radius: 0; text-align: center; } div.ContextualPopup .Relation { font-weight: normal; font-size: 1em; margin: 0; padding: 1em 0; } div.ContextualPopup .Userpic { border: 0; float: none; margin: 0; } div.ContextualPopup .Userpic img { border: 5px solid var(--border-color); border-radius: 50%; } .ContextualPopup .Actions ul { list-style: none; margin: 0; padding: 1em 0 0; border-top: 2px dotted var(--border-color); } .ContextualPopup a { color: var(--link-color); } .ContextualPopup a:hover { color: var(--link-hover-color); } /*------------ control strip ------------*/ #lj_controlstrip { background: var(--entry-background-color); color: var(--text-color); justify-content: center; padding: 0.75em 0; border-bottom: 5px solid var(--border-color); z-index: 9; box-shadow: 0 2px 0 var(--shadow-color); transform: translateY(-100%); position: absolute; transition: transform 0.7s; z-index: 9; } #lj_controlstrip:before { content: ""; position: absolute; bottom: -65px; height: 60px; width: 40px; right: 10px; } #lj_controlstrip:after { font-family: "Material Icons"; content: "settings"; font-size: 22px; position: absolute; bottom: -65px; height: 40px; width: 40px; right: 10px; cursor: pointer; line-height: 40px; text-align: center; background: var(--border-color); color: var(--header-icon-color); border-radius: 50%; background-clip: padding-box; box-shadow: 0 0 2px var(--shadow-color); } #lj_controlstrip:hover { transform: translateY(0); } #lj_controlstrip > div { font-family: var(--main-font); font-size: var(--text-size); line-height: 1.5; padding: 0.25em 0.5em; flex-grow: 0; } #lj_controlstrip a { font-family: var(--main-font); color: var(--link-color); } #lj_controlstrip a:hover { color: var(--link-hover-color); text-decoration: none; } #lj_controlstrip_actionlinks { text-align: center; } #lj_controlstrip_statustext { color: var(--text-color); font-weight: normal; font-size: var(--text-size); } #lj_controlstrip_search { text-align: right; } #lj_controlstrip input, #lj_controlstrip select { border: 1px solid var(--border-color); background: var(--entry-background-color) !important; font-size: var(--text-size) !important; color: var(--text-color) !important; font-family: var(--main-font) !important; } #lj_controlstrip input[type="submit"] { border: 0; background: transparent; font-size: var(--text-size); color: var(--text-color); font-family: var(--title-font) !important; padding: 0.25em; } #lj_controlstrip .ljuser b { font-weight: normal; } #lj_controlstrip .ljuser img { display: none; } #lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_actionlinks { border: 0; } #lj_controlstrip_userpic a img { border: 3px solid var(--border-color); border-radius: 50%; }Paste the following into the "Custom stylesheet URL" field.https://fonts.googleapis.com/css2?family=Open+Sans&family=Shadows+Into+Light+Two&display=swap
6. Go to the "Account settings" page and check "Show my journal's icons pages in my chosen style instead of the site layout".

RESOURCES

• icon font by Google
• background images by Davidzydd and nenilkime from freepik.com

Comments

[kimboo_york]

Thank you very much for this beautiful layout! I really love it.

[rosecarmine]

Thank you!