Boomer styles redone in CSS: electric boogaloo

This commit is contained in:
Juribiyan 2020-02-04 17:31:06 +05:00
parent 9bf2363535
commit 47c9fcf6ba
11 changed files with 303 additions and 215 deletions

View File

@ -1,6 +1,10 @@
html, body {
background: url(images/photon/bg_bottom.png) bottom repeat-x;
html {
background-color: #BBBBBB;
background-image:
/* repeating-linear-gradient(-45.5deg, transparent 0px, transparent .6px, #00000017 2px, transparent 3.4px, transparent 4px), */
linear-gradient(to top, #949495 0%, #7f7f7f 90px, #7f7f7f 140px, #bbbbbb 200px, #bbbbbb 100%);
}
body {
color: #333333;
font-size:10pt !important;
font-family: "Trebuchet MS",Trebuchet,serif;
@ -13,9 +17,6 @@ a {
a:visited {
color: #FF6600;
}
.uib-spoiler:before {
line-height: 18px;
}
a:hover {
color: #0066FF;
}
@ -165,7 +166,7 @@ blockquote p {
}
.doubledash {
display: none;
vertical-align:top;
vertical-align:top;
clear:both;
float:left;
}
@ -219,45 +220,53 @@ table td {
.b-icon.pressed {
background-color: #a04000;
}
.topbar-left {
background: url('images/photon/topbar-left.png');
}
.topbar-center {
background: url('images/photon/topbar-center.png');
}
.topbar-right {
background: url('images/photon/topbar-right.png');
}
.border-left {
background: url('images/photon/border-left.png');
}
.border-right {
background: url('images/photon/border-right.png');
}
.bottom-left {
background: url('images/photon/bottom-left.png');
}
.bottom-right {
background: url('images/photon/bottom-right.png');
}
.bottom-center {
background: url('images/photon/bottom-center.png');
}
.content-background {
background-color: #EEEEEE;
background-color: #EEEEEE;
}
.content {
z-index: 0;
box-shadow: 0 0px 5px 1px rgba(0, 0, 0, 0.8), 0 8px 5px #0000009e;
border-radius: 0 0 8px 8px;
position: relative;
margin: 0 calc(1% + 10px) 83px calc(1% + 10px);
padding: 9px 12px;
padding-top: 0;
}
.decor-header {
display: block!important;
width: calc(100% + 24px);
margin: 0 -12px 0 -12px;
padding-bottom: 17px;
height: 30px;
overflow: hidden;
position: relative;
}
.decor-header::before {
content:'';
box-shadow: 0 -2px 4px 4px #3e4552;
background-image: repeating-linear-gradient(-45.5deg, transparent 0px, transparent .6px, #79797917 2px, transparent 3.4px, transparent 4px), -webkit-gradient(linear, left top, left bottom, from(#df7a29), to(#d8c25b));
background-image: repeating-linear-gradient(-45.5deg, transparent 0px, transparent .6px, #79797917 2px, transparent 3.4px, transparent 4px), linear-gradient(to bottom, #df7a29 0%, #d8c25b 100%);
height: 30px;
width: 100%;
position: absolute;
}
.content::after {
content:'';
height: 80px;
border-radius: 8px 8px 0 0;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#d8d8d8));
background: linear-gradient(to bottom, #fff 0%, #d8d8d8 100%);
opacity: 0.5;
width: 100%;
position: absolute;
left: 0;
bottom: -83px;
}
.maintable {
width: 98%;
table-layout: fixed;
width: 98%;
table-layout: fixed;
}
.omittedposts a, .xlink {
color:#666666;
@ -268,12 +277,12 @@ table td {
/* catalog */
.cat-card {
background: #DDDDDD;
border: solid 1px #CCCCCC;
border-radius: 5px;
border: solid 1px #CCCCCC;
border-radius: 5px;
}
.cat-entry:hover .cat-card {
background: #ECECEC;
box-shadow: 0 4px 7px rgba(0, 0, 0, 0.18);
background: #ECECEC;
box-shadow: 0 4px 7px rgba(0, 0, 0, 0.18);
}
.nofile-removed {
border: 2px dashed #A6A7A9;
@ -284,10 +293,10 @@ table td {
color: white!important;
}
.hidden-on:hover {
background: #A0501C;
background: #A0501C;
}
.actor:hover {
color: #FF6600;
color: #FF6600;
}
.cat-entry:after {
background: -webkit-gradient(linear, left top, left bottom, from(rgba(135,224,253,0)),to(rgb(221, 221, 221)));
@ -303,20 +312,20 @@ table td {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.button-group:hover {
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
background: rgba(255, 255, 255, 0.43);
color: #fff;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
background: rgba(255, 255, 255, 0.43);
color: #fff;
}
.bg-button {
color:rgba(255, 255, 255, 0.91);
}
.bg-button:hover {
background-color: rgba(0, 64, 224, 0.59);
color: #fff;
background-color: rgba(0, 64, 224, 0.59);
color: #fff;
}
.bgb-selected, .bgb-selected:hover {
background: #FF6600;
color: white!important;
background: #FF6600;
color: white!important;
}
.bubble, .thought-bubble:after, .thought-bubble:before {
@ -329,90 +338,90 @@ table td {
.reply::-webkit-scrollbar-track,
.reply::-webkit-scrollbar-thumb {
border-radius: 4px;
border-radius: 4px;
}
.reply::-webkit-scrollbar-corner {
background: #dddddd;
}
/* --------------------------------------- Styled buttons --------------------------------------- */
.styled-button {
border: none;
background: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#dcdcdc));
background: linear-gradient(to bottom, #f6f6f6 0%, #dcdcdc 100%);
border-radius: 1.66px;
padding: 3px 8px;
border: none;
background: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#dcdcdc));
background: linear-gradient(to bottom, #f6f6f6 0%, #dcdcdc 100%);
border-radius: 1.66px;
padding: 3px 8px;
}
.simplified-send-row .styled-button {
padding: 4px 0;
padding: 4px 0;
}
.styled-button:hover {
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.44);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.44);
}
.styled-button,
.styled-button:active {
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.33);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.33);
}
.styled-button:active {
background: -webkit-gradient(linear, left bottom, left top, from(#f6f6f6), to(#dcdcdc));
background: linear-gradient(to top, #f6f6f6 0%, #dcdcdc 100%);
background: -webkit-gradient(linear, left bottom, left top, from(#f6f6f6), to(#dcdcdc));
background: linear-gradient(to top, #f6f6f6 0%, #dcdcdc 100%);
}
.styled-button:active,
.styled-button:focus {
outline: none;
outline: none;
}
.primary.styled-button {
color: white;
background-image: /* yay technology */
repeating-linear-gradient(-45.5deg, transparent 0px, transparent .6px, #79797917 2px, transparent 3.4px, transparent 4px),
-webkit-gradient(linear, left bottom, left top, from(#df7a29), to(#d8c25b));
background-image: /* yay technology */
repeating-linear-gradient(-45.5deg, transparent 0px, transparent .6px, #79797917 2px, transparent 3.4px, transparent 4px),
linear-gradient(to top, #df7a29 0%, #d8c25b 100%);
text-shadow: 0 1px 2px #243e0e;
-webkit-transition: -webkit-filter .15s;
transition: -webkit-filter .15s;
transition: filter .15s;
transition: filter .15s, -webkit-filter .15s;
color: white;
background-image: /* yay technology */
repeating-linear-gradient(-45.5deg, transparent 0px, transparent .6px, #79797917 2px, transparent 3.4px, transparent 4px),
-webkit-gradient(linear, left bottom, left top, from(#df7a29), to(#d8c25b));
background-image: /* yay technology */
repeating-linear-gradient(-45.5deg, transparent 0px, transparent .6px, #79797917 2px, transparent 3.4px, transparent 4px),
linear-gradient(to top, #df7a29 0%, #d8c25b 100%);
text-shadow: 0 1px 2px #243e0e;
-webkit-transition: -webkit-filter .15s;
transition: -webkit-filter .15s;
transition: filter .15s;
transition: filter .15s, -webkit-filter .15s;
}
.primary.styled-button svg {
-webkit-filter: drop-shadow( 0 1px 1px #243e0e);
filter: drop-shadow( 0 1px 1px #243e0e);
-webkit-filter: drop-shadow( 0 1px 1px #243e0e);
filter: drop-shadow( 0 1px 1px #243e0e);
}
.primary.styled-button:hover {
-webkit-filter: brightness(1.1);
filter: brightness(1.1);
-webkit-filter: brightness(1.1);
filter: brightness(1.1);
}
.primary.styled-button:active {
-webkit-filter: brightness(.9);
filter: brightness(.9);
-webkit-filter: brightness(.9);
filter: brightness(.9);
}
.bad-button.styled-button {
background: -webkit-gradient(linear, left top, left bottom, from(#d88585), to(#a76767));
background: linear-gradient(to bottom, #d88585 0%, #a76767 100%);
color: white;
background: -webkit-gradient(linear, left top, left bottom, from(#d88585), to(#a76767));
background: linear-gradient(to bottom, #d88585 0%, #a76767 100%);
color: white;
}
.bad-button.styled-button:active {
background: -webkit-gradient(linear, left bottom, left top, from(#d88585), to(#a76767));
background: linear-gradient(to top, #d88585 0%, #a76767 100%);
background: -webkit-gradient(linear, left bottom, left top, from(#d88585), to(#a76767));
background: linear-gradient(to top, #d88585 0%, #a76767 100%);
}
/* -------------------------------------- /Styled buttons --------------------------------------- */
.mm-brd::after {
box-shadow: inset 0 0 0 1px #2a2a2a;
background: rgba(42, 42, 42, 0.24);
box-shadow: inset 0 0 0 1px #2a2a2a;
background: rgba(42, 42, 42, 0.24);
}
.mm-cat::after {
background: #2a2a2a;
background: #2a2a2a;
}
.mm-cat:not(.mmc-expanded)::after {
box-shadow: 1px 1px 0 #df832f, 2px 2px 0 rgba(42, 42, 42, 0.75), 3px 3px 0 #df832f, 4px 4px 0 rgba(42, 42, 42, 0.39);
box-shadow: 1px 1px 0 #df832f, 2px 2px 0 rgba(42, 42, 42, 0.75), 3px 3px 0 #df832f, 4px 4px 0 rgba(42, 42, 42, 0.39);
}
.mmc-expanded::after {
background: #9c2a0f;
box-shadow: inset 0 2px 8px rgb(88, 62, 43), inset -1px -1px 0 0 rgb(156, 62, 34);
background: #9c2a0f;
box-shadow: inset 0 2px 8px rgb(88, 62, 43), inset -1px -1px 0 0 rgb(156, 62, 34);
}
#mm-circle, .mm-expanded-full {
background: #df832f;
background: #df832f;
}
#mm-circle {
overflow: visible;
@ -427,13 +436,13 @@ table td {
filter: brightness(1.1);
}
.mm-bars, #mmb-_options a, #mmb-_options a:visited {
color: rgb(255, 255, 255);
color: rgb(255, 255, 255);
}
.mm-toggle-options, #mmb-_options {
color: rgba(255, 255, 255, 0.66) !important;
color: rgba(255, 255, 255, 0.66) !important;
}
#mmb-_options a:hover {
color: rgba(255, 255, 255, 0.9);
color: rgba(255, 255, 255, 0.9);
}
.mm-item, .mm-item:visited {
color: #ffa756;
@ -449,11 +458,22 @@ table td {
border-bottom-style: none;
padding: 1.5px 10px 0.5px 10px;
}
.uib-spoiler:before {
line-height: 18px;
}
@media only screen and (max-width: 666px) {
.uibutton {
border-radius: 4px;
border-bottom-style: solid;
}
.uibutton {
border-radius: 4px;
border-bottom-style: solid;
}
.content {
margin: 0;
padding-bottom: 16px!important;
}
.decor-header {
width: 100%;
margin: 0;
}
}
.uibutton:hover {
background: rgb(255, 255, 255);

View File

@ -58,7 +58,10 @@ body {
padding: 8px;
margin-bottom: auto;
}
.content {
padding: 9px;
margin: 6px 12.5px;
}
span[id^=unhidethread] {
display: none;
}
@ -966,8 +969,10 @@ table.postform, table.postform tbody {
border-bottom-right-radius: 0px;
}
.markupbtns {
display: -webkit-box;
display: flex;
justify-content: space-between;
-webkit-box-pack: justify;
justify-content: space-between;
width: 100%;
}
.uibutton {
@ -977,6 +982,7 @@ table.postform, table.postform tbody {
padding: 0 14px;
margin-right: 4px;
text-align: center;
-webkit-transition: background-color .2s, color .2s, border-color .2s;
transition: background-color .2s, color .2s, border-color .2s;
}
.uibutton:last-child {
@ -1500,9 +1506,14 @@ input:-moz-placeholder {opacity: 0; }
margin: 0 2px;
}
html,body,.content-background {
max-width: 100%;
margin:0;
padding:0!important;
}
.content::before {
width: 100%;
margin: 0 0 17px 0;
}
body {
font-size: 0.8em!important;
}
@ -1941,20 +1952,15 @@ td > .reverse-caption-bubble {
}
.embedgroup {
float: left;
margin-right: 0.8em; */
margin-bottom:;margin-bottommargin-bottom
margin-bottom: 0.4em;margin-bottom
margin-right: 0.8em;
margin-bottom: 0.4em;
}
figure {
display: inline-block;
margin: .2em 0.4em;
vertical-align: top;
text-align: left;
*/
margin-left: 0;margin-leftmargin-left */
margin-left: 0;margin-leftmargin-left */
margin-left:;margin-leftmargin-left
margin-left: 0;margin-left
margin-left: 0;
}
figure:first-of-type {
}
@ -3321,7 +3327,8 @@ a.logo:hover::after {
padding: 2px 0;
}
.simplified-send-row button {
flex-grow: 1;
-webkit-box-flex: 1;
flex-grow: 1;
height: 24px;
}
.simplified-send-row button {
@ -3331,7 +3338,8 @@ a.logo:hover::after {
margin-right: 0px;
}
.postform-simplified .simplified-send-row button.primary {
flex-grow: 2;
-webkit-box-flex: 2;
flex-grow: 2;
}
.postform-simplified .message-row {
font-size: 0;
@ -3359,10 +3367,13 @@ a.logo:hover::after {
padding: 0;
}
.postform-simplified .captcharow {
align-items: center;
-webkit-box-align: center;
align-items: center;
}
.postform-simplified .message-row td {
flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
}
.postform-simplified .file-row td {
margin-bottom: -2px;
@ -3444,6 +3455,7 @@ a.logo:hover::after {
/* margin-top: 0; */
}
.postform-simplified .markup-enabled .markupbtns {
display: -webkit-box;
display: flex;
/* position: absolute;
top: 1px; */
@ -3663,7 +3675,8 @@ input[name=postpassword] + div {
display: none;
}
body {
animation: windowSmall 0.001s;
-webkit-animation: windowSmall 0.001s;
animation: windowSmall 0.001s;
}
.postform input[name=postpassword] {
flex-basis: 60px;

View File

@ -1,8 +1,8 @@
body {
font-family: sans-serif;
font-size: 75%;
background: fixed url(images/photon/bg_bottom.png) bottom repeat-x;
background-color: #BBBBBB;
background: fixed linear-gradient(to top, #949495 0%, #7f7f7f 90px, #7f7f7f 140px, #bbbbbb 200px, #bbbbbb 100%) bottom repeat-x;
color: #000000;
margin: 0;
width: 90%;
@ -16,8 +16,8 @@ h2 {
margin: 0px;
padding: 2px;
font-size: 100%;
background-image: url(images/photon/topbar-center.png);
background-repeat: repeat-x;
background-image: repeating-linear-gradient(-45.5deg, transparent 0px, transparent .6px, #79797917 2px, transparent 3.4px, transparent 4px), -webkit-gradient(linear, left top, left bottom, from(#df7a29), to(#d8c25b));
background-image: repeating-linear-gradient(-45.5deg, transparent 0px, transparent .6px, #79797917 2px, transparent 3.4px, transparent 4px), linear-gradient(to bottom, #df7a29 0%, #d8c25b 100%);
color: #333333;
}
@ -60,9 +60,6 @@ h3 {
.newssub {
padding: 2px;
position: absolute;
background-color: #EEEEEE;
background-image: url(images/photon/topbar-center.png);
background-repeat: repeat-x;
}
.permalink {

View File

@ -1,8 +1,8 @@
body {
font-family: sans-serif;
font-size: 75%;
background: fixed url(images/summer/bg_bottom.png) bottom repeat-x;
background-color: #f8ffee;
background-color: #BBBBBB;
background: fixed linear-gradient(to top, #e6ffcc 0%, #e7ffcf 90px, #e7ffcf 140px, #f6ffed 200px, #f6ffed 100%) bottom repeat-x;
color: #000000;
margin: 0;
width: 90%;
@ -16,8 +16,8 @@ h2 {
margin: 0px;
padding: 2px;
font-size: 100%;
background-image: url(images/summer/topbar-center.png);
background-repeat: repeat-x;
background-image: repeating-linear-gradient(-45.5deg, transparent 0px, transparent .6px, #79797936 2px, transparent 3.4px, transparent 4px), -webkit-gradient(linear, left top, left bottom, from(#b3d928), to(#5aa52a));
background-image: repeating-linear-gradient(-45.5deg, transparent 0px, transparent .6px, #79797936 2px, transparent 3.4px, transparent 4px), linear-gradient(to bottom, #b3d928 0%, #5aa52a 100%);
color: #007F46;
}
@ -58,9 +58,6 @@ h3 {
.newssub {
padding: 2px;
position: absolute;
background-color: #e6ffcd;
background-image: url(images/summer/topbar-center.png);
background-repeat: repeat-x;
}
.permalink {

View File

@ -1,8 +1,8 @@
body {
font-family: sans-serif;
font-size: 75%;
background: fixed url(images/winter/bg_bottom.png) bottom repeat-x;
background-color: #ECF1FF;
background: fixed linear-gradient(to top, #cdd9ff 0%, #cfdbff 90px, #cedbff 140px, #ffffff 200px, #ecf1ff 100%) bottom repeat-x;
color: #000000;
margin: 0;
width: 90%;
@ -17,8 +17,8 @@ h2 {
padding: 2px;
color: #00137F;
font-size: 100%;
background-image: url(images/winter/topbar-center.png);
background-repeat: repeat-x;
background-image: repeating-linear-gradient(-45.5deg, transparent 0px, transparent .6px, #4e4e4e3b 2px, transparent 3.4px, transparent 4px), -webkit-gradient(linear, left top, left bottom, from(#2185D8), to(#2A3DA2));
background-image: repeating-linear-gradient(-45.5deg, transparent 0px, transparent .6px, #4e4e4e3b 2px, transparent 3.4px, transparent 4px), linear-gradient(to bottom, #2185D8 0%, #2A3DA2 100%);
color:#EEEEEE;
}
@ -61,9 +61,6 @@ h3 {
.newssub {
padding: 2px;
position: absolute;
background-color: #FCFDFF;
background-image: url(images/winter/topbar-center.png);
background-repeat: repeat-x;
}
.permalink {

View File

@ -10,8 +10,8 @@ a {
h1, h2 {
background: #CCCCCC;
text-align: left;
background-image: url(images/photon/topbar-center.png);
background-repeat: repeat-x;
background-image: repeating-linear-gradient(-45.5deg, transparent 0px, transparent .6px, #79797917 2px, transparent 3.4px, transparent 4px), -webkit-gradient(linear, left top, left bottom, from(#df7a29), color-stop(150%, #d8c25b));
background-image: repeating-linear-gradient(-45.5deg, transparent 0px, transparent .6px, #79797917 2px, transparent 3.4px, transparent 4px), linear-gradient(to bottom, #df7a29 0%, #d8c25b 150%);
}
h1 {
@ -31,9 +31,7 @@ h2 {
font-weight: normal;
padding: 1px 4px 2px 4px;
margin: 0px 0px;
background: #888888;
background-image: url(images/photon/topbar-center.png);
background-repeat: repeat-x;
background-image: transparent;
color: #000;
border: 1px solid #CCCCCC;
cursor: hand;

View File

@ -10,7 +10,8 @@ a {
h1, h2 {
background: #DAF0D6;
text-align: left;
background-image: url(images/summer/topbar-center.png);
background-image: repeating-linear-gradient(-45.5deg, transparent 0px, transparent .6px, #79797936 2px, transparent 3.4px, transparent 4px), -webkit-gradient(linear, left top, left bottom, from(#b3d928), color-stop(150%, #5aa52a));
background-image: repeating-linear-gradient(-45.5deg, transparent 0px, transparent .6px, #79797936 2px, transparent 3.4px, transparent 4px), linear-gradient(to bottom, #b3d928 0%, #5aa52a 150%);
background-repeat: repeat-x;
}
@ -31,9 +32,7 @@ h2 {
font-weight: normal;
padding: 1px 4px 2px 4px;
margin: 0px 0px;
background: #88FF88;
background-image: url(images/summer/topbar-center.png);
background-repeat: repeat-x;
background: transparent;
color: #000;
border: 1px solid #117743;
cursor: hand;
@ -41,8 +40,8 @@ h2 {
}
.plus:hover {
background: #da8;
border: 1px solid #c97;
background: #a4d028;
border: 1px solid #99c72b;
}
ul {

View File

@ -10,7 +10,8 @@ a {
h1, h2 {
background: #DDDDEE;
text-align: left;
background-image: url(images/winter/topbar-center.png);
background-image: repeating-linear-gradient(-45.5deg, transparent 0px, transparent .6px, #4e4e4e3b 2px, transparent 3.4px, transparent 4px), -webkit-gradient(linear, left top, left bottom, from(#2185D8), color-stop(150%, #2A3DA2));
background-image: repeating-linear-gradient(-45.5deg, transparent 0px, transparent .6px, #4e4e4e3b 2px, transparent 3.4px, transparent 4px), linear-gradient(to bottom, #2185D8 0%, #2A3DA2 150%);
background-repeat: repeat-x;
}
@ -31,9 +32,7 @@ h2 {
font-weight: normal;
padding: 1px 4px 2px 4px;
margin: 0px 0px;
background: #8888FF;
background-image: url(images/winter/topbar-center.png);
background-repeat: repeat-x;
background: transparent;
color: #000;
border: 1px solid #00137F;
cursor: hand;

View File

@ -1,8 +1,12 @@
html {
background-color: #F6FFEC;
background-image:
/* repeating-linear-gradient(-45.5deg, transparent 0px, transparent .6px, #00000017 2px, transparent 3.4px, transparent 4px), */
linear-gradient(to top, #e6ffcc 0%, #e7ffcf 90px, #e7ffcf 140px, #f6ffed 200px, #f6ffed 100%);
}
body {
font-size:10pt !important;
font-family:"Trebuchet MS",Trebuchet,serif;
background: url(images/summer/bg_bottom.png) bottom repeat-x;
background-color: #F6FFEC;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
@ -343,8 +347,6 @@ icon-checkbox-wrap input[type=checkbox]:checked + .icon-with-fallback .b-icon,
}
.primary.styled-button {
color: white;
background: url(images/summer/topbar-center.png);
background-size: 12px;
text-shadow: 0 1px 2px #243e0e;
}
.primary.styled-button svg {
@ -376,12 +378,6 @@ icon-checkbox-wrap input[type=checkbox]:checked + .icon-with-fallback .b-icon,
border-bottom-style: none;
padding: 1.5px 10px 0.5px 10px;
}
@media only screen and (max-width: 666px) {
.uibutton {
border-radius: 4px;
border-bottom-style: solid;
}
}
.uibutton:hover {
background: rgb(255, 255, 255);
border-color: rgba(0, 0, 0, 0.44);
@ -434,4 +430,61 @@ icon-checkbox-wrap input[type=checkbox]:checked + .icon-with-fallback .b-icon,
}
.mm-item, .mm-item:visited {
color: #427b1b;
}
.content {
z-index: 0;
box-shadow: 0 0px 5px 1px rgba(0, 0, 0, 0.8), 0 8px 5px #0000009e;
border-radius: 0 0 8px 8px;
position: relative;
margin: 0 calc(1% + 10px) 83px calc(1% + 10px);
padding: 9px 12px;
padding-top: 0;
}
.decor-header {
display: block!important;
width: calc(100% + 24px);
margin: 0 -12px 0 -12px;
padding-bottom: 17px;
height: 30px;
overflow: hidden;
position: relative;
}
.decor-header::before {
content:'';
box-shadow: 0 -2px 4px 4px #3e4552;
height: 30px;
width: 100%;
position: absolute;
}
.decor-header::before, .styled-button.primary {
background-image: repeating-linear-gradient(-45.5deg, transparent 0px, transparent .6px, #79797936 2px, transparent 3.4px, transparent 4px), -webkit-gradient(linear, left top, left bottom, from(#b3d928), to(#5aa52a));
background-image: repeating-linear-gradient(-45.5deg, transparent 0px, transparent .6px, #79797936 2px, transparent 3.4px, transparent 4px), linear-gradient(to bottom, #b3d928 0%, #5aa52a 100%);
}
.content::after {
content:'';
height: 80px;
border-radius: 8px 8px 0 0;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#d8d8d8));
background: linear-gradient(to bottom, #fff 0%, #d8d8d8 100%);
opacity: 0.5;
width: 100%;
position: absolute;
left: 0;
bottom: -83px;
box-shadow: 0 0 6px black;
}
@media only screen and (max-width: 666px) {
.uibutton {
border-radius: 4px;
border-bottom-style: solid;
}
.content {
margin: 0;
padding-bottom: 16px!important;
}
.decor-header {
width: 100%;
margin: 0;
}
}

View File

@ -1,9 +1,12 @@
html {
background-color: #ECF1FF;
background-image:
/* repeating-linear-gradient(-45.5deg, transparent 0px, transparent .6px, #00000017 2px, transparent 3.4px, transparent 4px), */
linear-gradient(to top, #cdd9ff 0%, #cfdbff 90px, #cedbff 140px, #ffffff 200px, #ffffff 100%);
}
body {
font-size:10pt !important;
font-family:"Trebuchet MS",Trebuchet,serif;
background: url(images/winter/bg_bottom.png) bottom repeat-x;
background-color: #ECF1FF;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
@ -228,37 +231,6 @@ icon-checkbox-wrap input[type=checkbox]:checked + .icon-with-fallback .b-icon,
background: #b7d9ff;
box-shadow: 0 1px 2px black;
}
.topbar-left {
background: url('images/winter/topbar-left.png');
}
.topbar-center {
background: url('images/winter/topbar-center.png');
}
.topbar-right {
background: url('images/winter/topbar-right.png');
}
.border-left {
background: url('images/winter/border-left.png');
}
.border-right {
background: url('images/winter/border-right.png');
}
.bottom-left {
background: url('images/winter/bottom-left.png');
}
.bottom-right {
background: url('images/winter/bottom-right.png');
}
.bottom-center {
background: url('images/winter/bottom-center.png');
}
.content-background {
background-color: #FCFDFF;
@ -347,8 +319,6 @@ icon-checkbox-wrap input[type=checkbox]:checked + .icon-with-fallback .b-icon,
}
.primary.styled-button {
color: white;
background: url(images/winter/topbar-center.png);
background-size: 12px;
text-shadow: 0 1px 2px #404040;
}
.primary.styled-button svg {
@ -426,12 +396,7 @@ icon-checkbox-wrap input[type=checkbox]:checked + .icon-with-fallback .b-icon,
border-bottom-style: none;
padding: 1.5px 10px 0.5px 10px;
}
@media only screen and (max-width: 666px) {
.uibutton {
border-radius: 4px;
border-bottom-style: solid;
}
}
.uibutton:hover {
background: rgb(255, 255, 255);
border-color: rgba(0, 0, 0, 0.44);
@ -439,4 +404,61 @@ icon-checkbox-wrap input[type=checkbox]:checked + .icon-with-fallback .b-icon,
}
.uib-spoiler:before {
line-height: 18px;
}
.content {
z-index: 0;
box-shadow: 0 0px 5px 1px rgba(0, 0, 0, 0.8), 0 8px 5px #0000009e;
border-radius: 0 0 8px 8px;
position: relative;
margin: 0 calc(1% + 10px) 83px calc(1% + 10px);
padding: 9px 12px;
padding-top: 0;
}
.decor-header {
display: block!important;
width: calc(100% + 24px);
margin: 0 -12px 0 -12px;
padding-bottom: 17px;
height: 30px;
overflow: hidden;
position: relative;
}
.decor-header::before {
content:'';
box-shadow: 0 -2px 4px 4px #3e4552;
height: 30px;
width: 100%;
position: absolute;
}
.decor-header::before, .styled-button.primary {
background-image: repeating-linear-gradient(-45.5deg, transparent 0px, transparent .6px, #4e4e4e3b 2px, transparent 3.4px, transparent 4px), -webkit-gradient(linear, left top, left bottom, from(#2185D8), to(#2A3DA2));
background-image: repeating-linear-gradient(-45.5deg, transparent 0px, transparent .6px, #4e4e4e3b 2px, transparent 3.4px, transparent 4px), linear-gradient(to bottom, #2185D8 0%, #2A3DA2 100%);
}
.content::after {
content:'';
height: 80px;
border-radius: 8px 8px 0 0;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#d8d8d8));
background: linear-gradient(to bottom, #fff 0%, #d8d8d8 100%);
opacity: 0.5;
width: 100%;
position: absolute;
left: 0;
bottom: -83px;
box-shadow: 0 0 6px black;
}
@media only screen and (max-width: 666px) {
.uibutton {
border-radius: 4px;
border-bottom-style: solid;
}
.content {
margin: 0;
padding-bottom: 16px!important;
}
.decor-header {
width: 100%;
margin: 0;
}
}

View File

@ -68,18 +68,11 @@
document.body.insertBefore(div, document.body.childNodes[0]);
});
</script>
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0" class="maintable">
<tbody><tr>
<td width="13" height="38" class="topbar-left"></td>
<td height="38" class="topbar-center"></td>
<td width="13" height="38" class="topbar-right"></td>
</tr>
<tr>
<td width="13" class="border-left"></td>
<td class="content-background" style="padding:9px">
{if %KU_DISCLAIMER}
{include file='disclaimer.tpl'}
{/if}
<div class="content-background content">
<header class="decor-header" style="display: none"></header>
{if %KU_DISCLAIMER}
{include file='disclaimer.tpl'}
{/if}
<div class="adminbar">
{if $board.enablecatalog eq 1}[<a href="{%KU_BOARDSFOLDER}{$board.name}/catalog.html"><b>{t}Catalog{/t}</b></a>]{/if}
[<a href="{%KU_WEBPATH}/kusaba.php" target="_top">{t}Frames{/t}</a>]&nbsp;[<a href="{%KU_CGIPATH}/manage.php" target="_top">{t}Manage{/t}</a>]