Бежевый минимализм

Поделиться110.03.24 13:02

Автор: Sttest
Администратор
Имя Фамилия, 000 лет

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla mollis urna quam, sed commodo risus ultrices at. Phasellus eleifend leo in odio venenatis, ut tincidunt magna lobortis. Nam tincidunt mauris a nibh aliquam, quis porttitor erat pretium. Suspendisse erat mauris, vulputate ac aliquam nec, ullamcorper eget quam. 💵💵💵
Сообщений: 15
Уважение: +0

Код:

@import url(style_cs.css);

/* шрифты */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

@font-face {
    font-family: 'SFProDisplay-Medium';
    src: url('/files/001b/70/52/12704.eot');
    src: url('/files/001b/70/52/12704.eot?#iefix') format('embedded-opentype'),
          url('/files/001b/70/52/63957.ttf') format('truetype'),
          url('/files/001b/70/52/23311.woff') format('woff'),
          url('/files/001b/70/52/43093.woff2') format('woff2'),
          url('/files/001b/70/52/90380.svg#SFProDisplay-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
}

/********** Чистый стандартный стиль для MyBB ***********/
/******** Cпециально для ForumD.ru © Gerda, 2023 ********/
/**************************************************
!!! Условия использования !!!

1. Данный копирайт не удалять
2. При публикации производных работ указывать ссылку на автора и ForumD.ru
3. При публикации в общий доступ указывать ссылку на автора и ForumD.ru
4. Публичный производный контент должен распространяться на тех же условиях

Подробно: forumd.ru/viewtopic.php?id=5751#rule
**************************************************/

/* ================== */

/* Скрываем элементы форума */

.acchide,
#pun-index #pun-main h1,
#pun-navlinks h2,
#pun-status h2,
#pun-ulinks h2,
.punbb .forum h2,
.punbb .multipage .topic h2,
.punbb dl.post-sig dt span,
.punbb p.crumbs strong,
.punbb .divider hr,
.punbb .required label em,
.punbb .formsubmit label,
.punbb .submitfield label,
.punbb .modmenu label,
#pun-userlist .main h2,
#pun-title h1,
#pun-announcement h2 {
  font-size: 0;
  height: 0;
  width: 0;
  line-height: 0.0;
  position:absolute;
  left: -9999px;
  overflow: hidden
}

#pun:after,
.punbb .container:after,
.punbb .post-links ul:after,
.punbb .main div.inline:after,
.punbb .post-box:after,
.punbb .linksb:after {clear: both; content: "."; display: block; height: 0; visibility: hidden; overflow:hidden; line-height: 0.0; font-size: 0;}

/* цвета */

:root {
  --accentColor: #2b3c44;
  --lightAccentColor: #dddac9;
  --midAccentColor: #5c5b50;
  --darkAccentColor: #b3af9d;
  --linkColor: #6b635b;
  --lightTextColor: #dddac9bf;
  --divColor: #f1ece8;
  --bodyTextColor: #121515;
  --lightLinkColor: #dddac9;
  --innerBorderColor: #b3af9d;
  --outerBorderColor: #dddac940;
  --bgImg: url();
  --font1: 'Roboto', sans-serif;
  --font2: 'SFProDisplay-Medium', serif;
}

/* ================== */

/* Общие стили */
* {margin: 0; padding: 0;}
body {margin: 0;}
ul, dl, li, dd, dt {list-style: none;}

body {
font-size: 12px;
font-family: var(--font1);
background: var(--bgImg) var(--accentColor);
background-position: top;
background-size: cover;
color: var(--bodyTextColor);
}

h1 {
font-size: 20px;
font-weight: 600;
padding: 5px 10px;
margin: 0px;
text-align: center;
font-family: var(--font2);
}
h2 {
font-size: 16px; 
font-weight: 600;
padding: 5px 10px;
margin: 0px;
text-align: center;
font-family: var(--font2);
}

address, em {font-style: normal}

a {color: var(--linkColor); text-decoration: none;}
a:link, a:visited, a:active { text-decoration: none; var(--textColor); transition: 0.2s;}
a:hover { color: var(--textColor); text-decoration: none; }

@media screen and (max-device-width: 480px) {
html {-webkit-text-size-adjust: 100%;}}

/* Скроллбары */

* {
scrollbar-width: thin; 
scrollbar-color: var(--accentColor) var(--divColor);
}

/* Селект 

::selection {color: var(--darkBackColor); background: var(--textColor);}*/

:focus {outline: none;}
/* ================== */

/* Тело форума */
#pun {
padding: 20px;
position: relative;
width: 1200px;
box-sizing: border-box;
margin: auto;
margin-top: 60px;
margin-bottom: 80px;
}

.punbb {
position: relative;
margin: 0 auto;
padding: 0px 30px 25px 30px;
background: var(--divColor);
border: 1px solid var(--innerBorderColor);
}

.punbb:after {
  content: "";
  display: block;
  top: 15px;
  right: -15px;
  bottom: -15px;
  left: 15px;
  border: 1px solid var(--outerBorderColor);
  position: absolute;
  z-index: -1;
}

/* ================== */

/* Меню навигации */
#pun-navlinks .container {
margin: 0;
padding: 8px 0px;
font-family: var(--font2);
text-align: center;
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
}
#pun-navlinks li {
display: inline;
padding-right: 10px;
}

/* Юзер меню */
#pun-ulinks .container {
padding: 8px 0px;
text-align: center;
font-size: 12px;
text-transform: lowercase;
}
#pun-ulinks li {
display: inline;
padding-right: 10px;
}

/* ================== */

/* Объявление */
#pun-announcement .container {padding: 10px;}

/* Статус (Добро пожаловать) */
#pun-status .container {
margin-bottom: 0;
padding: 8px 10px 10px;
}
#pun-status span {
white-space: nowrap;
margin-right: 5px;
}

#pun-crumbs1 {font-weight: bold;}
#pun-crumbs1 p.container {
padding: 10px 10px 8px 10px;
margin-top: 0;
}

/*хлебные крошки */
.container.crumbs {
font-family: var(--font2);
font-weight: bold;
padding: 10px 10px 8px 10px;
}
#pun-crumbs1 .container.crumbs {margin-top: 0;}
#pun-crumbs2 .container.crumbs {margin-bottom: 0;}

/* Копирайт майбб */
#pun-about .container {text-align: right;}

/* ================== */

/* Форумные таблицы */
table {table-layout: fixed; width: 100%;}
#respect {width: auto;}
.tcl {width: 50%;}
.tc2, .tc3, .tcmod {
text-align: center;
width: 10%;
}
.tcr {width: 30%;}

#pun-searchtopics .tcl,
#pun-modviewforum .tcl {
width: 40%
}

#pun-searchtopics .tc2 {
text-align: left;
width: 20%;
}

#pun-debug table .tcl {width: 15%;white-space:normal;}
#pun-debug .tcr {width: 90%; white-space: normal;}

td {padding: 8px 10px;}
th {padding: 4px 10px;}

tbody.hasicon td.tcl {padding-left: 40px; position: relative;}

/* ================== */

/* Категории */
.category {margin-top: 20px;}
#pun-category1 {margin-top: 0;}
.category td .modlist {
display: block;
padding-top: 5px;
}
.category table thead {display: none;}
.category table td.tc2, .category table td.tc3 {display: none;}
.category h2 {
  font-weight: 600;
  font-size: 38px;
  text-align: right;
  color: var(--linkColor);
  font-family: var(--font2);
}
.category h2 span::before {content: '//';}

.category .container {
  padding: 16px;
  background: var(--outerBorderColor);
  border: 1px solid var(--innerBorderColor);
}
.main .tcr {text-align: right;}

.category h3 {
  font-family: var(--font2);
  letter-spacing: 1px;
  font-size: 30px;
}

/* иконки */

.punbb td div.tclcon {
  padding: 0px 0px 0px 10px;
  text-align: justify;
}
 
#pun-main .category Div.icon {margin: 10px 0px 0 -20px; font: 700 14px var(--font2);}

Div.icon {margin: -3px 0px 0 -30px;}

.punbb table Div.icon {
  position: absolute;
  width: 37px;
  height: 10px;
  font: 700 14px var(--font2);
  text-transform: uppercase;
}
.punbb table Div.icon::before {
  content: "old";
  color: var(--colorText);
}

TR.inew Div.icon::before {
  content: "new";
  color: var(--colorText);
}

TR.isticky Div.icon::before {
  content: "!!!";
  color: var(--colorText);
}

TR.iclosed Div.icon::before {
  content: "xxx";
  color: var(--colorText);
}


/* Статистика */
#pun-stats {margin-top: 30px;}
#pun-stats .container {padding: 8px 10px}
#pun-stats .statscon {padding: 16px; border: 1px solid var(--innerBorderColor);background: var(--outerBorderColor);}
#pun-stats li.item1, #pun-stats li.item2 {
float: left;
clear: both;
line-height: 150%;
}

#pun-stats h2 {
  font-weight: 600;
  font-size: 38px;
  height: 30px;
  overflow: hidden;
  text-align: center;
  color: var(--linkColor);
  font-family: var(--font2);
}
#pun-stats li.item3, #pun-stats li.item4 {
text-align: right;
line-height: 150%;
}
li#onlinelist {
margin-top: 10px;
float: left;
line-height: 130%;
}
li#onlinelist div {padding: 8px 0 0 0;}

/* ================== */

/* Пагинация (Переключаемые страницы, Новая тема + Опрос, Подписка) */
.multipage {margin-top: 30px;}
.linkst {
position: relative;
height: 0;
}
.linkst .pagelink,
.linkst .postlink {
position: absolute;
top: -50px;
}
.linkst .pagelink {left: 10px;}
.linkst .postlink {right: 10px; text-align: right;}

.linksb {
text-align: right;
padding: 4px 10px;
}
.linksb .pagelink {float: left; text-align: left;}
.linksb .postlink {float: right;}
.subscribelink {
clear:both;
padding: 5px 0;
}

/* Модераторское меню, RSS, Atom */
.modmenu .container {padding: 5px 10px;text-align: right;}
.modmenu .container strong {float: left;}
.modmenu input {margin-left: 10px;}

/* ================== */

/* Страница топика */
.post {margin-top: 10px;}
.toppost, .topicpost {margin-top: 0;}

.post .container {}
.post h3 {}
.post h3 span {
padding: 5px 10px;
display: block;
margin-left: 300px;
}
.post h3 strong {
float: right;
text-align: right;
font-weight: normal;
}

.post .post-author {
float: left;
text-align: center;
padding: 10px;
margin-top: -40px;
width: 260px;
background: var(--outerBorderColor);
border: 1px solid var(--innerBorderColor);
}

.post .post-author ul {padding: 10px; margin: 0;}
.post .post-author li + li {margin: 10px 0;}

li.pa-author {
  font-weight: 600;
  font-size: 38px;
  font-family: var(--font2);
}

.pa-fld1 .ank_name {margin-bottom: 10px; font-size: 16px; font-family: var(--font2); font-weight: 600;}
.pa-fld1 .info {text-align: justify;}

.post-body {margin-left: 300px;}
.post-box {padding: 10px;}

.post-links {margin-left: 300px;}
.post-links ul {
padding: 0 10px 0 0;
margin-left: -300px;
text-align: right;
}
.post-links li {
display: inline;
padding-left: 10px;
}

.pl-email, .pl-website {float: left;}
.clearer {clear: both; height: 0; font-size: 0;}

/* ================== */

/* Подпись в топике */
.post-sig dt, .post-sig dd, .post-sig dl {margin: 0} 
.post-sig dt {
display: block;
margin: 5px 0;
}

/* Контент поста */
pre {font: 12px monospace;}
.post-content em {font-style: italic}
.post .post-content td {border-width: 0px !important;}
.post-content em.bbuline {font-style: normal; text-decoration: underline;}
.post-content p {
margin: 0;
line-height: 150%;
padding: 0 0 12px 0;
}
.post-content img {vertical-align: middle;}
.scrollbox {
width: 100%;
overflow: auto;
max-height: 200px;
}
div.post-content .highlight-text {
  background-color: var(--linkColor);
  color: var(--divColor);
  padding: 2px;
  margin: 0 2px;
  border-radius: 2px;
}

.quote-box, .code-box {
  margin: 30px;
  padding: 16px;
  background: var(--outerBorderColor);
  border: 1px solid var(--innerBorderColor);
}

.quote-box cite {
  display: block;
  font-style: normal;
  text-align: left;
  font-weight: 700!important;
  letter-spacing: 1px;
  font-size: 20px!important;
  font-family: var(--font2);
  margin-bottom: 10px!important;
  height: 20px;
}

.punbb .post-content .blockcode, .punbb .post-content blockquote {
  width: 100%;
  overflow: hidden;
  padding-top: 5px;
  margin: 0;
}

.code-box strong.legend {
  display: block;
  padding-bottom: 5px;
  font-size: 20px; 
  font-weight: 700;
  font-style: normal;
  margin-top: 6px;
  margin-bottom: 6px;
  letter-spacing: 0px; 
  line-height: 20px;
  text-align: left;
}

.post-content .spoiler-box > div {
  display: block;
  font-family: var(--font2);
  font-size: 16px;
  font-weight: 700;
  font-style: normal;
  margin-top: 6px;
  margin-bottom: 6px;
  letter-spacing: 0px;
  line-height: 20px;
  text-align: left;
}


/* ================== */

/* Формы */
.checkfield input[type="checkbox"], .radiofield input[type="radio"] {margin: 0 3px;}
p[class="checkfield"] *, div[class="checkfield"] *, fieldset[class="radiofield"] * {height: 20px; vertical-align: middle;}

textarea, input, select, optgroup {font-size: 14px;}
optgroup {font-weight: bold;}

.formal .container {padding: 10px 20px;}

.formsubmit {
padding: 0 0 0 15px;
margin: 10px 0 0 0;
}
.formsubmit input, .formsubmit a, .formsubmit span {margin: 0 6px 0 0;}

fieldset {border: none;}
fieldset legend {
font-style: italic;
font-weight: bold
}
fieldset fieldset {
border: none;
margin: 0;
padding: 0 0 8px 0
}
.fs-box {padding: 5px 0;}
.fs-box p, .fs-box fieldset {padding: 0 0 8px 0;}

.inline .inputfield, .inline .selectfield, .inline .passfield {float: left;margin-right: 1em;}
.inline .infofield {clear:both}
.datafield br {display: none}
.required label, .datafield span.input {font-size: 10px;}
textarea, .longinput input {width: 64%; margin: 0;}
.hashelp {position: relative;}

/* ================== */

/* Предпросмотр сообщения */
#pun-post .topic {margin-top: 10px;}

/* ================== */

/* Профиль + ЛС */
#profile .container {padding-left: 300px;}
#profilenav {
  float: left;
  width: 300px;
  margin-left: -300px;
}

#profilenav li {padding-bottom: 10px;}
#viewprofile ul, #profilenav ul {
padding: 10px;
margin: 0 0 10px 0;
}
#viewprofile h2, #profilenav h2 {
padding: 0;
margin: 0;
}
#viewprofile li {margin-bottom:2px;}
#viewprofile li span {
float: left;
width: 180px;
padding: 5px 10px;
font-weight: bold;
}
#viewprofile li strong, #viewprofile li div {
display: block;
padding: 5px 10px;
font-weight: normal;
}
img.avatardemo {float: right;margin: 0 0 8px 18px;}

/* ================== */

/* Список пользователей */
#pun-userlist .formal, #pun-userlist .formal .container {margin-bottom: 0;}
#pun-userlist .tc2 {
text-align: left;
width: 20%;
}
#pun-userlist .tcl {width: 40%}

/* ================== */

/* Собщения об ошибках */
.info .container {padding: 5px 10px;}
.info .container .backlink {padding-top: 8px;}

/* ================== */

/* Регистрация */
.info-box {
padding: 10px 15px;
margin: 0 0 10px 0;
}
.info-box * {padding: 0 0 5px 0;}
.info-box .legend {font-weight: bold;}

0

Поделиться210.03.24 13:02

Автор: Sttest
Администратор
Имя Фамилия, 000 лет

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla mollis urna quam, sed commodo risus ultrices at. Phasellus eleifend leo in odio venenatis, ut tincidunt magna lobortis. Nam tincidunt mauris a nibh aliquam, quis porttitor erat pretium. Suspendisse erat mauris, vulputate ac aliquam nec, ullamcorper eget quam. 💵💵💵
Сообщений: 15
Уважение: +0

Код:

float {
	background: var(--darkAccentColor);
	display: block;
	position: fixed;
	z-index: 100;
}
float.fLeft {
	height: 100%;
	left: 0;
	top: 0;
	bottom: 0;
	width: 10px;
}
float.fRight {
	height: 100%;
	right: 0;
	top: 0;
	bottom: 0;
	width: 10px;
}
float.fTop {
	height: 10px;
	width: 100%;
	right: 0;
	left: 0;
	top: 0;
	z-index: 101;
}
float.fBottom {
	height: 10px;
	width: 100%;
	right: 0;
	left: 0;
	bottom: 0;
}

#form-buttons tr {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 5px;
  width: 100%;
  box-sizing: border-box;
}
#form-buttons td img {height: 26px; width: 100%;}
#form-buttons td {
  background: none !important;
  position: relative;
  width: 20px;
  height: 20px;
  line-height: unset !important;
}

#form-buttons td:before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 0;
  top: 0;
  pointer-events: none;
  font-family: "Material Symbols Outlined";
  font-size: 20px;
  color: var(--textColor);
}

#form-buttons td:hover:before {
  color: var(--linkColor);
  outline: none;
}

#form-buttons td#button-font:before {
  content: "\eae2";
}

#form-buttons td#button-size:before {
  content: "\e245";
}

#form-buttons td#button-bold:before {
  content: "\e238";
}

#form-buttons td#button-italic:before {
  content: "\e23f";
}

#form-buttons td#button-underline:before {
  content: "\e249";
}

#form-buttons td#button-strike:before {
  content: "\e257";
}

#form-buttons td#button-left:before {
  content: "\e236";
}

#form-buttons td#button-center:before {
  content: "\e234";
}

#form-buttons td#button-right:before {
  content: "\e237";
}

#form-buttons td#button-link:before {
  content: "\e178";
}

#form-buttons td#button-spoiler:before {
  content: "\e14e";
}

#form-buttons td#button-image:before {
  content: "\efa2";
}

#form-buttons td#button-video:before {
  content: "\e1c4";
}

#form-buttons td#button-hide:before {
  content: "\e63f";
}

#form-buttons td#button-quote:before {
  content: "\e244";
}

#form-buttons td#button-code:before {
  content: "\e86f";
}

#form-buttons td#button-color:before {
  content: "\e40a";
}

#form-buttons td#button-table:before {
  content: "\f191";
}

#form-buttons td#button-smile:before {
  content: "\e813";
}

#form-buttons td#button-sticker:before {
  content: "\e813";
}

#form-buttons td#button-keyboard:before {
  content: "\e312";
}

#form-buttons td#button-addition:before {
  content: "\e313";
}

#form-buttons td#button-mask:before {
  content: "\ea66";
}

0

Поделиться316.03.24 17:21

Автор: Sttest
Администратор
Имя Фамилия, 000 лет

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla mollis urna quam, sed commodo risus ultrices at. Phasellus eleifend leo in odio venenatis, ut tincidunt magna lobortis. Nam tincidunt mauris a nibh aliquam, quis porttitor erat pretium. Suspendisse erat mauris, vulputate ac aliquam nec, ullamcorper eget quam. 💵💵💵
Сообщений: 15
Уважение: +0

Код:

:root {
  --accentColor: #2b3c44;
  --lightAccentColor: #dddac9;
  --midAccentColor: #5c5b50;
  --darkAccentColor: #b3af9d;
  --linkColor: #6b635b;
  --lightTextColor: #dddac9bf;
  --divColor: #f1ece8;
  --bodyTextColor: #121515;
  --lightLinkColor: #dddac9;
  --innerBorderColor: #b3af9d;
  --outerBorderColor: #dddac940;
  --bgImg: url(https://forumstatic.ru/files/001c/10/99/10431.jpg) fixed no-repeat top center;
  --font1: 'Roboto', sans-serif;
  --font2: 'SFProDisplay-Medium', serif;
  --forumWidth: clamp(700px, calc(80vw), 1450px);
}

0

Поделиться416.03.24 17:31

Автор: Sttest
Администратор
Имя Фамилия, 000 лет

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla mollis urna quam, sed commodo risus ultrices at. Phasellus eleifend leo in odio venenatis, ut tincidunt magna lobortis. Nam tincidunt mauris a nibh aliquam, quis porttitor erat pretium. Suspendisse erat mauris, vulputate ac aliquam nec, ullamcorper eget quam. 💵💵💵
Сообщений: 15
Уважение: +0

серое

Код:

:root {
  --accentColor: #383838;
  --lightAccentColor: #d4d4d4;
  --midAccentColor: #575757;
  --darkAccentColor: #a8a8a8;
  --linkColor: #636363;
  --lightTextColor: #d4d4d4bf;
  --divColor: #ededed;
  --bodyTextColor: #121515;
  --lightLinkColor: #d4d4d4;
  --innerBorderColor: #a8a8a8;
  --outerBorderColor: #d4d4d440;
  --bgImg: url(https://forumstatic.ru/files/001c/10/99/10431.jpg) fixed no-repeat top center;
  --font1: 'Roboto', sans-serif;
  --font2: 'SFProDisplay-Medium', serif;
  --forumWidth: clamp(700px, calc(80vw), 1450px);
}

0

Название форума

Меню навигации

Пользовательские ссылки

Информация о пользователе

Бежевый минимализм - в работе

Сообщений 1 страница 4 из 4

Поделиться110.03.24 13:02

Поделиться210.03.24 13:02

Поделиться316.03.24 17:21

Поделиться416.03.24 17:31