myrtillenne | Clear (Reply)

header image (1000x250px)
sidebar image (300x300px)
navigation links, links list, custom text
comment pages
icon pages

Code:

/*-------------------------------------

- layout - clear (basic boxes) - https://myrtillenne.dreamwidth.org
- images - https://picjumbo.com/

-------------------------------------*/

/*--------------- options ---------------*/

:root {
  --text-size: 16px;
  --text-color: #555;
  --line-height: 1.5;
  --background-color: #f2f2f2;
  --link-color: #e93a8d;
  --link-hover-color: #67d7e7;
  --main-font: Roboto, sans-serif;
  --title-font: Roboto Condensed, sans-serif;
  --date-font: Keania One, sans-serif;
  --title-color: #67d7e7;
  --title-hover-color: #e93a8d;
  --content-width: 1000px;
  --border-color: #ddd;
  --entry-background-color: #fff;
  --header-image: url("https://rosecarmine.dreamwidth.org/file/102254.jpg");
  --header-image-height: 250px;
  --sidebar-width: 300px;
  --sidebar-image: url("https://rosecarmine.dreamwidth.org/file/102834.jpg");
  --sidebar-image-height: 300px;
}

/*--------------- general ---------------*/

H1,
H2,
H3 {
  margin: 0.25em 0;
  padding: 0.25em 0;
}

img {
  border: none;
}

hr {
  display: none;
}

body {
  color: var(--text-color);
  background: var(--background-color);
  font-family: var(--main-font);
  font-size: var(--text-size);
  line-height: var(--line-height);
  margin: 0;
}

/*--------------- links ---------------*/

a,
a:visited {
  color: var(--link-color);
}
a:hover {
  color: var(--link-hover-color);
}

a,
a:link,
a:visited {
  text-decoration: none;
  transition: all 0.4s ease;
}

q {
  font-style: italic;
}

blockquote {
  margin: 1em 0;
  padding: 1em;
  border: 1px solid var(--border-color);
}

/*------------ content ------------*/

#canvas {
  max-width: calc(var(--content-width) + 2px);
  margin: 20px 0;
}

@media (min-width: 800px) {
  #canvas {
    margin: 50px;
  }
}

@media (min-width: 1024px) {
  #canvas {
    margin: 50px auto;
    padding: 0 50px;
  }

#content {
    border-left: calc(var(--sidebar-width) + 2px) solid transparent;
    clear: both;
  }
}

@media (min-width: 1024px) {
  #primary {
    width: 100%;
    margin-right: -100%;
    margin-left: 0;
    float: left;
  }

#primary > .inner:first-child {
    margin: 0 0 50px 50px;
  }
}

/*--------------- header ---------------*/

@media (min-width: 800px) {
  #header:before {
    content: "";
    display: block;
    width: 100%;
    height: var(--header-image-height);
    background-image: var(--header-image);
    background-repeat: no-repeat;
    background-position: top center;
    background-clip: padding-box;
    border-radius: 3px 3px 0 0;
    border: 1px solid var(--border-color);
    border-bottom: 0;
    box-sizing: border-box;
  }
}

#header > .inner:first-child {
  border-radius: 3px;
  background: var(--entry-background-color);
  border: 1px solid var(--border-color);
}

@media (min-width: 800px) {
  #header > .inner:first-child {
    border-radius: 0 0 3px 3px;
    display: flex;
  }

#header .module-wrapper {
    order: 2;
    border-left: 1px solid var(--border-color);
  }
}

#header #journaltitles-container {
  font-size: 1.17em;
  margin: 0;
  padding: 0.75em 1em;
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  line-height: 1;
}

h1#title {
  font-size: 1em;
  padding: 0 0.5em 0 0;
  text-transform: uppercase;
  font-family: var(--title-font);
  margin: 0;
}

h1#title a {
  color: var(--title-color);
}

h1#title a:hover {
  color: var(--title-hover-color);
}

h2#subtitle {
  font-size: 1em;
  font-weight: normal;
  padding: 0;
  margin: 0;
}

h2#pagetitle {
  display: none;
}

.module-navlinks {
  position: relative;
  line-height: 1;
}

.module-navlinks .module-content {
  border-bottom: 1px solid var(--border-color);
}

@media (min-width: 800px) {
  .module-navlinks {
    width: 140px;
  }

.module-navlinks .module-content {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.4s step-end, opacity 0.4s linear;
    width: 14em;
    right: -1px;
    background: var(--entry-background-color);
    border: 1px solid var(--border-color);
    z-index: 9;
    border-radius: 3px;
  }

.module-navlinks:hover .module-content {
    visibility: visible;
    opacity: 1;
    transition: visibility 0.4s step-start, opacity 0.4s linear;
  }

.module-navlinks:before {
    content: "NAVIGATION";
    padding: 0.75em 0;
    display: block;
    font-family: var(--title-font);
    font-size: 1.17em;
    cursor: pointer;
    text-align: center;
  }
}

.module-navlinks .module-content li:first-child:before {
  display: none;
}

/*------------ sidebar ------------*/

@media (min-width: 1024px) {
  #secondary {
    float: left;
    width: calc(var(--sidebar-width) + 2px);
    margin-left: calc(-1 * (var(--sidebar-width) + 2px));
  }
}

.module-section-one {
  margin: 20px 0;
  background: var(--entry-background-color);
  border: 1px solid var(--border-color);
  border-radius: 3px;
  overflow: hidden;
}

@media (min-width: 800px) {
  .module-section-one {
    margin: 50px 0;
  }
}

.module-section-one .module {
  margin-top: -1px;
}

@media (min-width: 1024px) {
  .module-section-one:before {
    content: "";
    display: block;
    width: 100%;
    height: var(--sidebar-image-height);
    background: var(--sidebar-image);
  }

.module-section-one .module {
    margin: 0;
  }
}

.module-content ul {
  margin: 0;
  padding: 0;
}

.module-content li {
  list-style: decimal-leading-zero;
  margin: 0 0 0 2.2em;
  padding: 0;
  text-transform: uppercase;
  font-family: var(--date-font);
  border-top: 1px solid transparent;
  line-height: 1;
  position: relative;
  transition: color 0.4s;
  color: var(--title-color);
}

.module-content li:hover {
  color: var(--title-hover-color);
}

.module-content li:before {
  content: "";
  width: 100%;
  height: 1px;
  background: var(--border-color);
  padding-left: 2.2em;
  position: absolute;
  top: -1px;
  left: -2.2em;
}

.module-content li a {
  display: block;
  padding: 0.75em;
  border-left: 1px solid var(--border-color);
  font-family: var(--title-font);
  color: var(--text-color);
  margin-left: 0.25em;
}

.module-content li a:hover {
  letter-spacing: 2px;
}

.module-customtext {
  border-top: 1px solid var(--border-color);
  padding: 1.5em;
}

.module h2,
.module .manage-link,
.module-userprofile,
.module-calendar,
.module-tags_list,
.module-tags_cloud,
.module-tags_multilevel,
.module-cuttagcontrols,
.module-pagesummary,
.module-active,
.module-credit,
.module-syndicate,
.module-subscriptionfilters,
.module-search,
.module-time,
.module-powered {
  display: none;
}

/*--------------- entries ---------------*/

.entry,
.full .comment {
  background: var(--entry-background-color);
  margin: 20px 0;
  border: 1px solid var(--border-color);
  border-radius: 3px;
  padding: 2em;
}

@media (min-width: 800px) {
  .entry,
  .full .comment {
    padding: 0 140px 0 0;
    margin: 50px 0;
  }

.entry > .inner:first-child,
  .full .comment > .inner:first-child {
    border-right: 1px solid var(--border-color);
  }
}

.sticky-entry-icon,
.admin-post-icon {
  display: none;
}

.has-subject .entry .entry-title {
  font-size: 1.5em;
  font-family: var(--title-font);
  padding: 0;
  text-transform: uppercase;
  line-height: 1;
  font-weight: normal;
  margin: 0;
  color: var(--text-color);
}

@media (min-width: 800px) {
  .has-subject .entry .entry-title {
    float: left;
    padding: calc(2 * var(--text-size));
  }
}

.no-subject .entry-title {
  padding: 0;
  margin: 0;
}

.entry .entry-title a:hover {
  letter-spacing: 2px;
}

.entry .entry-title a {
  color: var(--text-color);
}

.restrictions img,
.access-filter img {
  display: none;
}

.restrictions,
.access-filter {
  text-transform: uppercase;
  font-family: var(--title-font);
}

@media (min-width: 800px) {
  .entry .restrictions,
  .entry .access-filter {
    width: 140px;
    margin-right: -141px;
    float: right;
    clear: right;
    border-bottom: 1px solid var(--border-color);
    text-align: center;
    padding: 0.5em 0;
    line-height: 1;
  }
}

.security-protected .access-filter:before {
  content: "LOCKED";
}

.security-private .access-filter:before {
  content: "PRIVATE";
}

.restrictions-NSFW .restrictions:before {
  content: "NSFW";
}

.restrictions-18 .restrictions:before {
  content: "18+";
}

.entry .datetime {
  display: block;
  font-size: 1em;
}

.entry .datetime {
  font-size: 1.17em;
  text-transform: uppercase;
  font-family: var(--date-font);
  color: var(--title-color);
}

.entry .datetime a {
  color: var(--title-color);
}

.entry .datetime a:hover {
  color: var(--title-hover-color);
}

@media (min-width: 800px) {
  .entry .date {
    float: right;
    width: 140px;
    margin-right: -141px;
    clear: right;
    border-bottom: 1px solid var(--border-color);
    text-align: center;
    padding: 0.5em 0;
    line-height: 1;
  }

.entry .time {
    float: right;
    width: 140px;
    margin-right: -141px;
    clear: right;
    border-bottom: 1px solid var(--border-color);
    text-align: center;
    padding: 0.5em 0;
    line-height: 1;
  }
}

.has-userpic .userpic {
  float: right;
  clear: right;
}

.has-userpic .userpic img {
  max-width: 50px;
  max-height: 50px;
  width: auto;
  height: auto;
}

.entry .poster {
  font-size: 0;
}

.entry .poster .ljuser,
.full .poster .ljuser,
.full .anonymous {
  font-family: var(--title-font);
  text-transform: uppercase;
  font-size: var(--text-size);
  margin-right: 0.5em;
}

@media (min-width: 800px) {
  .has-userpic .userpic {
    float: right;
    clear: right;
    width: 140px;
    margin: 0 -141px 0 0;
    border-bottom: 1px solid var(--border-color);
  }

.has-userpic .userpic img {
    max-width: 100px;
    max-height: 100px;
    padding: 20px;
    display: block;
    margin: 0 auto;
  }

.entry .poster,
  .full .poster {
    float: right;
    clear: right;
    margin-right: -141px;
    width: 140px;
    display: block;
    text-align: center;
  }

.entry .poster .ljuser,
  .full .poster .ljuser,
  .full .anonymous {
    padding: 0.5em;
    margin: 0;
    display: block;
    border-bottom: 1px solid var(--border-color);
    line-height: 1;
    font-family: var(--title-font);
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.entry .poster a,
.full .poster a {
  color: var(--text-color);
}

.poster .ljuser img {
  display: none;
}

.poster .ljuser b {
  font-weight: normal;
}

.poster.empty {
  display: none;
}

.entry-content {
  clear: left;
  margin: 2em 0;
}

@media (min-width: 800px) {
  .entry-content {
    text-align: justify;
    margin: 2em;
  }
}

.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 ul,
.comment-content ul {
  padding-left: 1em;
  list-style: none;
}

.entry-content ul li:before,
.comment-content ul li:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5em;
  width: 4px;
  height: 4px;
  background: var(--title-color);
}

.entry-content img,
.comment-content img {
  max-width: 100%;
  height: auto;
}

@media (min-width: 800px) {
  .metadata {
    padding: 0 2em;
  }
}

.metadata ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.entry .footer {
  clear: left;
}

@media (min-width: 800px) {
  .entry div.tag {
    padding: 0 2em;
  }
}

.metadata-label,
.tag-text {
  font-family: var(--title-font);
  text-transform: uppercase;
}

.tag ul {
  display: inline;
  margin: 0;
  padding: 0;
}

.tag li {
  display: inline;
}

.tag-nav-trigger {
  vertical-align: middle;
}

ul.entry-management-links,
ul.entry-interaction-links,
ul.comment-management-links,
ul.comment-interaction-links {
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  text-align: right;
  font-family: var(--title-font);
  clear: both;
}

ul.entry-management-links::before {
  content: "";
  display: block;
  margin-top: 2em;
}

ul.entry-management-links li,
ul.entry-interaction-links li,
ul.comment-management-links li,
ul.comment-interaction-links li {
  display: inline-block;
  line-height: 1;
  margin-right: 0.5em;
}

@media (min-width: 800px) {
  ul.entry-management-links li:last-child,
  ul.entry-interaction-links li:last-child,
  ul.comment-management-links li:last-child,
  ul.comment-interaction-links li:last-child {
    width: 140px;
    margin: 0 -141px 0 0;
    float: right;
    border-top: 1px solid var(--border-color);
    text-align: center;
    box-sizing: border-box;
  }

ul.entry-management-links li,
  ul.entry-interaction-links li,
  ul.comment-management-links li,
  ul.comment-interaction-links li {
    padding: 0.5em 0;
  }
}

.entry-interaction-links a,
.entry-management-links a {
  color: var(--text-color);
}

.footer:after {
  content: "";
  display: block;
  clear: both;
}

/*--------------- comments ---------------*/

.comment-pages {
  text-transform: uppercase;
  font-family: var(--title-font);
  background: var(--entry-background-color);
  border: 1px solid var(--border-color);
  border-radius: 3px;
  padding: 0.5em 2em;
  margin-bottom: 5px;
}

.comment-pages:first-of-type {
  margin-top: 20px;
}

@media (min-width: 800px) {
  .comment-pages:first-of-type {
    margin-top: 50px;
  }
}

.comment {
  min-width: 15em;
}

.comment-pages a {
  color: var(--text-color);
}

.comment .header {
  float: left;
  width: 100%;
  font-family: var(--title-font);
  text-transform: uppercase;
}

@media (min-width: 800px) {
  .comment .header .inner {
    padding: 2em 2em 0;
  }
}

.comment-title {
  font-weight: normal;
  padding: 0;
  margin: 0;
}

.comment .comment-title a {
  color: var(--text-color);
}

.comment-date-text,
.comment-from-text {
  display: none;
}

.comment .poster-ip {
  font-size: 1em;
  display: block;
  font-family: var(--title-font);
}

@media (min-width: 800px) {
  .comment .poster-ip {
    padding: 0 2em;
  }
}

.partial .comment {
  background: var(--entry-background-color);
  margin: 20px 0;
  padding: 0.5em 1em;
  border: 1px solid var(--border-color);
  border-radius: 3px;
}

.comment-content {
  clear: left;
  padding: 2em 0;
}

@media (min-width: 800px) {
  .comment-content {
    padding: 2em;
  }
}

@media (min-width: 800px) {
  .comment .multiform-checkbox {
    padding-left: 2em;
    display: block;
  }
}

.comment-interaction-links a,
.comment-management-links a {
  color: var(--text-color);
}

#comments ul.entry-management-links,
#comments ul.entry-interaction-links,
.comment-pages.bottompages {
  display: none;
}

.bottomcomment {
  text-align: center;
}

#qrformdiv {
  right: 0 !important;
  min-width: 100% !important;
  padding: 0;
}

@media (min-width: 800px) {
  #qrform {
    padding: 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: 1em;
  padding: 0.5em;
  color: var(--text-color);
  line-height: 1;
  font-family: var(--title-font);
  border: 1px solid var(--border-color);
  text-transform: uppercase;
}

#postform {
  padding: 2em;
  background: var(--entry-background-color);
  border: 1px solid var(--border-color);
  border-radius: 3px;
  margin: 20px 0;
}

/*------------ archive, tags, icons containers ------------*/

.month-wrapper,
.page-month .month,
.tags-container,
.icons-container {
  background: var(--entry-background-color);
  margin: 20px 0;
  border: 1px solid var(--border-color);
  border-radius: 3px;
}

.month-wrapper .header,
.tags-container .header,
.icons-container .header {
  text-align: center;
  font-family: var(--title-font);
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-color);
}

.month-wrapper .contents,
.tags-container .contents,
.icons-container .contents {
  padding: 2em;
}

@media (min-width: 800px) {
  .month-wrapper,
  .page-month .month,
  .tags-container,
  .icons-container {
    padding: 0 140px 0 0;
    margin: 50px 0;
  }

.month-wrapper div.month,
  .page-month .month .inner,
  .tags-container > .inner:first-child,
  .icons-container > .inner:first-child {
    border-right: 1px solid var(--border-color);
  }

.month-wrapper .header,
  .tags-container .header,
  .icons-container .header {
    float: right;
    margin: 0 -141px 0 0;
    width: 140px;
  }
}

.month-wrapper h3,
.tags-container h2,
.icons-container h2 {
  font-size: 1em;
  line-height: 1;
  font-weight: normal;
  padding: 0.5em 0;
}

#archive-year .month .footer .inner,
.manage-link {
  font-family: var(--title-font);
  text-transform: uppercase;
  line-height: 1;
  text-align: center;
  border-top: 1px solid var(--border-color);
  padding: 0.5em 0;
}

@media (min-width: 800px) {
  #archive-year .month .footer .inner,
  .manage-link {
    float: right;
    clear: right;
    margin: 0 -141px 0 0;
    width: 140px;
    display: block;
    margin-top: -1.5em;
  }
}

#archive-year .month .footer a,
.manage-link a {
  color: var(--text-color);
}

/*------------ archive ------------*/

.month caption {
  display: none;
}

.day-date {
  display: none;
}

.month table {
  text-align: center;
  width: 100%;
  border-collapse: collapse;
}

table.month td {
  padding: 0.5em;
  width: 2em;
  height: 2em;
  font-weight: normal;
  font-family: var(--date-font);
  color: var(--title-color);
  border: 1px solid var(--border-color);
}

table.month th {
  text-transform: uppercase;
  font-family: var(--title-font);
  padding: 0.5em;
  font-weight: normal;
  border: 1px solid var(--border-color);
}

table.month td.day-has-entries .label,
table.month td p {
  display: inline-block;
  margin: 0;
}

table.month td p:before {
  content: "[ ";
  color: var(--text-color);
}

table.month td p:after {
  content: " ]";
  color: var(--text-color);
}

.month dl {
  margin: 0;
}

.month dt {
  display: block;
  text-align: center;
  font-family: var(--title-font);
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 1em;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  padding: 0.5em 0;
}

@media (min-width: 800px) {
  .month dt {
    float: right;
    margin: 0 -141px 0 0;
    width: 140px;
  }
}

.month dt:first-child {
  border-top: 0;
}

.month dl h3 {
  font-size: 1em;
  padding: 0;
  margin: 0;
  display: inline;
}

.month dl .time {
  padding-right: 0.5em;
}

.page-month .month .entry-poster {
  margin-right: 0.5em;
}

.page-month .month .entry-poster.empty {
  margin-right: 0;
}

#primary .month dt a {
  color: var(--title-color);
}

#primary .month dt a:hover {
  color: var(--title-hover-color);
}

.month dd {
  margin: 0;
  padding: 2em;
}

.month .tag ul {
  display: inline;
  margin: 0;
  padding: 0;
}

.month dl br {
  display: none;
}

.month dl .tag-text {
  font-style: normal;
}

#archive-year .navigation ul {
  display: flex;
  flex-wrap: wrap;
}

#archive-year .navigation li {
  border-right: 1px solid var(--border-color);
  font-family: var(--date-font);
  padding: 0.5em;
}

#archive-year .navigation li a {
  color: var(--title-color);
}

#archive-year .navigation li a:hover {
  color: var(--title-hover-color);
}

#archive-month .navigation ul form {
  display: flex;
  justify-content: space-between;
}

#archive-month .navigation li {
  padding: 0.5em;
}

li.month-back {
  border-right: 1px solid var(--border-color);
}

li.month-forward {
  border-left: 1px solid var(--border-color);
}

@media (min-width: 800px) {
  li.month-back,
  li.month-forward {
    width: 140px;
    box-sizing: border-box;
  }
}

/*------------ tags ------------*/

ul.ljtaglist {
  font-family: var(--date-font);
  margin: 0 0 0 1em;
  padding: 0;
  list-style: decimal-leading-zero inside;
}

ul.ljtaglist li {
  font-family: var(--date-font);
  color: var(--title-color);
  transition: color 0.4s;
}

ul.ljtaglist li:hover {
  color: var(--title-hover-color);
}

ul.ljtaglist li a,
ul.ljtaglist li span {
  font-family: var(--main-font);
  color: var(--text-color);
}

ul.ljtaglist:first-child,
.tags_cloud ul {
  padding: 0;
  margin: 0;
}

/*------------ icons page ------------*/

.sorting-options ul {
  margin: 0 0 2em;
  padding: 0;
  text-transform: uppercase;
  font-family: var(--title-font);
  line-height: 1;
}

.sorting-options ul li {
  display: inline;
}

.page-icons .toppages {
  display: none;
}

.page-icons .bottompages {
  text-align: center;
  margin-top: 1em;
  text-transform: uppercase;
  font-family: var(--title-font);
}

.icons-container .icon {
  border: 1px solid var(--border-color);
  margin: 1em 0 0;
  display: flex;
  flex-wrap: wrap;
}

.icon-image {
  order: 2;
  padding: 1em;
  border-left: 1px solid var(--border-color);
}

.icon-image img {
  display: block;
}

.icon-info {
  padding: 1.5em;
  flex: 1;
}

.default.label,
.keywords-label,
.comment-text,
.description-text {
  text-transform: uppercase;
  font-family: var(--title-font);
}

.icon-keywords ul {
  display: inline;
  margin-left: 0;
  padding-left: 0;
}

.icon-keywords ul li {
  display: inline;
}

.icon-pages p {
  margin: 0;
  text-transform: uppercase;
  font-family: var(--title-font);
}

/*------------ navigation ------------*/

.navigation {
  margin: 20px 0 0;
}

@media (min-width: 800px) {
  .navigation {
    margin: 50px 0;
  }
}

.navigation ul {
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  overflow: hidden;
  background: var(--entry-background-color);
  border: 1px solid var(--border-color);
  border-radius: 3px;
}

.navigation li {
  list-style: none;
  padding: 0.5em 0;
  text-align: center;
  line-height: 1;
  font-family: var(--title-font);
}

li.page-back,
li.page-forward {
  width: 140px;
}

li.page-back {
  float: left;
  border-right: 1px solid var(--border-color);
}

li.page-forward {
  border-left: 1px solid var(--border-color);
  float: right;
}

.noentries {
  display: none;
}

.topnav,
.navigation .page-separator,
.navigation.empty {
  display: none;
}

.navigation a {
  color: var(--text-color);
}

/*------------ footer ------------*/

#footer {
  margin-top: 20px;
  clear: both;
  background: var(--entry-background-color);
  border: 1px solid var(--border-color);
  border-radius: 3px;
  padding: 0.5em 0;
  text-align: center;
  line-height: 1;
  font-family: var(--title-font);
  text-transform: uppercase;
}

#footer a {
  color: var(--text-color);
}

@media (min-width: 1024px) {
  #footer {
    display: none;
  }
}

/*------------ contextual pop-up ------------*/

div.ContextualPopup {
  background: var(--entry-background-color);
  border: 1px solid var(--border-color);
  padding: 0;
  font-family: var(--main-font);
  font-size: 1em;
  color: var(--text-color);
  width: 200px;
  text-align: center;
}

div.ContextualPopup .Relation {
  font-weight: normal;
  font-size: 1em;
  padding: 0.5em;
  border-top: 1px solid var(--border-color);
  margin: 0;
  font-family: var(--title-font);
  text-transform: uppercase;
}

div.ContextualPopup .Userpic {
  border: 0;
  float: none;
  padding: 25px;
}

div.ContextualPopup .Userpic img {
  max-width: 100px;
  max-height: 100px;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
}

.ContextualPopup .Actions ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

div.ContextualPopup li {
  padding: 0.5em;
  border-top: 1px solid var(--border-color);
  line-height: 1;
}

.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: 1px solid var(--border-color);
  width: 100%;
}

#lj_controlstrip > div {
  font-family: var(--main-font);
  font-size: var(--text-size);
  line-height: var(--line-height);
  padding: 0.25em 0.5em;
  flex-grow: 0;
}

#lj_controlstrip a {
  font-family: var(--main-font);
  color: var(--link-color);
}

#lj_controlstrip a:hover {
  text-decoration: none;
  color: var(--link-hover-color);
}

#lj_controlstrip_actionlinks {
  text-align: center;
}

#lj_controlstrip_statustext {
  font-weight: normal;
  font-size: var(--text-size);
  color: var(--text-color);
}

#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"] {
  font-size: 1em;
  padding: 0.5em;
  color: var(--link-color);
  line-height: 1;
  font-family: var(--title-font) !important;
  text-transform: uppercase;
}

#lj_controlstrip .ljuser b {
  font-weight: normal;
}

#lj_controlstrip .ljuser img {
  display: none;
}

#lj_controlstrip_user,
#lj_controlstrip_login,
#lj_controlstrip_actionlinks {
  border: 0;
}

How to install:

Go to the "Select style" page, search for "Basic boxes" and apply any theme.
Go to the "Customize your theme" page, click on the "Custom CSS" tab and paste the code into the "Use embeded CSS" field. Uncheck "Use layout's stylesheet(s)".
On the same page, copy and paste the following https://fonts.googleapis.com/css2?family=Roboto&family=Roboto+Condensed&family=Keania+One&display=swap into the "Custom stylesheet URL" field.
Click on the "Modules" tab. Set "Custom text" to number 1, "Navigation" to number 2 and "Links list" to number 4. Uncheck the other modules.
Click on the "Presentation" tab; in the "Additional options" section select "2010-04-30" and "21:00" for "Entry date/time format" and "Comment date/time format".
In the same section select "text-only" for "Select whether entry management links are printed as text or using the available icons" and "Select whether comment management links are printed as text or using the available icons".

Resources: images from picjumbo

Clear

Post a comment in response: