Без фонового изображения для экономии трафика
AccessControlTabelView v2.0 solid-bg by insanecake
Details
Authorinsanecake
LicenseNo License
CategoryAccessControlTabelView
Created
Updated
Size11 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
*может содержать следы арахиса и сельдерея
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name AccessControlTabelView v2.0 solid-bg
@namespace github.com/openstyles/stylus
@version 1.2.0
@description A new userstyle
@author insanecake@yandex.ru
==/UserStyle== */
@-moz-document regexp(".*ControlTabelView.*") {
:root {
--card-color: #0005;
--text-color: #ddd;
--text-color-inverted: #131313;
--zebra-color: #ffffff0a;
--tr-gradient: linear-gradient(90deg, hsla(205, 46%, 10%, 1) 0%, hsla(191, 28%, 23%, 1) 50%, hsla(207, 41%, 27%, 1) 100%);
--vacation-day: linear-gradient(90deg, #f9b16eb5 0%, #f68080b5 100%);
--selected-vacation-day: linear-gradient(90deg, #f9b16e 0%, #f68080 100%);
--current-day: linear-gradient(135deg, #667eea7d 0%, #764ba27d 100%);
--selected-day: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--button-gradient: linear-gradient(90deg, hsla(164, 38%, 18%, 1) 0%, hsl(158, 26%, 34%) 50%, hsla(164, 38%, 18%, 1) 100%);
}
html {
color: var(--text-color);
height: 100vh;
width: 100vw;
background-image: linear-gradient(45deg, hsl(164, 41%, 21%) 0%, hsl(158, 38%, 26%) 100%);
background-position-x: center;
background-position-y: bottom;
background-size: cover;
overflow: hidden
}
body {
height: 100%;
background: none;
/* width: 1280px; */
margin: auto !important;
overflow-x: hidden;
overflow-y: auto;
display: flex;
justify-content: center;
}
body::-webkit-scrollbar-track
{
border-radius: 5px;
}
body::-webkit-scrollbar
{
width: 8px;
backdrop-filter: blur(15px);
background-color: var(--card-color);
}
body::-webkit-scrollbar-thumb
{
border-radius: 5px;
background-color: #ffffffdb;
}
#form1 {
display: flex;
}
table {
border-spacing: 0px;
}
table.tableForm {
/* height: 100% !important; */
width: 1280px !important;
background: none;
border: none;
display: flex;
}
table.tableForm tr {
height: 100%;
}
td {
padding: 0;
text-align: left;
border: none !important;
background: none;
}
.tableHeader1 {
background-color: transparent;
}
.textHeader1 {
visibility: hidden;
font-weight: 100
}
.toolbar {
border: none !important;
background: none !important;
padding: 0px !important;
}
#Menu2,
#Menu3 {
position: absolute;
display: flex;
height: 35px;
padding: 5px 0;
}
#Menu2 {
bottom: 25px;
left: 0px;
}
#Menu3 {
bottom: 60px;
left: 0px;
}
a.toolbarButtonDefaultStyleWithBorder {
font-size: 9pt !important;
border: none;
backdrop-filter: blur(15px);
display: flex;
align-items: center;
text-transform: uppercase;
color: #fff;
padding-left: 30px;
width: 170px;
background: var(--card-color);
}
a.toolbarButtonDefaultStyleWithBorder:hover {
background-position: right center;
}
#LogonUserInfoPanel {
position: absolute;
bottom: 10px;
left: 0px;
}
#LogonUserLabel {
font-size: 9pt !important;
border: none;
background: var(--card-color);
backdrop-filter: blur(15px);
display: flex;
align-items: center;
text-transform: uppercase;
color: #fff;
padding: 0px 20px;
height: 35px;
}
span.toolbarButtonDefaultStyleWithBorder {
display: flex;
border: none;
background: none;
padding: 0;
}
#CoworkersListPanel {
overflow: auto !important;
border: none;
background: none;
height: auto !important;
width: 220px !important;
/* padding-left: 5px; */
}
#viewListRegion {
border: none !important;
background: none !important;
/* padding-top: 5px; */
}
#DataList1 {
border: none;
}
#DataList1 td {
border: none !important;
background: none !important;
display: flex;
}
#DataList1 a {
text-decoration: none;
border-radius: 5px;
padding: 5px;
background: white;
background-image: var(--button-gradient);
transition: .5s;
background-size: 200% auto;
color: #fff;
width: 100%;
margin-bottom: 5px;
}
#DataList1 a:hover {
background-position: right center;
}
#CoworkerCardPanel {
width: 1040px;
border-radius: 5px;
padding: 10px;
margin-bottom: 5px;
background: var(--card-color);
backdrop-filter: blur(15px);
background-size: 200% auto;
}
#CoworkersFormView {
color: var(--text-color) !important;
width: 100% !important;
}
#dateFilterPanel {
width: 680px;
border-radius: 5px;
padding: 10px;
margin-bottom: 5px;
background: var(--card-color);
backdrop-filter: blur(15px);
background-size: 200% auto;
font-size: 10pt;
}
#dateFilterPanel span {
font-size: 10pt !important;
}
#dateFilterPanel select {
background: var(--button-gradient);
background-size: 200% auto;
transition: .5s;
border: none;
border-radius: 5px;
height: 30px;
color: var(--text-color);
cursor: pointer;
padding: 0 20px;
margin-left: 10px;
}
#dateFilterPanel select:hover {
background-position: right center;
}
#dateFilterPanel option {
color: var(--text-color-inverted)
}
#dateFilterPanel input[type="submit"] {
visibility: hidden;
background: var(--button-gradient);
background-size: 200% auto;
transition: .5s;
border: none;
border-radius: 5px;
height: 30px;
color: var(--text-color);
cursor: pointer;
padding: 0 20px;
margin-left: 10px;
}
#dateFilterPanel input[type="submit"]:hover {
background-position: right center;
}
#tabelPanel {
height: auto !important;
max-height: 620px;
overflow: auto !important;
background: var(--card-color);
border-radius: 5px
}
#tabelDataGrid {
border: none !important;
width: auto !important;
backdrop-filter: blur(15px);
}
#tabelDataGrid td {
border: none !important;
text-align: center;
}
#tabelDataGrid tr {
/* background: var(--tr-gradient) !important; */
background: none !important;
transition: .5s;
background-size: 200% auto !important;
}
#tabelDataGrid tr:nth-child(even) {
color: var(--text-color) !important;
background-color: var(--zebra-color) !important;
}
#tabelDataGrid tr[style="color:Coral;background-color:#CCFFCC;"] {
color: var(--text-color-inverted) !important;
background-image: var(--selected-vacation-day) !important;
}
#tabelDataGrid tr[style="color:Coral;background-color:White;"] {
color: var(--text-color-inverted) !important;
background-image: var(--vacation-day) !important;
}
#tabelDataGrid tr[style="color:Blue;background-color:#CCFFCC;"]{
color: var(--text-color) !important;
background-image: var(--selected-day) !important;
}
#tabelDataGrid tr[style="color:Blue;background-color:White;"] {
color: var(--text-color) !important;
background-image: var(--current-day) !important;
}
#tabelDataGrid tr[style="background-color:#CCFFCC;"] {
color: var(--text-color) !important;
background-image: var(--selected-day) !important;
}
#tabelDataGrid td[style="background-color:#ECE9D8;width:20px;"] {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><title>calendar-range-outline</title><path fill='white' d='M7 11H9V13H7V11M21 5V19C21 20.11 20.11 21 19 21H5C3.89 21 3 20.1 3 19V5C3 3.9 3.9 3 5 3H6V1H8V3H16V1H18V3H19C20.11 3 21 3.9 21 5M5 7H19V5H5V7M19 19V9H5V19H19M15 13H17V11H15V13M11 13H13V11H11V13Z' /></svg>") !important;
background-repeat: no-repeat !important;
background-size: contain !important;
opacity: 0.2;
transition: .5s;
}
#tabelDataGrid td[style="background-color:#ECE9D8;width:20px;"]:hover {
opacity: 1
}
#tabelDataGrid input {
opacity: 0;
}
#eventsPanel {
background: var(--card-color);
backdrop-filter: blur(15px);
width: auto !important;
height: 100% !important;
overflow: auto !important;
border: none;
border-radius: 5px;
margin-top: 5px;
padding: 10px 0;
}
#tableEventsHeaderLabel {
padding: 5px;
}
#EventsGridView {
border: none !important;
background: none !important;
width: 100% !important;
}
#EventsGridView tr {
border: none !important;
}
#EventsGridView tr:nth-child(even) {
background-color: var(--zebra-color) !important;
}
#EventsGridView th {
padding: 5px !important;
}
#EventsGridView td {
padding: 5px !important;
background: none !important;
}
#SupposedWorktimePanel {
position: relative;
top: -55px;
background: var(--card-color);
backdrop-filter: blur(15px);
width: 355px !import...