Skip to content

Instantly share code, notes, and snippets.

@fschutt

fschutt/minixcel.xml Secret

Created July 22, 2021 17:33
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save fschutt/8c8a139a772031bed2c4d5d62668c234 to your computer and use it in GitHub Desktop.
Save fschutt/8c8a139a772031bed2c4d5d62668c234 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
minixcel.xml
<html>
<head>
<style>
/* RIBBON HEADER */
.__azul_native-ribbon-tabs {
display: flex;
flex-direction: row;
}
.__azul_native-ribbon-tabs p {
font-family: sans-serif;
color: #656565;
font-size: 12px;
text-align: center;
padding: 5px 14px;
align-items: center;
border: 1px solid transparent;
border-bottom: 1px solid #D5D5D5;
}
.__azul_native-ribbon-tabs div.between-tabs {
border-bottom: 1px solid #D5D5D5;
width: 3px;
}
.__azul_native-ribbon-tabs div.after-tabs {
border-bottom: 1px solid #D5D5D5;
flex-grow: 1;
}
.__azul_native-ribbon-tabs p.home {
background: #217245;
color: white;
padding: 2px 19px;
border: 1px solid #217245;
}
.__azul_native-ribbon-tabs p.active {
color: #217245;
border-bottom: none;
border: 1px solid #D5D5D5;
}
/* RIBBON */
.__azul_native-ribbon-body {
height: 90px;
display: flex;
flex-direction: row;
border-bottom: 1px solid #D5D5D5;
font-family: sans-serif;
padding: 2px;
font-size: 12px;
}
.__azul_native-ribbon-section {
padding: 0px 2px;
border-right: 1px solid #E1E1E1;
}
.__azul_native-ribbon-section-content {
flex-grow: 1;
}
.__azul_native-ribbon-section-name {
font-size: 11px;
color: #444444;
text-align: center;
}
/* RIBBON BUTTONS*/
.__azul_native-ribbon-action-vertical-large {
flex-direction: column;
padding: 4px;
display: flex;
}
.__azul_native-ribbon-action-vertical-large .icon-wrapper {
flex-direction: row;
align-items: center;
justify-content: center;
align-content: center;
}
.__azul_native-ribbon-action-vertical-large .icon-wrapper .icon {
height: 32px;
width: 32px;
background: lightblue;
}
.__azul_native-ribbon-action-vertical-large p {
padding: 2px 0px;
text-align: center;
align-items: center;
}
.__azul_native-ribbon-action-vertical-large .dropdown {
flex-direction: row;
align-items: center;
justify-content: center;
align-content: center;
}
.__azul_native-ribbon-action-vertical-large .dropdown .icon {
height: 5px;
width: 5px;
background: salmon;
}
/* PRELIMIARY*/
.__azul_native-ribbon-section.1 { width: 135px; }
.__azul_native-ribbon-section.2 { width: 210px; }
.__azul_native-ribbon-section.3 { width: 265px; }
.__azul_native-ribbon-section.4 { width: 140px; }
.__azul_native-ribbon-section.5 { width: 180px; }
.__azul_native-ribbon-section.6 { width: 135px; }
.__azul_native-ribbon-section.7 { width: 185px; }
/* FORMULA CONTAINER */
.minixel-formula-container {
padding: 10px 3px;
flex-direction: row;
}
.minixel-formula-container .formula-dropdown {
width: 100px;
background: white;
color: #222222;
border: 1px solid #ABABAB;
font-family: sans-serif;
justify-content: center;
font-size: 13px;
padding: 3px 6px;
margin-right: 30px;
}
.minixel-formula-container .formula-commit {
border: 1px solid #ABABAB;
flex-direction: row;
width: 110px;
margin-right: 3px;
}
.minixel-formula-container .formula-commit .btn-1 {
flex-grow: 1;
background: salmon;
}
.minixel-formula-container .formula-commit .btn-2 {
flex-grow: 1;
background: aliceblue;
}
.minixel-formula-container .formula-commit .btn-3 {
flex-grow: 1;
width: 30px;
background: antiquewhite;
}
.minixel-formula-container .formula-entry {
border: 1px solid #ABABAB;
flex-grow: 1;
flex-direction: row;
margin-right: 3px;
}
.minixel-formula-container .formula-entry .formula-text {
flex-grow: 1;
background: white;
font-family: sans-serif;
font-size: 13px;
justify-content: center;
padding: 0px 10px;
}
.minixel-formula-container .formula-entry .dropdown-sm {
width: 10px;
background: aliceblue;
}
/* TABLE */
.minixel-table-container {
flex-grow: 1;
background: white;
}
.minixel-table-container .header-row {
height: 20px;
flex-direction: row;
}
.minixel-table-container .header-row .select-all {
width: 25px;
border-right: 1px solid #ABABAB;
border-bottom: 1px solid #ABABAB;
}
.minixel-table-container .header-row p {
font-family: sans-serif;
font-size: 14px;
width: 65px;
border-right: 1px solid #E5E5E5;
border-bottom: 1px solid #ABABAB;
text-align: center;
justify-content: center;
}
.minixel-table-container .column-wrapper .line-numbers {
width: 25px;
border-right: 1px solid #ABABAB;
font-size: 14px;
font-family: sans-serif;
}
.minixel-table-container .column-wrapper .line-numbers p {
font-size: 13px;
text-align: center;
align-items: center;
border-bottom: 1px solid #E5E5E5;
font-family: sans-serif;
padding-top: 1.25px;
padding-bottom: 1.25px;
}
</style>
</head>
<body>
<div class="__azul_native-ribbon-container">
<div class="__azul_native-ribbon-tabs">
<p class="home">FILE</p>
<div class="between-tabs"></div>
<p class="active">HOME</p>
<p>INSERT</p>
<p>PAGE LAYOUT</p>
<p>FORMULAS</p>
<p>DATA</p>
<p>REVIEW</p>
<p>VIEW</p>
<p>ADD-INS</p>
<div class="after-tabs"></div>
</div>
<div class="__azul_native-ribbon-body">
<div class="__azul_native-ribbon-section 1">
<div class="__azul_native-ribbon-section-content">
<div class="__azul_native-ribbon-action-vertical-large">
<div class="icon-wrapper">
<div class="icon"></div>
</div>
<p>Paste</p>
<div class="dropdown">
<div class="icon"></div>
</div>
</div>
</div>
<p class="__azul_native-ribbon-section-name">Clipboard</p>
</div>
<div class="__azul_native-ribbon-section 2">
<div class="__azul_native-ribbon-section-content">
<p></p>
</div>
<p class="__azul_native-ribbon-section-name">Font</p>
</div>
<div class="__azul_native-ribbon-section 3">
<div class="__azul_native-ribbon-section-content">
<p></p>
</div>
<p class="__azul_native-ribbon-section-name">Alignment</p>
</div>
<div class="__azul_native-ribbon-section 4">
<div class="__azul_native-ribbon-section-content">
<p></p>
</div>
<p class="__azul_native-ribbon-section-name">Number</p>
</div>
<div class="__azul_native-ribbon-section 5">
<div class="__azul_native-ribbon-section-content">
<p></p>
</div>
<p class="__azul_native-ribbon-section-name">Styles</p>
</div>
<div class="__azul_native-ribbon-section 6">
<div class="__azul_native-ribbon-section-content">
<p></p>
</div>
<p class="__azul_native-ribbon-section-name">Cells</p>
</div>
<div class="__azul_native-ribbon-section 7">
<div class="__azul_native-ribbon-section-content">
<p></p>
</div>
<p class="__azul_native-ribbon-section-name">Editing</p>
</div>
</div>
</div>
<div class="minixel-formula-container">
<div class="formula-dropdown">
<p>SUM</p>
</div>
<div class="formula-commit">
<div class="btn-1"></div>
<div class="btn-2"></div>
<div class="btn-3"></div>
</div>
<div class="formula-entry">
<div class="formula-text"><p>=C3+D3</p></div>
<div class="dropdown-sm"></div>
</div>
</div>
<div class="minixel-table-container">
<div class="header-row">
<div class="select-all"></div>
<p>A</p>
<p>B</p>
<p>C</p>
<p>D</p>
<p>E</p>
<p>F</p>
<p>G</p>
<p>H</p>
<p>I</p>
<p>J</p>
<p>K</p>
<p>L</p>
<p>M</p>
<p>N</p>
<p>O</p>
<p>P</p>
<p>Q</p>
<p>R</p>
<p>S</p>
<p>T</p>
<p>U</p>
</div>
<div class="column-wrapper">
<div class="line-numbers">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment