@font-face {
font-family: 'Hack';
src: url('../fonts/hack-regular.eot');
src: url('../fonts/hack-regular.eot?#iefix') format('embedded-opentype'),
url('../fonts/hack-regular.otf') format('otf'),
url('../fonts/hack-regular.svg#hack-regular') format('svg'),
url('../fonts/hack-regular.ttf') format('truetype'),
url('../fonts/hack-regular.woff') format('woff'),
url('../fonts/hack-regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
$text-color: rgb(0, 0, 0);
$text-color-dark: rgb(204, 204, 204);
$background-color: rgb(255, 255, 255);
$background-color-dark: rgb(28, 28, 28);
$input-fields-border: rgb(187, 187, 187);
$disabled-text: rgb(127, 127, 127);
$disabled-background: rgb(176, 176, 176);
$correct: rgb(32, 255, 32);
$correct-dark: rgb(16, 127, 16);
$correct-dark-checkbox-radio: rgb(16, 143, 16);
$wrong: rgb(255, 32, 32);
$wrong-dark: rgb(178, 16, 16);
$wrong-dark-checkbox-radio: rgb(194, 16, 16);
$inputsFont: Hack,'Courier New',Courier,monospace;
$breakpoints: (
"phone": 399px,
"phone-wide": 479px,
"phablet": 559px,
"tablet-small": 639px,
"tablet": 767px,
'footer': 861px,
'mobile': 942px,
"tablet-wide": 1023px,
'logo': 1182px,
"desktop": 1279px,
"desktop-wide": 1439px
);
@mixin box-shadow($args...) {
-webkit-box-shadow: $args;
-moz-box-shadow: $args;
-ms-box-shadow: $args;
-o-box-shadow: $args;
box-shadow: $args;
}
@mixin media($width, $type: max) {
@if map_has_key($breakpoints, $width) {
$width: map_get($breakpoints, $width);
}
@media only screen and (#{$type}-width: #{$width}) {
@content;
}
}
* {
box-sizing: border-box;
}
html.dark {
color-scheme: dark;
}
body {
margin: 0 4px;
padding: 0;
font-family: Arial, Helvetica, Verdana, sans-serif;
font-size: 18px;
color: $text-color;
background-color: $background-color;
html.dark & {
color: $text-color-dark;
background-color: $background-color-dark;
}
}
.center {
margin: 0 auto;
max-width: 1200px;
}
.left {
float: left;
}
.right {
float: right;
}
.halfWidth {
width: calc(50% - 8px);
@include media('mobile') {
width: 100%;
}
}
.clear {
clear: both;
}
ul.cloud {
margin: 0;
padding: 0;
list-style: none;
& li.function {
display: inline-block;
margin: 0 18px 12px 0;
}
}
#DarkBackground {
display: none;
position: fixed;
z-index: 3;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .85);
}
#PopupWindow {
display: none;
position: fixed;
z-index: 210;
margin-left: 0;
margin-top: 0;
left: 50%;
top: 50%;
background-color: $background-color;
border: 8px solid $background-color;
box-shadow: 0 0 20px $background-color;
html.dark & {
background-color: $background-color-dark;
border: 8px solid $text-color-dark;
box-shadow: 0 0 20px $disabled-text;
}
& #Content {
position: relative;
height: 100%;
overflow: auto;
}
& #Content div {
display: block;
}
& #Content img {
max-width: 100%;
max-height: 100%;
vertical-align: top;
html.dark & {
filter: brightness(90%);
}
}
& #ClosePopup {
position: absolute;
top: -22px;
right: -22px;
z-index: 220;
}
}
.message,
.error,
.notice {
margin: 20px 0px;
padding: 8px;
overflow: hidden;
font-weight: bold;
text-align: center;
}
.message {
color: #0C0;
background-color: rgba(0, 196, 0, 0.25);
border: 1px solid #0C0;
}
.error {
color: #F00;
background-color: rgba(255, 0, 0, 0.25);
border: 1px solid #F00;
}
.notice {
color: #F60;
background-color: rgba(255, 102, 0, 0.247);
border: 1px solid #F60;
}
.row {
clear: both;
margin-bottom: 10px;
&:last-of-type {
margin-bottom: 0px;
}
.hiddens {
display: none;
}
label:not(.description) {
display: block;
}
label.description:hover {
filter: brightness(200%);
html.dark & {
filter: brightness(80%);
}
}
input[type=text],
input[type=password],
input[type=number],
input[type=email],
input[type=date],
input[type=time],
input[type=tel],
input[type=url],
input[type=file],
textarea,
select,
.radiogroup,
.checkboxgroup {
width: 100%;
font: inherit;
font-family: $inputsFont;
font-size: .9em;
border: 1px solid $input-fields-border;
&:disabled {
color: $disabled-text;
background-color: $disabled-background;
}
}
input[type=checkbox],
input[type=radio] {
margin-left: 0;
}
.radiogroup,
.checkboxgroup {
font: inherit;
}
.checkboxgroup {
border: 0 none;
}
.correct {
border-color: $correct !important;
@include box-shadow(0 0 4px 3px $correct);
html.dark & {
border-color: $correct-dark !important;
@include box-shadow(0 0 5px 4px $correct-dark);
}
}
input[type=radio].correct,
input[type=checkbox].correct {
border: 0px none;
@include box-shadow(none);
&::after {
border-color: $correct !important;
@include box-shadow(0 0 4px 3px $correct);
html.dark & {
border-color: $correct-dark-checkbox-radio !important;
@include box-shadow(0 0 5px 4px $correct-dark-checkbox-radio);
}
}
}
.wrong {
border-color: $wrong !important;
@include box-shadow(0 0 4px 3px $wrong);
html.dark & {
border-color: $wrong-dark !important;
@include box-shadow(0 0 5px 4px $wrong-dark);
}
}
input[type=radio].wrong,
input[type=checkbox].wrong {
border-color: transparent;
@include box-shadow(none);
&::after {
border-color: $wrong !important;
@include box-shadow(0 0 4px 3px $wrong);
html.dark & {
border-color: $wrong-dark-checkbox-radio !important;
@include box-shadow(0 0 5px 4px $wrong-dark-checkbox-radio);
}
}
}
textarea {
height: calc((4 * 1.2em) + 4px);
}
input[type=submit],
input[type=reset],
input[type=button] {
font-size: .9em;
cursor: pointer;
@include media('phone-wide') {
font-size: 1em;
}
}
&.disabled {
label {
text-decoration: line-through;
text-decoration-thickness: 2px;
}
}
#Save,
#Cancel,
input.save,
input.cancel,
input.empty,
input.copy,
input.add,
input.delete {
margin-top: 4px;
height: 24px;
font: inherit;
color: $text-color;
background-color: transparent;
border: 0px none;
cursor: pointer;
html.dark & {
color: $text-color-dark;
}
}
#Save:disabled,
#Cancel:disabled,
input.save:disabled,
input.cancel:disabled,
input.empty:disabled,
input.copy:disabled,
input.add:disabled,
input.delete:disabled {
color: $disabled-text !important;
background-blend-mode: luminosity;
cursor: default !important;
}
#Save,
input.save {
padding-left: 17px;
background: url('../images/check.png') left center no-repeat;
}
#Cancel,
input.cancel {
padding-left: 16px;
background: url('../images/cancel.png') left center no-repeat;
}
input,
input::before,
select,
textarea {
border: 1px solid $input-fields-border !important;
}
textarea {
margin-bottom: 1px;
vertical-align: bottom;
}
textarea.high,
select.high {
height: calc((10 * 1.2em) + 4px);
}
input[type=submit],
input[type=reset],
input[type=button] {
border: 0 none !important;
box-shadow: none;
}
input[type=text],
input[type=password],
input[type=number],
input[type=email],
input[type=date],
input[type=time],
input[type=tel],
input[type=url],
input[type=file],
input[type=checkbox],
input[type=radio],
input[type=range],
input[type=color],
textarea,
select,
.radiogroup,
.checkboxgroup {
color: $text-color;
background-color: transparent;
border-radius: 2px;
html.dark & {
color-scheme: dark;
color: $text-color-dark;
}
}
select {
option,
optgroup {
background-color: $background-color;
html.dark & {
background-color: $background-color-dark;
}
}
&[multiple] {
option,
optgroup {
background-color: transparent !important;
}
}
}
input[type=checkbox] {
position: relative;
&::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 2px;
}
}
input[type=radio] {
position: relative;
&::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
}
}
input[type=file] {
border: 0 none !important;
}
}
.desktop {
display: initial !important;
@include media('mobile') {
display: none !important;
}
}
.mobile {
display: none !important;
@include media('mobile') {
display: initial !important;
}
}
span.mobile {
@include media('mobile') {
display: inline !important;
}
}
form {
margin: 0;
.row:not(.wide) {
margin-bottom: 6px;
label:not(.description) {
float: left;
padding-top: 2px;
width: 250px;
min-height: 1em;
}
input[type=text],
input[type=password],
input[type=number],
input[type=email],
input[type=date],
input[type=time],
input[type=tel],
input[type=url],
input[type=file],
input[type=color],
textarea,
select,
.radiogroup,
.checkboxgroup,
div.input {
width: calc(100% - 250px);
}
input[type=range] {
width: calc(100% - 250px - 70px);
}
div.input {
margin-left: 250px;
}
@include media('tablet') {
label,
label:not(.description) {
float: none;
width: 100%;
br {
content: '';
&::after {
content: ' ';
}
}
}
input[type=text],
input[type=password],
input[type=number],
input[type=email],
input[type=date],
input[type=time],
input[type=tel],
input[type=url],
input[type=file],
textarea,
select,
div.input {
width: 100%;
}
input[type=range] {
width: calc(100% - 70px);
}
div.input {
margin-left: 0;
}
}
}
.box .row {
label:not(.description) {
width: 239px;
}
input[type=text],
input[type=password],
input[type=number],
input[type=email],
input[type=date],
input[type=time],
input[type=tel],
input[type=url],
input[type=file],
textarea,
select {
width: calc(100% - 239px);
}
@include media('tablet') {
label,
label:not(.description) {
float: none;
width: 100%;
@include media('mobile') {
br {
content: '';
&::after {
content: ' ';
}
}
}
}
input[type=text],
input[type=password],
input[type=number],
input[type=email],
input[type=date],
input[type=time],
input[type=tel],
input[type=url],
input[type=file],
textarea,
select {
width: 100%;
}
}
}
}
pre {
margin: 6px 0;
padding-left: 12px;
font-family: Hack, 'Courier New', Courier, monospace;
font-size: 14px;
line-height: 1.1em;
&::before {
content: '>';
position: absolute;
margin-left: -12px;
}
}
.function-description {
display: none;
position: absolute;
left: 0;
top: 0;
font-family: Hack, 'Courier New', Courier, monospace;
font-size: 15px;
.line {
margin-left: 2.45em;
text-indent: -2.45em;
white-space: pre-wrap;
}
/* Colorizing PHP comments */
&.phpcomment {
.line {
color: rgb(0, 128, 0);
html.dark & {
color: rgb(95, 150, 80);
}
.keyword {
color: rgb(0, 0, 255);
html.dark & {
color: rgb(55, 140, 200);
}
}
.class {
color: rgb(38, 127, 152);
html.dark & {
color: rgb(58, 201, 176);
}
}
}
}
/* Coloring PHP code */
&.phpcode {
.line {
color: $text-color;
html.dark & {
color: $text-color-dark;
}
.php {
color: rgb(136, 39, 53);
html.dark & {
color: rgb(52, 140, 214);
}
}
.constant {
color: rgb(0, 0, 255);
html.dark & {
color: rgb(52, 140, 214);
}
}
.operator {
color: rgb(175, 0, 219);
html.dark & {
color: rgb(218, 144, 212);
}
}
.string {
color: rgb(163, 21, 21);
html.dark & {
color: rgb(225, 145, 110);
}
}
.variable {
color: rgb(0, 16, 128);
html.dark & {
color: rgb(140, 225, 255);
}
}
.function {
color: rgb(121, 94, 38);
html.dark & {
color: rgb(220, 220, 170);
}
}
.class {
color: rgb(38, 127, 152);
html.dark & {
color: rgb(58, 201, 176);
}
}
.number {
color: rgb(9, 134, 88);
html.dark & {
color: rgb(200, 225, 170);
}
}
}
}
}
|
Download
